mirror of
https://github.com/gosticks/react-table.git
synced 2026-06-29 01:20:02 +00:00
Update README.md
This commit is contained in:
85
README.md
85
README.md
@@ -561,91 +561,6 @@ const { rows } = useTable(
|
||||
)
|
||||
```
|
||||
|
||||
## `useSortBy`
|
||||
|
||||
- Optional
|
||||
|
||||
`useSortBy` is the hook that implements **row sorting**. It also support multi-sort (keyboard required).
|
||||
|
||||
### Options
|
||||
|
||||
- `state[0].filters: <Object<columnID: filterValue>`
|
||||
- Must be **memoized**
|
||||
- An object of columnID's and their corresponding filter values. This information is stored in state since the table is allowed to manipulate the filter through user interaction.
|
||||
- `defaultFilter: String | Function`
|
||||
- If a **function** is passed, it must be **memoized**
|
||||
- Defaults to [`text`](TODO)
|
||||
- The function (or resolved function from the string) will be used as the default/fallback filter method for every column that has filtering enabled.
|
||||
- If a `string` is passd functionality, but does not automatically perform row filtering. Turn this on if you wish to ied, the function with that name located on the `filterTypes` option object will be used.
|
||||
- If a `function` is passed, it will be used.
|
||||
- For mor information on filter functions, see [Filtering](TODO)
|
||||
- `manualFilters: Bool`
|
||||
- Enables filter detection anmplement your own row filter outside of the table (eg. server-side or manual row grouping/nesting)
|
||||
- `disableFilters: Bool`
|
||||
- Disables filtering for every column in the entire table.
|
||||
- `filterTypes: Object<filterKey: filterType>`
|
||||
- Must be **memoized**
|
||||
- Allows overriding or adding additional filter types for columns to use. If a column's filter type isn't found on this object, it will default to using the [built-in filter types](TODO).
|
||||
- Read more about [Filter Types](TODO)
|
||||
|
||||
### Output
|
||||
|
||||
The following values are provided to the table `instance`:
|
||||
|
||||
setFilter,
|
||||
setAllFilters,
|
||||
|
||||
- `rows: Array<Row>`
|
||||
- An array of **filtered** rows.
|
||||
- `setFilter: Function(columnID, filterValue) => void`
|
||||
- An instance-level function used to update the filter value for a specific column.
|
||||
- `setAllFilters: Function(filtersObject) => void`
|
||||
- An instance-level function used to update the values for **all** filters on the table, all at once.
|
||||
|
||||
### Example
|
||||
|
||||
```js
|
||||
// A great library for fuzzy filtering/sorting items
|
||||
import matchSorter from 'match-sorter'
|
||||
|
||||
const state = useTableState({ filters: { firstName: 'tanner' } })
|
||||
|
||||
const filterTypes = React.useMemo(() => ({
|
||||
// Add a new fuzzyText filter type.
|
||||
fuzzyText: (rows, id, filterValue) => {
|
||||
return matchSorter(rows, filterValue, { keys: [row => row[id] })
|
||||
},
|
||||
// Or, override the default text filter to use
|
||||
// "startWith"
|
||||
text: (rows, id, filterValue) => {
|
||||
return rows.filter(row => {
|
||||
const rowValue = row.values[id]
|
||||
return rowValue !== undefined
|
||||
? String(rowValue)
|
||||
.toLowerCase()
|
||||
.startsWith(String(filterValue).toLowerCase())
|
||||
: true
|
||||
})
|
||||
}
|
||||
}), [matchSorter])
|
||||
|
||||
const { rows } = useTable(
|
||||
{
|
||||
// state[0].groupBy === ['firstName']
|
||||
state,
|
||||
// Override the default filter to be our new `fuzzyText` filter type
|
||||
defaultFilter: 'fuzzyText',
|
||||
manualFilters: false,
|
||||
disableFilters: false,
|
||||
// Pass our custom filter types
|
||||
filterTypes,
|
||||
},
|
||||
useColumns,
|
||||
useRows,
|
||||
useSortBy
|
||||
)
|
||||
```
|
||||
|
||||
# Guides
|
||||
|
||||
## Client Side Pagination
|
||||
|
||||
Reference in New Issue
Block a user