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

Title

Title

Data cell

Data cell

Data cell

Data cell

Data cell

Data cell

<Datatable size="medium" marginDensity="medium" arrayStyle="lines">
  <DatatableHeader>
    <DatatableRow>
      <DatatableCell>Title</DatatableCell>
      <DatatableCell>Title</DatatableCell>
    </DatatableRow>
  </DatatableHeader>
  <DatatableBody>
    <DatatableRow>
      <DatatableCell>Data cell</DatatableCell>
      <DatatableCell>Data cell</DatatableCell>
    </DatatableRow>
    <DatatableRow>
      <DatatableCell>Data cell</DatatableCell>
      <DatatableCell>Data cell</DatatableCell>
    </DatatableRow>
    <DatatableRow>
      <DatatableCell>Data cell</DatatableCell>
      <DatatableCell>Data cell</DatatableCell>
    </DatatableRow>
  </DatatableBody>
</Datatable>

Props

Sizes

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

Title

Title

Data cell

Data cell

Data cell

Data cell

Data cell

Data cell

Title

Title

Data cell

Data cell

Data cell

Data cell

Data cell

Data cell

Title

Title

Data cell

Data cell

Data cell

Data cell

Data cell

Data cell

<Datatable size="small">...</Datatable>
<Datatable size="medium">...</Datatable>
<Datatable size="large">...</Datatable>

Array style

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

Title

Title

Data cell

Data cell

Data cell

Data cell

Data cell

Data cell

Title

Title

Data cell

Data cell

Data cell

Data cell

Data cell

Data cell

Title

Title

Data cell

Data cell

Data cell

Data cell

Data cell

Data cell

Title

Title

Data cell

Data cell

Data cell

Data cell

Data cell

Data cell

<Datatable arrayStyle="flat">...</Datatable>
<Datatable arrayStyle="grid">...</Datatable>
<Datatable arrayStyle="lines">...</Datatable>
<Datatable arrayStyle="zebras">...</Datatable>

Margin density

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

Title

Title

Data cell

Data cell

Data cell

Data cell

Data cell

Data cell

Title

Title

Data cell

Data cell

Data cell

Data cell

Data cell

Data cell

Title

Title

Data cell

Data cell

Data cell

Data cell

Data cell

Data cell

<Datatable marginDensity="small">...</Datatable>
<Datatable marginDensity="medium">...</Datatable>
<Datatable marginDensity="large">...</Datatable>

No Data State

error_outlineUnable to load the table data.

<DatatableNoData></DatatableNoData>

No Data State with sizes

error_outlineUnable to load the table data.

error_outlineUnable to load the table data.

error_outline

Unable to load the table data.

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

Event handling

You can handle reload events when there's no data in the table using the onReload prop of the DatatableNoData component.

error_outlineUnable to load the table data.

const handleReload = () => {
  console.log('Reloading data...');
  // Add your reload logic here, such as fetching data from an API
  fetchData();
};

<DatatableNoData onReload={handleReload} />

API

QtmDatatable

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

QtmDatatableNoData

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
onReload	CustomEvent<void>	Callback fired when the reload button is clicked.