Data table

Data tables are used to present data sets in a simple and organized way. Unlike standard HTML Table, it is responsive and compatible with all the screen sizes.

Examples

Chi Vue

Props

Property	Description	Interface	Default
`config`	To customize Data table behavior and style	{ columnResize?: `boolean`; columnSizes?: { xs: `number[]`; sm: `number[]`; md: `number[]`; lg: `number[]`; xl: `number[]`; }; defaultSort?: `DataTableSortConfig`; unsorted?: `boolean`; mode?: `'clientside' \| 'serverside'`; noResultsMessage?: `string`; noResultsIcon?: `string`; noFiltersMessage?: `string`; noFiltersIcon?: `string`; pagination: { activePage?: `number`; compact?: `boolean`; firstLast?: `boolean`; hideOnSinglePage?: `boolean`; pages?: `number`; pageJumper?: `boolean`; results?: `number`; }; resultsPerPage?: `number`; emptyActionable?: `DataTableEmptyActionableConfig`; style: `DataTableStyleConfig`; selectable?: `boolean \| 'radio'`; reserveExpansionSlot?: `boolean`; truncation?: `boolean`; print?: { mode?: `'full' \| 'printonly' \| 'screenonly'`; isNestedContentPrintDisabled?: `boolean`; }, treeSelection: `boolean`; cellWrap: `boolean`; showExpandAll: `boolean`; showSelectAllDropdown: `boolean`; actions?: `DataTableAction[]` }	undefined
`dataTableData`	To provide Data Table with Head and Body related data	{ head: { [code: string]: { label: `string`; icon?: `string`; sortable?: `boolean`; sortBy?: `string`; sortDataType?: `'string' \| 'number' \| 'date' \| 'boolean'`; align?: `'left' \| 'center' \| 'right'`; allowOverflow?: `'visible' \| 'hidden'`; key?: `boolean`; bold?: `boolean`; description?: `string \| DataTableColumnDescription`; isPrintDisabled?: `boolean`; }; }; body: `DataTableRow[]`; }	undefined

Property

Description

Interface

Default

config

To customize Data table behavior and style

{
  columnResize?: boolean;
  columnSizes?: {
    xs: number[];
    sm: number[];
    md: number[];
    lg: number[];
    xl: number[];
  };
  defaultSort?: DataTableSortConfig;
  unsorted?: boolean;
  mode?: 'clientside' | 'serverside';
  noResultsMessage?: string;
  noResultsIcon?: string;
  noFiltersMessage?: string;
  noFiltersIcon?: string;
  pagination: {
    activePage?: number;
    compact?: boolean;
    firstLast?: boolean;
    hideOnSinglePage?: boolean;
    pages?: number;
    pageJumper?: boolean;
    results?: number;
  };
  resultsPerPage?: number;
  emptyActionable?: DataTableEmptyActionableConfig;
  style: DataTableStyleConfig;
  selectable?: boolean | 'radio';
  reserveExpansionSlot?: boolean;
  truncation?: boolean;
  print?: {
    mode?: 'full' | 'printonly' | 'screenonly';
    isNestedContentPrintDisabled?: boolean;
  },
  treeSelection: boolean;
  cellWrap: boolean;
  showExpandAll: boolean;
  showSelectAllDropdown: boolean;
  actions?: DataTableAction[]
}

undefined

dataTableData

To provide Data Table with Head and Body related data

{
  head: {
    [code: string]: {
      label: string;
      icon?: string;
      sortable?: boolean;
      sortBy?: string;
      sortDataType?: 'string' | 'number' | 'date' | 'boolean';
      align?: 'left' | 'center' | 'right';
      allowOverflow?: 'visible' | 'hidden';
      key?: boolean;
      bold?: boolean;
      description?: string | DataTableColumnDescription;
      isPrintDisabled?: boolean;
    };
  };
  body: DataTableRow[];
}

undefined

Interfaces and types

Name	Interface
`DataTableRow`	interface DataTableRow { active: `boolean`; expanded: `boolean`; data: `Record <string, any>`; nestedContent: { table: { data: `DataTableRow[]`; }; template: `string`; value: `string`; payload: `any`; }; id: `string`; selected?: `boolean`; selectionDisabled?: `boolean`; selectableDisabledMessage?: `string`; print?: { isNestedContentPrintDisabled?: boolean; }; state?: `'success' \| 'warning' \| 'danger' \| 'info'`; autoExpandedAlignment?: `boolean`; }
`DataTableStyleConfig`	interface DataTableStyleConfig { portal?: `boolean`; compact?: `boolean`; bordered?: `boolean`; noBorder?: `boolean`; hover?: `boolean`; striped?: `boolean`; size?: `DataTableSizes`; }
`DataTableSortConfig`	interface DataTableSortConfig { direction: `'ascending' \| 'descending'`; fullServerSort?: `boolean`; key: `string`; sortBy?: `string`; }
`DataTableEmptyActionableConfig`	interface DataTableEmptyActionableConfig { isActionable?: `boolean`; icon?: `string`; message?: { actionLink?: `string`; text?: `string`; }; }
`DataTableSizes`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`
`DataTableColumnDescription`	interface DataTableColumnDescription { title?: `string`; text?: `string`; template?: `string`; payload?: `any`; }
`DataTableAction`	interface DataTableAction: { label: `string`; icon: `string`; onClick: `(props: DataTableRow \| undefined) => void`; hide?: `'desktop' \| 'tablet' \| 'mobile'`; }

Methods

Method	Description	Returns	Parameters
`toggleRow() => void`	To expand / collapse specific rows.	Type: void	row: `{ rowId: string }` action?: `'expand' \| 'collapse'`
`print() => void`	To print the data table	Type: void	title: `string`

Events

Event	Description	Type
`chiDataSorting`	The user has sorted the table by a specific column	{ column: `string \| undefined`; direction: `'ascending' \| 'descending' \| undefined`; data?: `DataTableRow[]`; }
`chiPageChange`	The user changed active page	{ page: `number`; data?: `DataTableRow[]`; }
`chiRowExpanded`	The user expanded a row	`DataTableRow`
`chiRowClick`	The user clicks in a row	`DataTableRow`
`chiRowCollapsed`	The user collapsed a row	`DataTableRow`
`chiSelectAll`	The user selected all the rows on the page	`DataTableRow[]`
`chiSelectThisPage`	The user selected all the rows on the page	`DataTableRow[]`
`chiDeselectAll`	The user deselected all the rows on the page	`DataTableRow[]`
`chiDeselectThisPage`	The user deselected all the rows on the page	`DataTableRow[]`
`chiSelectAllPages`	The user selected all the rows on the table	`DataTableRow[]`
`chiDeselectAllPages`	The user deselected all the rows on the table	`DataTableRow[]`
`chiRowSelected`	The user selected a row	`DataTableRow`
`chiRowDeselected`	The user deselected a row	`DataTableRow`
`chiShowSelectedRowsOnly`	The user selected show selected only from bulk actions	`DataTableRow[]`
`chiCancel`	The user cancelled bulk actions	`undefined`
`chiExpandAll`	The user expands all the rows on the page	`DataTableRow[]`
`chiCollapseAll`	The user collapses all the rows on the page	`DataTableRow[]`
`chiEmptyActionableLink`	The user clicks the empty actionable link	`undefined`

Accessibility

Accessibility guidelines coming soon