_.round(_.mean(values)),
- render: row => {
+ Aggregated: row => {
// You can even render the cell differently if it's an aggregated cell
- return
{row.aggregated ? `${row.value} (avg)` : row.value}
+ return
row.value (avg)
}
}, {
- header: 'Visits',
+ Header: 'Visits',
accessor: 'visits',
aggregate: (values, rows) => _.sum(values)
}]
@@ -604,8 +684,8 @@ If you want to handle pagination, sorting, and filtering on the server, `react-t
1. Feed React Table `data` from somewhere dynamic. eg. `state`, a redux store, etc...
1. Add `manual` as a prop. This informs React Table that you'll be handling sorting and pagination server-side
-1. Subscribe to the `onChange` prop. This function is called at `compomentDidMount` and any time sorting or pagination is changed by the user
-1. In the `onChange` callback, request your data using the provided information in the params of the function (state and instance)
+1. Subscribe to the `onFetchData` prop. This function is called at `compomentDidMount` and any time sorting, pagination or filterting is changed in the table
+1. In the `onFetchData` callback, request your data using the provided information in the params of the function (current state and instance)
1. Update your data with the rows to be displayed
1. Optionally set how many pages there are total
@@ -616,15 +696,15 @@ If you want to handle pagination, sorting, and filtering on the server, `react-t
pages={this.state.pages} // should default to -1 (which means we don't know how many pages we have)
loading={this.state.loading}
manual // informs React Table that you'll be handling sorting and pagination server-side
- onChange={(state, instance) => {
+ onFetchData={(state, instance) => {
// show the loading overlay
this.setState({loading: true})
// fetch your data
Axios.post('mysite.com/data', {
page: state.page,
pageSize: state.pageSize,
- sorting: state.sorting,
- filtering: state.filtering
+ sorted: state.sorted,
+ filtered: state.filtered
})
.then((res) => {
// Update react-table
@@ -649,29 +729,37 @@ Here are the props and their corresponding callbacks that control the state of t
// Props
page={0} // the index of the page you wish to display
pageSize={20} // the number of rows per page to be displayed
- sorting={[{
+ sorting={[{ // the sorting model for the table
id: 'lastName',
desc: true
}, {
id: 'firstName',
desc: true
- }]} // the sorting model for the table
- expandedRows={{
+ }]}
+ expandedRows={{ // The nested row indexes on the current page that should appear expanded
1: true,
4: true,
5: {
2: true,
3: true
}
- }} // The nested row indexes on the current page that should appear expanded
+ }}
+ filters={[{ // the current filters model
+ id: 'lastName',
+ value: 'linsley'
+ }]}
+ resizing={[{ // the current resized column model
+ "id": "lastName",
+ "value": 446.25
+ }]}
// Callbacks
onPageChange={(pageIndex) => {...}} // Called when the page index is changed by the user
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
- onSortingChange={(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
- onExpandRow={(index, event) => {...}} // Called when an expander is clicked. Use this to manage `expandedRows`
- onFilteringChange={(column, value) => {...}} // Called when a user enters a value into a filter input field or the value passed to the onFilterChange handler by the filterRender option.
- onResize={(column, event, isTouch) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)
+ 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
+ onExpandedChange={(newExpanded, index, event) => {...}} // Called when an expander is clicked. Use this to manage `expandedRows`
+ onFilteredChange={(column, value) => {...}} // Called when a user enters a value into a filter input field or the value passed to the onFiltersChange handler by the filterRender option.
+ onResizedChange={(newResized, event) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)
/>
```
@@ -712,19 +800,51 @@ Accessing internal state and wrapping with more UI:
The possibilities are endless!
+## Sorting
+Sorting comes built in with React-Table. Click column header to sort by its column. Click it again to reverse the sort.
+
## Multi-Sort
When 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!
-## Filtering
-Filtering can be enabled by setting the `showFilters` option on the table.
+## Custom Sorting Algorithm
+To override the default sorting algorithm for the whole table use the `defaultSortMethod` prop.
-If you don't want particular column to be filtered you can set the `hideFilter` option on the column.
+To override the sorting algorithm for a single column, use the `sortMethod` column property.
+
+Supply 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:
+- `a` the first value to compare
+- `b` the second value to compare
+- `dir` the
+```javascript
+defaultSortMethod = (a, b) => {
+ // force null and undefined to the bottom
+ a = (a === null || a === undefined) ? -Infinity : a
+ b = (b === null || b === undefined) ? -Infinity : b
+ // force any string values to lowercase
+ a = a === 'string' ? a.toLowerCase() : a
+ b = b === 'string' ? b.toLowerCase() : b
+ // Return either 1 or -1 to indicate a sort priority
+ if (a > b) {
+ return 1
+ }
+ if (a < b) {
+ return -1
+ }
+ // returning 0 or undefined will use any subsequent column sorting methods or the row index as a tiebreaker
+ return 0
+}
+```
+
+## Filtering
+Filtering can be enabled by setting the `filterable` option on the table.
+
+If you don't want particular column to be filtered you can set the `filterable={false}` option on the column.
By 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.
If you want to override a particular column's filtering method, you can set the `filterMethod` option on a column.
-To completely override the filter that is shown, you can set the `filterRender` column option. Using this option you can specify the JSX that is shown. The option is passed an `onFilterChange` method which must be called with the the value that you wan't to pass to the `filterMethod` option whenever the filter has changed.
+To 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 wan't to pass to the `filterMethod` option whenever the filter has changed.
See
Custom Filtering demo for examples.
@@ -743,7 +863,10 @@ Object.assign(ReactTableDefaults, {
TdComponent: component,
TfootComponent: component,
ExpanderComponent: component,
+ AggregatedComponent: component,
PivotValueComponent: component,
+ PivotComponent: component,
+ FilterComponent: component,
PaginationComponent: component,
PreviousComponent: undefined,
NextComponent: undefined,
diff --git a/docs/iframe.html b/docs/iframe.html
index c22a59e..62285c4 100644
--- a/docs/iframe.html
+++ b/docs/iframe.html
@@ -16,7 +16,7 @@
-
+
-## Features
+## Versions
+This document refers to version 6.x.x of react-table.
+Previous versions:
+
+[5.x.x Readme](https://github.com/tannerlinsley/react-table/blob/ad7d31cd3978eb45da7c6194dbab93c1e9a8594d/README.md)
+
+## Features
- Lightweight at 7kb (and just 2kb more for styles)
- Fully customizable JSX templating
- Supports both Client-side & Server-side pagination and multi-sorting
@@ -115,18 +121,18 @@ render() {
}]
const columns = [{
- header: 'Name',
+ Header: 'Name',
accessor: 'name' // String-based value accessors!
}, {
- header: 'Age',
+ Header: 'Age',
accessor: 'age',
- render: props => {props.value} // Custom cell components!
+ Cell: props => {props.value} // Custom cell components!
}, {
id: 'friendName', // Required because our accessor is not a string
- header: 'Friend Name',
+ Header: 'Friend Name',
accessor: d => d.friend.name // Custom value accessors!
}, {
- header: props => Friend Age, // Custom header components!
+ Header: props => Friend Age, // Custom header components!
accessor: 'friend.age'
}]
@@ -157,43 +163,66 @@ These are all of the available props (and their default values) for the main `