getHeadingsFromChildren forces use of string as table cell child

[8lane]

Hi 👋

I'm upgrading to use the v2 beta version on a project and had some issues around the responsive table component. My bad If I'm doing something totally wrong but looks to me like this might be something that could be tweaked.

My table is dynamically created using the react-table library and the table cell values are rendered via a method. This used to work fine in v1, but in v2 due to the responsive changes and more specifically the getHeadingsFromChildren helper, we can no longer use anything other than a string as a child of Table.Cell.

My code:

<Table.Head>
  {headerGroups.map((headerGroup) => {
    const { ...headerGroupProps } = headerGroup.getHeaderGroupProps()
    return (
      <Table.Row {...headerGroupProps} key={headerGroupProps.key}>
        {headerGroup.headers.map((column) => {
          const { ...headerProps } = column.getHeaderProps()
          return (
            <Table.Cell
              {...headerProps}
              key={headerProps.key}
              {column.render('Header')}
            </Table.Cell>
          )
        })}
      </Table.Row>
    )
  })}
</Table.Head>

What gets rendered now:

I fixed this for now by importing renderToString from react-dom/server but this isn't an ideal solution

Thanks

[KaiSpencer]

Hi @tctc91
Ive just tested with version 2.0.0-beta.1, installing react-table and followed the quick start guide here. This is rendering with the responsive table fine for me.

Could you share a minimal repo to check your react-table implementation, as {column.render('Header')} didn't produce what you described above.

[8lane]

Thanks for the quick reply @KaiSpencer. Apologies, I missed an important point in that my column headers are setup using i18n translations e.g

  const columns: Array<Column> = useMemo(
    () => [
      {
        Header: () => t('locale.path.here'),
        accessor: 'columnId',
      },
    ],
    [],
  )

I'll get a demo setup today

[Tomdango]

Hi, this is a known limitation of the current responsive table implementation - do you think it would be useful to allow React components in cell headers?

[mikemonteith]

We have a use case for this too:

<Table.Row role="row">
  <Table.Cell role="columnheader">Name</Table.Cell>
  <Table.Cell role="columnheader">Email address</Table.Cell>
  <Table.Cell role="columnheader">Permission level</Table.Cell>
  <Table.Cell role="columnheader">Status</Table.Cell>
  <Table.Cell role="columnheader"><span className="nhsuk-u-visually-hidden">Edit user</span></Table.Cell>
</Table.Row>