{"id":13756505,"url":"https://github.com/DTupalov/react-material-ui-datatable","last_synced_at":"2025-05-10T03:32:06.834Z","repository":{"id":33790127,"uuid":"162408845","full_name":"DTupalov/react-material-ui-datatable","owner":"DTupalov","description":"Material UI Datatable in React way","archived":false,"fork":false,"pushed_at":"2023-01-03T15:40:35.000Z","size":4711,"stargazers_count":24,"open_issues_count":14,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-03T11:02:12.675Z","etag":null,"topics":["datatable","grid","material-ui","react"],"latest_commit_sha":null,"homepage":"https://dtupalov.github.io/react-material-ui-datatable/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DTupalov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-19T08:46:58.000Z","updated_at":"2024-03-02T22:11:04.000Z","dependencies_parsed_at":"2023-01-15T02:34:42.218Z","dependency_job_id":null,"html_url":"https://github.com/DTupalov/react-material-ui-datatable","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTupalov%2Freact-material-ui-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTupalov%2Freact-material-ui-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTupalov%2Freact-material-ui-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTupalov%2Freact-material-ui-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DTupalov","download_url":"https://codeload.github.com/DTupalov/react-material-ui-datatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224911562,"owners_count":17390840,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datatable","grid","material-ui","react"],"created_at":"2024-08-03T11:00:45.789Z","updated_at":"2024-11-16T11:31:47.860Z","avatar_url":"https://github.com/DTupalov.png","language":"JavaScript","funding_links":[],"categories":["Examples"],"sub_categories":[],"readme":"# React MaterialUI Datatable\n[![Build Status](https://travis-ci.org/DTupalov/react-material-ui-datatable.svg?branch=master)](https://travis-ci.org/DTupalov/react-material-ui-datatable) [![npm version](https://badge.fury.io/js/react-material-ui-datatable.svg)](https://badge.fury.io/js/react-material-ui-datatable) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n\n__Fully uncontrolled__ and __client-side datatable__ based on __material design__. Designed with React philosophy. Just set your data and receive common manipulations on it: filtering, sorting, pagination and etc.\n\n:book: See __[Storybook](https://dtupalov.github.io/react-material-ui-datatable/)__ of this component\n\n## :warning: ATTENTION! WIP!\nThis library is under the work. It means, that we can do Breaking Changes during one major alpha version. Please, check the [CHANGELOG](./CHANGELOG.md) before update your current version.\n\n## Install\n       \n    npm install react-material-ui-datatable@2.0.0-alpha.30 --save-exact\n\nor \n\n    yarn add react-material-ui-datatable@2.0.0-alpha.30 --exact\n\n## Demo\n\n[![Edit 9lz52zlylr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9lz52zlylr?module=%2Fsrc%2FDemo.js)\n\n## Usage\n\n```js\nimport { ReactMUIDatatable } from \"react-material-ui-datatable\";\n\nconst columns = [\n  {\n    name: \"firstName\",\n    label: \"First Name\"\n  },\n  {\n    name: \"lastName\",\n    label: \"Last Name\"\n  },\n  {\n    name: \"age\",\n    label: \"Age\"\n  },\n  {\n    name: \"car.make\",\n    label: \"Car make\"\n  }\n];\n\nconst data = [\n  { firstName: \"Kylynn\", lastName: \"Lathey\", age: 19, car: { make: \"BWM\" } },\n  { firstName: \"Cly\", lastName: \"Dukelow\", age: 46,  car: { make: \"Mitsubishi\" } },\n  { firstName: \"Afton\", lastName: \"Chaffer\", age: 34,  car: { make: \"Audi\" } },\n  { firstName: \"Deva\", lastName: \"Cowope\", age: 22 car: { make: \"Reno\" } }\n];\n\n\u003cReactMUIDatatable title={\"Awesome list\"} data={data} columns={columns} /\u003e;\n```\n\nFor more details see __[Storybook](https://dtupalov.github.io/react-material-ui-datatable/)__ of this component\n\n\n## `ReactMUIDatatable`'s API\n\n### Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string | \"\" | Title of your table |\n| columns | Object[] | [] | Options for each column. Detailed description see [here](#column-option) |\n| customCell | Function | | Function that returns a string or React component. Used as display for body cell. `({value: string, column: Object, row: Object}) =\u003e string \\| React.Component`|\n| data | Object[] | [] | Your dataset, that you want to display in the table| \n| page | number | 0 | Current page. Start with 0 |\n| perPage | number | 5 | Quantity of displaying items per page. | \n| perPageOption | number[] | [5, 10, 15] | Per page option. Displayed on the paging panel |\n| selectedData | Object[] | [] | Array of refs of selected data items. For example, `[data[0], data[1]]` will select first and second row. |\n| selectable | boolean | true | Enable selections |\n| filterable | boolean | true | Enable filters in toolbar panel |\n| searchable | boolean | true | Enable search bar in toolbar panel |\n| toolbarSelectActions | Function | [defaultToolbarSelectActions](./src/defaultToolbarSelectActions.js) | Function that returns a string or React component. Used as display actions in Toolbar selection. More details you can read [here](#toolbarSelectActions). You can see example in storybook at section [Props -\u003e toolbarSelectActions](https://dtupalov.github.io/react-material-ui-datatable/?selectedKind=ReactMUIDatatable%2FProps\u0026selectedStory=toolbarSelectActions\u0026full=0\u0026addons=1\u0026stories=1\u0026panelRight=0\u0026addonPanel=storybook%2Fstories%2Fstories-panel) |\n| toolbarActions | Function | | Function that returns a string or React component. Used to display custom actions in toolbar panel. Signature `({data: Object, computedData: Object, displayData: Object}) =\u003e string \\| React.Component` | \n| rowActions | Function | | Function that returns a string or React component. Used to display custom actions in each row. Signature `({row: Object, rowIndex: number}) =\u003e string \\| React.Component`| \n| showSearchBar | boolean | false | Open or close search bar in toolbar panel | \n| searchValue | string | \"\" | The value by which the search is performed | \n| sort | Array | [{ columnName: '', direction: \"ASC\" }] | Set sorting by column name and set direction for sorting. Can be set sort with multiple columns. Direction may be: `ASC` and `DESC` |\n| filterValues | Object | {} | Set filters for columns |\n| onStateChanged | Function | | Handler for state changing. Receives event-like object. Signature ```(event: {name: string, value: string, state: Object}) =\u003e any```, where `name` - changed state, `value` - new value, `state` - current state of datatable component. Notice, that `state` contains only changeable values. It useful to restore state after reloading page, for example|\n| localization | Object | [default localization](#default-value)  | More details you can read [here](#localization) |\n| customNoMatches | Function | | Function that returns a string or React component. Used as display text if was no matches after applying filters. `(localization: string) =\u003e string \\| React.Component` |\n\n\n#### `toolbarSelectActions`\n\n```js\n(data: Object, selectedData: Object[], updateSelectedData: Function, handleDelete: Function) =\u003e string | React.Component\n```\n\n| Argument | Type | Description |\n| - | - | - |\n| data | Object | Current dataset in the table (with applying filters and sort) | \n| selectedData | Object[] | Current selected data (their refs) | \n| updateSelectedData | ( Object[] ) =\u003e any | Function, that apply new selected data | \n| handleDelete | ( Object[] ) =\u003e any | Function, that delete selected data. For example, you can call it, when you got successful response from your api | \n\n#### `localization`\n\n##### Default value\n\n```js\n{\n  toolbar: {\n    searchAction: 'Search',\n    filterAction: 'Filters',\n    closeSearch: 'Close search',\n  },\n  filterLists: {\n    title: 'Filter',\n    allOption: 'All',\n    reset: 'Reset',\n    noMatchesText: 'No matches',\n  },\n  toolbarSelect: {\n    selectedData: count =\u003e `${count} row(s) selected`,\n  },\n  pagination: {\n    rowsPerPage: 'Rows per page',\n    displayedRows: ({ from, to, count }) =\u003e `${from}-${to} of ${count}`,\n  },\n  body: {\n    noMatchesText: 'No matches',\n  },\n}\n```\n\n##### toolbar\n\n| Name | Type | Default | Description\n| - | - | - | - |\n| searchAction | string | 'Search' | Label for search button | \n| filterAction | string | 'Filters' | Label for filters button | \n| closeSearch | string | 'Close search' | Label for close button of search bar | \n\n##### filterLists\n\n| Name | Type | Default | Description\n| - | - | - | - |\n| title | string | 'Filter' | Label for title of filter menu | \n| allOption | string | 'All' | Label for option 'All' of select controls | \n| reset | string | 'Reset' | Label for reset button of filters | \n| noMatchesText | string | 'No matches' | Text if no matches in autocomplete | \n\n##### toolbarSelect\n\n| Name | Type | Default | Description\n| - | - | - | - |\n| selectedData | Function | count =\u003e \\`${count} row(s) selected\\` | Function that receives `count` of selected rows and returns string |\n\n##### pagination\n\n| Name | Type | Default | Description\n| - | - | - | - |\n| rowsPerPage | string | 'Rows per page' | Label for select rows per page | \n| displayedRows | Function | ({ from, to, count }) =\u003e \\`${from}-${to} of ${count}\\` | Function that receives `from`, `to` and `count` of data elements and returns string |\n\n### Column option\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | string | | Name associated to your data\"s object |\n| label | string | | Display column title |\n| sortable | boolean | true | Enable / disable sorting by column |\n| filterable | boolean | true | Enable / disable filtering by column. `false` will exclude column from filter panel|\n| searchable | boolean | true | Including / excluding column from search results |\n\n## `ReactMUIDatatableProvider` with `ReactMUIDatatableRoot` component\n\nIf you have separate screens for editing, creating, detailing items or you have your own screens, and you want to save state of your datatable between pages, you can lift state of the table higher with `ReactMUIDatatableProvider`. It receives all props from description [ReactMUIDatatable's API](#reactmuidatatables-api). To draw table just use `ReactMUIDatableRoot` component. It's already connect to Provider and will receive all props, that was passed into `ReactMUIDatatableProvider`. See example below.\n\n### Example\nSoon here will be link to example. Sorry :(\n\n\n# Alternative\n- [mui-datatables](https://github.com/gregnb/mui-datatables) - multifunctional table based on material ui components\n\n# Thanks\n\n- https://mockaroo.com/ - all stubs was generated by this service","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDTupalov%2Freact-material-ui-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDTupalov%2Freact-material-ui-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDTupalov%2Freact-material-ui-datatable/lists"}