Tables Basic HTML table with different themes and separated rows style.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                table: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>
NameDescription
.table-responsiveWhen wrapped around the table component, makes the table responsive by adding a scroll bar
.tableBase class of the table component
.table.table-borderlessDisables borders within the table
.table.table-nowrapDisables text wrapping for table content
.table.table-separatedApplies separated style to the table
.table.table-{theme}Applies a certain theme to the table, for example table-primary
.table.table-{xsm, sm, lg}Applies a certain size to the table, for example table-sm
.table.table-hoverMakes table rows hoverable
.table.table-stripedApplies striped style to the table rows
.table.table-borderedMakes a table bordered
.table.border-{theme}Applies a certain table border theme, for example border-success
.table > thead.head-borderedAdds a border top to the table thead
.table > thead.head-coloredAdds a background color to the table thead
.table > th.fit, td.fitWhen applied, it makes a single table cell width fit its content
Customize variables at:/library/extend/components/_table.scss
Component's defaults:/library/components/table/_defaults.scss
NameDefault valueNote
$table-cell-vertical-aligntop
$table-colorproperty.get(main-text-color)Requires @use "@library/sass/modules/property";
$table-bgtransparent
$table-th-font-weightnull
$table-striped-color$table-color
$table-striped-bgproperty.get(ui-base-color-2)Requires @use "@library/sass/modules/property";
$table-active-color$table-color
$table-active-bgproperty.get(primary-t-04)Requires @use "@library/sass/modules/property";
$table-hover-color$table-color
$table-hover-bgproperty.get(secondary-t-04)Requires @use "@library/sass/modules/property";
$table-border-factor.1
$table-border-width$border-width
$table-border-colorproperty.get(divider)Requires @use "@library/sass/modules/property";
$table-striped-ordereven
$table-group-separator-colorproperty.get(divider)Requires @use "@library/sass/modules/property";
$table-caption-color$text-muted
$table-bg-scale-80%
$table-cell-padding-y.75rem
$table-cell-padding-x.75rem
$table-cell-padding-y-xsm.375rem
$table-cell-padding-x-xsm.375rem
$table-cell-padding-y-sm.50rem
$table-cell-padding-x-sm.50rem
$table-cell-padding-y-lg1rem
$table-cell-padding-x-lg1rem
$table-head-padding-y12px;
$table-head-padding-x12px;
$table-head-text-colorui-surface-medium;
$table-head-font-weight500;
$table-head-font-size14px;
$table-head-colored-bgui-base-color-2;
$table-row-padding-y12px;
$table-row-padding-x12px;
$table-row-font-weight400;
$table-row-font-size14px;
$table-variants();

Make sure to read the Customize components and Understanding and using the design system guides.

{title}