Dynamic header label in react-table

Question

I've built a table, but I need a number of the column headers to be dynamic as the data changes as time passes. For example it displays something for this week, next week then the week after.

But in the react-table docs all I can see is hardcoded column headers. My table columns currently look like this;

const columns = [
  columnHelper.accessor("week1", {
    header: () =>"Week 1",
    cell: (info) => info.renderValue(),
    footer: (info) => info.column.id,
  }),
  columnHelper.accessor("week2", {
    header: () => "Week 2",
    cell: (info) => info.renderValue(),
    footer: (info) => info.column.id,
  }),
  columnHelper.accessor("week3", {
    header: () => "Week 3",
    cell: (info) => info.renderValue(),
    footer: (info) => info.column.id,
  }),
];

And the creation of my table looks a bit like this;

const NewTable = ({
  compsById,
  elements,
}) => {

  function getWeek(data) {
    return data.map(
          (f) =>
            `${compsById[f.bar].short_name}`
        )
  }

  const processed_elements = elements.map(e => ({
    element: e,
    week1: getWeek(next3Weeks[0].weeks[e.comp]),
    week2: getWeek(next3Weeks[1].weeks[e.comp]),
    week3: getWeek(next3Weeks[2].weeks[e.comp]),
  }));

  const [data, setData] = React.useState(() => [...processed_elements]);
  const rerender = React.useReducer(() => ({}), {})[1];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

The data in next3Weeks also contains a name/identifier for the given week. I'd like to pass that to the column for use in the header value.

score 0 · Answer 1 · answered Mar 30 '23 at 05:52

There is an HeaderContext available when using the header key in the table's config.

interface HeaderContext<TData, TValue> {
    table: Table<TData>;
    header: Header<TData, TValue>;
    column: Column<TData, TValue>;
}

You can target everything in the table with these, here's an example:

header: ({ table }) => {
  if (table.options.data.length === 0) return;

  return (
    <Checkbox
      {...{
        checked: table.getIsAllRowsSelected(),
        indeterminate: table.getIsSomeRowsSelected(),
        onChange: table.getToggleAllRowsSelectedHandler(),
      }}
   />
  );
},

Dynamic header label in react-table

1 Answers1