|
| 1 | +# Responsive Data Table Component |
| 2 | + |
| 3 | +This custom React component, `ResponsiveDataTable`, is a wrapper around the Material-UI (MUI) DataTables library (`mui-datatables`). It provides a responsive and customizable table with additional features tailored for specific use cases. Below is an explanation of each component and its functionalities. |
| 4 | + |
| 5 | +## Props |
| 6 | + |
| 7 | +### Column Interface |
| 8 | + |
| 9 | +| Property | Type | Description | |
| 10 | +| -------------------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------- | |
| 11 | +| `name` | `string` | The key representing the column in the data array. | |
| 12 | +| `label` | `string` | The label to be displayed for the column. | |
| 13 | +| `options` | `object` | (Optional) Additional options for customizing the column behavior. | |
| 14 | +| `options.filter` | `boolean` | (Optional) Enable or disable filtering for the column. | |
| 15 | +| `options.sort` | `boolean` | (Optional) Enable or disable sorting for the column. | |
| 16 | +| `options.searchable` | `boolean` | (Optional) Enable or disable searching for the column. | |
| 17 | +| `options.display` | `boolean` | (Optional) Set to `true` if the column should be displayed initially. | |
| 18 | +| `options.sortDescFirst` | `boolean` | (Optional) Set to `true` to sort the column in descending order initially. | |
| 19 | +| `options.customBodyRender` | `(value: string \| number \| boolean \| object) => JSX.Element` | (Optional) Custom function for rendering the column's body. | |
| 20 | + |
| 21 | +### DataTableProps Interface |
| 22 | + |
| 23 | +| Property | Type | Description | |
| 24 | +| ------------------ | -------------------------------------- | ----------------------------------------------------------------------------------------------------------- | |
| 25 | +| `data` | `string[][]` | The data to be displayed in the table. | |
| 26 | +| `columns` | `Column[]` | An array of column definitions. | |
| 27 | +| `options` | `object` | (Optional) Additional options for customizing the MUI DataTable. | |
| 28 | +| `tableCols` | `Column[]` | (Optional) Columns to be displayed in the MUI DataTable. If not provided, all columns will be displayed. | |
| 29 | +| `updateCols` | `(columns: Column[]) => void` | (Optional) Callback function to update column visibility. | |
| 30 | +| `columnVisibility` | `Record<string, boolean> \| undefined` | (Optional) Object representing the visibility status of each column. | |
| 31 | +| `theme` | `object` | (Optional) Theme object for styling the table. | |
| 32 | +| `colViews` | `Record<string, boolean> \| undefined` | (Optional) Object representing the visibility status of each column. This is similar to `columnVisibility`. | |
| 33 | + |
| 34 | +## Customization |
| 35 | + |
| 36 | +### Column Visibility |
| 37 | + |
| 38 | +The `ResponsiveDataTable` component allows for columns to be hidden or shown based on the user's preference. This is done by passing a `columnVisibility` object to the component. The keys of the object should be the column names, and the values should be booleans representing the visibility status of each column. The `updateCols` prop is also required to be passed to the component. This prop is a callback function that will be called whenever the user changes the visibility of a column. The function will be passed an array of column definitions, which can be used to update the `columns` prop of the component. The `ResponsiveDataTable` component will then re-render with the updated columns. |
| 39 | + |
| 40 | +### Custom rendering |
| 41 | + |
| 42 | +Custom rendering for specific columns can be achieved using the `options.customBodyRender` property in the column definition. This is useful for formatting dates or rendering complex data. |
| 43 | + |
| 44 | +### Date formatting |
| 45 | + |
| 46 | +The component includes a formatDate function to format date values consistently. You can customize the date formatting by modifying the formatDate function. |
0 commit comments