@umbraco-ui/uui-table v1.7.0
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>
1 month ago
3 months ago
3 months ago
3 months ago
4 months ago
5 months ago
5 months ago
8 months ago
6 months ago
6 months ago
8 months ago
10 months ago
7 months ago
7 months ago
8 months ago
7 months ago
9 months ago
7 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago