[RAC] Can not create a reusable wrapper with `<Table>`

[sebald]

Provide a general summary of the issue here

Using nested columns does not work when creating a "reusable wrapper" for the <Column> component.

🤔 Expected Behavior?

Should not throw an error and show a table with nested column headers.

😯 Current Behavior

Throws the following error:

A table must have at least one Column with the isRowHeader prop set to true

Moving isRowHeader to the parent column will throw a different error:

Cannot read properties of undefined (reading 'key')

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Here is a Stackblitz that shows the error. Code was directly copy/pasted from the docs :)

https://stackblitz.com/edit/stackblitz-starters-9ddrwv?file=src%2FTable.tsx

Version

1.0.0-beta.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[devongovett]

Looks like this is due to the render prop of Column.

[yihuiliao]

Just writing up some of my findings from investigating this but just to preface, I haven’t exactly pinpointed where the root issue is coming from as of right now. It seems like for some reason, the top level columns’ hasChildNode is set to false even though it should be true. As a result, we don’t continue to explore its children where isRowHeader is set, hence the error that’s thrown. Also, I'd like to add that nested columns at the top level don't do sorting.

There are some potential workarounds:

1. Instead of using a custom reusable wrapper, just simply wrap using RAC Column like so:

<Column>
  <MyColumn>First Name</MyColumn>
  <MyColumn>Last Name</MyColumn>
</Column>

2. If you would still like to use own reusable component, you could try to create the Table dynamically like so:

<TableHeader columns={columns}>
      {column => (
        <MyColumn isRowHeader={column.isRowHeader} childColumns={column.children}>
          {column.name}
        </MyColumn>
      )}
</TableHeader>

You can refer to this StackBlitz for the full code.

Not sure why the dynamic Table using a reusable wrapper works fine but doing it just statically throws an error but will spend more time looking into it.

Update:

Starting in <TableHeader>, with a dynamic table, props.children is a function and as a result, its value is passed to the CollectionRendererContext which is then consumed by <Column>. Then in <Column>, this value is passed to childColumns.

Now with a static table, we wouldn’t expect for props.children to be a function in <TableHeader> and as a result, there is no value passed to the CollectionRendererContext. This is what currently happens with the static table so nothing amiss there.

I think the real problem starts once we get into the <Column>. First, in <Column>, for the static table, props.children is always a function. As a result, we never set childColumns to any value and it is always undefined. However, we would expect the parent columns “Name” and “Information” to have childColumns set to their corresponding child columns.

The key difference as to why a dynamic table works versus a static table is because childColumns is always undefined in the static case.

[yihuiliao]

After investigating this issue, we’ve decided we’d like to update the API for nested columns and change it to mimic our Section API where we support a header component for the parent columns contents and use the Collections component to define the nested columns. Since we plan to release RAC for GA soon, we are opting to remove support for nested columns in the short term as we work on a follow-up with the API changes. Hopefully when that is all said and done, this won't be an issue anymore and will work as intended.