Datatable

The Datatable component is a versatile component for displaying tabular data. It allows customization of styles, sizes, and densities, providing flexibility to fit various design requirements. The Datatable component utilizes the following subcomponents:

• DatatableHeader: Defines the header section of the datatable.
• DatatableBody: Contains the body rows of the datatable.
• DatatableRow: Used to define individual rows within the datatable.
• DatatableCell: Represents individual cells within a datatable row.
• DatatableNoData: Displayed when there is no data to show in the datatable, including an optional reload button.

Basic example

TitleTitleData cellData cellData cellData cellData cellData cell

<div class="qtm-datatable" role="table">
  <div class="qtm-datatable-header" role="rowgroup">
    <div class="qtm-datatable-row" role="row">
      <div class="qtm-datatable-cell" role="cell">Title</div>
      <div class="qtm-datatable-cell" role="cell">Title</div>
    </div>
  </div>
  <div class="qtm-datatable-body" role="rowgroup">
    <div class="qtm-datatable-row" role="row">
      <div class="qtm-datatable-cell" role="cell">Data cell</div>
      <div class="qtm-datatable-cell" role="cell">Data cell</div>
    </div>
    <div class="qtm-datatable-row" role="row">
      <div class="qtm-datatable-cell" role="cell">Data cell</div>
      <div class="qtm-datatable-cell" role="cell">Data cell</div>
    </div>
    <div class="qtm-datatable-row" role="row">
      <div class="qtm-datatable-cell" role="cell">Data cell</div>
      <div class="qtm-datatable-cell" role="cell">Data cell</div>
    </div>
  </div>
</div>

Props

Sizes

Defines the size of the datatable. Options include 'small', 'medium', and 'large'.

TitleTitleData cellData cellData cellData cellData cellData cell

TitleTitleData cellData cellData cellData cellData cellData cell

TitleTitleData cellData cellData cellData cellData cellData cell

<div class="qtm-datatable qtm-small" role="table">...</div>
<div class="qtm-datatable qtm-medium" role="table">...</div>
<div class="qtm-datatable qtm-large" role="table">...</div>

Array style

Determines the style of the datatable. Options include 'flat', 'grid', 'lines', and 'zebras'.

TitleTitleData cellData cellData cellData cellData cellData cell

TitleTitleData cellData cellData cellData cellData cellData cell

TitleTitleData cellData cellData cellData cellData cellData cell

TitleTitleData cellData cellData cellData cellData cellData cell

<div class="qtm-datatable qtm-flat" role="table">...</div>
<div class="qtm-datatable qtm-grid" role="table">...</div>
<div class="qtm-datatable qtm-lines" role="table">...</div>
<div class="qtm-datatable qtm-zebras" role="table">...</div>

Margin density

Specifies the margin density of the datatable. Options include 'small', 'medium', and 'large'.

TitleTitleData cellData cellData cellData cellData cellData cell

TitleTitleData cellData cellData cellData cellData cellData cell

TitleTitleData cellData cellData cellData cellData cellData cell

<div class="qtm-datatable qtm-margin-density-small" role="table">...</div>
<div class="qtm-datatable qtm-margin-density-medium" role="table">...</div>
<div class="qtm-datatable qtm-margin-density-large" role="table">...</div>

No Data State

<div class="qtm-datatable-no-data">
  <div class="qtm-icon">
    <i class="material-icons">error_outline</i>
  </div>
  <span class="qtm-caption-1">
    Unable to load the table data.
  </span>
  <button class="qtm-button qtm-primary qtm-ghost qtm-small" type="submit">
    Reload
  </button>
</div>

No Data State with sizes

<!-- small -->
<div class="qtm-datatable-no-data">
  <div class="qtm-icon qtm-icon-small">
    <i class="material-icons">error_outline</i>
  </div>
  <span class="qtm-caption-2">
    Unable to load the table data.
  </span>
  <button class="qtm-button qtm-primary qtm-ghost qtm-small" type="submit">
    Reload
  </button>
</div>
<!-- medium -->
<div class="qtm-datatable-no-data">
  <div class="qtm-icon qtm-icon-medium">
    <i class="material-icons">error_outline</i>
  </div>
  <span class="qtm-caption-1">
    Unable to load the table data.
  </span>
  <button class="qtm-button qtm-primary qtm-ghost qtm-medium" type="submit">
    Reload
  </button>
</div>
<!-- large -->
<div class="qtm-datatable-no-data">
  <div class="qtm-icon qtm-icon-large">
    <i class="material-icons">error_outline</i>
  </div>
  <span class="qtm-body-2">
    Unable to load the table data.
  </span>
  <button class="qtm-button qtm-primary qtm-ghost qtm-large" type="submit">
    Reload
  </button>
</div>