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 |
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 |
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-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-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 |
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 |
No content has been added for this component.
No content has been added for this component.