@umbraco-ui/uui-table

uui-table

See it in action

Preview the component on Storybook

Installation

ES imports

npm i @umbraco-ui/uui-table

Import the registration of <uui-table>, <uui-table-row>, <uui-table-cell>, <uui-table-head>, <uui-table-head-cell>, <uui-table-column> via:

import '@umbraco-ui/uui-table';

When looking to leverage the UUITableElement, UUITableRowElement, UUITableCellElement, UUITableHeadElement, UUITableHeadCellElement, UUITableColumnElement base class as a type and/or for extension purposes, do so via:

import {
  UUITableElement,
  UUITableRowElement,
  UUITableCellElement,
  UUITableHeadElement,
  UUITableHeadCellElement,
  UUITableColumnElement,
} from '@umbraco-ui/uui-table';

Usage

<uui-table>
  <uui-table-head>
    <uui-table-head-cell>Title 1</uui-table-head-cell>
    <uui-table-head-cell>Title 2</uui-table-head-cell>
  </uui-table-head>
  <uui-table-row>
    <uui-table-cell>Cell 1</uui-table-cell>
    <uui-table-cell>Cell 2</uui-table-cell>
  </uui-table-row>
  <uui-table-row>
    <uui-table-cell>Cell 3</uui-table-cell>
    <uui-table-cell>Cell 4</uui-table-cell>
  </uui-table-row>
</uui-table>

With styled columns

<uui-table aria-label="Example table" aria-describedby="#some-element-id">
  <!-- Apply styles to the uui-table-column to style the columns. You must have the same number of this elements as you have columns -->
  <uui-table-column
    style="width: 20%; background-color: green"></uui-table-column>
  <uui-table-column
    style="width: 80%; background-color: red"></uui-table-column>

  <uui-table-head>
    <uui-table-head-cell>Title 1</uui-table-head-cell>
    <uui-table-head-cell>Title 2</uui-table-head-cell>
  </uui-table-head>

  <uui-table-row>
    <uui-table-cell>Cell 1</uui-table-cell>
    <uui-table-cell>Cell 2</uui-table-cell>
  </uui-table-row>

  <uui-table-row>
    <uui-table-cell>Cell 3</uui-table-cell>
    <uui-table-cell>Cell 4</uui-table-cell>
  </uui-table-row>
</uui-table>

Changelog

1.9.0 (2024-07-25)

Bug Fixes

• adds an aria-label to the caret button with a matching property (fd699d5)
• uui-radio: keyboard navigation does not work as intended (#870) (46e93ca)
• uui-textarea: add danger border if the element is invalid (b16d500)

Features

• Consistent cursor style for checkbox and radiobutton (#857) (70c4efe)
• Indeterminate state for boolean input and checkbox (#856) (74a6121)
• uui-popover-container: remove the Firefox popover polyfill (#858) (d26635f)