How to set default filter in tanstack table v8

1.7k views Asked by At

The following is my tanstack table in react

const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        onSortingChange: setSorting,
        getSortedRowModel: getSortedRowModel(),
        onColumnVisibilityChange: setColumnVisibility,
        onColumnFiltersChange: setColumnFilters,
        getFilteredRowModel: getFilteredRowModel(),
        filterFromLeafRows: false,
        getFacetedRowModel: getFacetedRowModel(),
        getFacetedUniqueValues: getFacetedUniqueValues(),
        state: {
            sorting,
            columnFilters,
            columnVisibility,
        },
        initialState: {
            pagination: {
                pageSize: 8,
            },
            columnFilters: [
                {
                    id: 'owner',
                    value: 'Alice',
                }
            ]
        }
    });

As you can see, I have added the column filter in the initial state, but that seems to have no effect.

I aim to filter the column owner, with the default value Alice.

1

There are 1 answers

1
0stone0 On BEST ANSWER

You should add columnFilters to the state key as well.

For eaxmple:

 const table = useReactTable({
    data,
    columns,
    state: {
      columnFilters: [
            {
                id: 'owner',
                value: 'Alice',
            }
        ]
    },
    ...