{\n return (\n \n You can put any component you want here, even another React Table! You\n even have access to the row-level data if you need! Spark-charts,\n drill-throughs, infographics... the possibilities are endless!\n
\n )\n }}\n/>\n```\n\n## Server-side Data\n\nIf you want to handle pagination, sorting, and filtering on the server, `react-table` makes it easy on you.\n\n1. Feed React Table `data` from somewhere dynamic. eg. `state`, a redux store, etc...\n1. Add `manual` as a prop. This informs React Table that you'll be handling sorting and pagination server-side\n1. Subscribe to the `onFetchData` prop. This function is called at `componentDidMount` and any time sorting, pagination or filterting is changed in the table\n1. In the `onFetchData` callback, request your data using the provided information in the params of the function (current state and instance)\n1. Update your data with the rows to be displayed\n1. Optionally set how many pages there are total\n\n```javascript\n {\n // show the loading overlay\n this.setState({loading: true})\n // fetch your data\n Axios.post('mysite.com/data', {\n page: state.page,\n pageSize: state.pageSize,\n sorted: state.sorted,\n filtered: state.filtered\n })\n .then((res) => {\n // Update react-table\n this.setState({\n data: res.data.rows,\n pages: res.data.pages,\n loading: false\n })\n })\n }}\n/>\n```\n\nFor a detailed example, take a peek at our async table mockup\n\n## Fully Controlled Component\n\nReact Table by default works fantastically out of the box, but you can achieve even more control and customization if you choose to maintain the state yourself. It is very easy to do, even if you only want to manage _parts_ of the state.\n\nHere are the props and their corresponding callbacks that control the state of the a table:\n\n```javascript\n {...}} // Called when the page index is changed by the user\n onPageSizeChange={(pageSize, pageIndex) => {...}} // Called when the pageSize is changed by the user. The resolve page is also sent to maintain approximate position in the data\n onSortedChange={(newSorted, column, shiftKey) => {...}} // Called when a sortable column header is clicked with the column itself and if the shiftkey was held. If the column is a pivoted column, `column` will be an array of columns\n onExpandedChange={(newExpanded, index, event) => {...}} // Called when an expander is clicked. Use this to manage `expanded`\n onFilteredChange={(filtered, column) => {...}} // Called when a user enters a value into a filter input field or the value passed to the onFiltersChange handler by the Filter option.\n onResizedChange={(newResized, event) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)\n/>\n```\n\n## Functional Rendering\n\nPossibly one of the coolest features of React-Table is its ability to expose internal components and state for custom render logic. The easiest way to do this is to pass a function as the child of ``.\n\nThe function you pass will be called with the following items:\n\n- Fully-resolved state of the table\n- A function that returns the standard table component\n- The instance of the component\n\nYou can then return any JSX or react you want! This turns out to be perfect for:\n\n- Accessing the internal state of the table without a `ref`\n- Decorating the table or extending it with your own UI\n- Building your own custom display logic\n\nAccessing internal state and wrapping with more UI:\n\n```javascript\n\n {(state, makeTable, instance) => {\n return (\n \n \n \n state.allVisibleColumns ==={' '}\n {JSON.stringify(state.allVisibleColumns, null, 4)}\n \n
\n {makeTable()}\n \n )\n }}\n\n```\n\nThe possibilities are endless!\n\n## Sorting\n\nSorting comes built in with React-Table.\n\n- Click a column header to sort by its accessor.\n- Click it again to reverse the sort.\n- Set `defaultSortDesc` property to `true` to make the first sort direction default to descending.\n- Override a specific column's default sort direction by using the same `defaultSortDesc` property on a column, set to `true`\n\n## Multi-Sort\n\nWhen clicking on a column header, hold shift to multi-sort! You can toggle `ascending` `descending` and `none` for multi-sort columns. Clicking on a header without holding shift will clear the multi-sort and replace it with the single sort of that column. It's quite handy!\n\nYou can set the `multiSort` prop to `false` to disable this feature (which may be useful for server-side sorting when you are not\ngoing to sort multiple columns).\n\n## Custom Sorting Algorithm\n\nTo override the default sorting algorithm for the whole table use the `defaultSortMethod` prop.\n\nTo override the sorting algorithm for a single column, use the `sortMethod` column property.\n\nSupply a function that implements the native javascript [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) interface. This is React Table's default sorting algorithm:\n\n- `a` the first value to compare\n- `b` the second value to compare\n- `desc` true if sort is descending, false if ascending\n\n```javascript\ndefaultSortMethod = (a, b, desc) => {\n // force null and undefined to the bottom\n a = a === null || a === undefined ? -Infinity : a\n b = b === null || b === undefined ? -Infinity : b\n // force any string values to lowercase\n a = typeof a === 'string' ? a.toLowerCase() : a\n b = typeof b === 'string' ? b.toLowerCase() : b\n // Return either 1 or -1 to indicate a sort priority\n if (a > b) {\n return 1\n }\n if (a < b) {\n return -1\n }\n // returning 0 or undefined will use any subsequent column sorting methods or the row index as a tiebreaker\n return 0\n}\n```\n\n## Filtering\n\nFiltering can be enabled by setting the `filterable` option on the table.\n\nIf you don't want particular column to be filtered you can set the `filterable={false}` option on the column.\n\nBy default the table tries to filter by checking if the row's value starts with the filter text. The default method for filtering the table can be set with the table's `defaultFilterMethod` option.\n\nIf you want to override a particular column's filtering method, you can set the `filterMethod` option on a column.\n\nBy default, `filterMethod` is passed a single row of data at a time, and you are responsible for returning `true` or `false`, indicating whether it should be shown.\n\nAlternatively, you can set `filterAll` to `true`, and `filterMethod` will be passed the entire array of rows to be filtered, and you will then be responsible for returning the new filtered array. This is extremely handy when you need to utilize a utility like fuzzy matching that requires the entire array of items.\n\nTo completely override the filter that is shown, you can set the `Filter` column option. Using this option you can specify the JSX that is shown. The option is passed an `onChange` method which must be called with the the value that you want to pass to the `filterMethod` option whenever the filter has changed.\n\nSee Custom Filtering demo for examples.\n\n## Component Overrides\n\nThough we confidently stand by the markup and architecture behind it, `react-table` does offer the ability to change the core componentry it uses to render everything. You can extend or override these internal components by passing a react component to it's corresponding prop on either the global props or on a one-off basis like so:\n\n```javascript\n// Change the global default\nimport { ReactTableDefaults } from 'react-table-6'\nObject.assign(ReactTableDefaults, {\n TableComponent: component,\n TheadComponent: component,\n TbodyComponent: component,\n TrGroupComponent: component,\n TrComponent: component,\n ThComponent: component,\n TdComponent: component,\n TfootComponent: component,\n ExpanderComponent: component,\n AggregatedComponent: component,\n PivotValueComponent: component,\n PivotComponent: component,\n FilterComponent: component,\n PaginationComponent: component,\n PreviousComponent: undefined,\n NextComponent: undefined,\n LoadingComponent: component,\n NoDataComponent: component,\n ResizerComponent: component\n})\n\n// Or change per instance\n\n```\n\nIf you choose to change the core components React-Table uses to render, you must make sure your replacement components consume and utilize all of the supplied and inherited props that are needed for that component to function properly. We would suggest investigating the source for the component you wish to replace.\n\n# HOC Extensions\n\nThis section is about expanding ReactTable using Higher Order Components/Functions.\n\n## Covered in this section\n\n- A Brief explanation of HOCs and why they are a good approach for ReactTable enhancements\n- Documentation of the currently available HOCs\n- TreeTable\n- SelectTable\n- Documentation of the standard for writing HOCs with ReactTable\n\n## What are HOCs and why use them with ReactTable\n\nHOCs (or Higher Order Components/Functions) are either a React Component (or a function that returns a React Component)\nthat are used to enhance the functionality of an existing component. How much you can enhance depends on the props that\nthe component exposes.\n\nFortunately, ReactTable exposes a LOT of functionality as props to the component. In some cases there are too many\nprops to keep track of and that is where HOCs come in.\n\nYou can write a HOC that just focusses on the additional functionality you want to enhance and keep those enhancements to\nreuse over and over again when you need them. You don't have to edit the ReactTable source code, just wrap ReactTable in one or\nmore HOCs (more on some issues related to chaining HOCs later) that provide the additional functionality you want to expose.\n\nThe most obvious HOC is one that can add `checkbox` or select functionality. The HOC included provides `select` functionality\nthat allows the developer to specify if they want a `checkbox` or `radio` style of select column. The implementation of the\nselection is recorded (e.g. in component state, Redux, etc.) and how to manage multiple selections. The HOC really only handles\nthe rendering pieces.\n\nBut there is more documentation on the `select` HOC below.\n\n## Currently Available HOCs\n\nAny of the below HOCs can be imported from react-table like so:\n\n```javascript\nimport ReactTable from \"react-table-6\";\nimport treeTableHOC from \"react-table-6/lib/hoc/treeTable\";\n\nconst TreeTable = treeTableHOC(ReactTable);\n```\n\nSwap `treeTable` and `TreeTable` with any of the other HOC names as necessary.\n\n### TreeTable\n\nTreeTable takes over the rendering of the generated pivot rows of ReactTable so that they appear more like an expandable Tree.\n\nIt accomplishes this by rendering a 100% wide div and then only rendering the cell that controls the pivot at that level.\n\nUsing it is as simple as doing the following:\n\n```javascript\nconst TreeTable = treeTableHOC(ReactTable);\n```\n\nAfter you have done the above, you can then use `TreeTable` just as you would `ReactTable` but it will render pivots using\nthe Tree style described above.\n\n### SelectTable\n\nSelectTable is a little trickier. The HOCs attempt to avoid adding additional state and, as there is no internal ID for a row that\ncan be relied on to be static (ReactTable just reuses indexes when rendering) the developer has to maintain the state outside of even\nthe wrapped component. So it is largely based on callbacks.\n\nYou include the HOC in the same manner as you would for the treeTableHOC but then need to provide the following overrides:\n\n- isSelected - returns `true` if the key passed is selected otherwise it should return `false`\n- selectAll - a property that indicates if the selectAll is set (`true|false`)\n- toggleAll - called when the user clicks the `selectAll` checkbox/radio\n- toggleSelection - called when the use clicks a specific checkbox/radio in a row\n- selectType - either `checkbox|radio` to indicate what type of selection is required\n\n**Note:** The select field defaults to the accessor `_id` property in order to render the select field for that particular row. If your objects have different\nunique ID fields, make sure to tell React Table that by passing it the `keyField` property.\n\n```javascript\n\n```\n\nIn the case of `radio` there is no `selectAll` displayed but the developer is responsible for only making one selection in\nthe controlling component's state. You could select multiple but it wouldn't make sense and you should use `checkbox` instead.\n\nYou also have to decide what `selectAll` means. Given ReactTable is a paged solution there are other records off-page. When someone\nselects the `selectAll` checkbox, should it mark every possible record, only what might be visible to due a Filter or only those items\non the current page?\n\nThe example opts for the middle approach so it gets a `ref` to the ReactTable instance and pulls the `sortedData` out of the resolved\nstate (then walks through those records and pulls their ID into the `selection` state of the controlling component).\n\nYou can also replace the input component that is used to render the select box and select all box:\n\n- SelectAllInputComponent - the checkbox in the top left corner\n- SelectInputComponent - the checkbox used on a row\n\n### SelectTreeTable\n\nSelectTreeTable is a combination of TreeTable and SelectTable.\n\nTo function correctly the chain has to be in the correct order as follows (see the comments in the guid on HOCs below).\n\n```javascript\nconst SelectTreeTable = selectTableHOC(treeTableHOC(ReactTable));\n```\n\nIn this particular instance it is (probably) because the functions need access to the state on the wrapped component to manage\nthe selected items. Although that is not totally clearly the issue.\n\n### FoldableTable\n\nFoldableTable is a HOC that make the columns are foldable. The reason I developed this HOC because when working on the real project related to the financial which display so many columns for validation and comparison.\n\nSo foldable columns allow users to temporary hidden the unwanted to columns so that they can focus on the data that they want to see.\n\n#### How it works\n\n```javascript\nconst FoldableTable = FoldableTableHOC(ReactTable);\n```\n\nIt will scan all the columns which `foldable` is `true` and apply the foldable column feature. This feature will work for both normal columns and header columns as samples below.\n\n- With Header Columns\n\n```javascript\nrender(){\n return \n}\n```\n\n\n\n- With Nornal Columns\n\n```javascript\nrender() {\n return \n}\n```\n\n\n\n- The `FoldableTable` also fully compatible with existing HOCs, below is with selectTableHOC.\n\n\n\n#### State management\n\nIf you would like to manage the state of FoldableTable, then add the following codes.\n\n```javascript\nrender() {\n return this.setState(p => { return { folded: newFolded } })}\n folded={this.state.folded}\n />\n}\n```\n\n#### Custom Components\n\n- FoldIconComponent: to render the Icon of buttons.\n- FoldButtonComponent: to render the folding buttons for each Column.\n With default rendering as below.\n\n```javascript\nconst defaultFoldIconComponent = ({ collapsed }) => {\n //Render your Icon here\n};\n\nconst defaultFoldButtonComponent = ({ header, collapsed, icon, onClick }) => {\n //Render your button here.\n};\n```\n\n### AdvancedExpandTable\n\nHOC which allows any Cell in the row to toggle the row's\nSubComponent (expand/collapse). Also allows the SubComponent to toggle itself. Technically supports toggling any row's SubComponent.\n\nThese are the expand functions available to any SubComponent or Column Cell:\n\n```\ntoggleRowSubComponent\nshowRowSubComponent\nhideRowSubComponent\n```\n\nThey are available through the `props.columnProps.rest` object.\n\nOn any change to the props, the table will reset the expanded state.\n\nAccepts a onExpandedChange callback to be called whenever the table expanded state changes\n\nNote: only supports 1 level of nesting.\n\nExample usage in a Column Cell Renderer:\n\n```javascript\n Cell: props => {\n const {\n value\n columnProps: { rest: { showRowSubComponent } },\n nestingPath\n } = props;\n return (\n \n showRowSubComponent(nestingPath, e)}\n >\n {value}\n \n
\n );\n }\n```\n\nExample usage in the ReactTable SubComponent (toggle itself):\n\n```javascript\n const AdvancedExpandReactTable = advancedExpandTableHOC(ReactTable);\n\n \n ...\n SubComponent={({ row, nestingPath, toggleRowSubComponent }) => {\n return (\n \n toggleRowSubComponent({ nestingPath }, e)}\n >\n {row.value}\n \n
\n );\n }}\n />\n```\n\nEach Column Renderer (E.g. Cell ) gets the expand functions in its props and each SubComponent gets the expand functions in its props\n\nExpand functions takes the `nestingPath` or `rowInfo` given to each\nColumn Renderer and SubComponent already by ReactTable.\n\n## HOC Guide for ReactTable\n\nThere are a few rules required when writing a HOC for ReactTable (other than meeting the normal lint standards - which are\nstill being developed).\n\nFirstly, there are issues with `ref` when you write a HOC. Consider a deeply nested component wrapped in multiple HOCs...\n\nA HOC in the middle of the chain requires access to the instance of the component it thinks it is wrapping but there is at\nleast one other wrapper in the way. The challenge is: How do I get to the actual wrapped component?\n\nEach HOC is required to be a React Class so that a `ref` can be obtained against each component:\n\n```Javascript\n this.wrappedInstance = r} />\n```\n\n_NOTE:_ \"Component\" can also be the `` instance.\n\nThen the following method needs\nto be placed on the class so that it exposes the correct instance of ReactTable:\n\n```Javascript\ngetWrappedInstance() {\n if (!this.wrappedInstance) console.warn(' - No wrapped instance')\n if (this.wrappedInstance.getWrappedInstance) return this.wrappedInstance.getWrappedInstance()\n else return this.wrappedInstance\n}\n```\n\nEssentially this will walk down the chain (if there are chained HOCs) and stop when it gets to the end and return the wrapped instance.\n\nFinally, sometimes the chains need to be in a specific order to function correctly. It is not clear if this is just an architectural\nissue or if it would be better solved using a library like `recompose`. Anyone who is able to contribute a reliable solution to this\nis welcome to submit a PR.\n\n## Contributing\n\nTo suggest a feature, create an issue if it does not already exist.\nIf you would like to help develop a suggested feature follow these steps:\n\n- Fork this repo\n- Install dependencies with `$ yarn`\n- Auto-build files as you edit with `$ yarn run watch`\n- Implement your changes to files in the `src/` directory\n- Run the React Story locally with `$ yarn run docs`\n- View changes as you edit `docs/src`\n- Submit PR for review\n\n#### Scripts\n\n- `$ yarn run watch` Watches files and builds via babel\n- `$ yarn run docs` Runs the storybook server\n- `$ yarn run test` Runs the test suite\n\n## Used By\n\n\n 
\n\n","readmeFilename":"README.md"}![\"React](\"https://github.com/react-tools/media/raw/master/logo-react-table.png\"){kind=logo}
\n![\"\"](\"https://travis-ci.org/tannerlinsley/react-table.svg?branch=v6\")
\n\n\n ![\"\"](\"https://img.shields.io/npm/dm/react-table.svg\")
\n\n\n ![\"Join](\"https://withspectrum.github.io/badge/badge.svg\"){kind=icon}
\n\n\n ![\"\"](\"https://img.shields.io/github/stars/react-tools/react-table.svg?style=social&label=Star\")
\n\n\n ![\"\"](\"https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow\")
\n\n\n ![\"\"](\"https://img.shields.io/badge/%24-Donate-brightgreen.svg\"){kind=icon}
\n\n\n![](\"https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/platinum.png\")
\n \n ![](\"https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-retool.png\")
\n \n ![](\"https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold.png\")
\n \n ![](\"https://nozzle.io/img/logo-blue.png\"){kind=logo}
\n \n ![](\"https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-zappi.png\")
\n \n ![](\"https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver.png\")
\n \n ![](\"https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver-placeholder.png\")
\n \n