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

<qtm-datatable size="medium" margin-density="medium" array-style="lines">
  <qtm-datatable-header>
    <qtm-datatable-row>
      <qtm-datatable-cell>Title</qtm-datatable-cell>
      <qtm-datatable-cell>Title</qtm-datatable-cell>
    </qtm-datatable-row>
  </qtm-datatable-header>
  <qtm-datatable-body>
    <qtm-datatable-row>
      <qtm-datatable-cell>Data cell</qtm-datatable-cell>
      <qtm-datatable-cell>Data cell</qtm-datatable-cell>
    </qtm-datatable-row>
    <qtm-datatable-row>
      <qtm-datatable-cell>Data cell</qtm-datatable-cell>
      <qtm-datatable-cell>Data cell</qtm-datatable-cell>
    </qtm-datatable-row>
    <qtm-datatable-row>
      <qtm-datatable-cell>Data cell</qtm-datatable-cell>
      <qtm-datatable-cell>Data cell</qtm-datatable-cell>
    </qtm-datatable-row>
  </qtm-datatable-body>
</qtm-datatable>

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

<qtm-datatable size="small">...</qtm-datatable>
<qtm-datatable size="medium">...</qtm-datatable>
<qtm-datatable size="large">...</qtm-datatable>

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

<qtm-datatable array-style="flat">...</qtm-datatable>
<qtm-datatable array-style="grid">...</qtm-datatable>
<qtm-datatable array-style="lines">...</qtm-datatable>
<qtm-datatable array-style="zebras">...</qtm-datatable>

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

<qtm-datatable margin-density="small">...</qtm-datatable>
<qtm-datatable margin-density="medium">...</qtm-datatable>
<qtm-datatable margin-density="large">...</qtm-datatable>

No Data State

<qtm-datatable-no-data></qtm-datatable-no-data>

No Data State with sizes

<qtm-datatable-no-data size='small'></qtm-datatable-no-data>
<qtm-datatable-no-data size='medium'></qtm-datatable-no-data>
<qtm-datatable-no-data size='large'></qtm-datatable-no-data>

API

qtm-datatable

Property	Type	Default	Description
arrayStyle	"flat" | "grid" | "lines" | "zebras"	'lines'	The table style
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
marginDensity	"large" | "medium" | "small"	'medium'	The table margin density
size	"large" | "medium" | "small"	'medium'	The size of child elements( header, body, row, cell) in data table array

qtm-datatable-no-data

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
size	"large" | "medium" | "small"	'medium'	The size of child elements

Event	Type	Description
reload	CustomEvent<void>	Callback fired when the reload button is clicked.