TanStackT
TanStack•2y ago
thick-teal

Getting column filter initial state

So I currently have this config for my table (which is its own component):
export const DataTable = <TData, TValue>({
  data,
  columns,
  options,
  className,
  search,
}: DataTableProps<TData, TValue>) => {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
  const table = useReactTable({
    data,
    columns,
    onColumnFiltersChange: setColumnFilters,
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    initialState: {
      pagination: {
        pageSize: 8,
      },
      columnFilters: [
        {
          id: 'description',
          value: search,
        },
      ],
    },
    state: {
      columnFilters,
      sorting,
    },
  });
...


Now, in a child component I want this initial filter state for the description column:
console.log(table.getColumn('description')?.getFilterValue());
// This is always undefined


I've checked table.initialState and there is definitely something in the value field:
{
  columnSizing: {},
  columnSizingInfo: {
    startOffset: null,
    startSize: null,
    deltaOffset: null,
    deltaPercentage: null,
    isResizingColumn: false,
    columnSizingStart: []
  },
  rowSelection: {},
  expanded: {},
  grouping: [],
  sorting: [],
  columnFilters: [ { id: 'description', value: 'test' } ],
  globalFilter: undefined,
  columnPinning: { left: [], right: [] },
  rowPinning: { top: [], bottom: [] },
  columnOrder: [],
  columnVisibility: {},
  pagination: { pageIndex: 0, pageSize: 8 }
}

So can someone point me in the right direction to get the initial filter value properly?
Was this page helpful?