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.

Table Semantic

NameAgeAddress
Sarah Brown31100 Broadway St., New York City, New York
Jane Smith32100 Market St., San Francisco, California
Joe Black33100 Macquarie St., Sydney, Australia

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.

Data Table

Search

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.

Table Grid

Name
Date
Event
2019-07-22 12:00 AM
jh3y added a commit
2019-07-22 12:00 AM
chasestarr left a comment
2019-07-22 12:00 AM
jh3y left a comment
2019-07-22 12:00 AM
chasestarr left a comment
2019-07-22 12:00 AM
chasestarr left a comment
2019-07-22 12:00 AM
jh3y added a commit
2019-07-22 12:00 AM
jh3y added a commit
2019-07-22 12:00 AM
jh3y marked this pull request as ready
2019-07-22 12:00 AM
jh3y added a commit
2019-07-22 12:00 AM
chasestarr left a comment
2019-07-22 12:00 AM
jh3y left a comment
2019-07-22 12:00 AM
chasestarr left a comment
2019-07-22 12:00 AM
chasestarr left a comment
2019-07-22 12:00 AM
jh3y added a commit
2019-07-22 12:00 AM
jh3y added a commit
2019-07-22 12:00 AM
jh3y marked this pull request as ready
2019-07-22 12:00 AM
jh3y added a commit
2019-07-22 12:00 AM
chasestarr left a comment
2019-07-22 12:00 AM
jh3y left a comment
2019-07-22 12:00 AM
chasestarr left a comment
2019-07-22 12:00 AM
chasestarr left a comment
2019-07-22 12:00 AM
jh3y added a commit
2019-07-22 12:00 AM
jh3y added a commit
2019-07-22 12:00 AM
jh3y marked this pull request as ready

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.

Table

Name
Age
Address
Sarah Brown
31
100 Broadway st. New York City, New York
Jane Smith
32
100 Market st. San Francisco, California
Joe Black
33
100 Macquarie st. Sydney, Australia