Mdm-table NPM | npm.io

MDM Table Component

The MDM Table is a React component built with TypeScript using Vite. It leverages Ant Design's Table component and includes additional features for enhanced usability.

🚀 Features

Column headers with customizable settings
Row selection with checkboxes
Advanced filtering (Excel-like column header filters)
Column resizing, rearrangement, hiding/unhiding
User-defined custom table configurations
Multi-level tables (up to 3 levels) with API-based lazy loading
Pagination with customizable page sizes (e.g., 20, 50, 100 rows per page)
Conditional cell formatting (text, color-based styling, hyperlinks)
Tooltip for truncated content
Supports Ant Design Theme Customization

📦 Installation

npm install mdm-table

🔗 Linking Locally and Testing

To link the component locally for testing in another project:

npm link

In the target project:

npm link mdm-table

To test the component:

npm run dev // or npm run storybook

Navigate to the local development server to see the component in action.

🎨 Theme Customization

MDM Table supports Ant Design Theme Customization via the theme prop. You can either pass a custom theme configuration or use one of the predefined themes by name.

Using Predefined Themes

Simply pass the theme name to the theme prop:

import { Table } from "mdm-table";

const MyComponent = () => {
  return <Table data={[]} theme="deepForest" />;
};

Available Predefined Themes:

deepForest
defaultDark
defaultLight
earthTones
elegant
espresso
military
militaryDark
nites
refinedDark

Using a Custom Theme

import { Table } from "mdm-table";

const themeConfig = {
  token: {
    colorPrimary: "#1890ff",
    borderRadius: 4,
  },
};

const MyComponent = () => {
  return <Table data={[]} theme={themeConfig} />;
};

📋 Usage

import { Table } from "mdm-table";

const data = [
  { key: 1, name: "Item 1", status: "Active" },
  { key: 2, name: "Item 2", status: "Inactive" },
];

const columns = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Status", dataIndex: "status", key: "status" },
];

const MyComponent = () => {
  return <Table data={data} columns={columns} />;
};

⚙️ Props

Prop Name	Type	Required	Description
`dataSource`	`Array<any>`	✅	Data to display in the table
`columns`	`Array<ColumnType<any>>`	✅	Column definitions
`loading`	`boolean`	❌	Shows loading spinner
`error`	`string \| null`	❌	Displays an error message
`themeName`	`string \| ThemeConfig`	❌	Sets the theme for the table
`rowSelection`	`boolean`	❌	Enables row selection
`pagination`	`false \| TablePaginationConfig`	❌	Enables pagination
`expandable`	`boolean`	❌	Enables multi-level expansion
`draggable`	`boolean`	❌	Enables column reordering
`resizable`	`boolean`	❌	Enables column resizing
`size`	`SizeType`	❌	Table size variant
`footer`	`() => React.ReactNode`	❌	Custom footer
`bordered`	`boolean`	❌	Adds borders to the table
`rowKey`	`string \| (record: any) => string`	❌	Unique key for each row
`onChange`	`(pagination, filters, sorter) => void`	❌	Callback for table changes
`onSelectedRowChange`	`(selectedRowKeys: React.Key[], selectedRows: any[]) => void`	❌	Callback when selected rows change
`hideShowColumns`	`boolean`	❌	Enables column visibility toggling
`handleSearch`	`(selectedKeys: React.Key[], confirm: FilterDropdownProps['confirm'], dataIndex: string) => void`	✅	Handles search in columns
`handleReset`	`(clearFilters: () => void) => void`	✅	Resets column filters
`handleOnFilter`	`(value: any, record: any, dataIndex: any) => void`	✅	Handles custom filter logic
`truncatedContent`	`{ dataIndex: string; handler?: (value: any, record: any, dataIndex: any) => void; }`	❌	Handles content truncation
`cellFormatting`	`{ dataIndex: string; handler: (value: any, record: any, dataIndex: any) => void; }`	❌	Applies custom formatting to table cells
`configuration`	`{ scroll: any }`	❌	Custom scroll configuration

✅ Best Practices

Do:
- Load only necessary data per page
- Cache loaded pages to improve performance
Don't:
- Block users from viewing content while filters are applied