_.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 +612,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,7 +624,7 @@ 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
@@ -664,14 +672,15 @@ Here are the props and their corresponding callbacks that control the state of t
3: true
}
}} // The nested row indexes on the current page that should appear expanded
+ resizing={[...]} // the current resized column model
// 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)
+ onSortingChange={(newSorting, 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={(newExpandedRows, index, event) => {...}} // Called when an expander is clicked. Use this to manage `expandedRows`
+ onFilterChange={(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={(newResizing, event) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)
/>
```
@@ -712,6 +721,9 @@ 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. You can override the default sorting with the `sortingMethod` prop which takes a column value, and expects you to return a naturally sortable value. You may also override the sorting for individual columns via the `column.sortingMethod` column property.
+
## 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!
@@ -743,7 +755,10 @@ Object.assign(ReactTableDefaults, {
TdComponent: component,
TfootComponent: component,
ExpanderComponent: component,
+ AggregateComponent: 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 @@
-
+