Data Tables

Data Tables

Data tables are an enhanced version of an HTML table and are used to display tabular data.

BaseDesktop Only

Preview

About Data Tables

To initialize a data table, apply the slds-table class to the table element. This class creates a table with formatted cells and allows you to use data table utilities.

Accessibility

To create an accessible table, the top row of column headers (th) are placed in a thead. Each one receives the scope="col" attribute. The first non-actionable (meaning that doesn't contain a checkbox or menu) column in each row should be marked as a th with a scope="row" attribute.


Overview of CSS Classes

Selector.slds-table
Summary

Initializes data table

Restricttable
VariantTrue
Selector.slds-no-row-hover
Summary

Default Table Row Hover

Restrict.slds-table
ModifierTrue
Selector.slds-is-selected
Summary

Selected Table Row + Hover

Restrict.slds-table tr
ModifierTrue
Selector.slds-cell-wrap
Summary

By default, nowrap is applied

Restrict.slds-table th, .slds-table td
ModifierTrue
Selector.slds-cell-buffer_left
Summary

Use to add a left padding buffer to cells

Restrict.slds-table th, .slds-table td
ModifierTrue
Selector.slds-cell-buffer_right
Summary

Use to add a right padding buffer to cells

Restrict.slds-table th, .slds-table td
ModifierTrue
Selector.slds-has-focus
Summary

Focus state on a cell

Restrict.slds-table th, .slds-table td
ModifierTrue
Selector.slds-table_cell-buffer
Summary

Add left and right padding to the first and last cells of a table

Restrict.slds-table
ModifierTrue
Selector.slds-table_bordered
Summary

Add vertical borders to a table

Restrict.slds-table
ModifierTrue
Selector.slds-table_col-bordered
Summary

Add column borders

Restrict.slds-table
ModifierTrue
Selector.slds-table_striped
Summary

Add alternating strips to rows

Restrict.slds-table
ModifierTrue
Selector.slds-table_fixed-layout
Summary

Set table to use fixed layout for width and truncation purposes

Restrict.slds-table
VariantTrue
Selector.slds-is-sortable
Summary

If the column is sortable, then let's handle the actionable region of the <th> cell

Restrict.slds-table_fixed-layout th
Selector.slds-is-sortable__icon
Summary

Icon inside sortable th

Restrict.slds-is-sortable .slds-icon
Selector.slds-has-button-menu
Summary

If the column header has a menu button, then let's add right padding to the header to preserve truncation

Restrict.slds-table_fixed-layout th
Selector.slds-th__action-button
Summary

Allows for alignment of button, such as a menu

Restrict.slds-has-button-menu .slds-button_icon
Selector.slds-is-sorted
Summary

Active state of sorted column

Restrict.slds-table_fixed-layout th
Selector.slds-is-sorted_asc
Summary

Change direction of arrow

Restrict.slds-is-sorted
ModifierTrue
Selector.slds-table_resizable-cols
Summary

Resizable data table columns

Restrict.slds-table_fixed-layout
Selector.slds-is-resizable
Summary

Provide an indicator that resizing is available

Restrict.slds-table_resizable-cols th
Selector.slds-resizable
Summary

Resizable handle

Restrict.slds-is-resizable div
Selector.slds-resizable__handle
Summary

Grab handle to resize column

Restrict.slds-resizable span
Selector.slds-resizable__divider
Summary

Grab handle divider indicator when resizing column

Restrict.slds-resizable__handle span
Selector.slds-th__action
Summary

Actionable area inside th

Restrict.slds-table th div, .slds-table th a
Selector.slds-th__action_form
Summary

Allows for alignment of form element, such as a checkbox

Restrict.slds-th__action
Selector.slds-table_header-hidden
Summary

Used to remove the top border when a table's header is visually hidden

Restrict.slds-table
VariantTrue
Selector.slds-table_edit
Summary

Initiates inline-edit mode for data-tables

Restrict.slds-table
VariantTrue
Selector.slds-cell-error
Summary

Cell that has error icon appear within

Restrict.slds-table_edit td
Selector.slds-cell-edit
Summary

Informs a table cell that it has editing capabilities

Restrict.slds-table_edit th, .slds-table_edit td
Selector.slds-is-edited
Summary

Informs a cell that it has been edited but not saved

Restrict.slds-cell-edit
ModifierTrue
Selector.slds-has-error
Summary

Informs a cell that it has an error inside of it

Restrict.slds-cell-edit
ModifierTrue
Selector.slds-cell-edit__button
Summary
Restrict.slds-cell-edit button
Selector.slds-no-cell-focus
Summary

Handles children of the table where we don't want any focusable cells

Restrict.slds-table_edit
ModifierTrue
Selector.slds-max-medium-table_stacked
Summary

Creates stacked row with stacked cells

Restrict.slds-table
VariantTrue
Selector.slds-max-medium-table_stacked-horizontal
Summary

Creates stacked rows with horizontal cells

Restrict.slds-table
ModifierTrue