Lightning Design System

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

BaseNot Compatible with S1 Mobile

Preview

No content has been added for this component.

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 than lets 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-th__action`
Summary	Actionable area inside th
Restrict	`.slds-table_fixed-layout th div, .slds-table_fixed-layout th a`

Selector	`.slds-th__action_form`
Summary	Allows for alignment of form element, such as a checkbox
Restrict	`.slds-th__action`

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-table_edit`
Summary	Initiates inline-edit mode for data-tables
Restrict	`.slds-table_fixed-layout`
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

Variants

Modifiers

States

BaseNot Compatible with S1 Mobile

Preview

About Data Tables

Accessibility

Overview of CSS Classes

What are these categories?