getHeadingsFromChildren forces use of string as table cell child

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

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.

@KaiSpencer

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

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?

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>

This is fixed in #267

Navigation Menu

Repository navigation

getHeadingsFromChildren forces use of string as table cell child #105

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

getHeadingsFromChildren forces use of string as table cell child #105

Description

Activity

KaiSpencer commented on Aug 17, 2021

8lane commented on Aug 18, 2021

Tomdango commented on Sep 7, 2021

mikemonteith commented on Sep 23, 2024

colinrotherham commented on Sep 29, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions