Table - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

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

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

Name	Type	Description
headers	object[]
rows	object[]
caption (optional)	string

headers

The headers attribute is used to define the table headers. You can pass either pass an array of strings or an array of objects.

rows

The rows attribute is used to define the table rows. Like the headers attribute, you can pass either pass an array of strings or an array of objects.

caption

The caption attribute is used to define the table caption.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.1/@zurich/web-components/table.js"></script>

Code

<z-table caption="Users" headers='["Name", "Age", "Country"]'
  rows='[["John Doe","30","USA"],["Jane Doe","25","Canada"],["John Smith","35","Spain"]]'>
</z-table>