[v8] Render Header from within cell

[sjbuysse]

How can you render the header when you only have access to the cell instance`?

in v7 you could do this:

{cell.column.render('Header')}

[LinnJS]

@sjbuysse In the Cell.column I believe you can find what you want.

You can just drill into column to get the columnDef then in the columnDef there is a Cell component.

So something like:

const headerCell = cell.column.columnDef.Cell

return <Cell />

This should work let me know if you have any more questions.

[sjbuysse]

Hi @LinnJS , Maybe my question wasn't clear enough, but I want to be able to render the column header inside the cell
Indeed I have access to the columnDef through the cell, but I don't have access to the header context, and so flexRender will complain about that 2nd argument.

                      row.getVisibleCells().map((cell) => {
                        // Apply the cell props
                        return (
                          <td
                            key={cell.id}
                            className="table-data flex sm:static sm:w-auto sm:table-cell"
                          >
                            <span className="sm:hidden left-0 px-2 inline-block min-w-[35%] py-1 font-bold">
                              <div className="flex">
                                {/* todo: render header
  ==> How can I render the header in this place? 
                               */}
                              </div>
                            </span>
                            <span className="break-all">
                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
                            </span>
                          </td>
                        );
                      })

[dennemark]

same question! How can I get the context of the header?
on a cell we can get the cell, header and cell.getContext, but not header context.

[dennemark]

My workaround is, to get the header groups via table.getHeaderGroups()
However, this only shows visible header groups and not those, that are invisible.
So I would have to go back to get all cells of a row, but then I cannot render the header. Anyway to get the header context from a cell?

[dennemark]

ok simple any trick that seems to work with typescript: flexRender<any>(column.columnDef.header, {})
allows to render header from a column or cell without having the header context..

[LasaleFamine]

Thank you @dennemark, we just spent 2 hours understanding how to render a simple label...

[wibed]

additionally to access the columnDef.header directly, you'd have to make sure you do define the header within the columnDef as a string, (not a function or anything else, as beginner examples might suggest):

  columnHelper.accessor('age', {
    header: "Age",
    cell: info => info.renderValue(),
    footer: info => info.column.id,
  }),

[nemanjam]

ok simple any trick that seems to work with typescript: flexRender<any>(column.columnDef.header, {}) allows to render header from a column or cell without having the header context..

it returns strings and objects