Data Tables

Data Tables

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

BaseDesktop Only

Preview

No content has been added for this component.

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.slds-table
Summary

Initializes data table

Restricttable
VariantTrue
Selector.slds-has-top-magnet
Summary

Use this class to join a table to a page-header

Restrict.slds-table
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 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
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-table_edit
Summary

Initiates inline-edit mode for data-tables

Restrict.slds-table_fixed-layout
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