I am using react-table 7.0.4 (). I want to apply a default filter for the column 'Status' ('leaveRequestStatus') when the table loads for the first time (filter is a dropdown). I tried with 'defaultFiltered' like this but doesn't work, neither the 'Pending' option is selected in the dropdown nor the data is filtered,

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.

I am using react-table 7.0.4 (https://www.npmjs./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). I tried with 'defaultFiltered' like this but doesn't work, neither the 'Pending' option is selected in the dropdown nor the data is filtered,

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.

• javascript
• reactjs
• react-table

2 Answers 2

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

    );

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

Filter needs to be mentioned as each column level.and as table row header with it's function. Please see below code sanbox:

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