Looking for a way to create a more complex table header

[pcolmer]

Out of the box, the Table has a relatively straightforward, text-only, design:

Our in-house designer has used Figma to place a table on the layout. Their concept for the table is that the columns fall into categories, so they've got a "row" above the column headers that shows which category each column belongs to. Those have a colour-filled background.

Can anyone suggest how we can try to re-use the existing Table but extend how the headers are dealt with? The example for the embedded table seems to suggest we might be able to use some HTML in there to achieve this?

      columnDefinitions={[
        {
          id: "variable",
          header: "Variable name",
          cell: item => (
            <Link href="#">{item.name || "-"}</Link>
          ),
          sortingField: "name",
          isRowHeader: true
        },
        {
          id: "alt",
          header: "Text value",
          cell: item => item.alt || "-",
          sortingField: "alt"
        },
        {
          id: "description",
          header: "Description",
          cell: item => item.description || "-"
        }

Or do we need to find a way to extend the code somehow? Is that possible?

[YueyingLu]

Hi Philip,
thanks for reaching out.
Unfortunately we currently do not support grouping column headers in table, and don’t have any plans for this change in the short-term future yet.

[pcolmer]

Unfortunately we currently do not support grouping column headers in table, and don’t have any plans for this change in the short-term future yet.

That's fine - I wasn't expecting my inquiry to result in a change to the code.

I've been looking at how the Table component works and I think it is reasonably straightforward for us to duplicate the code and make our own custom version ... but the drawback to that approach is keeping our derivation in sync with any future code changes the original code might have.

If you have any recommendations on how best to either extend the Table functionality, or how best to make our own version in a way that makes it easier to keep the codebases in sync, that would be much appreciated.

[pcolmer]

@YueyingLu following up on this discussion, we have decided to take the approach of forking the repo and then customising the code.

However, it looks like the default steps to build the code don't include the standard theming that Cloudscape uses. Are there additional steps required or have we missed some configuration or something like that?

[YueyingLu]

Hey @pcolmer,
thank you for letting us know, we are working on it. For now, you can add CSS class awsui-visual-refresh to the body tag of your web page before the first render. Like

document.body.classList.add('awsui-visual-refresh');
root.render(<App />);