Table
The Table component provides a reusable pattern for table in the interface.
A basic table
Table in it's simplest form.
Title
| Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|
|
Value
|
1 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
Multidimensional
A table with two dimensions, locked first column when scrolling and an indicator showing the user where they are horizontally. This also makes the first column is also collapsible.
Title
| Dim 1 | Dim 1 | Dim 1 | Dim 1 | Dim 1 | Dim 1 | Dim 1 | Dim 1 | Dim 1 | Dim 1 | Dim 1 |
|---|---|---|---|---|---|---|---|---|---|---|
|
Another dimension 2
|
1 | svejsan | urlis | urlis | urlis | urlis | urlis | urlis | urlis | urlis |
|
Another dimension 2
|
10 | svejsan | urlis | urlis | urlis | urlis | urlis | urlis | urlis | urlis |
|
Another dimension 2
|
10 | svejsan | urlis | urlis | urlis | urlis | urlis | urlis | urlis | urlis |
|
Another dimension 2
|
10 | svejsan | urlis | urlis | urlis | urlis | urlis | urlis | urlis | urlis |
|
Another dimension 2
|
10 | svejsan | urlis | urlis | urlis | urlis | urlis | urlis | urlis | urlis |
|
Another dimension 2
|
10 | svejsan | urlis | urlis | urlis | urlis | urlis | urlis | urlis | urlis |
|
Another dimension 2
|
10 | svejsan | urlis | urlis | urlis | urlis | urlis | urlis | urlis | urlis |
|
Another dimension 2
|
10 | svejsan | urlis | urlis | urlis | urlis | urlis | urlis | urlis | urlis |
|
Another dimension 2
|
10 | svejsan | urlis | urlis | urlis | urlis | urlis | urlis | urlis | urlis |
A filterable table
Renders a searchbar above the table for realtime filtering.
Title
| Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|
|
The
|
quick | brown | fox | ? |
|
A
|
dog | jumps | over | 10 |
|
Summer
|
is | coming | back | åäö |
Sortable columns
Makes it possible to sort each column by clicking the headers.
Title
| Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|
|
1
|
1 | 3 | G22 | H4 |
|
3
|
10 | 33 | a | H2o |
|
100
|
10 | 22 | b | 1 |
|
50
|
10 | 33 | d | 3 |
|
Value
|
10 | A | g | 100p |
|
Value
|
10 | B | 50 | 22 |
|
B10
|
10 | Z | 60 | |
|
A50
|
10 | 22 | H | 1066 |
|
Value
|
10 | 42 | N | 25 |
Sum row
Renders a row at the bottom of the table showing the sum of each cell in corresponding column.
Title
| Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|
|
1
|
10 | 3 | 1 | 1 |
|
2
|
10 | 33 | 1 | 2 |
|
3
|
40 | 22 | 3 | 1 |
|
4
|
10 | 33 | 4 | 3 |
|
5
|
10 | 2 | 4 | 100 |
|
6
|
12 | 5 | 5 | 200 |
|
7
|
10 | 7 | 1 | 1000 |
|
8
|
10 | 1 | 2 | 1066 |
|
9
|
31 | 2 | 3 | 25 |
|
Sum
|
143 | 108 | 24 | 2398 |
Fullscreen
Renders an icon in the top right corner, that when clicked opens up the table in fullscreen.
Title
| Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|
|
Value
|
1 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
|
Value
|
10 | svejsan | urlis | urlis |
API
| Parameter | Default | Description |
|---|---|---|
|
list
|
[] | Array of items |
|
headings
|
[] | Array of items |
|
showHeader
|
true | If header should be printed |
|
showCaption
|
false | - |
|
filterable
|
false | Renders a field for real time filtering |
|
sortable
|
false | Makes each th a button that sorts corresponding cells in column |
|
showSum
|
false | Shows the sum of each column at the bottom of the table |
|
fullscreen
|
false | Renders a button, that when clicked, makes the table fullscreen |
|
isMultidimensional
|
false | Makes the first column a second dimension of headers and locks in it place when scrolling. Also allows the user to collapse the first column. |
|
title
|
A title at above the table | |
|
includePaper
|
true | - |
|
labels
|
[] | Label strings - replace for translation etc |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-table--space
|
var(--space) | range | - | Base spacing unit. Used for padding and margin inside components. |
|
--c-table--border-width
|
var(--border-width) | range | - | Size |
|
--c-table--color--surface
|
var(--color--surface) | color | - | Surface |
|
--c-table--color--primary
|
var(--color--primary) | color | - | Primary |
|
--c-table--color--surface-border
|
var(--color--surface-border) | color | - | Manual companion token for borders on surface elements. |
|
--c-table--color--surface-contrast-muted
|
var(--color--surface-contrast-muted) | color | - | Derived muted contrast for text and icons on surface backgrounds. |
|
--c-table--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-table--shadow-color
|
var(--shadow-color) | rgba | - | Shadow Color |
|
--c-table--shadow-amount
|
var(--shadow-amount) | range | - | Multiplier for elevation shadows. 0 = none, 1 = default. |
|
--c-table--color--surface-alt
|
var(--color--surface-alt) | color | - | Manual companion token for subtle surface backgrounds. |