Table - Web Component

The Table component can be used imported from:

Playground

Parameters

The Web component uses the <z-table> tag:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description	Slot	A11y
headers	object[]
rows	object[]
caption	string

Slots

This component has slots. Check the documentation about how to use the slots.

Name	Tags	Description
default	table

Parameters use

headers

The headers attribute is used to define the table headers.

You can pass an array of numbers or string (number | string)[]:

We can use the head-<index> slots to customize content:

Info

Configured headers

But there's an option of passing config objects if each row of the table is going to represent an object. In this case, rows will be the array of key-value pairs objects and headers an array of these config objects where we choose the property of the object that will go in that column (prop) and a name or text for that column (text):

rows

The rows attribute is used to define the table rows.

Like the headers attribute, you can pass either pass a matrix of numbers or string (number | string)[][]:

We can use the cell-<row>-<index> slots to customize content:

Cell prop

Object rows

rows can also be objects, and in that case, the properties will be displayed in order per column:

We can use the cell-<row>-<prop> slots to customize content:

Cell prop

caption

The caption attribute is used to define the table caption.

Using embedded table

You can also embed and entire table component. For this, a <table> tag needs to be placed inside:

Head 1	Head 2	Head 3
Cell 1-1	Cell 1-2	Cell 1-3
Cell 2-1	Cell 2-2	Cell 2-3

Rows

...

zebra

We can use the zebra attribute to set a highlighted background in the even rows:

Using zebra="odd" will apply it to odd ones:

This will work too with embed tables:

Cell 1-1	Cell 1-2	Cell 1-3
Cell 2-1	Cell 2-2	Cell 2-3
Cell 3-1	Cell 3-2	Cell 3-3

Cells

config

The config attribute in <td> or <th> tags can change the positioning of the content:

Left

Center

Right

highlight

We can highlight entire columns using the bg property on the headers configuration:

You can also force this color by using an string:

Alternatively, we can do it in the embed table just placing the highlight attribute in the header of the corresponding column:

Head 1	Head 2	Head 3
Cell 1	Cell 2	Cell 3

Dynamic tables

The embed table allow us to have full control of the table or even use other components inside:

Sel.	Name	Price	Qt.	Total
	Item name 1
	Item name 2
	Item name 3
Total:

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example