如何添加反应表默认过滤器

Question

我正在使用反应表7.0.4（https://www.npmjs.com/package/react-table）。我想在表首次加载时为“状态”列（“ leaveRequestStatus”）应用默认过滤器（过滤器是一个下拉列表）。我曾尝试使用'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'}]} />

还有另一种方法吗？谢谢。

Answer 1

过滤器需要在每个列级别和功能的表行标题中提及。请参见下面的代码sanbox：

https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering?file=/src/App.js:7168-7180

Answer 2

 const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
        {
            columns,
            data,
            initialState: {
                filters: [
                    {
                        id: 'leaveRequestStatus',
                        value: 'Pending',
                    },
                ],
            },
        },
        useFilters,

    );

https://react-table.tanstack.com/docs/api/useFilters