{"_id":"@code-based/react-dynamic-data-table","_rev":"6-1e54edeea2bc5ea060d05fcdccf135ab","name":"@code-based/react-dynamic-data-table","dist-tags":{"latest":"9.0.0"},"versions":{"8.0.0":{"name":"@code-based/react-dynamic-data-table","version":"8.0.0","keywords":["react","table","data table","pagination","bulk actions"],"author":{"name":"Jordan Hall","email":"jordan@langleyfoxall.co.uk"},"license":"LGPL-3.0-only","_id":"@code-based/react-dynamic-data-table@8.0.0","homepage":"https://github.com/langleyfoxall/react-dynamic-data-table#readme","bugs":{"url":"https://github.com/langleyfoxall/react-dynamic-data-table/issues"},"dist":{"shasum":"7a021be6a8e8409a90ae2a7dd770531d8a409f1e","tarball":"https://registry.npmjs.org/@code-based/react-dynamic-data-table/-/react-dynamic-data-table-8.0.0.tgz","fileCount":12,"integrity":"sha512-MUOddLPWu592W+YZc+2OoDsDQQBry5iPtN50gQknlwjZB4GycD8nM3w/Uqxu18ivN0CzBI++N5TYxcMX/pakIw==","signatures":[{"sig":"MEUCIQCWix+iOf9RYMVuLimkTAb9un30IW0Q5H3Q7DJ/B2OXrAIgT2TOB4pAvP3xymR09ezsC3ffeNYosI20LrINd1S6PK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119280},"main":"dist/index.js","gitHead":"140987cfddfbe8e2f7c30041e5cbc0f4a5be683a","scripts":{"lint":"eslint \"src/**/*.js\" \"src/**/*.jsx\"","build":"node ./node_modules/@babel/cli/bin/babel src/ --out-dir dist/","lint-fix":"eslint --fix \"src/**/*.js\" \"src/**/*.jsx\"","prepublishOnly":"npm run build"},"_npmUser":{"name":"james-cb","email":"james@codebased.co.uk"},"repository":{"url":"git+https://github.com/langleyfoxall/react-dynamic-data-table.git","type":"git"},"_npmVersion":"10.5.0","description":"Re-usable data table for React with sortable columns, pagination and more.","directories":{},"_nodeVersion":"21.7.3","dependencies":{"axios":"^1.7.2","babel":"^6.23.0","react":"^18.3.1","core-js":"^3.37.1","react-dom":"^18.3.1","classnames":"^2.2.6","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.57.0","globals":"^15.6.0","@babel/cli":"^7.7.0","@eslint/js":"^9.5.0","@babel/core":"^7.7.2","eslint-plugin-n":"^16.6.2","@eslint/eslintrc":"^3.1.0","@babel/preset-env":"^7.11.0","@babel/preset-react":"^7.7.0","eslint-plugin-react":"^7.34.3","eslint-plugin-import":"^2.29.1","eslint-plugin-promise":"^6.2.0","eslint-config-standard":"^17.1.0"},"peerDependencies":{"prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-dynamic-data-table_8.0.0_1719565235859_0.8815722279163185","host":"s3://npm-registry-packages"}},"8.0.1":{"name":"@code-based/react-dynamic-data-table","version":"8.0.1","keywords":["react","table","data table","pagination","bulk actions"],"author":{"name":"Jordan Hall","email":"jordan@langleyfoxall.co.uk"},"license":"LGPL-3.0-only","_id":"@code-based/react-dynamic-data-table@8.0.1","homepage":"https://github.com/langleyfoxall/react-dynamic-data-table#readme","bugs":{"url":"https://github.com/langleyfoxall/react-dynamic-data-table/issues"},"dist":{"shasum":"beffa97efc2b924c19b7e5491b020c35aed1d78e","tarball":"https://registry.npmjs.org/@code-based/react-dynamic-data-table/-/react-dynamic-data-table-8.0.1.tgz","fileCount":12,"integrity":"sha512-VJ0P2MtqnyhWNcCtsbDGbxIz0L/g8X8HtrvGFPLO4kNepGZxNan9kufP2AtmrHw/BapApP/kGJfmBUazKx3V4A==","signatures":[{"sig":"MEQCIGaijWdmkJGHMRpxnpAY0zQaJk7bmKtkGpi+HyRLKLiiAiBCvshEaZAxeMucwKbwRoAHorKJmXXVHl2LN+QO8Gal4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119280},"main":"dist/index.js","gitHead":"fc8b126bb785113c20f3f5a8de1580d8f2014201","scripts":{"lint":"eslint \"src/**/*.js\" \"src/**/*.jsx\"","build":"node ./node_modules/@babel/cli/bin/babel src/ --out-dir dist/","lint-fix":"eslint --fix \"src/**/*.js\" \"src/**/*.jsx\"","prepublishOnly":"npm run build"},"_npmUser":{"name":"james-cb","email":"james@codebased.co.uk"},"repository":{"url":"git+https://github.com/langleyfoxall/react-dynamic-data-table.git","type":"git"},"_npmVersion":"10.5.0","description":"Re-usable data table for React with sortable columns, pagination and more.","directories":{},"_nodeVersion":"21.7.3","dependencies":{"axios":"^1.7.2","babel":"^6.23.0","react":"^18.3.1","core-js":"^3.37.1","react-dom":"^18.3.1","classnames":"^2.2.6","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.57.0","globals":"^15.6.0","@babel/cli":"^7.7.0","@eslint/js":"^9.5.0","@babel/core":"^7.7.2","eslint-plugin-n":"^16.6.2","@eslint/eslintrc":"^3.1.0","@babel/preset-env":"^7.11.0","@babel/preset-react":"^7.7.0","eslint-plugin-react":"^7.34.3","eslint-plugin-import":"^2.29.1","eslint-plugin-promise":"^6.2.0","eslint-config-standard":"^17.1.0"},"peerDependencies":{"prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-dynamic-data-table_8.0.1_1719565409749_0.23874997425039846","host":"s3://npm-registry-packages"}},"8.1.0":{"name":"@code-based/react-dynamic-data-table","version":"8.1.0","keywords":["react","table","data table","pagination","bulk actions"],"author":{"name":"Jordan Hall","email":"jordan@langleyfoxall.co.uk"},"license":"LGPL-3.0-only","_id":"@code-based/react-dynamic-data-table@8.1.0","maintainers":[{"name":"nickcodebased","email":"nick@codebased.co.uk"},{"name":"warrencb","email":"warren@codebased.co.uk"},{"name":"james-cb","email":"james@codebased.co.uk"}],"homepage":"https://github.com/langleyfoxall/react-dynamic-data-table#readme","bugs":{"url":"https://github.com/langleyfoxall/react-dynamic-data-table/issues"},"dist":{"shasum":"399361e01215a90aa7b68c435b0f43f377d4cf31","tarball":"https://registry.npmjs.org/@code-based/react-dynamic-data-table/-/react-dynamic-data-table-8.1.0.tgz","fileCount":12,"integrity":"sha512-YocF1VTw2c5/5knBf+9n4+TDiP0p2adX4p8gp0DtDTL6ZPzjQIRp7b/YrrLb6JSaJQSAKQPwYp3cJDhLe9GYdQ==","signatures":[{"sig":"MEUCIQCfHE/9wTfGwUnZTtRdFZRfcFkpLOz6rmH1qin3pGDC8gIgLTZtaq1ZpQ22oRclspFeXfkUf2egxTGi7Vf0XgT6irc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119606},"main":"dist/index.js","gitHead":"1d10953f2ce8e61aec737c769d6d9683f250bbe3","scripts":{"lint":"eslint \"src/**/*.js\" \"src/**/*.jsx\"","build":"node ./node_modules/@babel/cli/bin/babel src/ --out-dir dist/","lint-fix":"eslint --fix \"src/**/*.js\" \"src/**/*.jsx\"","prepublishOnly":"npm run build"},"_npmUser":{"name":"james-cb","email":"james@codebased.co.uk"},"repository":{"url":"git+https://github.com/langleyfoxall/react-dynamic-data-table.git","type":"git"},"_npmVersion":"10.5.0","description":"Re-usable data table for React with sortable columns, pagination and more.","directories":{},"_nodeVersion":"21.7.3","dependencies":{"axios":"^1.7.2","babel":"^6.23.0","react":"^18.3.1","core-js":"^3.37.1","react-dom":"^18.3.1","classnames":"^2.2.6","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.57.0","globals":"^15.6.0","@babel/cli":"^7.7.0","@eslint/js":"^9.5.0","@babel/core":"^7.7.2","eslint-plugin-n":"^16.6.2","@eslint/eslintrc":"^3.1.0","@babel/preset-env":"^7.11.0","@babel/preset-react":"^7.7.0","eslint-plugin-react":"^7.34.3","eslint-plugin-import":"^2.29.1","eslint-plugin-promise":"^6.2.0","eslint-config-standard":"^17.1.0"},"peerDependencies":{"prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-dynamic-data-table_8.1.0_1722514785092_0.3365831527500456","host":"s3://npm-registry-packages"}},"8.1.1":{"name":"@code-based/react-dynamic-data-table","version":"8.1.1","keywords":["react","table","data table","pagination","bulk actions"],"author":{"name":"Jordan Hall","email":"jordan@langleyfoxall.co.uk"},"license":"LGPL-3.0-only","_id":"@code-based/react-dynamic-data-table@8.1.1","maintainers":[{"name":"nickcodebased","email":"nick@codebased.co.uk"},{"name":"warrencb","email":"warren@codebased.co.uk"},{"name":"james-cb","email":"james@codebased.co.uk"}],"homepage":"https://github.com/langleyfoxall/react-dynamic-data-table#readme","bugs":{"url":"https://github.com/langleyfoxall/react-dynamic-data-table/issues"},"dist":{"shasum":"9213126ff8581344cd9aa3ba293138410e08587b","tarball":"https://registry.npmjs.org/@code-based/react-dynamic-data-table/-/react-dynamic-data-table-8.1.1.tgz","fileCount":12,"integrity":"sha512-4ZMXSdkZowwKgJqHqPrTHO7Dk3CxVuWSbRmYydvJ01f14KWKFCFPXm6q+MkbIIb2uDK7bq1m9EiEurAUeYxuVw==","signatures":[{"sig":"MEYCIQD0uN9OIN0Hp7NxLXBaU56uPbNYtY8Bz1Xhnwwgv8r+WgIhALTBJXqeDzwMDmnkUtWaZNFk06HY9KCA8QKf88WbqnjI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121525},"main":"dist/index.js","gitHead":"da30b053d653b16ca16bd93dca790d29c459de09","scripts":{"lint":"eslint \"src/**/*.js\" \"src/**/*.jsx\"","build":"node ./node_modules/@babel/cli/bin/babel src/ --out-dir dist/","lint-fix":"eslint --fix \"src/**/*.js\" \"src/**/*.jsx\"","prepublishOnly":"npm run build"},"_npmUser":{"name":"james-cb","email":"james@codebased.co.uk"},"repository":{"url":"git+https://github.com/langleyfoxall/react-dynamic-data-table.git","type":"git"},"_npmVersion":"10.5.0","description":"Re-usable data table for React with sortable columns, pagination and more.","directories":{},"_nodeVersion":"21.7.3","dependencies":{"axios":"^1.7.2","babel":"^6.23.0","react":"^18.3.1","core-js":"^3.37.1","react-dom":"^18.3.1","classnames":"^2.2.6","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.57.0","globals":"^15.6.0","@babel/cli":"^7.7.0","@eslint/js":"^9.5.0","@babel/core":"^7.7.2","eslint-plugin-n":"^16.6.2","@eslint/eslintrc":"^3.1.0","@babel/preset-env":"^7.25.3","@babel/preset-react":"^7.24.7","eslint-plugin-react":"^7.34.3","eslint-plugin-import":"^2.29.1","eslint-plugin-promise":"^6.2.0","eslint-config-standard":"^17.1.0"},"peerDependencies":{"prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-dynamic-data-table_8.1.1_1722517331153_0.6148680274732559","host":"s3://npm-registry-packages"}},"8.1.2":{"name":"@code-based/react-dynamic-data-table","version":"8.1.2","keywords":["react","table","data table","pagination","bulk actions"],"author":{"name":"Jordan Hall","email":"jordan@langleyfoxall.co.uk"},"license":"LGPL-3.0-only","_id":"@code-based/react-dynamic-data-table@8.1.2","maintainers":[{"name":"nickcodebased","email":"nick@codebased.co.uk"},{"name":"warrencb","email":"warren@codebased.co.uk"},{"name":"james-cb","email":"james@codebased.co.uk"}],"homepage":"https://github.com/langleyfoxall/react-dynamic-data-table#readme","bugs":{"url":"https://github.com/langleyfoxall/react-dynamic-data-table/issues"},"dist":{"shasum":"48b787026d21e45300286b52cddd5bd25df74648","tarball":"https://registry.npmjs.org/@code-based/react-dynamic-data-table/-/react-dynamic-data-table-8.1.2.tgz","fileCount":12,"integrity":"sha512-jBDOlPp86hVm+WrP3GvMxXOHESfg2av8hCRHbWKITcV+FaRxxeVZ0+CF4+O1yQcdKB7D1ro5iD+Tug23rFRRKA==","signatures":[{"sig":"MEQCIGGYp5S6MIbNGO0HbcAvJuU5VsAZuEUU6lvYN0NuvJiVAiBTo/1W9tcMlYDfrazHN4h2wt/8Zh5JMm1Vu/2GtAxl3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121532},"main":"dist/index.js","gitHead":"e8da8636790c253b41959db13b6b8b1818391c72","scripts":{"lint":"eslint \"src/**/*.js\" \"src/**/*.jsx\"","build":"node ./node_modules/@babel/cli/bin/babel src/ --out-dir dist/","lint-fix":"eslint --fix \"src/**/*.js\" \"src/**/*.jsx\"","prepublishOnly":"npm run build"},"_npmUser":{"name":"james-cb","email":"james@codebased.co.uk"},"repository":{"url":"git+https://github.com/langleyfoxall/react-dynamic-data-table.git","type":"git"},"_npmVersion":"10.5.0","description":"Re-usable data table for React with sortable columns, pagination and more.","directories":{},"_nodeVersion":"21.7.3","dependencies":{"axios":"^1.7.2","babel":"^6.23.0","react":"^18.3.1","core-js":"^3.37.1","react-dom":"^18.3.1","classnames":"^2.2.6","prop-types":"^15.6.2"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.57.0","globals":"^15.6.0","@babel/cli":"^7.7.0","@eslint/js":"^9.5.0","@babel/core":"^7.7.2","eslint-plugin-n":"^16.6.2","@eslint/eslintrc":"^3.1.0","@babel/preset-env":"^7.25.3","@babel/preset-react":"^7.24.7","eslint-plugin-react":"^7.34.3","eslint-plugin-import":"^2.29.1","eslint-plugin-promise":"^6.2.0","eslint-config-standard":"^17.1.0"},"peerDependencies":{"prop-types":"^15.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-dynamic-data-table_8.1.2_1722517627402_0.027345427376896048","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@code-based/react-dynamic-data-table","version":"9.0.0","description":"Re-usable data table for React with sortable columns, pagination and more.","keywords":["react","table","data table","pagination","bulk actions"],"main":"dist/index.js","scripts":{"lint":"eslint \"src/**/*.js\" \"src/**/*.jsx\"","lint-fix":"eslint --fix \"src/**/*.js\" \"src/**/*.jsx\"","build":"node ./node_modules/@babel/cli/bin/babel src/ --out-dir dist/","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/langleyfoxall/react-dynamic-data-table.git"},"author":{"name":"Jordan Hall","email":"jordan@langleyfoxall.co.uk"},"license":"LGPL-3.0-only","bugs":{"url":"https://github.com/langleyfoxall/react-dynamic-data-table/issues"},"peerDependencies":{"prop-types":"^15.6.2"},"homepage":"https://github.com/langleyfoxall/react-dynamic-data-table#readme","devDependencies":{"@babel/cli":"^7.7.0","@babel/core":"^7.7.2","@babel/preset-env":"^7.25.3","@babel/preset-react":"^7.24.7","@eslint/eslintrc":"^3.1.0","@eslint/js":"^9.5.0","eslint":"^8.57.0","eslint-config-standard":"^17.1.0","eslint-plugin-import":"^2.29.1","eslint-plugin-n":"^16.6.2","eslint-plugin-promise":"^6.2.0","eslint-plugin-react":"^7.34.3","globals":"^15.6.0"},"dependencies":{"axios":"^1.7.2","babel":"^6.23.0","classnames":"^2.2.6","core-js":"^3.37.1","prop-types":"^15.6.2","react":"^19.0.0","react-dom":"^19.0.0"},"_id":"@code-based/react-dynamic-data-table@9.0.0","gitHead":"343958a81ed5dcfd9e6929cecac07e845f03493e","_nodeVersion":"21.7.3","_npmVersion":"10.5.0","dist":{"integrity":"sha512-y+ZzmLccWYEynWj1YAhJRA7JAl4IAokBdYZFXG0qSJpXfkGLzdKbBnClcylI8IO8OqCSwwjractLSLLfNr7eOA==","shasum":"6aef8c92ce981e4cc4719e7574bc12478b22efb4","tarball":"https://registry.npmjs.org/@code-based/react-dynamic-data-table/-/react-dynamic-data-table-9.0.0.tgz","fileCount":12,"unpackedSize":121532,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICs3tnEJ8aNINjimE/6RzEvCFx/OCn5PqGV2s20VXM4FAiBu/1mNBRb4VQkmqiUINAWKZWCV8oFSBsD/++CgRZyWBQ=="}]},"_npmUser":{"name":"james-cb","email":"james@codebased.co.uk"},"directories":{},"maintainers":[{"name":"warrencb","email":"warren@codebased.co.uk"},{"name":"james-cb","email":"james@codebased.co.uk"},{"name":"nickcodebased","email":"nick@codebased.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-dynamic-data-table_9.0.0_1740493074517_0.5851499781787162"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-28T09:00:35.718Z","modified":"2025-02-25T14:17:54.961Z","8.0.0":"2024-06-28T09:00:35.994Z","8.0.1":"2024-06-28T09:03:29.881Z","8.1.0":"2024-08-01T12:19:45.284Z","8.1.1":"2024-08-01T13:02:11.341Z","8.1.2":"2024-08-01T13:07:07.581Z","9.0.0":"2025-02-25T14:17:54.738Z"},"bugs":{"url":"https://github.com/langleyfoxall/react-dynamic-data-table/issues"},"author":{"name":"Jordan Hall","email":"jordan@langleyfoxall.co.uk"},"license":"LGPL-3.0-only","homepage":"https://github.com/langleyfoxall/react-dynamic-data-table#readme","keywords":["react","table","data table","pagination","bulk actions"],"repository":{"type":"git","url":"git+https://github.com/langleyfoxall/react-dynamic-data-table.git"},"description":"Re-usable data table for React with sortable columns, pagination and more.","maintainers":[{"name":"warrencb","email":"warren@codebased.co.uk"},{"name":"james-cb","email":"james@codebased.co.uk"},{"name":"nickcodebased","email":"nick@codebased.co.uk"}],"readme":"# React Dynamic Data Table\n\n[![npm version](https://badge.fury.io/js/%40code-based%2Freact-dynamic-data-table.svg)](https://badge.fury.io/js/%40code-based%2Freact-dynamic-data-table)\n[![npm](https://img.shields.io/npm/dt/@code-based/react-dynamic-data-table.svg)](https://npm-stat.com/charts.html?package=%40code-based%2Freact-dynamic-data-table)\n\n\nThis package provides a React Dynamic Data Table component that supports sortable columns,\npagination, field mapping, data manipulation, and more.\n\n## Installation\n\nYou can install this package with either `npm` or `yarn` as shown below.\n\n```bash\nnpm install @code-based/react-dynamic-data-table\n```\n\n```bash\nyarn add @code-based/react-dynamic-data-table\n```\n\nRemember to import the `DynamicDataTable` component where it is needed.\n\n```JSX\nimport DynamicDataTable from \"@code-based/react-dynamic-data-table\";\n```\n\n## Usage\n\nAt its most basic, you can create a new `<DynamicDataTable />` with just the `rows` prop.\n\n```JSX\n<DynamicDataTable rows={this.state.users} />\n```\n\nThe `rows` prop expects an array of objects, such as the following.\n\n```JSX\n[\n  { name: \"Picard\", email: \"picard@enterprise-d.com\"  },\n  { name: \"Kirk\",   email: \"kirk@enterprise-a.com\"    },\n  { name: \"Sisko\",  email: \"sisko@deep-space-9.com\"   }\n]\n```\n\n### Specifying a CSS class for the table\n\nBy default tables are assigned the bootstrap `table` and `table-striped` CSS classes.\nIf you need a different table style, you can override these defaults by providing the\n`className` prop:\n\n```JSX\n<DynamicDataTable\n    className=\"table table-sm\"\n    />\n```\n\n### Excluding fields\n\nBy default, React Dynamic Data Table will render a table containing all fields present\nin the `rows` prop. To exclude specific fields, you can use the `fieldsToExclude` props.\n\nIn the example below, the `email` field will be excluded.\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    fieldsToExclude={['email']}\n    />\n```\n\nIn the example below, all ID fields will be excluded.\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    fieldsToExclude={[/_?id/]}\n    />\n```\n\nThe `fieldsToExclude` prop expects an array of strings or regex expressions that represent the fields to exclude.\n\n### Mapping fields\n\nBy default, React Dynamic Data Table creates table headers based on the field name,\nwith underscores replaced with spaces and each word's first letter converted to uppercase.\nYou can override this behaviour with a field map.\n\nIn the example below, you can render the `email` field as 'Email Address'.\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    fieldMap={{ email: 'Email address' }}\n    />\n```\n\nThe `fieldMap` prop expects an object which maps the `rows` keys to alternative field names.\n\n\n### Ordering data\n\nThe React Dynamic Data Table will display the `rows` in the order they are provided\nin the array. However, it is possible to show, in the column header, that the data\nhas been sorted.\n\nIn the example below, the name column header will show a down arrow indicating\nthat the data has been sorted by name (ascending).\n\n```JSX\n// this.state.orderByField = 'name';\n// this.state.orderByDirection = 'asc';\n\n<DynamicDataTable\n    rows={this.state.users}\n    orderByField={this.state.orderByField}\n    orderByDirection={this.state.orderByDirection}\n    />\n```\n\nThe `orderByField` prop expects a string indicating the field to sort by (one of the\nkeys from the `rows` object).\n\nThe `orderByDirection` expects either `asc` or `desc`, meaning ascending or descending\nrespectively.\n\nIf you wish to let the end-user sort the data table by clicking on the column\nheadings, you can use the `changeOrder` prop. This is shown in the example below.\n\n```JSX\n// this.state.orderByField = 'name';\n// this.state.orderByDirection = 'asc';\n\n<DynamicDataTable\n    rows={this.state.users}\n    orderByField={this.state.orderByField}\n    orderByDirection={this.state.orderByDirection}\n    changeOrder={(field, direction) => this.changeOrder(field, direction)}\n    />\n```\n\n```JSX\nchangeOrder(field, direction) {\n    this.setState({ orderByField: field, orderByDirection: direction }, () => {\n        const users = /* Get sorted data from API endpoint */\n        this.setState({ users: users });\n    });\n}\n```\n\nThe `changeOrder` prop expects a callable. This callable should:\n\n1. Change the `orderByField` and `orderByDirection` props, based on the passed `field`\nand `direction` parameters respectively.\n2. Change / re-retrieve the `rows` prop, such that it is sorted based on the passed\n`field` and `direction` parameters.\n\nOrdering data is enabled for all fields by default. However, if you wish to restrict\nwhich fields the ordering is enabled for, pass an array of the field names into the\n`allowOrderingBy` prop. An example of this is shown below.\n\n```JSX\n<AjaxDynamicDataTable\n    rows={this.state.users}\n    allowOrderingBy={[\n        'name', 'email'\n    ]}\n/>\n```\n\nTo have the opposite effect simply use `disallowOrderingBy`:\n\n```JSX\n<AjaxDynamicDataTable\n    rows={this.state.users}\n    disallowOrderingBy={[\n        'dob'\n    ]}\n/>\n```\n\nTypically, the `allowOrderingBy` and `disallowdOrderingBy` props should not be used simultaneously, as this could cause unexpected behaviour.\n\n### Ordering fields\n\nBy default fields will be ordered as they are passed into the table on each row.\nTo force a specific ordering of columns an array of strings or regex can be passed\nwith the `fieldOrder` prop. Anything that is not included within `fieldOrder` will\nbe pushed to the end of the ordered fields.\n\n```JSX\n<DynamicDataTable\n    rows={[\n        { id: 1, email: 'info@codebased.co.uk', name: 'Codebased' }\n    ]}\n    fieldOrder={[\n        'id', 'name'\n    ]}\n/>\n\n// Output: id, name, email\n```\n\nMixing strings and regex is also supported.\n\n```JSX\n<DynamicDataTable\n    rows={[\n        { id: 1, email: 'info@codebased.co.uk', first_name: 'Code', last_name: 'Based' }\n    ]}\n    fieldOrder={[\n        'id', /_name/\n    ]}\n/>\n\n// Output: id, first_name, last_name, email\n```\n\n### Column Widths\n\nIn some cases there may be a need to make some columns be different widths\nby defining a width, rather than the table changing based off of content.\n\nThe `columnWidths` prop expects an object with column names as the keys and either a string or number as the values.\n\nWhen a number is passed the width will become a percentage. If a string is passed then\nit respects whatever unit is set.\n\n```jsx\n<DynamicDataTable\n    rows={[\n        { id: 1, email: 'info@codebased.co.uk', first_name: 'Code', last_name: 'Foxall' }\n    ]}\n    columnWidths={{\n        // 10%\n        id: 10,\n\n        // 100px\n        email: '100px'\n    }}\n/>\n```\n\n### Custom order by icons\n\nWhen ordering by a field on an element will be rendered next to it. By default\nthese are simple symbols (`↓` and `↑`). These can be changed by passing a valid\nnode into `orderByAscIcon` and `orderByDescIcon`.\n\n```JSX\n<DynamicDataTable\n    orderByAscIcon=\"Ascending\"\n    // orderByAscIcon={<p>Ascending</p>}\n    // orderByAscIcon={<FancyAscendingIcon />}\n/>\n```\n\nYou can optionally specify an icon to appear when a sortable field  is *not* the\ncurrently sorted field using the `orderByIcon` prop:\n\n```JSX\n<DynamicDataTable\n    orderByIcon=\"Sortable\"\n    // orderByAscIcon={<p>Sortable</p>}\n    // orderByAscIcon={<FancySortableIcon />}\n/>\n```\n\nBy default the order by icon will appear following a non-breaking space after\nthe column label. You can instead prepend the icon by specifying the\n`prependOrderByIcon` prop; this is particularly useful if you are using css\n`float` to position the icon as it will not flow under the text:\n\n```JSX\n<DynamicDataTable\n    orderByIcon={<i className=\"mt-1 fad fa-sort float-right\"></i>}\n    orderByAscIcon={<i className=\"mt-1 fad fa-sort-up float-right\"></i>}\n    orderByDescIcon={<i className=\"mt-1 fad fa-sort-down float-right\"></i>}\n    prependOrderByIcon\n/>\n```\n\n### Pagination\n\nMaking pagination work with React Dynamic Data Table requires three extra\nprops. These are the `currentPage`, `totalPages` and `changePage` props. Once\nthese props are set correctly, a Bootstrap style pagination will be displayed\nbelow the table.\n\nThe `currentPage` prop expects an integer representing the current page number\n(one or above).\n\nThe `totalPages` prop expects an integer representing the total number of\npages in the data set (one or above). Pagination will only be shown if the\ntotal number of pages is greater than one.\n\nThe `changePage` props expect a callable with a `page` argument, indicating the\nnew page number to load. This callable should:\n\n1. Load a new page of data into the `rows` prop based on the passed `page`\nargument.\n2. Set the `currentPage` prop to be equal to the passed `page` argument.\n\nA example of this is shown below:\n\n```JSX\n// this.state.currentPage = 1;\n// this.state.totalPages = 5;\n\n<DynamicDataTable\n        rows={this.state.users}\n        currentPage={this.state.currentPage}\n        totalPages={this.state.totalPages}\n        changePage={page => this.changePage(page)}\n    />\n```\n\n```JSX\nchangePage(page) {\n    const users = /* Get page of data from API endpoint */\n    this.setState({ users: users, currentPage: page });\n}\n```\n\nPagination is dynamic, showing only a select subset of the available pages as actual buttons.\nWhether or not an individual button to a page is shown depends on if it is the first or last page (these are always shown), and whether it is within a predefined offset from the current page (a pagination delta).\nThis delta can be changed by passing a `paginationDelta` prop into `DynamicDataTable` as shown below:\n\n```JSX\n<DynamicDataTable\n        rows={this.state.users}\n        currentPage={this.state.currentPage}\n        totalPages={this.state.totalPages}\n        paginationDelta={6}\n    />\n```\n\n### Always showing pagination controls\n\nBy default the pagination controls are only shown if there are two or more pages of data to be displayed. You can override this behaviour by simply passing the `alwaysShowPagination` prop:\n\n```JSX\n<DynamicDataTable\n        alwaysShowPagination\n    />\n```\n\n### Per page limiting\n\nChanging the number of entries displaying in the data table is easy. The `totalRows`, `perPage`, `changePerPage` and `perPageRenderer` allow you to customize a per page limit control.\n\n* `totalRows` the total number of rows within the dataset\n* `perPage` the current per page limit (default: `15`)\n* `changePerPage` handles the logic for changing the `perPage` prop. This recieved a single argument which is the new limit.\n* `perPageOptions` the results per page options (default: `[10, 15, 30, 50, 75, 100]`)\n* `perPageRender` can either be a node or a function.\n\nBy default a Bootstrap styled select is displayed if `changePerPage` is a function.\n\n```jsx\n<DynamicDataTable\n    totalRows={totalRows}\n    perPage={perPage}\n    changePerPage={newPerPage => (\n        this.setState({\n            perPage: newPerPage\n        })\n    )}\n    perPageRenderer={props => (\n        <PerPage {...props} />\n    )}\n/>\n```\n\n#### `perPageRenderer`\n\nThe `perPageRenderer` prop accepts either a node or function. If a valid react element is passed then `React.cloneElement` is used to bind:\n\n* `totalRows`\n* `value` (see `perPage` above)\n* `onChange` (see `changePerPage` above)\n* `perPageOptions`\n\nIf a function is passed then the props described above are passed in an object.\n\n### Row buttons\n\nRow buttons appear on the right hand side of every row in the React Dynamic Data\nTable. By default, a 'View' button is provided, which simply links the user to\nthe current URL with the row's `id` appended.\n\nYou can completely override the row buttons that are displayed by provided a\n`buttons` prop. This prop expects an array of objects, each containing a `name`\nand `callback`.\n\nThe `name` is string, such as 'View', 'Edit', 'Delete', etc.\n\nThe `callback` is a callable with a two arguments. The first is the event object\nfor the button clicked and the second is an object representing the current row.\n\nAn example of setting custom row buttons is shown below.\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    buttons={[\n        {\n            name: 'Edit',\n            callback: (event, user) => {\n                // Show edit user view...\n            }\n        },\n        {\n            name: 'Delete',\n            callback: (event, user) => {\n                // Delete user...\n            }\n        }\n    ]}\n    />\n```\n\n`buttons` can also be given a custom render at the top level, or for multiple array elements.\nIt's worth noting that multiple array elements still respect the dropdown menu.\n\n```jsx\n// Top level example\n<DynamicDataTable\n  buttons={row => (\n    <a>\n      <i className=\"fas fa-fw fa-eye\" />\n      <span>Totally custom button</span>\n    </a>\n  )}\n/>\n\n// Low level example\n<DynamicDataTable\n  buttons={[\n    {\n      render: row => (\n        <a>\n          <i className=\"fas fa-fw fa-eye\" />\n          <span>Totally custom button 1</span>\n        </a>\n      )\n    },\n    {\n      render: row => (\n        <a>\n          <i className=\"fas fa-fw fa-tick\" />\n          <span>Totally custom button 2</span>\n        </a>\n      )\n    }\n  ]}\n/>\n```\n\n### Rendering custom rows\n\nIf you come across a situation where the automatically generated rows are not suitable for your project\nyou can use the `rowRenderer` prop. This prop expects a callable that receives a single argument,\nand returns a valid React element, which should be a `<tr>` element.\n\nThe argument passed to the `rowRenderer` callable is a JavaScript object that contain the following properties.\n\n```JS\n{\n  row,                // Instance of data row\n  onClick,            // Row on click handler\n  onMouseUp,          // Row on MouseUp handler\n  onMouseDown,        // Row on MouseDown handler\n  buttons,            // Array of buttons\n  actions,            // Array of header actions\n  fields,             // Visible fields\n  renderCheckboxes,   // Boolean indicating whether to render checkboxes\n  disableCheckbox,    // Boolean indicating whether to disable the checkbox per row\n  checkboxIsChecked,  // Boolean indicating if checkbox is checked\n  onCheckboxChange,   // Callable that is called when a per row checkbox is changed\n  dataItemManipulator // Callable that handles manipulation of every item in the data row\n}\n```\n\nFor implementation details regarding these properties, see the other relevant areas of the documentation.\n\n### Clickable rows\n\nClickable rows allows an `onClick` prop to be passed. This should be a callable, that will be passed an event object along with\nan instance of the row that is clicked. It also adds the bootstrap `table-hover` class onto the table.\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    onClick={(event, row) => console.warn(event, row.name)}\n/>\n```\n\n#### Mouse Events\n\nFor more complex interactions, such as supporting the ability to Middle-click, you can use the `onMouseUp` and `onMouseDown` events instead. It also adds the bootstrap `table-hover` class onto the table. The `onMouseDown` and `onMouseUp` props should be callables, that will be passed an event object along withan instance of the row that is clicked.\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    onMouseDown={this.handleMouseDown}\n    onMouseUp={this.handleMouseUp}\n/>\n```\n\n#### Context Menus\n\nThe ability to right click rows can be enabled by using `onContextMenu` and `rowRenderer`.\nIn the example we will use our own [`@code-based/react-dynamic-context-menu`](https://github.com/langleyfoxall/react-dynamic-context-menu):\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    rowRenderer={options => (\n        <DynamicContextMenu\n            key={options.key}\n            data={options.row}\n            menuItems={[\n                {\n                    label: 'Update',\n                    onClick: this.handleUpdate,\n                },\n                {\n                    label: 'Delete',\n                    onClick: this.handleDelete,\n                },\n            ]}\n        >\n            {DynamicDataTable.rowRenderer(options)}\n        </DynamicContextMenu>\n    )}\n/>\n```\n\n`DynamicContextMenu` clones the child and adds `onContextMenu` as a prop. This can also be achieved manually.\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    rowRenderer={({ row }) => (\n        <tr onContextMenu={() => this.onContextMenu(row)}>\n            <td/>\n        </tr>\n    )}\n/>\n```\n\n### Hoverable table rows\n\nTo enable a hover effect on rows even if `onClick` is not passed into the table you can use the prop `hoverable`.\nThis will add a background color on each row when hovered.\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    hoverable\n/>\n```\n\n### Render no data component\n\nIf you wish to render something other than the table when no rows are present you can take advantage of\n`noDataComponent` which accepts a valid react element. This will replace the table until there are rows.\n\n```JSX\n<DynamicDataTable\n    row={[]}\n    noDataComponent={(\n        <p>I replace the table, not just the text inside it.</p>\n    )}\n/>\n```\n\n### Bulk select checkboxes\n\nIf you wish to allow users to bulk select users in a React Dynamic Data Table,\nyou can specify the `renderCheckboxes` prop. This will render a series of\ncheckboxes against each row, on the left side of the table.\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    renderCheckboxes\n    />\n```\n\nBulk select checkboxes are usually combined with bulk actions to perform\nactions on one or more rows at once.\n\n### Disable checkboxes\n\nCheckboxes can also be disabled for each individual row by passing in `disabledCheckboxes` which\nshould container an array of identifiers. If an identifier is in the array then the checkbox will have `disabled` set to `true`.\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    renderCheckboxes\n    disabledCheckboxes={[1]}\n    />\n```\n\n### Externally manage checkboxes\n\nCombining `isCheckboxChecked`, `onMasterCheckboxChange` and `onCheckboxChange` allows a row's checkbox state to be managed outside of the datatable while still allowing `disabledCheckboxes` to work as intended.\n\nIn the example below, we are using a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) named `checked` to store the current status of the data table's checkboxes.\n\n```jsx\nconst checked = new Set\n\n<DynamicDataTable\n    isCheckboxChecked={({ id }) => checked.has(id)}\n    onMasterCheckboxChange={(_, rows) => {\n        let all = true\n\n        rows.forEach(({ id }) => checked.has(id) || all = false)\n\n        rows.forEach(({ id }) => {\n            if (all) {\n                checked.delete(id)\n            } else if (!checked.has(id)) {\n                checked.add(id)\n            }\n        })\n    }}\n    onCheckboxChange={(_, { id }) => {\n        if (checked.has(id)) {\n            checked.delete(id)\n        } else {\n            checked.add(id)\n        }\n    }}\n/>\n```\n\n#### `isCheckboxChecked`\n\n`isCheckboxChecked` is called on each re-render of the data table allowing for custom logic to determine if a checkbox is checked. It will receive the current row and the visible rows as arguments.\n\n```jsx\nconst checked = new Set\n\n<DynamicDataTable\n    isCheckboxChecked={({ id }) => checked.has(id)}\n/>\n```\n\n_Note: This should only be used if `onMasterCheckboxChange` and `onCheckboxChange` are implemented._\n\n#### `onMasterCheckboxChange`\n\n`onMasterCheckboxChange` is called when the master checkbox is clicked. This allows for custom logic for selecting and deselecting multiple rows. It will receive an event object from the input and the visible rows.\n\nThe master checkbox refers to the bulk select checkbox found in the top left corner of the data table whenever checkboxes are enabled.\n\n```jsx\nconst checked = new Set\n\n<DynamicDataTable\n    onMasterCheckboxChange={(_, rows) => {\n        let all = true\n\n        rows.forEach(({ id }) => checked.has(id) || all = false)\n\n        rows.forEach(({ id }) => {\n            if (all) {\n                checked.delete(id)\n            } else if (!checked.has(id)) {\n                checked.add(id)\n            }\n        })\n    }}\n/>\n```\n\n#### `renderMasterCheckbox`\n\n`renderMasterCheckbox` will determine if the master checkbox will be rendered\n\nThe master checkbox refers to the bulk select checkbox found in the top left corner of the data table whenever checkboxes are enabled.\n\n```jsx\n<DynamicDataTable\n    renderMasterCheckbox\n/>\n```\n\n#### `onCheckboxChange`\n\n`onCheckboxChange` is called when a row checkbox is clicked. This allows for custom logic for selecting and deselecting a single row. It will receive an event object from the input and the current row.\n\n```jsx\nconst checked = new Set\n\n<DynamicDataTable\n    onCheckboxChange={(_, { id }) => {\n        if (checked.has(id)) {\n            checked.delete(id)\n        } else {\n            checked.add(id)\n        }\n    }}\n/>\n```\n\n### Actions\n\nActions, when combined with bulk select checkboxes allow you perform\nactions of multiple rows at once. When in use, a menu will be rendered\nin the top right of the table allowing your users to choose a bulk action\nthat will be applied to the selected rows.\n\nActions can also be used without bulk select checkboxes. This could allow for creation of action buttons that are not dependant on existing data, such as a 'Create User' button.\n\nTo use actions in your React Dynamic Data Table, you must specify the\n`actions` props. This prop expects an array of objects, each containing a `name`\nand `callback`.\n\nThe `name` is string, such as 'Delete user(s)', 'Duplicate user(s)' etc.\n\nThe `callback` is a callable with a single argument. The argument will\ncontain an array of the selected rows.\n\nExamples of how to use actions is shown below.\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    renderCheckboxes\n    actions={[\n        {\n            name: 'Delete user(s)',\n            callback: (rows) => {\n                // Delete users...\n            },\n        },\n    ]}\n/>\n```\n\n```JSX\n<DynamicDataTable\n    rows={this.state.users}\n    actions={[\n        {\n            name: 'Create user',\n            callback: () => {\n                // Toggle create user modal...\n            },\n        },\n    ]}\n/>\n```\n\n### Data Item Manipulation\n\nIf you wish to alter row data prior to it being rendered, you may use the `dataItemManipulator` prop available on the\n`DynamicDataTable`. This prop expects a `function` which will be passed three parameters, the `field`, the `value` and\nthe `row`.\n\nThis function will be called once for every cell that is to be rendered.\n\n```JSX\n<DynamicDataTable\n    dataItemManipulator={(field, value, row) => {\n        switch(field) {\n            case 'id':\n                return 'ID:' + value;\n            case 'reference':\n                return value.toUpperCase();\n        }\n\n        return value;\n    }}\n/>\n```\n\nIt is also possible to render React components directly, by returning them from this function.\n\n```JSX\n<DynamicDataTable\n    dataItemManipulator={(field, value) => {\n        switch(field) {\n            case 'reference':\n                return <ExampleComponent exampleProp={value} />;\n        }\n\n        return value;\n    }}\n/>\n```\n\nIf you wish, you can dangerously render HTML directly by returning a string from the `dataItemManipulator`, you will\nhowever need to explicitly specify which fields this should be enabled for. This is done by using the\n`dangerouslyRenderFields` prop.\n\n ```JSX\n <DynamicDataTable\n     dangerouslyRenderFields={['check']}\n     dataItemManipulator={(field, value) => {\n         switch(field) {\n             case 'check':\n                 return \"<i class='fa fa-check'></i>\";\n         }\n\n         return value;\n     }}\n />\n ```\n\n### Table footer\n\nTo display extra data at the bottom of the table a function or node can be passed into the React Dynamic Data Table by using the `footer` prop.\n\nThe `footer` is displayed directly in a `tfoot` to allow for multiple rows. So don't forget your `tr`s.\n\n#### Passing a function\n\nWhen passing a function into the `footer` prop it receives an object with:\n* `rows`: All of the visible rows\n* `width`: The number of columns in the table\n\nThis should return a valid React element.\n\n```jsx\n<DynamicDataTable\n    footer={({ rows, width }) => (\n        <tr>\n            <td colSpan={width}>\n                Table footer.\n            <td>\n        </tr>\n    )}\n/>\n```\n\n#### Passing a node\n\nWhen passing a node or valid React element it is simply output.\n\n```jsx\n<DynamicDataTable\n    footer={(\n        <tr>\n            <td>\n                Table footer.\n            </td>\n        </tr>\n    )}\n/>\n```\n\n### Loading message & indicator\n\nBy default, the React Dynamic Data Table will not show indication that it is\nloading. On slow connections, this may make the table appear unresponsive or\nsluggish when initialing loading, changing pages, re-ordering, and so on.\n\nTo show a loading message, you can set the `loading` prop to `true`. This will\ndisplay a default loading message, which can be changed by altering passing\na string into the optional `loadingMessage` prop. If you wish, you can also\npass a React component into the `loadingIndicator` prop, which will be displayed\nabove the textual loading message.\n\n```JSX\n<DynamicDataTable\n    loading={true}\n    loadingMessage=\"User data is now loading...\"\n    loadingIndicator={(\n        <img src=\"/loading-animation.gif\">\n    )}\n/>\n```\n\nAlternatively, if you wish to replace the entire table while data is being loaded,\nyou can pass a React component into the `loadingComponent` prop.\n\n```JSX\n<DynamicDataTable\n    loading={true}\n    loadingComponent={(\n        <p>I replace the table, not just the text inside it.</p>\n    )}\n/>\n```\n\nTo display either of these options `loading` must be set to `true`. Note that the\nAJAX Dynamic Data Table handles the loading prop internally but can be overriden.\n\n### Error message\n\nIn the case that something goes wrong, such as data failing to load, you\ncan display and error message in place of the normal React Dynamic\nData Table output.\n\nIn order to display an error message, you just need to set the optional\n`errorMessage` prop. This prop expects a string such as `An error has occurred\nwhile loading user data.`. If the error is resolved, this prop must be reset\nto an empty string in order to ensure the data table is displayed.\n\n### Editable Columns\n\nIf you wish to make certain columns editable you can specify how using the `editableColumns` prop.\nThis prop accepts an array of object in the following format:\n\n```js\n[\n    {\n        name: 'ExampleColumnText',\n        controlled: false,\n        type: 'text',\n        onChange: (event, column, row, index) => console.log(event, column, row, index),\n    },\n    {\n        name: 'ExampleColumnSelect',\n        controlled: false,\n        type: 'select',\n        onChange: (event, column, row, index) => console.log(event, column, row, index),\n        optionsForRow: (row, column) => [\n            {\n                label: 'One',\n                value: 1\n             },\n            {\n                label: 'Two',\n                value: 2\n            }\n        ]\n}]\n```\n\n#### Text Inputs\n\nIf you specify that the type of the column is `text` the column will contain a text input with a value of the\ncolumn from the row data.\n\n\n#### Selects\n\nIf you wish to use a select instead of a text input you may specify `select` as the type. The column will now contain\na select input, by default with no options. In order to provide options implement the `optionsForRow` method.\nThis method will be called with: `The row data` and `Column name` in that order. It should return an array of objects\nin this format:\n\n```js\n[\n    {\n        label: 'Example one',\n        value: 1\n    },\n    {\n        label: 'Example two',\n        value: 2\n    }\n]\n```\n\n#### Receiving input\n\nIn order to receive the users input you can provide the `onChange` method that will be called when the input is changed.\nThis method will be called with the following parameters in the given order:\n`The event from the input`, `The column name`, `The row data`, `The row index`.\n\n#### Controlled and Uncontrolled inputs\n\nA uncontrolled input is an input whose value is controlled by the DOM. This means that it cannot be modified\nafter the default value has been set by React. You will only receive input from the component and will not be able\nto modify the displayed value.\n\nA controlled input will require you to store the value of the input in the state, the value of the input will be\nread from state meaning you will have to update state on user input to reflect it in component. In this case\nit will mean you will have to alter the data passed in as the `rows` prop.\n\n### Indicating active row(s)\n\nIf you supply an `rowIsActive` predicate prop to the data table, any row\nmatching the predicate is given the CSS class `table-active`:\n\n```jsx\n<DynamicDataTable\n    rowIsActive={(row) => row.id === 3}\n/>\n```\n\n## Development\n\n### Linting\n\nThis package uses [ESLint](https://eslint.org/) for linting of JS/X.  You can run ESLint at any time by executing `npm run-script lint-fix`.  Install the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) to get real-time linting in Visual Studio Code.\n\nThese linters additionally run in continuous integration as a GitHub Action.\n\n### Releases\n\nTo release a new version of this package, simply [create a new release](https://github.com/langleyfoxall/react-dynamic-data-table/releases/new).\n","readmeFilename":"README.md"}