Table
Display data clearly in rows and columns, helping users view, analyze, and compare information. Automatically renders as a list on small screens and a table on large ones.
Anchor to propertiesProperties
Whether there's an additional page of data.
Whether there's a previous page of data.
Whether the table is in a loading state, such as initial page load or loading the next page in a paginated table. When true, the table could be in an inert state, which prevents user interaction.
Whether to use pagination controls.
Sets the layout of the Table.
list: The Table is always displayed as a list.table: The Table is always displayed as a table.auto: The Table is displayed as a table on wide devices and as a list on narrow devices.
Anchor to slotsSlots
Additional filters to display in the table. For example, the s-search-field component can be used to filter the table data.
Anchor to eventsEvents
Learn more about registering events.
Anchor to tablebodyTableBody
Define the main content area of a table, containing rows and cells that display data.
Anchor to tablecellTableCell
Display data within a cell in a table row.
Anchor to tableheaderTableHeader
Display column names at the top of a table.
Content designation for the table's list variant.
primary': The most important content. Only one column can have this designation.secondary: The secondary content. Only one column can have this designation.kicker: Content that is displayed before primary and secondary content, but with less visual prominence. Only one column can have this designation.inline: Content that is displayed inline.labeled: Each column with this designation displays as a heading-content pair.
Anchor to tableheaderrowTableHeaderRow
Define a header row in a table, displaying column names and enabling sorting.
Anchor to tablerowTableRow
Display a row of data within the body of a table.