Hiding columns based on window width (v8)

[mrperrytpx]

Just wondering if there's a better way to hide specific column(s) based on current window width, other than using toggleVisibility() in a useEffect?

What I currently have

useEffect(() => {
    if (width < 1000) {
      table.getColumn(Id).toggleVisibility(false);
    } else {
      table.getColumn(Id).toggleVisibility(true);
    }
  }, [width, table]);

Been looking through docs for available table methods and other stuff but I can't figure out another way.
Not necessarily looking for a code snippet, would just need a general direction I guess

[KevinVandy]

If you are using divs, I recommend looking at the TanStack Virtual package to virtualize the columns. Can work hand in hand with TanStack Table.

[sahnisarbjit]

Hi @mrperrytpx, bit late reply but hope someone find this helpful.

Interface for column meta as officially typed is a generic one:

export interface ColumnMeta {
  columnClasses: string;
}

Inside column def, I do this:

{
  header: 'Enabled',
  accessorKey: 'enabled',
  meta: { columnClasses: 'hidden md:table-cell' } as ColumnMeta,
},

And lastly, inside your generic DataTable component, here is how head and cell is being rendered in JSX:

<TableHead
  key={header.id}
  className={(header.column.columnDef.meta as ColumnMeta)?.columnClasses}
>
  {header.isPlaceholder
    ? null
    : flexRender(header.column.columnDef.header, header.getContext())}
</TableHead>

<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
  {row.getVisibleCells().map((cell) => (
    <TableCell
      key={cell.id}
      className={(cell.column.columnDef.meta as ColumnMeta)?.columnClasses}
    >
      {flexRender(cell.column.columnDef.cell, cell.getContext())}
    </TableCell>
  ))}
</TableRow>

After this you can use tailwind classes you need using meta on any column 100s of places just 1 line.