Table - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

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
headers	object[]
rows	object[]
caption	string

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

...

Cells

config

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

Left

Center

Right

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:

Playground

Customization

HTML Examples

StackBlitz example