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.
Was this section helpful?
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.
Was this section helpful?
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]; }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 slotsSlots
- Anchor to childrenchildrenHTMLElement
The body of the table. May not have any semantic meaning in the Table's
listvariant.
Was this section helpful?
Anchor to tablecellTableCell
Display data within a cell in a table row.
Was this section helpful?
Anchor to slotsSlots
- Anchor to childrenchildrenHTMLElement
The content of the table cell.
Was this section helpful?
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'Was this section helpful?
Anchor to slotsSlots
- Anchor to childrenchildrenHTMLElement
The heading of the column in the
tablevariant, and the label of its data inlistvariant.
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 slotsSlots
- Anchor to childrenchildrenHTMLElement
Contents of the table heading row; children should be
components.
Was this section helpful?
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.
Was this section helpful?
Anchor to slotsSlots
- Anchor to childrenchildrenHTMLElement
The content of a TableRow, which should be
components.
Was this section helpful?
Code
<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>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>
</s-section>
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>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> </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>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> </s-section>
Anchor to examplesExamples
Component examples
Anchor to example-basic-usageBasic usage
Anchor to example-basic-usageBasic Usage
Tables are full-width by default to utilize all available space for displaying data.
Anchor to example-with-paginationWith Pagination
Demonstrates a table with pagination controls, showing how to add previous and next page functionality to handle large datasets.
Anchor to example-with-loading-stateWith Loading State
Showcases the table's loading state, which can be used to indicate that data is being fetched or processed.
Anchor to example-full-width-table-with-multiple-columnsFull-width table with multiple columns
A comprehensive example showing a full-width table with multiple columns. Tables automatically expand to fill their container width.
Anchor to example-advanced-table-with-all-list-slot-typesAdvanced Table with All List Slot Types
A comprehensive example demonstrating different list slot types for various header and cell configurations, showing how to use kicker, primary, secondary, inline, and labeled slots.
Was this section helpful?
Basic Usage
<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>
Examples
Basic Usage
Description
Tables are full-width by default to utilize all available space for displaying data.
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
Demonstrates a table with pagination controls, showing how to add previous and next page functionality to handle 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">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">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
Showcases the table's loading state, which can be used to indicate that data is being fetched or processed.
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>Loading...</s-table-cell> <s-table-cell>Loading...</s-table-cell> <s-table-cell>Loading...</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>Loading...</s-table-cell> <s-table-cell>Loading...</s-table-cell> <s-table-cell>Loading...</s-table-cell> </s-table-row> </s-table-body> </s-table> </s-section>Full-width table with multiple columns
Description
A comprehensive example showing a full-width table with multiple columns. Tables automatically expand to fill their container width.
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">Inventory</s-table-header> <s-table-header listSlot="labeled">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">Inventory</s-table-header> <s-table-header listSlot="labeled">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>Advanced Table with All List Slot Types
Description
A comprehensive example demonstrating different list slot types for various header and cell configurations, showing how to use kicker, primary, secondary, inline, and labeled slots.
jsx
<s-section padding="none"> <s-table> <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">Orders</s-table-header> <s-table-header listSlot="labeled">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> <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">Orders</s-table-header> <s-table-header listSlot="labeled">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>
