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 hasNextPagehasNextPagebooleanDefault: false
Whether there's an additional page of data.
- Anchor to hasPreviousPagehasPreviousPagebooleanDefault: false
Whether there's a previous page of data.
- Anchor to loadingloadingbooleanDefault: false
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 paginatepaginatebooleanDefault: false
Whether to use pagination controls.
- Anchor to variantvariant"auto" | "list"Default: 'auto'
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
- Anchor to childrenchildrenHTMLElement
The content of the Table.
- Anchor to filtersfiltersHTMLElement
Additional filters to display in the table. For example, the
s-search-fieldcomponent can be used to filter the table data.
Anchor to eventsEvents
Learn more about registering events.
- Anchor to nextpagenextpageCallbackEventListener<typeof tagName> | null
- Anchor to previouspagepreviouspageCallbackEventListener<typeof tagName> | null
CallbackEventListener
(EventListener & {
(event: CallbackEvent<T>): void;
}) | nullCallbackEvent
Event & {
currentTarget: HTMLElementTagNameMap[T];
}Anchor to tablebodyTableBody
Define the main content area of a table, containing rows and cells that display data.
Anchor to slotsSlots
- Anchor to childrenchildrenHTMLElement
The body of the table. May not have any semantic meaning in the Table's
listvariant.
Anchor to tablecellTableCell
Display data within a cell in a table row.
Anchor to slotsSlots
- Anchor to childrenchildrenHTMLElement
The content of the table cell.
Anchor to tableheaderTableHeader
Display column names at the top of a table.
- Anchor to formatformatHeaderFormat
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 listSlotlistSlotListSlotTypeDefault: 'labeled'
Content designation for the table's
listvariant.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.
HeaderFormat
'base' | 'numeric' | 'currency'ListSlotType
'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'Anchor to slotsSlots
- Anchor to childrenchildrenHTMLElement
The heading of the column in the
tablevariant, and the label of its data inlistvariant.
Anchor to tableheaderrowTableHeaderRow
Define a header row in a table, displaying column names and enabling sorting.
Anchor to slotsSlots
- Anchor to childrenchildrenHTMLElement
Contents of the table heading row; children should be
components.
Anchor to tablerowTableRow
Display a row of data within the body of a table.
- Anchor to clickDelegateclickDelegatestring
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.
Anchor to slotsSlots
- Anchor to childrenchildrenHTMLElement
The content of a TableRow, which should be
components.
Examples
<s-section padding="none">
<s-table>
<s-table-header-row>
<s-table-header>Name</s-table-header>
<s-table-header>Email</s-table-header>
<s-table-header format="numeric">Orders placed</s-table-header>
<s-table-header>Phone</s-table-header>
</s-table-header-row>
<s-table-body>
<s-table-row>
<s-table-cell>John Smith</s-table-cell>
<s-table-cell>john@example.com</s-table-cell>
<s-table-cell>23</s-table-cell>
<s-table-cell>123-456-7890</s-table-cell>
</s-table-row>
<s-table-row>
<s-table-cell>Jane Johnson</s-table-cell>
<s-table-cell>jane@example.com</s-table-cell>
<s-table-cell>15</s-table-cell>
<s-table-cell>234-567-8901</s-table-cell>
</s-table-row>
<s-table-row>
<s-table-cell>Brandon Williams</s-table-cell>
<s-table-cell>brandon@example.com</s-table-cell>
<s-table-cell>42</s-table-cell>
<s-table-cell>345-678-9012</s-table-cell>
</s-table-row>
</s-table-body>
</s-table>
</s-section>
Preview
Examples
Code
jsx
<s-section padding="none"> <s-table> <s-table-header-row> <s-table-header>Name</s-table-header> <s-table-header>Email</s-table-header> <s-table-header format="numeric">Orders placed</s-table-header> <s-table-header>Phone</s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>John Smith</s-table-cell> <s-table-cell>john@example.com</s-table-cell> <s-table-cell>23</s-table-cell> <s-table-cell>123-456-7890</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Jane Johnson</s-table-cell> <s-table-cell>jane@example.com</s-table-cell> <s-table-cell>15</s-table-cell> <s-table-cell>234-567-8901</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Brandon Williams</s-table-cell> <s-table-cell>brandon@example.com</s-table-cell> <s-table-cell>42</s-table-cell> <s-table-cell>345-678-9012</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>html
<s-section padding="none"> <s-table> <s-table-header-row> <s-table-header>Name</s-table-header> <s-table-header>Email</s-table-header> <s-table-header format="numeric">Orders placed</s-table-header> <s-table-header>Phone</s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>John Smith</s-table-cell> <s-table-cell>john@example.com</s-table-cell> <s-table-cell>23</s-table-cell> <s-table-cell>123-456-7890</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Jane Johnson</s-table-cell> <s-table-cell>jane@example.com</s-table-cell> <s-table-cell>15</s-table-cell> <s-table-cell>234-567-8901</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Brandon Williams</s-table-cell> <s-table-cell>brandon@example.com</s-table-cell> <s-table-cell>42</s-table-cell> <s-table-cell>345-678-9012</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>Basic Usage
Description
Tables expand to full width by default.
jsx
<s-section padding="none"> <s-table> <s-table-header-row> <s-table-header listSlot="primary">Product</s-table-header> <s-table-header listSlot="inline">Status</s-table-header> <s-table-header listSlot="labeled">Inventory</s-table-header> <s-table-header listSlot="labeled">Price</s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>Water bottle</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>128</s-table-cell> <s-table-cell>$24.99</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>T-shirt</s-table-cell> <s-table-cell> <s-badge tone="warning">Low stock</s-badge> </s-table-cell> <s-table-cell>15</s-table-cell> <s-table-cell>$19.99</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Cutting board</s-table-cell> <s-table-cell> <s-badge tone="critical">Out of stock</s-badge> </s-table-cell> <s-table-cell>0</s-table-cell> <s-table-cell>$34.99</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>html
<s-section padding="none"> <s-table> <s-table-header-row> <s-table-header listSlot="primary">Product</s-table-header> <s-table-header listSlot="inline">Status</s-table-header> <s-table-header listSlot="labeled">Inventory</s-table-header> <s-table-header listSlot="labeled">Price</s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>Water bottle</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>128</s-table-cell> <s-table-cell>$24.99</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>T-shirt</s-table-cell> <s-table-cell> <s-badge tone="warning">Low stock</s-badge> </s-table-cell> <s-table-cell>15</s-table-cell> <s-table-cell>$19.99</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Cutting board</s-table-cell> <s-table-cell> <s-badge tone="critical">Out of stock</s-badge> </s-table-cell> <s-table-cell>0</s-table-cell> <s-table-cell>$34.99</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>With Pagination
Description
Add pagination controls for navigating large datasets.
jsx
<s-section padding="none"> <s-table paginate hasPreviousPage hasNextPage> <s-table-header-row> <s-table-header listSlot="primary">Product</s-table-header> <s-table-header listSlot="inline">Status</s-table-header> <s-table-header listSlot="secondary" format="numeric">Sales</s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>Product 1</s-table-cell> <s-table-cell>Active</s-table-cell> <s-table-cell>250</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Product 2</s-table-cell> <s-table-cell>Active</s-table-cell> <s-table-cell>180</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Product 3</s-table-cell> <s-table-cell>Paused</s-table-cell> <s-table-cell>95</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>html
<s-section padding="none"> <s-table paginate hasPreviousPage hasNextPage> <s-table-header-row> <s-table-header listSlot="primary">Product</s-table-header> <s-table-header listSlot="inline">Status</s-table-header> <s-table-header listSlot="secondary" format="numeric">Sales</s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>Product 1</s-table-cell> <s-table-cell>Active</s-table-cell> <s-table-cell>250</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Product 2</s-table-cell> <s-table-cell>Active</s-table-cell> <s-table-cell>180</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Product 3</s-table-cell> <s-table-cell>Paused</s-table-cell> <s-table-cell>95</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>With Loading State
Description
Display a loading state while fetching data.
jsx
<s-section padding="none"> <s-table loading> <s-table-header-row> <s-table-header listSlot="primary">Product</s-table-header> <s-table-header listSlot="inline">Status</s-table-header> <s-table-header listSlot="labeled">Inventory</s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>Water bottle</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>128</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>T-shirt</s-table-cell> <s-table-cell> <s-badge tone="warning">Low stock</s-badge> </s-table-cell> <s-table-cell>15</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Cutting board</s-table-cell> <s-table-cell> <s-badge tone="critical">Out of stock</s-badge> </s-table-cell> <s-table-cell>0</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Notebook set</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>245</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>html
<s-section padding="none"> <s-table loading> <s-table-header-row> <s-table-header listSlot="primary">Product</s-table-header> <s-table-header listSlot="inline">Status</s-table-header> <s-table-header listSlot="labeled">Inventory</s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>Water bottle</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>128</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>T-shirt</s-table-cell> <s-table-cell> <s-badge tone="warning">Low stock</s-badge> </s-table-cell> <s-table-cell>15</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Cutting board</s-table-cell> <s-table-cell> <s-badge tone="critical">Out of stock</s-badge> </s-table-cell> <s-table-cell>0</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Notebook set</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>245</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>Full-width table with multiple columns
Description
Display multiple columns in a full-width table.
jsx
<s-section padding="none"> <s-table> <s-table-header-row> <s-table-header listSlot="primary">Product</s-table-header> <s-table-header listSlot="kicker">SKU</s-table-header> <s-table-header listSlot="inline">Status</s-table-header> <s-table-header listSlot="labeled" format="numeric">Inventory</s-table-header> <s-table-header listSlot="labeled" format="currency">Price</s-table-header> <s-table-header listSlot="labeled">Last updated</s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>Water bottle</s-table-cell> <s-table-cell>WB-001</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>128</s-table-cell> <s-table-cell>$24.99</s-table-cell> <s-table-cell>2 hours ago</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>T-shirt</s-table-cell> <s-table-cell>TS-002</s-table-cell> <s-table-cell> <s-badge tone="warning">Low stock</s-badge> </s-table-cell> <s-table-cell>15</s-table-cell> <s-table-cell>$19.99</s-table-cell> <s-table-cell>1 day ago</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Cutting board</s-table-cell> <s-table-cell>CB-003</s-table-cell> <s-table-cell> <s-badge tone="critical">Out of stock</s-badge> </s-table-cell> <s-table-cell>0</s-table-cell> <s-table-cell>$34.99</s-table-cell> <s-table-cell>3 days ago</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Notebook set</s-table-cell> <s-table-cell>NB-004</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>245</s-table-cell> <s-table-cell>$12.99</s-table-cell> <s-table-cell>5 hours ago</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Stainless steel straws</s-table-cell> <s-table-cell>SS-005</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>89</s-table-cell> <s-table-cell>$9.99</s-table-cell> <s-table-cell>1 hour ago</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>html
<s-section padding="none"> <s-table> <s-table-header-row> <s-table-header listSlot="primary">Product</s-table-header> <s-table-header listSlot="kicker">SKU</s-table-header> <s-table-header listSlot="inline">Status</s-table-header> <s-table-header listSlot="labeled" format="numeric">Inventory</s-table-header> <s-table-header listSlot="labeled" format="currency">Price</s-table-header> <s-table-header listSlot="labeled">Last updated</s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>Water bottle</s-table-cell> <s-table-cell>WB-001</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>128</s-table-cell> <s-table-cell>$24.99</s-table-cell> <s-table-cell>2 hours ago</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>T-shirt</s-table-cell> <s-table-cell>TS-002</s-table-cell> <s-table-cell> <s-badge tone="warning">Low stock</s-badge> </s-table-cell> <s-table-cell>15</s-table-cell> <s-table-cell>$19.99</s-table-cell> <s-table-cell>1 day ago</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Cutting board</s-table-cell> <s-table-cell>CB-003</s-table-cell> <s-table-cell> <s-badge tone="critical">Out of stock</s-badge> </s-table-cell> <s-table-cell>0</s-table-cell> <s-table-cell>$34.99</s-table-cell> <s-table-cell>3 days ago</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Notebook set</s-table-cell> <s-table-cell>NB-004</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>245</s-table-cell> <s-table-cell>$12.99</s-table-cell> <s-table-cell>5 hours ago</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>Stainless steel straws</s-table-cell> <s-table-cell>SS-005</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>89</s-table-cell> <s-table-cell>$9.99</s-table-cell> <s-table-cell>1 hour ago</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>List Variant
Description
Display data using the list variant with specialized slot types. List is the default variant on mobile devices.
jsx
<s-section padding="none"> <s-table variant="list"> <s-table-header-row> <s-table-header listSlot="kicker">ID</s-table-header> <s-table-header listSlot="primary">Customer</s-table-header> <s-table-header listSlot="secondary">Email</s-table-header> <s-table-header listSlot="inline">Status</s-table-header> <s-table-header listSlot="labeled" format="numeric">Orders</s-table-header> <s-table-header listSlot="labeled" format="currency">Total spent</s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>#1001</s-table-cell> <s-table-cell>Sarah Johnson</s-table-cell> <s-table-cell>sarah@example.com</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>23</s-table-cell> <s-table-cell>$1,245.50</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>#1002</s-table-cell> <s-table-cell>Mike Chen</s-table-cell> <s-table-cell>mike@example.com</s-table-cell> <s-table-cell> <s-badge tone="neutral">Inactive</s-badge> </s-table-cell> <s-table-cell>7</s-table-cell> <s-table-cell>$432.75</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>#1003</s-table-cell> <s-table-cell>Emma Davis</s-table-cell> <s-table-cell>emma@example.com</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>15</s-table-cell> <s-table-cell>$892.25</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>html
<s-section padding="none"> <s-table variant="list"> <s-table-header-row> <s-table-header listSlot="kicker">ID</s-table-header> <s-table-header listSlot="primary">Customer</s-table-header> <s-table-header listSlot="secondary">Email</s-table-header> <s-table-header listSlot="inline">Status</s-table-header> <s-table-header listSlot="labeled" format="numeric"> Orders </s-table-header> <s-table-header listSlot="labeled" format="currency"> Total spent </s-table-header> </s-table-header-row> <s-table-body> <s-table-row> <s-table-cell>#1001</s-table-cell> <s-table-cell>Sarah Johnson</s-table-cell> <s-table-cell>sarah@example.com</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>23</s-table-cell> <s-table-cell>$1,245.50</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>#1002</s-table-cell> <s-table-cell>Mike Chen</s-table-cell> <s-table-cell>mike@example.com</s-table-cell> <s-table-cell> <s-badge tone="neutral">Inactive</s-badge> </s-table-cell> <s-table-cell>7</s-table-cell> <s-table-cell>$432.75</s-table-cell> </s-table-row> <s-table-row> <s-table-cell>#1003</s-table-cell> <s-table-cell>Emma Davis</s-table-cell> <s-table-cell>emma@example.com</s-table-cell> <s-table-cell> <s-badge tone="success">Active</s-badge> </s-table-cell> <s-table-cell>15</s-table-cell> <s-table-cell>$892.25</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>
Anchor to best-practicesBest practices
- Use when displaying data with 3 or more attributes per item
- All items should share the same structure and attributes
- Don't use when data varies significantly between items (use a list instead)
- Tables automatically transform into lists on mobile devices
Was this page helpful?