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

* This is a table, it looks good, yes.

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

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 Type Description
list
[] array -
headings
[] array -
showHeader
true boolean -
showCaption
false boolean -
filterable
false boolean -
sortable
false boolean -
showSum
false boolean -
fullscreen
false boolean -
isMultidimensional
false boolean -
async
false boolean -
title
string -
includePaper
true boolean -
labels
[] array -

Subcomponents

Child components for table, including purpose and supported Blade parameters.

Table Body

Blade directive: @table__body()

Subcomponent for the table component.

Parameter Default Type Purpose
classList
[] array Additional CSS classes added to the wrapping element.
attributeList
[] array Additional HTML attributes added to the wrapping element.

Table Cell

Blade directive: @table__cell()

-

Parameter Default Type Purpose
componentElement
td string -
index
null ?integer -
classList
[] array Additional CSS classes added to the wrapping element.
attributeList
[] array Additional HTML attributes added to the wrapping element.

Table Head

Blade directive: @table__head()

Subcomponent for the table component.

Parameter Default Type Purpose
classList
[] array Additional CSS classes added to the wrapping element.
attributeList
[] array Additional HTML attributes added to the wrapping element.

Table Row

Blade directive: @table__row()

-

Parameter Default Type Purpose
index
null ?integer -
isSummary
false boolean -
classList
[] array Additional CSS classes added to the wrapping element.
attributeList
[] array Additional HTML attributes added to the wrapping element.

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.
--c-table--font-size-200
var(--font-size-200) range - One step above base in the type scale. Equivalent to h6/subtitle.

Similar components

Tabs Fab Gallery