Table — Playground

px
Ava ChenEngineerActive
Liam OseiDesignerInvited
Noor MalikProduct ManagerActive
Priya RaoSupportSuspended
size
State
html.html
<table kuiTable [data]="rows" #table="kuiTable">
  <thead>
    <tr kuiThGroup>
      <th kuiTh sortKey="name">Name</th>
      <th kuiTh sortKey="role">Role</th>
      <th kuiTh sortKey="status">Status</th>
    </tr>
  </thead>
  <tbody>
    @for (row of table.sortedData(); track row.id) {
      <tr kuiRow [value]="row">
        <td kuiCell>{{ row.name }}</td>
        <td kuiCell>{{ row.role }}</td>
        <td kuiCell>{{ row.status }}</td>
      </tr>
    }
  </tbody>
</table>
NameTypeDefaultDescription
dataT[][]Source rows for sorting and selection. Selector: table[kuiTable].
size'xs' | 'sm' | 'md' | 'lg' | undefinedundefinedTable density and typography scale. Falls back to defaults.table.size, then the global defaults.size, then md. Selector: table[kuiTable].
selectionChangeoutput<T[]> — Emits current selection whenever it changes. Observing this output is what makes the selection column appear. Selector: table[kuiTable].
sortChangeoutput<KuiActiveSortState | null> — Emits the active sort key/direction, or null when sort is cleared. When observed, kuiTable hands row ordering to the parent instead of sorting locally. Selector: table[kuiTable].
sortStateSignal<KuiSortState> — Current sort state (null when no column is sorted). Selector: table[kuiTable].
sortedDataSignal<T[]> — Rows in current sort order. Use this in the template instead of data when sort is uncontrolled. Selector: table[kuiTable].
isSelected(item)(item: T) => boolean — Returns whether a given row value is currently selected. Selector: table[kuiTable].
#table="kuiTable"exportAs — Template reference for reading sortedData(), sortState(), and selection state.
sortKeystring | undefined-Enables sort for this header cell; usually matches a row property name. Selector: th[kuiTh].
comparator(a: T, b: T) => number-Custom sort function for the column, used instead of default comparison. Selector: th[kuiTh].
stickybooleanfalsePins this header cell horizontally with position: sticky. Selector: th[kuiTh]. Also available on tr[kuiThGroup] to pin the whole header row vertically.
valueT | undefinedundefinedData object used for selected state. Omit it for a presentational row without selection. Selector: tr[kuiRow].
ariaLabelstring | undefinedundefinedAccessible label for the select-all checkbox; falls back to the table.selectAllRows message (Select all rows). Selector: th[kuiSelectTh].
ariaLabelstring | undefinedundefinedAccessible label for a row selection checkbox, falling back to the table.selectRow message (Select row), e.g. "Select " + row.name. Selector: td[kuiSelectCell].
td[kuiCell]marker directive — Applies Kikita table cell styling to a native td. No inputs in the installed version.
--kui-table-font-sizeCSS custom property — Base font size for table text.
--kui-table-th-pyCSS custom property — Vertical padding for header cells.
--kui-table-cell-pxCSS custom property — Horizontal padding for cells.
--kui-table-row-pyCSS custom property — Vertical padding for body row cells.
--kui-table-th-fgCSS custom property — Header cell text color.
--kui-table-th-bgCSS custom property — Header cell background color.
--kui-table-borderCSS custom property — Outer table border color.
--kui-table-row-borderCSS custom property — Row divider border color.
--kui-table-row-hover-bgCSS custom property — Row background on hover.
--kui-table-row-selected-bgCSS custom property — Row background when selected.
--kui-table-row-selected-accentCSS custom property — Accent color for selected rows.
--kui-table-sort-active-colorCSS custom property — Color used for the active sort indicator.
--kui-table-bgCSS custom property — Table background color.
KuiTableOptionsinterface-Shape of defaults.table: size.

Inputs and outputs verified against @kikita-labs/ui v2.0.0 public typings.