Skip to main content
HomeComponentsDatatable
warning
This is a beta release of the Quantum web libraries
Please be careful when using them in production, as they may contain bugs, unstable breaking changes, and incomplete features.
Go to the latest version

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
<QtmDatatable size="medium" marginDensity="medium" arrayStyle="lines">
  <QtmDatatableHeader>
    <QtmDatatableRow>
      <QtmDatatableCell>Title</QtmDatatableCell>
      <QtmDatatableCell>Title</QtmDatatableCell>
    </QtmDatatableRow>
  </QtmDatatableHeader>
  <QtmDatatableBody>
    <QtmDatatableRow>
      <QtmDatatableCell>Data cell</QtmDatatableCell>
      <QtmDatatableCell>Data cell</QtmDatatableCell>
    </QtmDatatableRow>
    <QtmDatatableRow>
      <QtmDatatableCell>Data cell</QtmDatatableCell>
      <QtmDatatableCell>Data cell</QtmDatatableCell>
    </QtmDatatableRow>
    <QtmDatatableRow>
      <QtmDatatableCell>Data cell</QtmDatatableCell>
      <QtmDatatableCell>Data cell</QtmDatatableCell>
    </QtmDatatableRow>
  </QtmDatatableBody>
</QtmDatatable>

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
<QtmDatatable size="small">...</QtmDatatable>
<QtmDatatable size="medium">...</QtmDatatable>
<QtmDatatable size="large">...</QtmDatatable>

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
<QtmDatatable arrayStyle="flat">...</QtmDatatable>
<QtmDatatable arrayStyle="grid">...</QtmDatatable>
<QtmDatatable arrayStyle="lines">...</QtmDatatable>
<QtmDatatable arrayStyle="zebras">...</QtmDatatable>

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
<QtmDatatable marginDensity="small">...</QtmDatatable>
<QtmDatatable marginDensity="medium">...</QtmDatatable>
<QtmDatatable marginDensity="large">...</QtmDatatable>

No Data State​

<QtmDatatableNoData></QtmDatatableNoData>

No Data State with sizes​

<QtmDatatableNoData size='small'/>
<QtmDatatableNoData size='medium'/>
<QtmDatatableNoData size='large'/>

API​

Datatable​

Loading API documentation...

DatatableBody​

Loading API documentation...

DatatableCell​

Loading API documentation...

DatatableHeader​

Loading API documentation...

DatatableNoData​

Loading API documentation...

DatatableRow​

Loading API documentation...

Spotted a bug, have a question, or want to suggest a new feature?

Submit an issue on GitLab