Adding higher-level Table components

[vankhoawin]

I've recently begun using the Table component -- totally digging the low-level API, I think I prefer it vs Table components in other design systems that have opinionated/rigid structures. There is one thing though I would want from their design systems, which is higher-level components such as a table loading/skeleton state and a pagination section. I've had to make my own primitives for the two above mentioned components:

To make the loading section, the render component looks like this:

            <Tr>
              <Td
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-ignore
                colSpan={4}
              >
                <TableSpinnerContainer>
                  <Spinner size="sizeIcon110" decorative={false} title="Loading phone mumbers..." />
                </TableSpinnerContainer>
              </Td>
            </Tr>

note that the colSpan has to span the entire header length
and also note the TableSpinnerContainer which ties to #861

And for the Pager I just defined it outside of the actual Table component as the TFoot component adds some styling that didn't mesh well.

Thoughts on some higher-level components for the Table?

[SiTaggart]

Hi @vnguyen94

If you check out the roadmap on the website https://paste.twilio.design/roadmap you'll see that Pagination is coming in this release and Skeleton screens in the next. 👍

[vankhoawin]

Ya'll are on top of everything. 👏 👏 👏 👏