Data Tables

data-tables

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

base

.slds-table — Initializes data table

base › With striped rows

base › With no row hovers

base › With vertical borders

base › Single Column

base › No borders

base › Headless

base › Headless with no borders

base › Cell content truncated

base › Cell content wrapped

base › Using aria-labelledby instead of aria-label

.slds-no-row-hover

.slds-no-row-hover — Default Table Row Hover

.slds-is-selected

.slds-is-selected — Selected Table Row + Hover

.slds-cell-wrap

.slds-cell-wrap — By default, nowrap is applied

.slds-cell-buffer_left

.slds-cell-buffer_left — Use to add a left padding buffer to cells

.slds-cell-buffer_right

.slds-cell-buffer_right — Use to add a right padding buffer to cells

.slds-has-focus

.slds-has-focus — Focus state on a cell

.slds-cell_action-mode

.slds-cell_action-mode — Use when cells are in action mode

.slds-table_cell-buffer

.slds-table_cell-buffer — Add left and right padding to the first and last cells of a table

.slds-table_bordered

.slds-table_bordered — Add vertical borders to a table

.slds-table_col-bordered

.slds-table_col-bordered — Add column borders

.slds-table_striped

.slds-table_striped — Add alternating strips to rows

advanced

.slds-table_fixed-layout — Set table to use fixed layout for width and truncation purposes

advanced › Header Icon and Menu Button

advanced › Header Menu Button

advanced › Cell Icon

advanced › Product Listing

advanced › Radio Group

advanced › No borders

advanced › Headless

advanced › Headless with no borders

.slds-is-sortable

.slds-is-sortable — If the column is sortable, then let's handle the actionable region of the `<th>` cell

.slds-is-sortable__icon

.slds-is-sortable__icon — Icon inside sortable th

.slds-has-button-menu

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

.slds-th__action-button

.slds-th__action-button — Allows for alignment of button, such as a menu

.slds-is-sorted

.slds-is-sorted — Active state of sorted column

sorted-ascending

.slds-is-sorted_asc — Change direction of arrow

.slds-table_resizable-cols

.slds-table_resizable-cols — Resizable data table columns

.slds-is-resizable

.slds-is-resizable — Provide an indicator that resizing is available

.slds-resizable

.slds-resizable — Resizable handle

.slds-resizable__handle

.slds-resizable__handle — Grab handle to resize column

.slds-resizable__divider

.slds-resizable__divider — Grab handle divider indicator when resizing column

.slds-th__action

.slds-th__action — Actionable area inside th

.slds-th__action_form

.slds-th__action_form — Allows for alignment of form element, such as a checkbox

hidden-header

.slds-table_header-hidden — Used to remove the top border when a table's header is visually hidden

inline-edit

.slds-table_edit — Initiates inline-edit mode for data-tables

.slds-cell-error

.slds-cell-error — Cell that has error icon appear within

.slds-cell-edit

.slds-cell-edit — Informs a table cell that it has editing capabilities

.slds-is-edited

.slds-is-edited — Informs a cell that it has been edited but not saved

.slds-has-error

.slds-has-error — Informs a cell that it has an error inside of it

.slds-cell-edit__button

.slds-cell-edit__button

.slds-no-cell-focus

.slds-no-cell-focus — Handles children of the table where we don't want any focusable cells

responsive

.slds-max-medium-table_stacked — Creates stacked row with stacked cells

.slds-max-medium-table_stacked-horizontal

.slds-max-medium-table_stacked-horizontal — Creates stacked rows with horizontal cells