{"id":13436154,"url":"https://github.com/glittershark/reactable","last_synced_at":"2025-10-22T19:28:36.919Z","repository":{"id":16251794,"uuid":"18999697","full_name":"glittershark/reactable","owner":"glittershark","description":"Fast, flexible, and simple data tables in React","archived":true,"fork":false,"pushed_at":"2019-02-22T11:57:20.000Z","size":3489,"stargazers_count":1503,"open_issues_count":104,"forks_count":222,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-08-27T19:42:27.132Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"glittershark.github.io/reactable","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/glittershark.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-21T17:02:37.000Z","updated_at":"2025-06-05T18:40:41.000Z","dependencies_parsed_at":"2022-07-21T06:47:28.578Z","dependency_job_id":null,"html_url":"https://github.com/glittershark/reactable","commit_stats":null,"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/glittershark/reactable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glittershark%2Freactable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glittershark%2Freactable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glittershark%2Freactable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glittershark%2Freactable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glittershark","download_url":"https://codeload.github.com/glittershark/reactable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glittershark%2Freactable/sbom","scorecard":{"id":429913,"data":{"date":"2025-08-11","repo":{"name":"github.com/glittershark/reactable","commit":"4cb57c1823293c39c16ddd864357412280b93876"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.4,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":6,"reason":"Found 11/18 approved changesets -- score normalized to 6","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 24 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-19T03:05:37.577Z","repository_id":16251794,"created_at":"2025-08-19T03:05:37.577Z","updated_at":"2025-08-19T03:05:37.577Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277450939,"owners_count":25819971,"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","status":"online","status_checked_at":"2025-09-28T02:00:08.834Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-07-31T03:00:44.807Z","updated_at":"2025-09-29T00:32:47.144Z","avatar_url":"https://github.com/glittershark.png","language":"JavaScript","readme":"# Reactable\n\n[![Build Status](https://travis-ci.org/glittershark/reactable.svg?branch=master)](https://travis-ci.org/glittershark/reactable)\n[![Code Climate](https://codeclimate.com/github/glittershark/reactable/badges/gpa.svg)](https://codeclimate.com/github/glittershark/reactable)\n\nFast, flexible, and simple data tables in React.\n\nReactable allows you to display tabular data client-side, and provides sorting,\nfiltering, and pagination over that data. It uses the power of [React.js][react]\nto do all this very, very quickly, and provides an API that makes simple things\neasy, while trying to get out of your way as much as possible if you want to do\nsomething complicated or unconventional.\n\n[react]: http://facebook.github.io/react/\n\nThis project is currently alpha-stage, which means the API may or may not be\nunstable and there might be hidden bugs lurking around any corner. I'll try to\ntag any releases with breaking changes, however, and the more people who use\nthis the faster we can get to 1.0!\n\n**Note:** As of version 0.12.0 Reactable will only continue to support React\n0.14 and higher.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Further Customization](#further-customization)\n  - [Even More Customization](#even-more-customization)\n  - [Additional node types](#additional-node-types)\n  - [Customizing Columns](#customizing-columns)\n  - [Preventing escaping of HTML](#preventing-escaping-of-html)\n  - [Pagination](#pagination)\n  - [Sorting](#sorting)\n  - [Filtering](#filtering)\n  - [Empty Data Sets](#empty-data-sets)\n  - [Events](#events)\n\n## Installation\n\n### Using Bower\n\n```sh\nbower install [--save] reactable\n```\n\n### Using NPM\n\n```sh\nnpm install [--save] reactable\n```\n\nOr, you can just download the raw file\n[here][build-file].\n\nThat file can be used either as an AMD module, as a CommonJS module in Node, or,\nif neither are supported, will register the Reactable object as a property of\nthe `window` object.\n\nReactable also exposes a set of CommonJS modules for piece-by-piece use with\nNode, Webpack, Browserify, etc. These modules are located in the [`lib` folder\nat the root of this repositiory][lib-folder].\n\nKeep in mind that Reactable depends on the latest version of React (0.14), which\ncan be downloaded [here][download]\n\n[build-file]: https://github.com/glittershark/reactable/raw/master/build/reactable.js\n[download]: http://facebook.github.io/react/downloads.html\n[lib-folder]: https://github.com/glittershark/reactable/tree/master/lib\n\n## Usage\n\nThe simplest example:\n\n```jsx\nvar Table = Reactable.Table;\nReactDOM.render(\n    \u003cTable className=\"table\" data={[\n        { Name: 'Griffin Smith', Age: 18 },\n        { Age: 23,  Name: 'Lee Salminen' },\n        { Age: 28, Position: 'Developer' },\n    ]} /\u003e,\n    document.getElementById('table')\n);\n```\n\nWhile pretty basic, this example demonstrates a couple things:\n\n- Columns in the data array can be in any order, and you can omit any you like\n- Regular React DOM attributes such as className will pass-through to the\n  rendered `\u003ctable\u003e`\n- Data values can be any type with a `toString()` method\n\n### Further Customization\n\nYou can also manually build up your rows using `Reactable.Tr` nested in a table,\nalso using the `data` prop, but this time containing only one javascript object.\nThis approach can be freely combined with the `data` property on the `\u003cTable\u003e`,\nand is useful if you want to specify per-row attributes such as classes, like so:\n\n```jsx\nvar Table = Reactable.Table,\n    Tr = Reactable.Tr;\n\nReactDOM.render(\n    \u003cTable className=\"table\" data={[\n        { name: 'Row one', content: 'These are regular data rows' },\n        { name: 'Row two', content: 'They work like above' },\n    ]} \u003e\n        \u003cTr className=\"special-row\"\n            data={{ name: 'Other Row' , content: 'This is a different row' }} /\u003e\n    \u003c/Table\u003e,\n    document.getElementById('table')\n);\n```\n\n### Even More Customization\n\nIf you want to customize the rendering of individual columns, you can go a level\ndeeper by embedding a `Reactable.Td` inside your `Reactable.Tr`. These have the\nrequired `column` property, and an optional `value` property if you want to\ncustomize the data that's used for sorting and filtering - if the latter isn't\nspecified, the data used will default to the `Td`'s children.\n\nExample:\n\n```jsx\nvar Table = Reactable.Table,\n    Tr = Reactable.Tr,\n    Td = Reactable.Td;\n\nReactDOM.render(\n    \u003cTable className=\"table\" id=\"table\"\u003e\n        \u003cTr\u003e\n            \u003cTd column=\"Name\" data=\"Griffin Smith\"\u003e\n                \u003cb\u003eGriffin Smith\u003c/b\u003e\n            \u003c/Td\u003e\n            \u003cTd column=\"Age\"\u003e18\u003c/Td\u003e\n        \u003c/Tr\u003e\n        \u003cTr\u003e\n            \u003cTd column=\"Name\"\u003eLee Salminen\u003c/Td\u003e\n            \u003cTd column=\"Age\"\u003e23\u003c/Td\u003e\n        \u003c/Tr\u003e\n        \u003cTr\u003e\n            \u003cTd column=\"Position\"\u003eDeveloper\u003c/Td\u003e\n            \u003cTd column=\"Age\"\u003e28\u003c/Td\u003e\n        \u003c/Tr\u003e\n    \u003c/Table\u003e,\n    document.getElementById('table')\n);\n```\n\n### Customizing Columns\n\nTo override inferring the column list from the attributes of the passed `data`\nobjects, you can either:\n\n- Pass a `columns` array property to the `\u003cTable\u003e` component, which can be\n  either:\n  - An array of strings, in which case only the given properties will be included\n    as columns in the rendered table.\n  - An array of objects, each of which must have a `key` and `label` property.\n    The `key` property is the attribute of the row object from which to retrieve\n    value, and the `label` is the text to render in the column header row.\n- Define a `\u003cThead\u003e` component as the **first child** of the `\u003cTable\u003e`, with\n  `\u003cTh\u003e` components as children (note the exclusion of a `\u003cTr\u003e` here),\n  each of which should have a \"column\" property. The children of these `\u003cTh\u003e`\n  components (either strings or React components themselves) will be used to\n  render the table headers. For example:\n\n```jsx\nvar Table = Reactable.Table,\n    Thead = Reactable.Thead,\n    Th = Reactable.Th,\n    Tr = Reactable.Tr,\n    Td = Reactable.Td;\n\nReactDOM.render(\n    \u003cTable className=\"table\" id=\"table\"\u003e\n        \u003cThead\u003e\n          \u003cTh column=\"name\"\u003e\n            \u003cstrong className=\"name-header\"\u003eFirst Name, Last Name\u003c/strong\u003e\n          \u003c/Th\u003e\n          \u003cTh column=\"age\"\u003e\n            \u003cem className=\"age-header\"\u003eAge, years\u003c/em\u003e\n          \u003c/Th\u003e\n        \u003c/Thead\u003e\n        \u003cTr\u003e\n            \u003cTd column=\"name\" data=\"Griffin Smith\"\u003e\n                \u003cb\u003eGriffin Smith\u003c/b\u003e\n            \u003c/Td\u003e\n            \u003cTd column=\"age\"\u003e18\u003c/Td\u003e\n        \u003c/Tr\u003e\n        \u003cTr\u003e\n            \u003cTd column=\"name\"\u003eLee Salminen\u003c/Td\u003e\n            \u003cTd column=\"age\"\u003e23\u003c/Td\u003e\n        \u003c/Tr\u003e\n        \u003cTr\u003e\n            \u003cTd column=\"position\"\u003eDeveloper\u003c/Td\u003e\n            \u003cTd column=\"age\"\u003e28\u003c/Td\u003e\n        \u003c/Tr\u003e\n    \u003c/Table\u003e,\n    document.getElementById('table')\n);\n```\n\nIn this example, the `position` column will **not** be rendered.\n\n### Additional node types\n\nReactable also supports specifying a `\u003ctfoot\u003e` for your table, via the\n`Reactable.Tfoot` class. Per the HTML spec, there can only be one `\u003cTfoot\u003e` per\ntable and its only children should be React.DOM `\u003ctr\u003e` elements (**not**\n`\u003cReactable.Tr\u003e` elements).\n\n### Preventing escaping of HTML\n\nIf you don't want to go all the way down the JSX rabbit hole to render\nindividual cells as HTML, and you know your source data is safe, you can wrap\nstrings in `Reactable.unsafe` to prevent their content from being escaped, like\nso:\n\n```jsx\nvar Table = Reactable.Table,\n    unsafe = Reactable.unsafe;\n\nReactDOM.render(\n    \u003cTable className=\"table\" id=\"table\" data={[\n        {\n            'Name': unsafe('\u003cb\u003eGriffin Smith\u003c/b\u003e'),\n            'Github': unsafe('\u003ca href=\"https://github.com/glittershark\"\u003e\u003cimg src=\"https://d2k1ftgv7pobq7.cloudfront.net/images/services/8cab38550d1f23032facde191031d024/github.png\"\u003e\u003c/a\u003e')\n        },\n        {\n            'Name': unsafe('\u003cb\u003eIan Zhang\u003c/b\u003e'),\n            'Github': unsafe('\u003ca href=\"https://github.com/lofiinterstate\"\u003e\u003cimg src=\"https://d2k1ftgv7pobq7.cloudfront.net/images/services/8cab38550d1f23032facde191031d024/github.png\"\u003e\u003c/a\u003e')\n        },\n    ]}/\u003e,\n    document.getElementById('table')\n);\n```\n\nYou can also pass in `unsafe` strings as column labels or in a `\u003cReactable.Th\u003e`\n\n### Pagination\n\nYou can also use pagination, by just specifying an `itemsPerPage` argument to\nthe `\u003cTable\u003e` component. Include an optional `pageButtonLimit` argument to\ncustomize the number of page buttons in the pagination, which defaults to 10.\nFor example:\n\n```jsx\n\u003cTable className=\"table\" data={[\n    { Name: 'Griffin Smith', Age: '18' },\n    { Age: '23',  Name: 'Lee Salminen' },\n    { Age: '28', Position: 'Developer' },\n    { Name: 'Griffin Smith', Age: '18' },\n    { Age: '30',  Name: 'Test Person' },\n    { Name: 'Another Test', Age: '26', Position: 'Developer' },\n    { Name: 'Third Test', Age: '19', Position: 'Salesperson' },\n    { Age: '23',  Name: 'End of this Page', Position: 'CEO' },\n]} itemsPerPage={4} pageButtonLimit={5} /\u003e\n```\n\nYou can also change the default text on the buttons by including the\n`previousPageLabel` and `nextPageLabel` props.\n\n### Sorting\n\nTo enable sorting on all columns, just specify `sortable={true}` on the\n`\u003cTable\u003e` component. For further customization, ie disabling sort or using a\ncustom sort function on a per-column basis, you can pass an array to `sortable`,\nwhich contains either string column names or column objects.\n\nWe've pre-built some sort functions for you.\n\n- `CaseInsensitive` will sort strings alphabetically regardless of\n  capitalization (e.g. Joe Smith === joe smith)\n- `Date` will sort dates using JavaScript's native Date parser (e.g. 4/20/2014\n  12:05 PM)\n- `Currency` will sort USD format (e.g. $1,000.00)\n- `Numeric` will parse integer-like strings as integers (e.g. \"1\")\n- `NumericInteger` will parse integer strings (use `Numeric` if you might have floats)\n\nTo specify a custom sort function, use the following structure for the column\nobject:\n\n```jsx\n\n{column: 'Column Name', sortFunction: function(a, b){\n    return a \u003e b ? 1 : -1;\n}}\n```\n\nYou can also specify a default sort by passing in either a column name by\nitself, or an object with a column and a `direction` paramenter of either `asc`\nor `desc`.  If no direction is specified, the default sort will be ascending.\nExample:\n\n```jsx\n\n{column: 'Column Name', direction: 'asc' }\n```\n\nCombined example:\n\n```jsx\n\u003cTable className=\"table\" id=\"table\" data={[\n    { Name: 'Lee Salminen', Age: '23', Position: 'Programmer'},\n    { Name: 'Griffin Smith', Age: '18', Position: 'Engineer'},\n    { Name: 'Ian Zhang', Age: '28', Position: 'Developer'}\n]}\nsortable={[\n    {\n        column: 'Name',\n        sortFunction: function(a, b){\n            // Sort by last name\n            var nameA = a.split(' ');\n            var nameB = b.split(' ');\n\n            return nameA[1].localeCompare(nameB[1]);\n        }\n    },\n    'Age',\n    'Position'\n]}\ndefaultSort={{column: 'Age', direction: 'desc'}}/\u003e\n```\n\nIn case you are constructing your table without the data attribute, and the\ncells contain some additional HTML elements, you can use the value property\non the Td element to define the value to sort for.\n\nIn the following example we define two TDs, where the first contains some\nadditional markup. We tell the Td to take \"Griffin Smith\" as value for data\nhandling (filter or sort).\n\n```jsx\nvar Table = Reactable.Table,\n    Tr = Reactable.Tr,\n    Td = Reactable.Td;\n\nReactDOM.render(\n    \u003cTable className=\"table\" id=\"table\" sortable={true}\u003e\n        \u003cTr\u003e\n            \u003cTd column=\"Name\" value=\"Griffin Smith\"\u003e\n                \u003cdiv\u003e\n                   \u003cspan\u003eSome Text or Icon\u003c/span\u003e\n                   \u003cb\u003eGriffin Smith\u003c/b\u003e\n                \u003c/div\u003e\n            \u003c/Td\u003e\n            \u003cTd column=\"Age\"\u003e18\u003c/Td\u003e\n        \u003c/Tr\u003e\n    \u003c/Table\u003e,\n    document.getElementById('table')\n);\n```\n\nThere is also an boolean `defaultSortDescending` option to default the sorting\nof a column to descending when clicked:\n\n```jsx\n\n\u003cTable className=\"table\" id=\"table\" data={[\n    { Name: 'Lee Salminen', Age: '23', Position: 'Programmer'},\n    { Name: 'Griffin Smith', Age: '18', Position: 'Engineer'},\n    { Name: 'Ian Zhang', Age: '28', Position: 'Developer'}\n]}\nsortable={[\n    'Age',\n    'Position'\n]}\ndefaultSort={{column: 'Age', direction: 'desc'}}\ndefaultSortDescending\n```\n\n### Filtering\n\nYou can do simple case-insensitive filtering by specifying a filterable property\non the table.  This property should contain a list of columns which the filter\nis performed on.  If the filterable property is provided, then an input box with\nclass reactable-filter-input will be prepended to the thead of the table.\n\nExample:\n\n```jsx\n\u003cTable className=\"table\" id=\"table\" data={[\n    {'State': 'New York', 'Description': 'this is some text', 'Tag': 'new'},\n    {'State': 'New Mexico', 'Description': 'lorem ipsum', 'Tag': 'old'},\n    {'State': 'Colorado',\n     'Description': 'new description that shouldn\\'t match filter',\n     'Tag': 'old'},\n    {'State': 'Alaska', 'Description': 'bacon', 'Tag': 'renewed'},\n]} filterable={['State', 'Tag']} /\u003e\n```\n\nThere is also a `filterBy()` function on the component itself which takes a\nsingle string and applies that as the filtered value. It can be used like so:\n\n```jsx\nvar table = ReactDOM.render(\n  \u003cTable className=\"table\" id=\"table\" data={[\n      {'State': 'New York', 'Description': 'this is some text', 'Tag': 'new'},\n      {'State': 'New Mexico', 'Description': 'lorem ipsum', 'Tag': 'old'},\n      {'State': 'Colorado',\n       'Description': 'new description that shouldn\\'t match filter',\n       'Tag': 'old'},\n      {'State': 'Alaska', 'Description': 'bacon', 'Tag': 'renewed'},\n  ]} filterable={['State', 'Tag']} /\u003e,\n  document.getElementById('table')\n);\n\ntable.filterBy('new');\n```\n\nYou can also pass in a `filterBy` prop to control the filtering outside of the\n`Table` component:\n\n```jsx\nvar table = ReactDOM.render(\n  \u003cTable className=\"table\" id=\"table\" data={[\n      {'State': 'New York', 'Description': 'this is some text', 'Tag': 'new'},\n      {'State': 'New Mexico', 'Description': 'lorem ipsum', 'Tag': 'old'},\n      {'State': 'Colorado',\n       'Description': 'new description that shouldn\\'t match filter',\n       'Tag': 'old'},\n      {'State': 'Alaska', 'Description': 'bacon', 'Tag': 'renewed'},\n  ]} filterable={['State', 'Tag']}\n  filterBy=\"new\" /\u003e,\n  document.getElementById('table')\n);\n```\n\nIf you are using your own input field to control the `filterBy` prop, you can\nhide the build-in filter input field with the `hideFilterInput` prop:\n\n```jsx\nvar table = ReactDOM.render(\n  \u003cTable className=\"table\" id=\"table\" data={[\n      {'State': 'New York', 'Description': 'this is some text', 'Tag': 'new'},\n      {'State': 'New Mexico', 'Description': 'lorem ipsum', 'Tag': 'old'},\n      {'State': 'Colorado',\n       'Description': 'new description that shouldn\\'t match filter',\n       'Tag': 'old'},\n      {'State': 'Alaska', 'Description': 'bacon', 'Tag': 'renewed'},\n  ]} filterable={['State', 'Tag']}\n  filterBy=\"new\"\n  hideFilterInput /\u003e,\n  document.getElementById('table')\n);\n```\n\nThese can be useful if you want to roll your own filtering input field\noutside of Reactable.\n\nYou can also provide your own custom filtering functions:\n\n```jsx\n\u003cTable className=\"table\" id=\"table\" data={[\n    {'State': 'New York', 'Description': 'this is some text', 'Tag': 'new'},\n    {'State': 'New Mexico', 'Description': 'lorem ipsum', 'Tag': 'old'},\n    {'State': 'Colorado',\n     'Description': 'new description that shouldn\\'t match filter',\n     'Tag': 'old'},\n    {'State': 'Alaska', 'Description': 'bacon', 'Tag': 'renewed'},\n]}\nfilterable={[\n    {\n        column: 'State',\n        filterFunction: function(contents, filter) {\n            // case-sensitive filtering\n            return (contents.indexOf(filter) \u003e -1);\n        }\n    },\n    'Tag'\n]} /\u003e\n```\n\nYour filter function must return a boolean. Refraining from specifying a custom\nfilter function will default to case-insensitive filtering.\n\n### Empty Data Sets\n\nIf the table is initialized without any `\u003cTr\u003e`s or with an empty array for\n`data`, you can display text in the body of the table by passing a string\nfor the optional `noDataText` prop:\n\n```jsx\nvar table = ReactDOM.render(\n  \u003cTable\n    className=\"table\"\n    id=\"table\" data={[]}\n    noDataText=\"No matching records found.\" /\u003e,\n  document.getElementById('table')\n);\n```\n\n### Events\n\nYou can pass functions to the following props of `\u003cReactable.Table\u003e` to provide\nevent handlers.\n\n#### onSort\n\nCalled when the sorting in the table changes.\n\nThis handler will be passed an object that contains the column name that is\nbeing sorted by, and the direction it is being sorted:\n\n```js\n{\n  column: 'Name',\n  direction: -1\n}\n```\n\n#### onFilter\n\nCalled every time the filtering changes.\n\nThis handler will be passed a string containing the text that's being used for\nfiltering.\n\n#### onPageChange\n\nCalled every time the page changes.\n\nThis handler will be passed a number representing the current page, zero based.\n","funding_links":[],"categories":["Uncategorized","Awesome React","JavaScript","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Uncategorized","Tools","Table / Data Grid","Openshift"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglittershark%2Freactable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglittershark%2Freactable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglittershark%2Freactable/lists"}