Data Tables - Lightning Design System

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: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-table`
Summary	Initializes data table
Restrict	`table`
Variant	True

Selector	`.slds-no-row-hover`
Summary	Default Table Row Hover
Restrict	`.slds-table`
Modifier	True

Selector	`.slds-is-selected`
Summary	Selected Table Row + Hover
Restrict	`.slds-table tr`
Modifier	True

Selector	`.slds-cell-wrap`
Summary	By default, nowrap is applied
Restrict	`.slds-table th, .slds-table td`
Modifier	True

Selector	`.slds-cell-buffer_left`
Summary	Use to add a left padding buffer to cells
Restrict	`.slds-table th, .slds-table td`
Modifier	True

Selector	`.slds-cell-buffer_right`
Summary	Use to add a right padding buffer to cells
Restrict	`.slds-table th, .slds-table td`
Modifier	True

Selector	`.slds-has-focus`
Summary	Focus state on a cell
Restrict	`.slds-table th, .slds-table td`
Modifier	True

Selector	`.slds-table_cell-buffer`
Summary	Add left and right padding to the first and last cells of a table
Restrict	`.slds-table`
Modifier	True

Selector	`.slds-table_bordered`
Summary	Add vertical borders to a table
Restrict	`.slds-table`
Modifier	True

Selector	`.slds-table_col-bordered`
Summary	Add column borders
Restrict	`.slds-table`
Modifier	True

Selector	`.slds-table_striped`
Summary	Add alternating strips to rows
Restrict	`.slds-table`
Modifier	True

Selector	`.slds-table_fixed-layout`
Summary	Set table to use fixed layout for width and truncation purposes
Restrict	`.slds-table`
Variant	True

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`
Modifier	True

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`
Variant	True

Selector	`.slds-table_edit`
Summary	Initiates inline-edit mode for data-tables
Restrict	`.slds-table`
Variant	True

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`
Modifier	True

Selector	`.slds-has-error`
Summary	Informs a cell that it has an error inside of it
Restrict	`.slds-cell-edit`
Modifier	True

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`
Modifier	True

Selector	`.slds-max-medium-table_stacked`
Summary	Creates stacked row with stacked cells
Restrict	`.slds-table`
Variant	True

Selector	`.slds-max-medium-table_stacked-horizontal`
Summary	Creates stacked rows with horizontal cells
Restrict	`.slds-table`
Modifier	True

Variants

Modifiers

States

Density

BaseDesktop Only

Preview

About Data Tables

Accessibility

Overview of CSS Classes

What are these categories?