Tables

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 as well.

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 data-table version. 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 css-grid 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.