mirror of
https://github.com/gosticks/react-table.git
synced 2025-10-16 11:55:36 +00:00
4.6 KiB
4.6 KiB
useFilters
- Plugin Hook
- Optional
useFilters is the hook that implements row filtering.
Table Options
The following options are supported via the main options object passed to useTable(options)
state.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.
initialState.filters- Identical to the
state.filtersoption above
- Identical to the
manualFilters: Bool- Enables filter detection functionality, but does not automatically perform row filtering.
- Turn this on if you wish to implement 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.
defaultCanFilter: Bool- Optional
- Defaults to
false - If set to
true, all columns will be filterable, regardless if they have a validaccessor
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.
- For more information on filter types, see Filtering
autoResetFilters: Boolean- Defaults to
true - When
true, thefiltersstate will automatically reset if any of the following conditions are met:datais changed
- To disable, set to
false - For more information see the FAQ "How do I stop my table state from automatically resetting when my data changes?"
- Defaults to
Column Options
The following options are supported on any Column object passed to the columns options in useTable()
Filter: Function | React.Component => JSX- Required
- Receives the table instance and column model as props
- Must return valid JSX
- This function (or component) is used to render this column's filter UI, eg.
disableFilters: Bool- Optional
- If set to
true, will disable filtering for this column
defaultCanFilter: Bool- Optional
- Defaults to
false - If set to
true, this column will be filterable, regardless if it has a validaccessor
filter: String | Function- Optional
- Defaults to
text - The resolved function from the this string/function will be used to filter the this column's data.
- If a
stringis passed, the function with that name located on either the customfilterTypesoption or the built-in filtering types object will be used. If - If a
functionis passed, it will be used directly.
- If a
- For more information on filter types, see Filtering
- If a function is passed, it must be memoized
Instance Properties
The following values are provided to the table instance:
rows: Array<Row>- An array of filtered rows.
preFilteredRows: Array<Row>- The array of rows used right before filtering.
- Among many other use-cases, these rows are directly useful for building option lists in filters, since the resulting filtered
rowsdo not contain every possible option.
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.
Column Properties
The following properties are available on every Column object returned by the table instance.
canFilter: Bool- Denotes whether a column is filterable or not depending on if it has a valid accessor/data model or is manually disabled via an option.
setFilter: Function(filterValue) => void- A column-level function used to update the filter value for this column
filterValue: any- The current filter value for this column, resolved from the table state's
filtersobject
- The current filter value for this column, resolved from the table state's
preFilteredRows: Array<row>- The array of rows that were originally passed to this columns filter before they were filtered.
- This array of rows can be useful if building faceted filter options.
filteredRows: Array<row>- The resulting array of rows received from this columns filter after they were filtered.
- This array of rows can be useful if building faceted filter options.