With this widget, you can display data from an array in tabular presentation.

To display the data, define the header properties with a comma-separated list of column headings, bind the content to an array of JavaScript objects.

Then, provide a comma-separated list for the columns keys indicating the attribute to display in each column.

To get the data from a selected row, bind selected row to a variable.

Customize the default look and feel as follows:

• Zebra-striping(Default: yes): Apply a Zebra style (this style set a different background color on even and odd lines).
• Condensed(Default: no): Display cells without spacing.
• Bordered(Default: no): Display cells with border.

Styling zebra-striping can be done in the theme.css file to customize all the tables.

You need to use this following css selector in your theme.css file:

.table-striped > tbody
  > tr:nth-of-type(odd) {
	background-color: chartreuse;
}

.table-striped > tbody
  > tr:nth-of-type(even) {
	background-color: black;
}
 

In some case, you want override your theme to display one specific table, to do this:

1. In 'CSS Classes' property add the zebra-custom class
2. Add the following class in style.css asset.

.zebra-custom .table-striped
 > tbody > tr:nth-of-type(odd){
    background-color: #8FB2DD;
}

.zebra-custom .table-striped
 > tbody > tr:nth-of-type(even) {
    background-color:#994B42;
}

3. Click on preview, select an app with a theme and check the result

Example of border table:

1. Set Bordered property at true.
2. In 'Classes CSS' property add the following value

border-custom

3. Add the following class in style.css asset.

/** First selector is for header
 *  Second for each row
 **/
.border-custom >  pb-table >
   .table-responsive > .table-bordered
   > * > tr > th,
.border-custom .table-bordered td {
    border: 2px solid #8FB2DD;
}

4. Click on preview to check the result