Table

Simple data table.

Showcase
First Name
Last Name
Age
John Doe 694
Leo Tolstoy 196
فلان الفلاني 42
Иван Иванов 69
Source 
<script>
  const headers = [
    { text: 'First Name', value: 'firstName' },
    { text: 'Last Name', value: 'lastName' },
    { text: 'Age', value: 'age', align: 'end' },
  ];
  const items = [
    { firstName: 'John', lastName: 'Doe', age: 694 },
    { firstName: 'Leo', lastName: 'Tolstoy', age: new Date().getFullYear() - 1828 },
    { firstName: 'فلان', lastName: 'الفلاني', age: 42 },
    { firstName: 'Иван', lastName: 'Иванов', age: 69 },
  ];
</script>

<Table {headers} {items} />

Properties #

Style Properties

Name
Default
Type
Description
alternatingRows true boolean Controls whether rows will have an alternating background color.

Functional Properties

Name
Default
Type
Description
headers [] Array<{ text: string; value: string; align?: "start" | "center" | "end" }> The labels for the column headers. Each column header is an object with the following fields:
  • text is the text to display;
  • value is the name of the field to take from each object in items to put in this column;
  • align is the alignment of the text in the column ("start" | "center" | "end"), defaulting to "start".
items [] Array<{ [key: string]: string | number }> The actual rows of data to be displayed. It is an array of objects, where each object must have as its keys the content of the value property of the headers, and the value is the text to be displayed.
... any Everything else will be passed to the underlying <table> element.

Slots #

header-item slot

Customizes the content of the <th> elements. Defaults to a <Label> component with the text content of the header.

Prop Name
Type
Description
header { text: string; value: string} The header object passed as part of the headers array.

item slot

Used to customize each data cell (contents of <td>) on its own. The intersection of header and item can be used to identify the data cell.

Prop Name
Type
Description
header { text: string; value: string} The header object passed as part of the headers array.
item { [key: string]: string | number } The row object passed as part of the items array.

SCSS Variables #

Name
Description
Default
$main Used for the border color and the background color of alternating rows.
#4300B0
$table-radius The border radius of the table body. 0.5em