{ "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file", "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json", "apiVersion": "1.0.0", "name": "DataTable", "description": "Initializes data table", "structure": { "name": "root", "restrict": [ "table", "div" ], "description": "Initializes data table", "attributes": { "static": { "role": "grid", "class": "slds-table" } }, "children": [ { "name": "caption", "restrict": [ "caption", "h2", "h3" ], "description": "Optional visible heading associated with the table via aria-labelledby", "renderWhen": "slotFilled", "slot": { "name": "caption" } }, { "name": "thead", "restrict": [ "thead" ], "description": "Table header section", "children": [ { "name": "headerRow", "restrict": [ "tr" ], "description": "Header row containing the column header cells", "children": [ { "name": "headerCell", "restrict": [ "th" ], "description": "A single column header cell. Repeats once per column.", "repeats": true, "slot": { "name": "headerCells", "required": true }, "children": [ { "name": "headerCellLabel", "restrict": [ "div", "span" ], "description": "Visible (or assistive-text only) column label wrapper" }, { "name": "headerCellAction", "restrict": [ "a" ], "description": "Interactive action region for a sortable column header" }, { "name": "headerCellSortIcon", "restrict": [ "span", "svg" ], "description": "Sort direction icon shown on sortable columns" }, { "name": "headerCellMenuButton", "restrict": [ "button" ], "description": "Optional column-actions menu trigger rendered next to the sortable label" }, { "name": "headerCellResizer", "restrict": [ "div" ], "description": "Resize handle for columns whose width is user-adjustable" }, { "name": "headerCellSelectAll", "restrict": [ "div" ], "description": "Select-all checkbox affordance in the leading selection column" }, { "name": "headerLabel", "attributes": { "static": { "class": "slds-truncate" } }, "modifiers": [ { "name": "assistiveText", "attribute": "class", "value": "slds-assistive-text", "description": "Hides the label visually while keeping it available to assistive tech" }, { "name": "cellFixed", "attribute": "class", "value": "slds-cell-fixed", "description": "Pins the header label when rendered inside the fixed-header wrapper" } ] }, { "name": "headerAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } }, { "name": "headerSelectAll", "attributes": { "static": { "class": "slds-th__action slds-th__action_form" } }, "children": [ { "name": "headerSelectAllCheckbox", "attributes": { "static": { "class": "slds-checkbox" } }, "children": [ { "name": "headerSelectAllInput", "attributes": { "static": { "type": "checkbox" } } }, { "name": "headerSelectAllLabel", "attributes": { "static": { "class": "slds-checkbox__label" } }, "children": [ { "name": "headerSelectAllFaux", "attributes": { "static": { "class": "slds-checkbox_faux" } } }, { "name": "headerSelectAllLabelText", "attributes": { "static": { "class": "slds-form-element__label slds-assistive-text" } } } ] } ] } ] }, { "name": "headerAction", "attributes": { "static": { "class": "slds-th__action slds-text-link_reset", "role": "button" } }, "children": [ { "name": "headerActionAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } }, { "name": "headerActionLabelGroup", "attributes": { "static": { "class": "slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate" } }, "children": [ { "name": "headerActionLabel", "attributes": { "static": { "class": "slds-truncate" } } }, { "name": "headerSortIconContainer", "attributes": { "static": { "class": "slds-icon_container slds-icon-utility-arrowdown" } }, "children": [ { "name": "headerSortIcon", "attributes": { "static": { "class": "slds-icon slds-icon-text-default slds-is-sortable__icon", "aria-hidden": "true" } }, "children": [ { "name": "headerSortIconUse" } ] } ] } ] } ] }, { "name": "headerSortAnnouncement", "renderWhen": { "prop": "sortDirection", "eq": "ascending" }, "attributes": { "static": { "class": "slds-assistive-text", "aria-live": "polite", "aria-atomic": "true" } } }, { "name": "headerMenuButton", "attributes": { "static": { "class": "slds-button slds-button_icon slds-th__action-button slds-button_icon-x-small", "aria-haspopup": "true" } }, "children": [ { "name": "headerMenuButtonIcon", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_hint slds-button__icon_small", "aria-hidden": "true" } }, "children": [ { "name": "headerMenuButtonUse" } ] }, { "name": "headerMenuButtonAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "headerResizable", "attributes": { "static": { "class": "slds-resizable" } }, "children": [ { "name": "headerResizableInput", "attributes": { "static": { "class": "slds-resizable__input slds-assistive-text", "type": "range" } } }, { "name": "headerResizableHandle", "attributes": { "static": { "class": "slds-resizable__handle" } }, "children": [ { "name": "headerResizableDivider", "attributes": { "static": { "class": "slds-resizable__divider" } } } ] } ] } ], "modifiers": [ { "name": "alignRight", "attribute": "class", "value": "slds-text-align_right", "description": "Right-aligns the cell contents (used for the leading select/actions column)" }, { "name": "sortable", "attribute": "class", "value": "slds-is-sortable", "description": "If the column is sortable, then let's handle the actionable region of the `` cell" }, { "name": "resizable", "attribute": "class", "value": "slds-is-resizable", "description": "Provide an indicator that resizing is available" }, { "name": "hasButtonMenu", "attribute": "class", "value": "slds-has-button-menu", "description": "If the column header has a menu button, then let's add right padding to the header to preserve truncation" }, { "name": "actionMode", "attribute": "class", "value": "slds-cell_action-mode", "description": "Use when cells are in action mode" } ] } ], "attributes": { "static": { "class": "slds-line-height_reset" } } } ] }, { "name": "tbody", "restrict": [ "tbody" ], "description": "Table body section", "slot": { "name": "default" }, "children": [ { "name": "row", "restrict": [ "tr" ], "description": "A single data row. Repeats once per record.", "repeats": true, "children": [ { "name": "rowHeader", "restrict": [ "th" ], "description": "Row header cell (typically the primary identifier column)", "modifiers": [ { "name": "cellEdit", "attribute": "class", "value": "slds-cell-edit", "description": "Informs a table cell that it has editing capabilities" }, { "name": "actionMode", "attribute": "class", "value": "slds-cell_action-mode", "description": "Use when cells are in action mode" } ], "children": [ { "name": "rowHeaderContent", "attributes": { "static": { "class": "slds-truncate" } }, "children": [ { "name": "rowHeaderLink" } ] }, { "name": "rowHeaderEditGroup", "attributes": { "static": { "class": "slds-grid slds-grid_align-spread" } }, "children": [ { "name": "rowHeaderEditLabel", "attributes": { "static": { "class": "slds-truncate" } } }, { "name": "rowHeaderEditButton", "attributes": { "static": { "class": "slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" } }, "children": [ { "name": "rowHeaderEditIcon", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_hint slds-button__icon_edit", "aria-hidden": "true" } }, "children": [ { "name": "rowHeaderEditUse" } ] }, { "name": "rowHeaderEditAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] } ] } ] }, { "name": "cell", "restrict": [ "td" ], "description": "Data cell. Repeats per column.", "repeats": true, "children": [ { "name": "cellContent", "restrict": [ "div", "span" ], "description": "Wrapper around the cell value that supplies truncation, alignment, and edit affordances", "attributes": { "static": { "class": "slds-truncate" } }, "modifiers": [ { "name": "wrap", "attribute": "class", "value": "slds-line-clamp", "description": "Clamps wrapped cell text to a maximum number of lines" } ], "children": [ { "name": "cellLink" } ] }, { "name": "cellEditButton", "restrict": [ "button" ], "description": "Inline-edit trigger rendered in editable cells" }, { "name": "cellErrorIndicator", "restrict": [ "button" ], "description": "Error indicator button rendered in the leading errors column when a row has validation errors" }, { "name": "cellEditPopover", "restrict": [ "section" ], "description": "Edit popover surfaced when a cell enters edit mode", "renderWhen": { "prop": "editing", "eq": "true" }, "attributes": { "static": { "class": "slds-popover slds-popover_edit", "role": "dialog" } }, "modifiers": [ { "name": "errorPopover", "attribute": "class", "value": "slds-popover_error", "description": "Switches the popover to the error styling and exposes the nubbin" }, { "name": "nubbinBottomLeft", "attribute": "class", "value": "slds-nubbin_bottom-left", "description": "Renders the popover nubbin on the bottom-left edge" } ], "children": [ { "name": "cellEditPopoverHeader", "attributes": { "static": { "class": "slds-popover__header" } } }, { "name": "cellEditPopoverClose", "attributes": { "static": { "class": "slds-popover__close slds-button slds-button_icon slds-button_icon-small slds-button_icon-inverse slds-float_right" } }, "children": [ { "name": "cellEditPopoverCloseIcon", "attributes": { "static": { "class": "slds-button__icon slds-icon-utility-error slds-icon_x-small", "aria-hidden": "true" } }, "children": [ { "name": "cellEditPopoverCloseUse" } ] }, { "name": "cellEditPopoverCloseAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "cellEditPopoverBody", "attributes": { "static": { "class": "slds-popover__body" } }, "children": [ { "name": "cellEditPopoverMedia", "attributes": { "static": { "class": "slds-media" } }, "children": [ { "name": "cellEditPopoverMediaFigure", "attributes": { "static": { "class": "slds-media__figure" } } }, { "name": "cellEditPopoverMediaBody", "attributes": { "static": { "class": "slds-media__body" } }, "children": [ { "name": "cellEditPopoverHeading", "attributes": { "static": { "class": "slds-text-heading_medium" } } }, { "name": "cellEditFormElement", "attributes": { "static": { "class": "slds-form-element slds-grid slds-wrap" } }, "modifiers": [ { "name": "required", "attribute": "class", "value": "slds-required", "description": "Marks the inline-edit field as required" } ], "children": [ { "name": "cellEditFormLabel", "attributes": { "static": { "class": "slds-form-element__label slds-form-element__label_edit slds-no-flex" } }, "children": [ { "name": "cellEditFormLabelAbbr", "attributes": { "static": { "class": "slds-required" } } }, { "name": "cellEditFormLabelText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "cellEditFormControl", "attributes": { "static": { "class": "slds-form-element__control slds-grow" } }, "children": [ { "name": "cellEditFormInput", "attributes": { "static": { "class": "slds-input" } } } ] }, { "name": "cellEditFormHelp", "attributes": { "static": { "class": "slds-form-element__help" } } } ] } ] } ] } ] } ] }, { "name": "cellEditGroup", "attributes": { "static": { "class": "slds-grid slds-grid_align-spread" } }, "children": [ { "name": "cellEditLabel", "attributes": { "static": { "class": "slds-truncate" } } }, { "name": "cellEditButton", "attributes": { "static": { "class": "slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" } }, "children": [ { "name": "cellEditButtonIcon", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_hint slds-button__icon_edit", "aria-hidden": "true" } }, "modifiers": [ { "name": "locked", "attribute": "class", "value": "slds-button__icon_lock", "description": "Renders the lock glyph for read-only cells" }, { "name": "small", "attribute": "class", "value": "slds-button__icon_small", "description": "Renders the icon at the small size variant" } ], "children": [ { "name": "cellEditButtonUse" } ] }, { "name": "cellEditButtonAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] } ] }, { "name": "cellRowNumber", "attributes": { "static": { "class": "slds-row-number slds-text-body_small slds-text-color_weak" } } }, { "name": "cellErrorButton", "attributes": { "static": { "class": "slds-button slds-button_icon slds-button_icon-error slds-m-horizontal_xxx-small slds-hidden", "aria-hidden": "true" } }, "children": [ { "name": "cellErrorButtonIcon", "attributes": { "static": { "class": "slds-button__icon", "aria-hidden": "true" } }, "children": [ { "name": "cellErrorButtonUse" } ] }, { "name": "cellErrorButtonAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "cellSelectCheckbox", "attributes": { "static": { "class": "slds-checkbox" } }, "children": [ { "name": "cellSelectCheckboxInput", "attributes": { "static": { "type": "checkbox" } } }, { "name": "cellSelectCheckboxLabel", "attributes": { "static": { "class": "slds-checkbox__label" } }, "children": [ { "name": "cellSelectCheckboxFaux", "attributes": { "static": { "class": "slds-checkbox_faux" } } }, { "name": "cellSelectCheckboxLabelText", "attributes": { "static": { "class": "slds-form-element__label slds-assistive-text" } } } ] } ] }, { "name": "cellSelectRadio", "attributes": { "static": { "class": "slds-radio" } }, "children": [ { "name": "cellSelectRadioInput", "attributes": { "static": { "type": "radio" } } }, { "name": "cellSelectRadioLabel", "attributes": { "static": { "class": "slds-radio__label" } }, "children": [ { "name": "cellSelectRadioFaux", "attributes": { "static": { "class": "slds-radio_faux" } } }, { "name": "cellSelectRadioLabelText", "attributes": { "static": { "class": "slds-form-element__label slds-assistive-text" } } } ] } ] }, { "name": "cellRowAction", "attributes": { "static": { "class": "slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small", "aria-haspopup": "true" } }, "children": [ { "name": "cellRowActionIcon", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_hint slds-button__icon_small", "aria-hidden": "true" } }, "children": [ { "name": "cellRowActionUse" } ] }, { "name": "cellRowActionAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "cellIconContainer", "attributes": { "static": { "class": "slds-icon_container" } }, "variants": [ { "name": "cellIconGlyph", "description": "Sprite glyph applied to the in-cell icon container", "options": [ { "value": "score", "class": "slds-icon-score" }, { "value": "scorePositive", "class": "slds-icon-score__positive" }, { "value": "scoreNegative", "class": "slds-icon-score__negative" } ] } ], "children": [ { "name": "cellIconSvg", "attributes": { "static": { "class": "slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_xx-small", "aria-hidden": "true" } }, "children": [ { "name": "cellIconUse" } ] } ] }, { "name": "cellMedia", "attributes": { "static": { "class": "slds-media" } }, "modifiers": [ { "name": "center", "attribute": "class", "value": "slds-media_center", "description": "Vertically centers media figure and body" } ], "children": [ { "name": "cellMediaFigure", "attributes": { "static": { "class": "slds-media__figure" } } }, { "name": "cellMediaBody", "attributes": { "static": { "class": "slds-media__body" } } } ] } ], "attributes": { "static": { "role": "gridcell" } }, "modifiers": [ { "name": "alignRight", "attribute": "class", "value": "slds-text-align_right", "description": "Right-aligns cell contents (e.g. the selection column)" }, { "name": "alignCenter", "attribute": "class", "value": "slds-text-align_center", "description": "Center-aligns cell contents" }, { "name": "alignTop", "attribute": "class", "value": "slds-align-top", "description": "Aligns cell contents to the top of the row" }, { "name": "cellWrap", "attribute": "class", "value": "slds-cell-wrap", "description": "By default, nowrap is applied" }, { "name": "cellShrink", "attribute": "class", "value": "slds-cell-shrink", "description": "Shrinks the cell to its content width (used for the responsive trailing action cell)" }, { "name": "cellEdit", "attribute": "class", "value": "slds-cell-edit", "description": "Informs a table cell that it has editing capabilities" }, { "name": "cellError", "attribute": "class", "value": "slds-cell-error", "description": "Cell that has error icon appear within" }, { "name": "actionMode", "attribute": "class", "value": "slds-cell_action-mode", "description": "Use when cells are in action mode" } ] } ], "attributes": { "static": { "class": "slds-hint-parent" } } } ] }, { "name": "scrollable", "renderWhen": { "prop": "wrapper", "eq": "fixedHeader" }, "attributes": { "static": { "class": "slds-scrollable" } }, "children": [ { "name": "scrollableInner", "attributes": { "static": { "class": "table--header-fixed_container--inner slds-table_edit_container" } } } ] } ], "modifiers": [ { "name": "cellBuffer", "attribute": "class", "value": "slds-table_cell-buffer", "description": "Add left and right padding to the first and last cells of a table" }, { "name": "bordered", "attribute": "class", "value": "slds-table_bordered", "description": "Add vertical borders to a table" }, { "name": "verticalBorders", "attribute": "class", "value": "slds-table_col-bordered", "description": "Add column borders" }, { "name": "striped", "attribute": "class", "value": "slds-table_striped", "description": "Add alternating strips to rows" }, { "name": "fixedLayout", "attribute": "class", "value": "slds-table_fixed-layout", "description": "Set table to use fixed layout for width and truncation purposes" }, { "name": "resizableCols", "attribute": "class", "value": "slds-table_resizable-cols", "description": "Resizable data table columns" }, { "name": "edit", "attribute": "class", "value": "slds-table_edit", "description": "Initiates inline-edit mode for data-tables" }, { "name": "headerHidden", "attribute": "class", "value": "slds-table_header-hidden", "description": "Used to remove the top border when a table's header is visually hidden" }, { "name": "headerFixed", "attribute": "class", "value": "slds-table_header-fixed", "description": "Pins the header row when the table scrolls (used inside the fixedHeader wrapper)" }, { "name": "noRowHover", "attribute": "class", "value": "slds-no-row-hover", "description": "Default Table Row Hover" }, { "name": "stackedMedium", "attribute": "class", "value": "slds-max-medium-table_stacked", "description": "Creates stacked row with stacked cells" }, { "name": "stackedMediumHorizontal", "attribute": "class", "value": "slds-max-medium-table_stacked-horizontal", "description": "Creates stacked rows with horizontal cells" } ], "variants": [ { "name": "wrapper", "description": "Optional outer DOM the table renders inside. fixedHeader adds the scrollable header-fixed container; editContainer adds the inline-edit relative container.", "default": "none", "options": [ { "value": "none" }, { "value": "fixedHeader", "class": "slds-table_header-fixed_container" }, { "value": "editContainer", "class": "slds-table_edit_container slds-is-relative" } ] } ] }, "states": [ { "name": "sortedBy", "type": "boolean", "description": "Whether a column is currently the active sort column" }, { "name": "sortDirection", "type": "enum", "aria": "aria-sort", "options": [ "ascending", "descending", "none" ], "description": "Sort direction of the active sorted column" }, { "name": "selectedRows", "type": "boolean", "aria": "aria-selected", "description": "Whether one or more rows in the table are selected" }, { "name": "hasError", "type": "boolean", "description": "Whether one or more rows or cells are in an error state" }, { "name": "edited", "type": "boolean", "description": "Whether one or more cells have unsaved edits" }, { "name": "focused", "type": "boolean", "description": "Whether a cell currently has keyboard focus" }, { "name": "editing", "type": "boolean", "description": "Whether a cell is currently in inline-edit mode" }, { "name": "resizing", "type": "boolean", "description": "Whether a column is currently being resized" }, { "name": "actionable", "type": "boolean", "description": "Whether the table is in actionable mode (cells focusable via keyboard navigation)" } ], "accessibility": { "requirements": [ { "id": "grid-role", "description": "Interactive tables (with selection, sorting, inline edit, or actionable mode) should expose role='grid'" }, { "id": "table-label", "description": "The table must have an accessible name via aria-label or aria-labelledby" }, { "id": "aria-sort", "description": "Sortable column headers should declare aria-sort and update it to 'ascending' or 'descending' when active" }, { "id": "aria-multiselectable", "description": "Tables that allow multi-row selection should set aria-multiselectable='true' on the grid" }, { "id": "row-selection", "description": "Selected rows should expose aria-selected='true'" }, { "id": "select-all-label", "description": "The select-all column header needs an assistive-text label and an associated checkbox label" }, { "id": "row-action-popup", "description": "Row-level menu triggers should expose aria-haspopup='true'" }, { "id": "decorative-icons", "description": "Sort, edit, lock, and chevron icons that have a paired visible or assistive label should set aria-hidden='true'" }, { "id": "edit-popover-dialog", "description": "Inline-edit popovers should expose role='dialog' and be associated with their content via aria-describedby" }, { "id": "sort-announcement", "description": "When sort direction changes, an aria-live region (polite, atomic) should announce the new direction" } ] }, "extensions": { "com.salesforce-ux": { "dateAdded": "2015-09-04", "genReady": false, "lbc": "lightning-datatable" } }, "cssSource": "./dataTable.css", "styleApi": { "status": "stable", "ready": true }, "stateClasses": [ { "state": "sortedBy", "class": "slds-is-sorted" }, { "state": "selectedRows", "class": "slds-is-selected" }, { "state": "hasError", "class": "slds-has-error" }, { "state": "edited", "class": "slds-is-edited" }, { "state": "focused", "class": "slds-has-focus" }, { "state": "actionable", "class": "slds-no-cell-focus" } ] }