{"_id":"@continuum-media/mui-datatables","_rev":"2-37cbbb89c544c24a966ceffe32a9629f","name":"@continuum-media/mui-datatables","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@continuum-media/mui-datatables","version":"1.0.0","description":"Datatables for React using Material-UI","main":"dist/index.js","scripts":{"dev":"cross-env NODE_ENV=development webpack-dev-server -d --progress --colors","test":"mocha --require babel-register test/**/*.test.js","docs:dev":"next docs","docs:build":"cross-env NODE_ENV=production next build docs","docs:export":"next export docs -o docs/export","docs:deploy":"npm run docs:build && npm run docs:export && firebase deploy","docs:start":"next start docs","coverage":"cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha --require babel-register test/*.js && nyc report --reporter=html | cat coverage/lcov.info | coveralls","coverage:html":"cross-env NODE_ENV=test nyc check-coverage --lines 55 --reporter=html --reporter=text mocha --require babel-register test/*.js && nyc report --reporter=html","prettier":"find src/ docs/ test/ -type f -name \"*.js\" ! -path \"*/.next/*\" | xargs prettier --write","lint":"eslint src","build":"cross-env NODE_ENV=production npm run prettier && rollup -c","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gregnb/mui-datatables.git"},"keywords":["material-ui","datatables","react"],"author":{"name":"gregnb","email":"gregnb@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/gregnb/mui-datatables/issues"},"homepage":"https://github.com/gregnb/mui-datatables#readme","devDependencies":{"@material-ui/core":"^3.2.0","@material-ui/icons":"^3.0.1","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.0.3","babel-loader":"^7.1.2","babel-plugin-external-helpers":"^6.22.0","babel-plugin-istanbul":"^4.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-remove-prop-types":"^0.4.10","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","chai":"^4.1.2","coveralls":"^3.0.0","cross-env":"^5.1.1","enzyme":"^3.5.0","enzyme-adapter-react-16":"^1.3.0","eslint":"^4.14.0","eslint-loader":"^2.0.0","eslint-plugin-filenames":"^1.2.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.5.1","ignore-styles":"^5.0.1","jsdom":"^11.5.1","jsdom-global":"^3.0.2","mocha":"^4.0.1","mocha-lcov-reporter":"^1.3.0","next":"^5.1.0","nyc":"^11.3.0","prettier":"^1.9.2","prismjs":"^1.13.0","raw-loader":"^0.5.1","react":"^16.2.0","react-dom":"^16.2.0","rollup":"^0.52.0","rollup-plugin-babel":"^3.0.2","rollup-plugin-commonjs":"^8.2.6","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-uglify":"^2.0.1","simulant":"^0.2.2","sinon":"^4.1.3","webpack":"^3.9.1","webpack-dev-server":"^2.9.5"},"peerDependencies":{"@material-ui/core":"^3.2.0","@material-ui/icons":"^3.0.1","react":"^16.0.0","react-dom":"^16.0.0"},"dependencies":{"classnames":"^2.2.5","lodash.clonedeep":"^4.5.0","lodash.get":"^4.4.2","lodash.isequal":"^4.5.0","lodash.memoize":"^4.1.2","lodash.merge":"^4.6.0","prop-types":"^15.6.0","react-to-print":"^2.0.0-alpha.7"},"side-effects":false,"nyc":{"lines":50,"statements":50,"functions":50,"branches":50,"check-coverage":true,"all":true,"include":["src/**/*.js"],"exclude":["test/**/*.test.js"],"sourceMap":false,"instrument":false},"gitHead":"81171307b874c96a4c0d4cd151d0a7c3be88f7a7","_id":"@continuum-media/mui-datatables@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"11.4.0","_npmUser":{"name":"matt-continuum-media","email":"mmccarthy@continuummedia.tv"},"dist":{"integrity":"sha512-fxnwTasApfoz+GLgLl2J0JAReo7VGLKsSbgoMC/4KlGfEF8caQqOhioAc0CLq7snO+/48XdTkl0M56DF5eXkpw==","shasum":"2215c594d3cedf91ba3aced28d3d9d5e07d011d8","tarball":"https://registry.npmjs.org/@continuum-media/mui-datatables/-/mui-datatables-1.0.0.tgz","fileCount":6,"unpackedSize":217433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJco4BYCRA9TVsSAnZWagAARkgP/2HKxZOtLFazNXGjJIBV\nIpyEwSqC7EH+SLPuRNsk+D1hzEpIOuS87E26SgEPA+MyDlAiFs/pfXL+U9Kd\nb5pSfZSV7XTRbShbR55TSN14WENmr7I4osvbribmaw42ubbjPksFzLD9jf8M\n6iXOzcJlFZ76uCzSMcR7CeSzB5kf2BQGKrzsBC7mUb88YqaK/BgJlYZd5Jwd\niVTNf1ojSiaYqwibPOdwfs5qgY/7TqLBifnG6AkoNvZUtpPMLjciodxW+f0h\n0jQ8Wrj5T41Dj2D8beMi0r6lJL6ZNxIcJqrkA7YjrhNbbsWTW4CEtBu5TsMC\nH2J8NCukghmn35sPbPkbABj5FnPyJIeKTrfKsA3QIibDY5oTio5rKVgpAcc+\nh3lfm9IzYOtSHM5crcssf5SnW1Kz5z85hQ8g/MTFMLa9XUgyAyhbcwbU41+F\n2/pzfuM8KXGNSx5K/XTKeWlivCVKIdNE2jJqCs31h1NVq29VUsx19uuPHd6E\naS5M+kKQpx4+TPKksmVAPRS8F+XILN+HRCkE4Id3vJwBmF3B9Sg2O9LiUUte\naNhnzkLTJqF/KgWEhQpV4vwoFVPfXa9gsPV1609dbSIcWScpI7fVgNb1Wk2Q\nom0E8X0idom/99lza3H/rdJdXyhw4ezc4WxjfRmyJG9OO16uvbq7OgKWwBL7\nYB4D\r\n=CLz1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCH0fDUXLM3b82/hvWLwzvljgg51z7qqYnKA4zhxIQvV4CIA9pYfGejRpXd02Vo+lVm0PFhjDTB7mzPNjAJfcyMSi5"}]},"maintainers":[{"name":"matt-continuum-media","email":"mmccarthy@continuummedia.tv"},{"name":"dave-continuum-media","email":"dboyer@continuummedia.tv"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mui-datatables_1.0.0_1554219095310_0.6364161457430271"},"_hasShrinkwrap":false},"1.0.1":{"name":"@continuum-media/mui-datatables","version":"1.0.1","description":"Datatables for React using Material-UI","main":"dist/index.js","scripts":{"dev":"cross-env NODE_ENV=development webpack-dev-server -d --progress --colors","test":"mocha --require babel-register test/**/*.test.js","docs:dev":"next docs","docs:build":"cross-env NODE_ENV=production next build docs","docs:export":"next export docs -o docs/export","docs:deploy":"npm run docs:build && npm run docs:export && firebase deploy","docs:start":"next start docs","coverage":"cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha --require babel-register test/*.js && nyc report --reporter=html | cat coverage/lcov.info | coveralls","coverage:html":"cross-env NODE_ENV=test nyc check-coverage --lines 55 --reporter=html --reporter=text mocha --require babel-register test/*.js && nyc report --reporter=html","prettier":"find src/ docs/ test/ -type f -name \"*.js\" ! -path \"*/.next/*\" | xargs prettier --write","lint":"eslint src","build":"cross-env NODE_ENV=production npm run prettier && rollup -c","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gregnb/mui-datatables.git"},"keywords":["material-ui","datatables","react"],"author":{"name":"gregnb","email":"gregnb@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/gregnb/mui-datatables/issues"},"homepage":"https://github.com/gregnb/mui-datatables#readme","devDependencies":{"@material-ui/core":"^3.2.0","@material-ui/icons":"^3.0.1","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.0.3","babel-loader":"^7.1.2","babel-plugin-external-helpers":"^6.22.0","babel-plugin-istanbul":"^4.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-remove-prop-types":"^0.4.10","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","chai":"^4.1.2","coveralls":"^3.0.0","cross-env":"^5.1.1","enzyme":"^3.5.0","enzyme-adapter-react-16":"^1.3.0","eslint":"^4.14.0","eslint-loader":"^2.0.0","eslint-plugin-filenames":"^1.2.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.5.1","ignore-styles":"^5.0.1","jsdom":"^11.5.1","jsdom-global":"^3.0.2","mocha":"^4.0.1","mocha-lcov-reporter":"^1.3.0","next":"^5.1.0","nyc":"^11.3.0","prettier":"^1.9.2","prismjs":"^1.13.0","raw-loader":"^0.5.1","react":"^16.2.0","react-dom":"^16.2.0","rollup":"^0.52.0","rollup-plugin-babel":"^3.0.2","rollup-plugin-commonjs":"^8.2.6","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-uglify":"^2.0.1","simulant":"^0.2.2","sinon":"^4.1.3","webpack":"^3.9.1","webpack-dev-server":"^2.9.5"},"peerDependencies":{"@material-ui/core":"^3.2.0","@material-ui/icons":"^3.0.1","react":"^16.0.0","react-dom":"^16.0.0"},"dependencies":{"classnames":"^2.2.5","lodash.clonedeep":"^4.5.0","lodash.get":"^4.4.2","lodash.isequal":"^4.5.0","lodash.memoize":"^4.1.2","lodash.merge":"^4.6.0","prop-types":"^15.6.0","react-to-print":"^2.0.0-alpha.7"},"side-effects":false,"nyc":{"lines":50,"statements":50,"functions":50,"branches":50,"check-coverage":true,"all":true,"include":["src/**/*.js"],"exclude":["test/**/*.test.js"],"sourceMap":false,"instrument":false},"gitHead":"50d76100e335b6fa2eb69ff6dc3bda8f196c6042","_id":"@continuum-media/mui-datatables@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"11.4.0","_npmUser":{"name":"matt-continuum-media","email":"mmccarthy@continuummedia.tv"},"dist":{"integrity":"sha512-a590YP05j3F7qw9qGmpeNr0AUwtb/d8X8qpBIKYYDctepakis5orU7qdvj0WbIIOs/BjnnrDSiLKExertuuseQ==","shasum":"877e9d14980b2d85f25948038d4e9809e89eaa0d","tarball":"https://registry.npmjs.org/@continuum-media/mui-datatables/-/mui-datatables-1.0.1.tgz","fileCount":6,"unpackedSize":217397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpMLCCRA9TVsSAnZWagAAqGwP/iuyxY4P+oFWI3sSZvHc\nFUFuGONKjMIm+TRSXXGzAMcKAKGBFVLiSDmYFipN3QHAFO2rtfhqnoqalC6z\n3KwhfPO7SKmuHuTQ46GxEQ8ED/cIRbCb7SjLTmDH0DWiqsZv70sFZZLvms9c\nJKCsjI9/mem8/09Shvml/q1ldJ+VluEDk15kv3oCJEQol03H+8xzcC0B3eVf\nhn7njBig5A1OS06MNFk5DA2KTHeRhm0sChWICutrYJfeOUmgMUv+hO8sd6QG\nLQ0NC98P+QBN7QVr/duBrLwux3V3QGt1t3/OLUh1Ipl8SJj3bERg8c3r+Q0p\nDZD37lzHIhPVBf+7zaoOgBaxbU9UQN6iSESniTMwH0/UmStyREjXbpT9ZGAO\n0fcej9XErqDOE+qjskPvbplc67dRrlYrhpp9ngvxstf67xhggJmKzPXoF/pU\nq5bMBX6XArtoMoPD9A7ZyLTSmCxPZWsa9isc6Z0muvzcD3TYtFddLsGpXIuq\nyhngsA3qaG7OEyDK3qYL1CBIOgEbzsR1VyXtaNWoQXogkLLKQndEgO48ar7Q\nd1Msw9K4NOEvnLyh/mcIEUOrBK6ppkD3cSIsGIOEuJFZ/OsFBtxBUtEyoQLT\nax3FaaORtEDOfx6B1jxLEBfiDXUGG5nq6IE1UzXx4KuX6kGvvReElcDEVljl\nhKA8\r\n=DWsN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd9kp39H/98wKRLX474wa1TQ6trZDGwWvqVxQ28LcQ1gIgQ6Nqm4IKs56qTj3zGZXtgETp8PDLF5H02IjskXljaMg="}]},"maintainers":[{"name":"dave-continuum-media","email":"dboyer@continuummedia.tv"},{"name":"matt-continuum-media","email":"mmccarthy@continuummedia.tv"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mui-datatables_1.0.1_1554301633318_0.08903204462364789"},"_hasShrinkwrap":false}},"time":{"created":"2019-04-02T15:31:35.106Z","1.0.0":"2019-04-02T15:31:35.458Z","modified":"2022-04-05T01:07:48.974Z","1.0.1":"2019-04-03T14:27:13.484Z"},"maintainers":[{"name":"dave-continuum-media","email":"dboyer@continuummedia.tv"},{"name":"matt-continuum-media","email":"mmccarthy@continuummedia.tv"}],"description":"Datatables for React using Material-UI","homepage":"https://github.com/gregnb/mui-datatables#readme","keywords":["material-ui","datatables","react"],"repository":{"type":"git","url":"git+https://github.com/gregnb/mui-datatables.git"},"author":{"name":"gregnb","email":"gregnb@gmail.com"},"bugs":{"url":"https://github.com/gregnb/mui-datatables/issues"},"license":"MIT","readme":"
\n \n
\n\n# MUI-Datatables - Datatables for Material-UI\n\n[![Build Status](https://travis-ci.org/gregnb/mui-datatables.svg?branch=master)](https://travis-ci.org/gregnb/mui-datatables)\n[![Coverage Status](https://coveralls.io/repos/github/gregnb/mui-datatables/badge.svg?branch=master)](https://coveralls.io/github/gregnb/mui-datatables?branch=master)\n[![dependencies Status](https://david-dm.org/gregnb/mui-datatables/status.svg)](https://david-dm.org/gregnb/mui-datatables)\n[![npm version](https://badge.fury.io/js/mui-datatables.svg)](https://badge.fury.io/js/mui-datatables)\n\nMUI-Datatables is a data tables component built on [Material-UI](https://www.material-ui.com). It comes with features like filtering, resizable + view/hide columns, search, export to CSV download, printing, selectable rows, expandable rows, pagination, and sorting. On top of the ability to customize styling on most views, there are two responsive modes \"stacked\" and \"scroll\" for mobile/tablet devices.\n\n
\n\t\n
\n\n## Install\n\n`npm install mui-datatables --save`\n\n## Demo\n\n[![Edit react-to-print](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/wy2rl1nyzl)\n\n## Usage\n\nFor a simple table:\n\n```js\n\nimport MUIDataTable from \"mui-datatables\";\n\nconst columns = [\"Name\", \"Company\", \"City\", \"State\"];\n\nconst data = [\n [\"Joe James\", \"Test Corp\", \"Yonkers\", \"NY\"],\n [\"John Walsh\", \"Test Corp\", \"Hartford\", \"CT\"],\n [\"Bob Herm\", \"Test Corp\", \"Tampa\", \"FL\"],\n [\"James Houston\", \"Test Corp\", \"Dallas\", \"TX\"],\n];\n\nconst options = {\n filterType: 'checkbox',\n};\n\n\n\n```\n\nOr customize columns:\n\n```js\n\nimport MUIDataTable from \"mui-datatables\";\n\nconst columns = [\n {\n name: \"name\",\n label: \"Name\",\n options: {\n filter: true,\n sort: true,\n }\n },\n {\n name: \"company\",\n label: \"Company\",\n options: {\n filter: true,\n sort: false,\n }\n },\n {\n name: \"city\",\n label: \"City\",\n options: {\n filter: true,\n sort: false,\n }\n },\n {\n name: \"state\",\n label: \"State\",\n options: {\n filter: true,\n sort: false,\n }\n },\n];\n\nconst data = [\n { name: \"Joe James\", company: \"Test Corp\", city: \"Yonkers\", state: \"NY\" },\n { name: \"John Walsh\", company: \"Test Corp\", city: \"Hartford\", state: \"CT\" },\n { name: \"Bob Herm\", company: \"Test Corp\", city: \"Tampa\", state: \"FL\" },\n { name: \"James Houston\", company: \"Test Corp\", city: \"Dallas\", state: \"TX\" },\n];\n\nconst options = {\n filterType: 'checkbox',\n};\n\n\n\n```\n\n## API\n\n\n#### <MUIDataTable />\n\nThe component accepts the following props:\n\n|Name|Type|Description\n|:--:|:-----|:-----|\n|**`title`**|array|Title used to caption table\n|**`columns`**|array|Columns used to describe table. Must be either an array of simple strings or objects describing a column\n|**`data`**|array|Data used to describe table. Must be an array containing objects. (Arrays containing just strings or numbers also supported) \n|**`options`**|object|Options used to describe table\n\n#### Options:\n|Name|Type|Default|Description\n|:--:|:-----|:--|:-----|\n|**`page`**|number||User provided starting page for pagination\n|**`count`**|number||User provided override for total number of rows\n|**`serverSide`**|boolean|false|Enable remote data source\n|**`rowsSelected`**|array||User provided selected rows\n|**`filterType `**|string|'dropdown'|Choice of filtering view. Options are \"checkbox\", \"dropdown\", \"multiselect\" or \"textField\"\n|**`textLabels `**|object||User provided labels to localize text\n|**`pagination`**|boolean|true|Enable/disable pagination\n|**`selectableRows`**|boolean|true|Enable/disable row selection\n|**`isRowSelectable`**|function||Enable/disable selection on certain rows with custom function. Returns true if not provided. `function(dataIndex) => bool`\n|**`resizableColumns`**|boolean|false|Enable/disable resizable columns\n|**`expandableRows`**|boolean|false|Enable/disable expandable rows\n|**`renderExpandableRow `**|function||Render expandable row. `function(rowData, rowMeta) => React Component`\n|**`customToolbar`**|function||Render a custom toolbar\n|**`customToolbarSelect`**|function||Render a custom selected rows toolbar. `function(selectedRows, displayData, setSelectedRows) => void`\n|**`customFooter`**|function||Render a custom table footer. `function(count, page, rowsPerPage, changeRowsPerPage, changePage) => string`|` React Component`\n|**`customSort`**|function||Override default sorting with custom function. `function(data: array, colIndex: number, order: string) => array`\n|**`customSearch `**|function||Override default search with custom function. `customSearch(searchQuery: string, currentRow: array, columns: array) => boolean`\n|**`elevation`**|number|4|Shadow depth applied to Paper component\n|**`caseSensitive `**|boolean|false|Enable/disable case sensitivity for search\n|**`responsive`**|string|'stacked'|Enable/disable responsive table views. Options: 'stacked', 'scroll'\n|**`rowsPerPage`**|number|10|Number of rows allowed per page\n|**`rowsPerPageOptions`**|array|[10,15,20]|Options to provide in pagination for number of rows a user can select\n|**`rowHover`**|boolean|true|Enable/disable hover style over rows\n|**`fixedHeader`**|boolean|true|Enable/disable fixed header columns\n|**`sortFilterList`**|boolean|true|Enable/disable alphanumeric sorting of filter lists\n|**`sort`**|boolean|true|Enable/disable sort on all columns\n|**`filter`**|boolean|true|Show/hide filter icon from toolbar\n|**`search`**|boolean|true|Show/hide search icon from toolbar\n|**`print`**|boolean|true|Show/hide print\t icon from toolbar\n|**`download`**|boolean|true|Show/hide download icon from toolbar\n|**`downloadOptions`**|object||Options to change the output of the CSV file. Default options: `{filename: 'tableDownload.csv', separator: ','}`\n|**`viewColumns`**|boolean|true|Show/hide viewColumns icon from toolbar\n|**`onRowsSelect`**|function||Callback function that triggers when row(s) are selected. `function(currentRowsSelected: array, allRowsSelected: array) => void`\n|**`onRowsDelete`**|function||Callback function that triggers when row(s) are deleted. `function(rowsDeleted: array) => void`\n|**`onRowClick`**|function||Callback function that triggers when a row is clicked. `function(rowData: string[], rowMeta: { dataIndex: number, rowIndex: number }) => void`\n|**`onCellClick`**|function||Callback function that triggers when a cell is clicked. `function(colData: any, cellMeta: { colIndex: number, rowIndex: number, dataIndex: number }) => void`\n|**`onChangePage`**|function||Callback function that triggers when a page has changed. `function(currentPage: number) => void`\n|**`onChangeRowsPerPage`**|function||Callback function that triggers when the number of rows per page has changed. `function(numberOfRows: number) => void`\n|**`onSearchChange`**|function||Callback function that triggers when the search text value has changed. `function(searchText: string) => void`\n|**`onSearchOpen`**|function||Callback function that triggers when the searchbox opens. `function() => void`\n|**`onFilterChange`**|function||Callback function that triggers when filters have changed. `function(changedColumn: string, filterList: array) => void`\n|**`onColumnSortChange`**|function||Callback function that triggers when a column has been sorted. `function(changedColumn: string, direction: string) => void`\n|**`onColumnViewChange`**|function||Callback function that triggers when a column view has been changed. `function(changedColumn: string, action: string) => void`\n|**`onTableChange`**|function||Callback function that triggers when table state has changed. `function(action: string, tableState: object) => void`\n|**`setRowProps`**|function||Is called for each row and allows to return custom props for this row based on its data. `function(row: array, dataIndex: number) => object`\n\n## Customize Columns\n\nOn each column object, you have the ability to customize columns to your liking with the 'options' property. Example:\n\n```js\nconst columns = [\n {\n name: \"Name\",\n options: {\n filter: true,\n sort: false\n }\n },\n ...\n];\n```\n\n#### Column:\n|Name|Type|Description\n|:--:|:-----|:-----|\n|**`name`**|string|Name of column (This field is required)\n|**`label`**|string|Column Header Name override\n|**`options`**|object|Options for customizing column\n\n\n#### Column Options:\n|Name|Type|Default|Description\n|:--:|:-----|:--|:-----|\n|**`display`**|string|'true'|Display column in table. `enum('true', 'false', 'excluded')`\n|**`empty`**|boolean|false|This denotes whether the column has data or not (for use with intentionally empty columns)\n|**`filterList`**|array||Filter value list [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/column-filters/index.js)\n|**`filterOptions`**|array||Filter options [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/column-filters/index.js)\n|**`filter`**|boolean|true|Display column in filter list\n|**`sort`**|boolean|true|Enable/disable sorting on column\n|**`searchable`**|boolean|true|Exclude/include column from search results\n|**`sortDirection`**|string||Set default sort order `enum('asc', 'desc')`\n|**`print`**|boolean|true|Display column when printing\n|**`download`**|boolean|true|Display column in CSV download file\n|**`hint`**|string||Display hint icon with string as tooltip on hover.\n|**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(value, tableMeta, updateValue) => string`|\n|**`customBodyRender`**|function||Function that returns a string or React component. Used as display data within all table cells of a given column. `function(value, tableMeta, updateValue) => string`|` React Component` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/component/index.js)\n|**`setCellProps`**|function||Is called for each cell and allows to return custom props for this cell based on its data. `function(cellValue: string, rowIndex: number, columnIndex: number) => object`\n\n`customHeadRender` is called with these arguments:\n\n```js\nfunction(columnMeta: {\n display: enum('true', 'false', 'excluded'),\n filter: bool,\n sort: bool,\n sortDirection: bool,\n}, updateDirection: function)\n```\n\n\n`customBodyRender` is called with these arguments:\n\n```js\nfunction(value: any, tableMeta: {\n rowIndex: number,\n columnIndex: number,\n columnData: array, // Columns Options object\n rowData: array, // Full row data\n tableData: array, Full table data\n tableState: {\n announceText: null|string,\n page: number,\n rowsPerPage: number,\n filterList: array,\n selectedRows: {\n data: array,\n lookup: object,\n },\n showResponsive: boolean,\n searchText: null|string,\n },\n}, updateValue: function)\n```\n\n## Customize Styling\n\nUsing Material-UI theme overrides will allow you to customize styling to your liking. First, determine which component you would want to target and then lookup the override classname. Let's start with a simple example where we will change the background color of a body cell to be red:\n\n```js\nimport React from \"react\";\nimport MUIDataTable from \"mui-datatables\";\nimport { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';\n\nclass BodyCellExample extends React.Component {\n\n getMuiTheme = () => createMuiTheme({\n overrides: {\n MUIDataTableBodyCell: {\n root: {\n backgroundColor: \"#FF0000\"\n }\n }\n }\n })\n\n render() {\n\n return (\n \n \n \n );\n\n }\n}\n\n```\n\n## Remote Data\n\nIf you are looking to work with remote data sets or handle pagination, filtering, and sorting on a remote server you can do that with the following options:\n\n```js\nconst options = {\n serverSide: true,\n onTableChange: (action, tableState) => {\n this.xhrRequest('my.api.com/tableData', result => {\n this.setState({ data: result });\n });\n }\n};\n```\n\nTo see an example **[Click Here](https://github.com/gregnb/mui-datatables/blob/master/examples/serverside-pagination/index.js)**\n\n## Localization\n\nThis package decided that the cost of bringing in another library to perform localizations would be too expensive. Instead the ability to override all text labels (which aren't many) is offered through the options property `textLabels`. The available strings:\n\n```js\nconst options = {\n ...\n textLabels: {\n body: {\n noMatch: \"Sorry, no matching records found\",\n toolTip: \"Sort\",\n },\n pagination: {\n next: \"Next Page\",\n previous: \"Previous Page\",\n rowsPerPage: \"Rows per page:\",\n displayRows: \"of\",\n },\n toolbar: {\n search: \"Search\",\n downloadCsv: \"Download CSV\",\n print: \"Print\",\n viewColumns: \"View Columns\",\n filterTable: \"Filter Table\",\n },\n filter: {\n all: \"All\",\n title: \"FILTERS\",\n reset: \"RESET\",\n },\n viewColumns: {\n title: \"Show Columns\",\n titleAria: \"Show/Hide Table Columns\",\n },\n selectedRows: {\n text: \"row(s) selected\",\n delete: \"Delete\",\n deleteAria: \"Delete Selected Rows\",\n },\n }\n ...\n}\n```\n\n## License\nThe files included in this repository are licensed under the MIT license.\n\n\n## Thanks\n\n[](https://www.browserstack.com/)\n\nThank you to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers.\n","readmeFilename":"README.md"}