1.12.2 • Published 4 months ago

@umbraco-ui/uui-table v1.12.2

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

uui-table

npm

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.13.0-rc.2

4 months ago

1.13.0-rc.0

4 months ago

1.12.2

8 months ago

1.12.1

8 months ago

1.12.0

8 months ago

1.11.0

9 months ago

1.10.0-rc.0

10 months ago

1.10.0

10 months ago

1.9.0

12 months ago

1.9.0-rc.1

1 year ago

1.9.0-rc.0

1 year ago

1.8.0

1 year ago

1.8.0-rc.0

1 year ago

1.7.0

1 year ago

1.7.0-rc.0

1 year ago

1.6.0

1 year ago

1.6.0-rc.4

1 year ago

1.6.0-rc.3

2 years ago

1.6.0-rc.2

2 years ago

1.4.0

2 years ago

1.6.0-rc.1

2 years ago

1.6.0-rc.0

2 years ago

1.5.0-rc.0

2 years ago

1.4.0-rc.0

2 years ago

1.5.0-rc.1

2 years ago

1.5.0-rc.2

2 years ago

1.4.0-rc.2

2 years ago

1.5.0-rc.3

2 years ago

1.4.0-rc.1

2 years ago

1.5.0

2 years ago

1.3.0

2 years ago

1.3.0-rc.0

2 years ago

1.3.0-rc.1

2 years ago

1.2.0

2 years ago

1.2.1

2 years ago

1.2.0-rc.2

2 years ago

1.2.0-rc.1

2 years ago

1.2.0-rc.3

2 years ago

1.1.0

3 years ago

1.2.0-rc.0

2 years ago

1.0.0

3 years ago

1.0.0-rc.3

3 years ago

1.0.0-rc.2

3 years ago

1.0.0-rc.1

3 years ago

1.0.0-alpha.0

3 years ago

0.2.1

3 years ago

1.0.0-rc.0

3 years ago

0.2.0

3 years ago

0.1.0

3 years ago

0.1.1

3 years ago

0.0.16

4 years ago

0.0.17

3 years ago

0.0.18

3 years ago

0.0.19

3 years ago

0.0.14

4 years ago

0.0.15

4 years ago

0.0.12

4 years ago

0.0.13

4 years ago

0.0.10

4 years ago

0.0.11

4 years ago

0.0.3

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.1

4 years ago