Tables are used to display data organized in rows and columns. Base Web provides a couple different table components that are appropriate in various situations.
You should generally default to using the
table-semantic version. This
component, which uses the standard
<table> element, will have accessibility ready to go, supports
row/column spans, and will dynamically size column widths based on content. It will be most appropriate
when displaying a smaller number of rows or is paginated. It includes sorting and row selection features
If you are rendering many rows, want to support infinite scrolling, or need data-analysis features like
filtering, sorting, and search you may be looking for the
This component does not support overrides like other Base Web components and requires data to align with
strict column schemas. Unlike other options it does not support cell/column spans or dynamic row heights.
Think of this as something closer to Excel rather than a standard table.
Base Web publishes two additional tables that are not quite as useful as the above, but may be appropriate in niche situtaions.
First is the
table-grid. This table ustilizes
for layout which some developers prefer over the semantic table element. It will require a custom
accessibility solution, but supports some alternative row/column spans.
Last is a div-based
table. This is only recommended in situations where 'expanding
rows' is required and your application needs to support browsers without
css-grid. If you are only
targeting newer browsers,
table-grid is better, but even then it doesn't have great accessibility support.
Please have good reason to use these last two table components.