feat: add DataTable and Table to drafts

[joshblack]

Closes https://github.com/github/primer/issues/1814

This PR adds DataTable and Table to the drafts bundle with the following API:

• DataTable
• Table.*
  • Table.Container
  • Table.Title
  • Table.Subtitle
  • Table
  • Table.Head
  • Table.Body
  • Table.Row
  • Table.Header
  • Table.Cell

The idea behind this implementation is that DataTable is an alternative to Table and can slot into that position:

<Table.Container>
  <Table.Title id="table-title">Repositories</Table.Title>
  <DataTable
    aria-labelledby="table-title"
    // ...
  />
</Table.Container>

Table may also be used there and each part of Table is available under that identifier.

One risk with this approach is that Table.* contains both descendants of a Table and ancestors like Container, Title, or Subtitle. The risk here would be that certain terms may be overloaded, like in Table.Header. This would refer to a <th> but in the context of a layout within Table.Container would refer to the header region of a layout.

Changelog

New

• Add tests for Table.* components

Changed

• Update interface to type
• Split up into DataTable.tsx and Table.tsx
• Add Table and DataTable to drafts entrypoint
• Add explicit role tags for th, tr, td for usage of display: grid for column width options

Removed

[changeset-bot]

🦋 Changeset detected

Latest commit: 6a6d850

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	94.49 KB (0%)
dist/browser.umd.js	95.07 KB (0%)

[broccolinisoup]

I am wondering when will be the best time to start exporting new components in experimental bundle instead of drafts? According to the ADR

[joshblack]

Great point, reached out about this over in Slack to see where that work is. For this PR I'll add it to drafts and will add it to experimental once that gets created 👀

[colebemis]

Exciting to see this take shape!

[colebemis]

✨

[colebemis]

Should we export any prop types?

[joshblack]

Makes sense to me as part of the definition of done. To implement this, should I include props as exports for any exported component?