Add table components

[pearlzhuzeng]

What does this PR do?

This PR adds eight table components (listed below), four table examples, and a docs page with the examples.

• TableContainer Sets border and box-shadow for the table, and serves as the table's scrollable container.
• Table Has four variants: 'outlined' (default), 'contained', 'striped', and 'ghost'. Accepts color provider context. Default to have the first column sticky on scroll, overridable by setting stickyFirstColumn to false.
• TableRow On hover, default to have a background color based on the context color. Can turn the hover effect off by setting hoverable to false. And changing the color prop on Table will change the background color on hover. Note: I used lighten instead of transparentize on the background color, so that when table content is being scrolled under the sticky first column, there won't be overlapping backgrounds. And because I used lighten to dynamically set the hover background, it doesn't work with every color. For example, when the color is too dark, we'd end up with a very dark hover background color, and vice versa. Need to think of a way to check color contrast and generate a different color in those cases.
• TableHead
• TableHeaderCell
• TableBody
• TableBodyCell
• TableCaption

Screenshots

Outlined table with caption

Contained table with a different row hover color

Scrollable striped table with fixed first column

Ghost table

Closes #26

[pearlzhuzeng]

Hey @ricokahler, thank you for the suggestions! I didn't know that we can define a component by just doing const TableBody = 'tbody', very nice and simple (and consistent).

I made updates according to your suggestions, except for the createData function, which I think is a pretty straightforward function.

[github-actions[bot]]

Size Change: +1.74 kB (7%) 🔍

Total Size: 24.1 kB

Filename	Size	Change
dist/bundle.esm.js	10.4 kB	+750 B (7%)	🔍
dist/bundle.umd.js	13.7 kB	+993 B (7%)	🔍

_{compressed-size-action}