Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

DataTable

v.1.0.0 | Saturn

Usage

import { DataTable } from '@kubit-ui-web/react-components'
12345678910
<DataTable
  variant="DEFAULT"
  columns={[
    { field: 'ref', headerContent: 'Ref', textAlign: 'left' },
    { field: 'firstName', headerContent: 'First name' },
    { field: 'lastName', headerContent: 'Last name' },
    { field: 'profile', headerContent: 'Profile' },
  ]}
  rows={[
    { id: '1', ref: '1', firstName: 'John', lastName: 'Snow', profile: 'Admin' },

Props

Let's delve into the versatility of the dataTable component by examining all its avalaible props.

PropertyTypeDefaultDescription
variantstring-Current variant of DataTable
columnsDataTableColumnType-Array of columns
rowsDataTableRowType-Array of rows
rowGroupsDataTableRowGroupType-Array of rowGroups
activeRowsstring-Array of active rows. Referenced by the row id
hoverableboolean-Generable hoverable prop for table body rows
hoverableRowsstring-When defined, only these rows will be hoverable
nonHoverableRowsstring-When defined, these rows will not be hoverable
stickyHeadboolean-When true, table head will be sticky
captionDataTableTableCaptionType-Main table caption
configDataTableConfigType-Allow to configure table, tableHead, tableHeadRow and tableBody extra props
aria-labelstring-Only when it has scroll, scrollable container aria label
aria-labelledbystring-Only when it has scroll, scrollable container aria labelled by
dataTestIdstringdataTableId for testing
ctvstring-Modify styles for the component

Types

DataTableColumnType

DataTableColumnType allows configure a column of a dataTable:

  • field: string. The column identifier. It's used to map with the row cell value.
  • headerContent?: DataTableCellValueType. Content to be displayed in the header cell.
  • headerHiddenContent?: string. Content to be displayed in the header cell when headen. Usefull for screen readers when the header has focusable elements.
  • width?: string. The width of the column.
  • minWidth?: string. The minimum width of the column.
  • maxWidth?: string. The maximum width of the column.
  • hidden?: boolean. Hide the column header.
  • sticky?: boolean. Make the column sticky.
  • textAlign?: string. The text align of the header cell.
  • valueTextAlign?: string. The text align of the value cell.
  • valueGetter?: (value: DataTableCellValueType, row: DataTableRowType) => DataTableCellValueType. Function to get the value of the cell.

DataTableRowType

DataTableRowType allows configure a row of a dataTable:

  • id?: string. The row identifier.
  • config?: DataTableTableRowConfigType. This prop allows to override the row configuration.
  • [key: string]: DataTableCellValueType | DataTableTableRowConfigType. This generate the map between the column and the header value

DataTableRowGroupType

DataTableRowGroupType allows configure a row group of a dataTable:

  • divider?: DataTableRowDividerType. The divider of the row group.
  • caption?: DataTableTableCaptionType. The caption of the row group.
  • config?: This prop allows to override the row group configuration for the table and tableBody.
  • rows: DataTableRowType[]. The rows of the row group.

DataTableConfigType

DataTableConfigType allows overrride the datatable configuration:

  • table?: DataTableTableConfigType. This prop allows sto override the table configuration.
  • tableHead?: DataTableTableHeadConfigType. This prop allows to override the table head configuration.
  • tableHeadRow?: DataTableTableRowConfigType. This prop allows to override the table head row configuration.
  • tableBody?: DataTableTableBodyConfigType. This prop allows sto override the table body configuration.

DataTableCellValueType

DataTableCellValueType represents the cell value in a dataTable. It can be a simple value like a string or JSX.Element or a complex one, using the complex prop.

  • React.ReactNode | { complex?: DataTableCellType }

DataTableTableRowConfigType

DataTableTableRowConfigType allows to override a row configuration using the tableRow type, ITableRow.

DataTableRowDividerType

DataTableRowDividerType allows to configure a row divider using the tableDivider type, ITableDivider.

DataTableTableCaptionType

DataTableTableCaptionType allows to configure a table caption using the tableCaption type, ITableCaption.

DataTableTableConfigType

DataTableTableConfigType allows to configure a table using the table type, ITableV2.

DataTableTableHeadConfigType

DataTableTableHeadConfigType allows to configure a table head using the tableHead type, ITableHead.

DataTableTableBodyConfigType

DataTableTableBodyConfigType allows to configure a table body using the tableBody type, ITableBody.

DataTableUsage
DataTableStyling API