How to create table with nested columns

[cindy-li-qa]

I want to create a table with some nested columns like this

But got this when set columns to
const columns = [
{
Header: 'Team',
accessor: 'team',
style: {
textAlign: "center",
whiteSpace: "unset",
},
},
{
Header: 'Q1',
columns: [
{
Header: 'Jan',
accessor: 'jan',
style: {
textAlign: "center",
whiteSpace: "unset",
},
},
{
Header: 'Feb',
accessor: 'feb',
style: {
textAlign: "center",
whiteSpace: "unset",
},
},
{
Header: 'Mar',
accessor: 'mar',
style: {
textAlign: "center",
whiteSpace: "unset",
},
},
]
},
...
]

Can someone tell me how to fix this?

[tannerlinsley]

This is currently not supported in React Table as far as I know without a lot of custom work in userland. I imagine you would be better off asking this question in Discussions, so I'm going to convert it as such.

[amaster507]

Could this somehow be fixed by moving Team to the 1st header row and then see that it has no columns while other headers have columns so it adds a rowspan=2 attribute?

[Bonnevie]

I needed this exact feature myself, and have a solution that seems to get the job done, but laying things out using rowSpan grates a bit against react-table's placeholder-based header layout. Currently I'm reprocessing the headers, removing placeholders, restructuring the tree as appropriate, adding rowSpan, and then flattening into a headerGroups-like array. Is there a way to customise or avoid adding placeholders and maybe taking control of how the headerGroups are formed? Adding placeholders seems to go a bit against react-table's design principle of unopinonatedness.

While a somewhat adversarial example, combining different levels of nesting can lead to undesirable results where header cells get split into two or more parts:

which was accomplished by passing this header object where info only occurs once:

[
  {
    Header: 'Name',
    columns: [
      {
        Header: 'First Name',
        accessor: 'firstName',
      },
      {
        Header: 'Last Name',
        accessor: 'lastName',
      },
    ],
  },
  {
    Header: 'Info',
    columns: [
      {
        Header: 'Age',
        accessor: 'age',
      },
      {
        Header: 'Activity',
        columns: [

          {
            Header: 'Visits',
            accessor: 'visits',
          },
          {
            Header: 'Status',
            accessor: 'status',
          },
          {
            Header: 'Profile Progress',
            accessor: 'progress',
          },
        ]
      }
    ]
  },
]

[sdancer75]

With this structure, the size of each column specified is not respected. All columns have the same size. Do I have to add an extra attribute?

[klausXR]

@tannerlinsley is it possible to create a special column that handles its children differently?

This effect can be accomplished with rowspan property ( by rendering two rows in thead ), or it can be accomplished by manually rendering a grid inside the table header/cell/footer, like this

<table>
  <thead>
    <tr>
      <th>Name</th>

      <th>
        <header>Activity</header>

        <div class="grid grid-cols-3">
          <div>Visits</div>
          <div>Status</div>
          <div>Profile Progress</div>
        </div>
      </th>
    </tr>
  </thead>
</table>

The app that I'm working on is full of these tables and their management is kind of messy without a library, so I'm contemplating to write one from scratch with the basic features that we need, however, if there's a way to get it working with react-table it would be much better.

The trick with the second approach is that the child columns must be present as actual columns in the table, so that they can be hidden, for example, but they must not render based on the regular flow.

I see that this issue is 3 years old now, has something been added to react table that makes this possible?

Thanks.

[OlIvAl]

Hi guys!
I have absolutely the same problem
Could you please help us to find solution, how to create complex table header?
Could you share some examples?
I see that this question is quite popular and the answer is highly desired by lots of members of our community

[klausXR]

I asked on their discord but didnt get any replies.

@tannerlinsley any ideas?

[Shen120]

I asked on their discord but didnt get any replies.

@tannerlinsley any ideas?

#4816