Skip to main content

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

Anchor to hasNextPage
hasNextPage
boolean

Whether there's an additional page of data.

Anchor to hasPreviousPage
hasPreviousPage
boolean

Whether there's a previous page of data.

Anchor to loading
loading
boolean

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.

Anchor to paginate
paginate
boolean

Whether to use pagination controls.

Anchor to variant
variant
"auto" | "list"

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.
Was this section helpful?

Anchor to slotsSlots

Anchor to filters
filters
HTMLElement

Additional filters to display in the table. For example, the s-search-field component can be used to filter the table data.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events.

Anchor to nextpage
nextpage
<typeof tagName> | null
Anchor to previouspage
previouspage
<typeof tagName> | null
Was this section helpful?

Anchor to tablebodyTableBody

Define the main content area of a table, containing rows and cells that display data.

Was this section helpful?

Anchor to tablecellTableCell

Display data within a cell in a table row.

Was this section helpful?

Anchor to tableheaderTableHeader

Display column names at the top of a table.

Anchor to format
format

The format of the column. Will automatically apply styling and alignment to cell content based on the value.

  • base: The base format for columns.
  • currency: Formats the column as currency.
  • numeric: Formats the column as a number.
Anchor to listSlot
listSlot

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.
Was this section helpful?

Anchor to tableheaderrowTableHeaderRow

Define a header row in a table, displaying column names and enabling sorting.

Was this section helpful?

Anchor to tablerowTableRow

Display a row of data within the body of a table.

Anchor to clickDelegate
clickDelegate
string

The ID of an interactive element (e.g. s-link) in the row that will be the target of the click when the row is clicked. This is the primary action for the row; it should not be used for secondary actions.

This is a click-only affordance, and does not introduce any keyboard or screen reader affordances. Which is why the target element must be in the table; so that keyboard and screen reader users can interact with it normally.

Was this section helpful?

Code

<s-table>
<s-table-header-row>
<s-table-header>Name</s-table-header>
<s-table-header>Email</s-table-header>
<s-table-header>Phone</s-table-header>
</s-table-header-row>
<s-table-body>
<s-table-row>
<s-table-cell>John Doe</s-table-cell>
<s-table-cell>john.doe@example.com</s-table-cell>
<s-table-cell>123-456-7890</s-table-cell>
</s-table-row>
<s-table-row>
<s-table-cell>Jane Doe</s-table-cell>
<s-table-cell>jane.doe@example.com</s-table-cell>
<s-table-cell>123-456-7890</s-table-cell>
</s-table-row>
<s-table-row>
<s-table-cell>Brandon Doe</s-table-cell>
<s-table-cell>brandon.doe@example.com</s-table-cell>
<s-table-cell>123-456-7890</s-table-cell>
</s-table-row>
</s-table-body>
</s-table>

Preview