Column Filters Not Working When Using Grouped Columns

[mdaushi]

I encountered an issue when trying to apply filters to a table that uses grouped columns. Filtering works fine with flat column structures, but it fails when the column configuration uses the columnHelper.group structure.

Reproduction Steps:

I defined my columns like this:

const columnHelper = createColumnHelper<MappingSubKegiatan>();

export const columns = [
  columnHelper.accessor("program_prioritas_nama", {
    id: "program_prioritas_nama",
    header: "Program Strategi / Unggulan",
    cell: ({ row }) => {
      const rowspan = row.original.row_span;
      return rowspan > 0 ? (
        <TableCell rowSpan={rowspan}>
          {row.original.program_prioritas_nama}
        </TableCell>
      ) : null;
    },
  }),
  columnHelper.group({
    id: "sub_kegiatan",
    header: "Sub Kegiatan",
    columns: [
      columnHelper.accessor("sub_kegiatan_kode", {
        id: "sub_kegiatan_kode",
        header: "Kode",
        cell: ({ getValue }) => <TableCell>{getValue()}</TableCell>,
      }),
      columnHelper.accessor("sub_kegiatan_nama", {
        id: "sub_kegiatan_nama",
        header: "Nama",
        cell: ({ getValue }) => <TableCell>{getValue()}</TableCell>,
      }),
    ],
  }),
  columnHelper.display({
    id: "actions",
    cell: ({ row }) => (
      <TableCell>
        <DataTableActions row={row} />
      </TableCell>
    ),
    size: 100,
  }),
];

Then, in my table configuration:

const dtf = createColumnConfigHelper<MappingSubKegiatan>();

export const columnsConfig = [
  dtf
    .text()
    .id("program_prioritas_nama")
    .accessor((row) => row.program_prioritas_nama)
    .displayName("Program")
    .icon(Heading1Icon)
    .build(),
  dtf
    .text()
    .id("sub_kegiatan_nama")
    .accessor((row) => row.sub_kegiatan_nama)
    .displayName("Sub Kegiatan")
    .icon(Heading1Icon)
    .build(),
] as const;

const { columns, filters, actions, strategy } = useDataTableFilters({
  strategy: "client",
  data: datas,
  columnsConfig,
});

const tstColumns = useMemo(
  () =>
    createTSTColumns({
      columns: tstColumnDefs,
      configs: columns,
    }),
  [columns]
);

const tstFilters = useMemo(() => createTSTFilters(filters), [filters]);

const table = useReactTable({
  data: datas,
  columns: tstColumns,
  getRowId: (row) => row.id,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  state: {
    columnFilters: tstFilters,
  },
});

Expected Behavior

Filters should work properly for all columns, including those nested inside a grouped column.

Please advise if grouped column filtering is supported or if there is a workaround.

[linear]

UI-156 Column Filters Not Working When Using Grouped Columns

[kharann]

did you find a workaround? @mdaushi ?

[kharann]

found a workaround

// src/components/data-table-filter/integrations/tanstack-table/index.tsx 
export function createTSTColumns<TData>({ columns, configs }: CreateTSTColumns<TData>) {
    const _cols: ColumnDef<TData>[] = [];

    for (const col of columns) {
        // This part is new
        if ("columns" in col) {
            const subCols = createTSTColumns({ columns: col.columns ?? [], configs: configs });
            _cols.push({ ...col, columns: subCols });
            continue;
        }
        // this part is not new
        const config = configs.find((c) => c.id === col.id);