diff --git a/README.md b/README.md
index 64ab9bc..b031596 100644
--- a/README.md
+++ b/README.md
@@ -28,8 +28,14 @@
-## 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
@@ -157,37 +163,63 @@ These are all of the available props (and their default values) for the main ` {
const id = filter.pivotId || filter.id
return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
},
- resizable: true,
- defaultResizing: [],
- defaultSortMethod: undefined,
+ 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, undefined or any falsey value will use subsequent sorts or the index as a tiebreaker
+ return 0
+ },
// Controlled State Overrides (see Fully Controlled Component section)
page: undefined,
pageSize: undefined,
- sorting: undefined,
- expandedRows: {},
+ sorted: [],
+ filtered: [],
+ resized: [],
+ expanded: {},
// Controlled State Callbacks
onExpandSubComponent: undefined,
onPageChange: undefined,
onPageSizeChange: undefined,
- onSortingChange: undefined,
- onFiltersChange: undefined,
- onResize: undefined,
- onExpandRow: undefined,
+ onSortedChange: undefined,
+ onFilteredChange: undefined,
+ onResizedChange: undefined,
+ onExpandedChange: undefined,
// Pivoting
pivotBy: undefined,
+
+ // Key Constants
pivotValKey: '_pivotVal',
pivotIDKey: '_pivotID',
subRowsKey: '_subRows',
+ aggregatedKey: '_aggregated',
+ nestingLevelKey: '_nestingLevel',
+ originalKey: '_original',
+ indexKey: '_index',
+ groupedByPivotKey: '_groupedByPivot',
// Server-side callbacks
onFetchData: () => null,
@@ -250,6 +282,7 @@ These are all of the available props (and their default values) for the main ` ({}),
filterMethod: undefined,
+ sortMethod: undefined,
hideFilter: false
},
@@ -668,8 +701,8 @@ If you want to handle pagination, sorting, and filtering on the server, `react-t
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
@@ -721,10 +754,10 @@ Here are the props and their corresponding callbacks that control the state of t
// 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={(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`
- onFiltersChange={(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.
- onResize={(newResizing, event) => {...}} // 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)
/>
```
@@ -766,13 +799,14 @@ 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.
+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!
## Custom Sorting Algorithm
To override the default sorting algorithm for the whole table use the `defaultSortMethod` prop.
+
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:
@@ -808,7 +842,7 @@ By default the table tries to filter by checking if the row's value starts with
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 `onFiltersChange` 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.
diff --git a/src/defaultProps.js b/src/defaultProps.js
index 443e58b..9138483 100644
--- a/src/defaultProps.js
+++ b/src/defaultProps.js
@@ -67,7 +67,7 @@ export default {
// Pivoting
pivotBy: undefined,
- // Key Costansts
+ // Key Constants
pivotValKey: '_pivotVal',
pivotIDKey: '_pivotID',
subRowsKey: '_subRows',
@@ -138,6 +138,7 @@ export default {
footerStyle: {},
getFooterProps: emptyObj,
filterMethod: undefined,
+ sortMethod: undefined,
hideFilter: false
},
@@ -146,7 +147,6 @@ export default {
sortable: false,
width: 35,
hideFilter: true
- // render: undefined // this is a dynamic default, set at run-time in methods.js to display ExpanderComponent
},
pivotDefaults: {