# react-mui-dynamic-data-table > A dynamic data table component for React that uses Material UI Latest version **1.0.5** (published 2021-08-17) · MIT license · 0 weekly downloads ## Install ```sh npm install react-mui-dynamic-data-table pnpm add react-mui-dynamic-data-table yarn add react-mui-dynamic-data-table bun add react-mui-dynamic-data-table ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.5 | | Published | 2021-08-17 | | First published | 2021-08-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 10 | | Unpacked size | 158.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Alex Trudeau | | Maintainers | trudeaua | | Keywords | react, dynamic, data, table, material, ui | ## Links - npm: https://www.npmjs.com/package/react-mui-dynamic-data-table - Repository: https://github.com/trudeaua/react-mui-dynamic-data-table - Homepage: https://github.com/trudeaua/react-mui-dynamic-data-table.git#readme - Issues: https://github.com/trudeaua/react-mui-dynamic-data-table.git/issues - npm.io page: https://npm.io/package/react-mui-dynamic-data-table ## Dependencies (10) - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [moment](https://npm.io/package/moment.md) ^2.29.1 - [date-fns](https://npm.io/package/date-fns.md) ^2.23.0 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.4.1 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.3.0 - [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^5.0.0-alpha.42 - [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^5.0.0-beta.3 - [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^5.0.0-beta.1 - [react-perfect-scrollbar](https://npm.io/package/react-perfect-scrollbar.md) ^1.5.8 - [use-deep-compare-effect](https://npm.io/package/use-deep-compare-effect.md) ^1.6.1 ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 1.0.5 (latest) — 2021-08-17 - 1.0.4 — 2021-08-17 - 1.0.3 — 2021-08-17 - 1.0.2 — 2021-08-14 - 1.0.1 — 2021-08-14 - 1.0.0 — 2021-08-13 ## README # react-mui-dynamic-data-table [![npm version](https://badge.fury.io/js/react-mui-dynamic-data-table.svg)](https://badge.fury.io/js/react-mui-dynamic-data-table) [![npm](https://img.shields.io/npm/dt/react-mui-dynamic-data-table.svg)](https://npm-stat.com/charts.html?package=react-mui-dynamic-data-table) [![npm](https://img.shields.io/npm/l/react-mui-dynamic-data-table)](https://www.npmjs.com/package/react-mui-dynamic-data-table) A dynamic data table component for React that uses Material UI. ## Features - Sortable columns - Pagination - Searching - Filtering via modal, defined in column definitions - Checkbox inputs (default) - Range inputs for numbers and dates - Dropdown inputs - Row selection (single + multi select) - Row actions and events (click, edit, and open buttons) - Custom rendering, searching, and sorting functions - Allows user defined callbacks for rendering, searching, and sorting table entries - Supports JSON-like objects and React.ReactNode ## Installation You can install this package with either `npm` or `yarn` using either of the following commands ``` npm install react-mui-dynamic-data-table ``` ``` yarn add react-mui-dynamic-data-table ``` ## Usage ### Basic usage ```typescript import { MuiDynamicDataTable } from 'react-mui-dynamic-data-table'; const data = [ { firstName: 'Bob', lastName: 'Smith', age: 24 }, { firstName: 'Alice', lastName: 'Thompson', age: 26 }, ]; export function App() { return ( } ``` ### Searching Enable sorting within `options` to sort columns. ```typescript options={{ search: { enabled: true, placeholder: 'Search items...' } }} ``` ### Column sorting Enable searching within `options` to search within the the table. ```typescript options={{ sort: { enabled: true, by: 'firstName' } }} ``` ### Filtering Enable filtering within `options` to allow filtering, and set `canFilter` on each column definition to enable that column to be filtered. Set the `style` property of the column definition to control to type of component rendered in the filter modal for the column. ```typescript columns={[ { name: 'firstName', title: 'First name', style: 'default', // Checkbox component canFilter: true }, { name: 'lastName', title: 'Last name', style: 'select', // Select/dropdown component canFilter: true }, { name: 'age', title: 'Age', style: 'number', // Number range component canFilter: true }, ]} options={{ filter: { enabled: true, } }} ``` ### Custom rendering You can render an entry as a React Node using `getRenderedEntry` in the column definitions. This should be used in conjunction with `getSearchEntry` when searching is enabled. **Note** `getRenderedEntry` and `getSearchEntry` are especially useful for rendering JSON-like objects. See the [code sandbox](https://codesandbox.io/s/brave-goldwasser-cf6v3?file=/src/App.tsx) for a more complex example. If rendering a JSON-like object, it is recommended to use `getFilterIdentifier`, which acts like React's `key` prop to uniquely identify a table entry. ```typescript columns={[ { name: 'firstName', title: 'First name', style: 'select', getSearchEntry: (firstName) => firstName, getRenderedEntry: (firstName) => {firstName} // Text is red on table and filter modal canFilter: true, }, ]} ``` ### Row events You can customize what happens when a row is clicked by defining a callback for `onRowClick`. ```typescript const handleRowClick = (row) => { console.log(row); } return ( ) ``` ### Row actions You can choose to show action buttons in the table for editing and opening a row. ```typescript const handleEdit = (row) => { console.log(row); } const handleOpen = (row) => { console.log(row); } return ( ) ``` ### Asynchronous data If your data is fetched asynchronously, you can choose to show a loading indicator while the data is being fetched. ```typescript type DataType = {firstName: string, lastName: string, age: number}; const [loading, setLoading] = useState(); const [data, setData] = useState(); useEffect(() => { async function getData() { setLoading(true); const response = await fetchData(); setData(response); setLoading(false); } getData(); }, []) return ( ) ``` ## Code sample and live demo Check out the [code sandbox](https://codesandbox.io/s/brave-goldwasser-cf6v3?file=/src/App.tsx) for a live demo, or clone the example application under `/example`. --- _Source: https://npm.io/package/react-mui-dynamic-data-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._