[英]How to add react-table default filter
I am using react-table 7.0.4 ( https://www.npmjs.com/package/react-table ).我正在使用 react-table 7.0.4 ( https://www.npmjs.com/package/react-table )。 I want to apply a default filter for the column 'Status' ('leaveRequestStatus') when the table loads for the first time (filter is a dropdown).我想在第一次加载表时为列“状态”(“leaveRequestStatus”)应用默认过滤器(过滤器是一个下拉列表)。 I tried with 'defaultFiltered' like this but doesn't work, neither the 'Pending' option is selected in the dropdown nor the data is filtered,我尝试过这样的“defaultFiltered”,但不起作用,下拉列表中既没有选择“Pending”选项,也没有过滤数据,
const columns = React.useMemo(() => [
{
Header: 'Status',
accessor: 'leaveRequestStatus',
id: 'leaveRequestStatus',
Filter: SelectColumnFilter,
filter: 'includes',
},
....
<Table columns={columns} data={data} defaultFiltered={[{id:'leaveRequestStatus', value:'Pending'}]} />
Is there another way to do this?还有另一种方法可以做到这一点吗? Thanks.谢谢。
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable( { columns, data, initialState: { filters: [ { id: 'leaveRequestStatus', value: 'Pending', }, ], }, }, useFilters, );
https://react-table.tanstack.com/docs/api/useFilters https://react-table.tanstack.com/docs/api/useFilters
Filter needs to be mentioned as each column level.and as table row header with it's function.过滤器需要作为每个列级别提及。作为表格行 header 和它的 function。 Please see below code sanbox:请参阅下面的代码沙箱:
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering?file=/src/App.js:7168-7180 https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering?file=/src/App.js:7168-7180
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.