Data Table

import { AXDataTable2Module } from '@acorex/components/data-table2';

Data Table component is a key UI element for displaying tabular data in a clear, organized format. It allows users to efficiently view, search, sort, and interact with large datasets. With customizable features like column sorting, filtering, pagination, and row selection, the Data Table provides a powerful solution for presenting and managing data in applications.

Overview

In this section, you can test different options of this component and see the output in real time

No Record Found

		First Name	Last Name	price	mobile	email
				SUM: 0

Item Height

Show Header

Fixed Header

Show Footer

Fixed Footer

Alternative

Usage

A simple example of using ax-data-table

Preview

Code

Cell Template

You can pass element ref to cellTemplate attribute for rendering your desired content

Preview

Code

Empty Template

You can pass a element ref to emptyTemplate property for rendering you custom empty state.

Preview

Code

Allow Resize And Reorder

You can pass allowResizing boolean attribute to ax-text-columns for enable or disable columns resize and also pass allowReordering boolean attribute to ax-data-table for enable or disable columns reorder

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-data-table-font-size	0.875rem	this variable sets the font size for text displayed within data table components. It helps maintain consistent typography and readability across the table's rows and columns.
--ax-comp-data-table-line-height	1.25rem	defines the line height for text within data table components. It ensures proper vertical spacing between lines of text, enhancing readability and visual alignment in the table's content.
--ax-comp-data-table-border-color	--ax-sys-border-color	this variable specifies the color of the borders in the data table component. It ensures a clear visual separation between cells, enhancing the table's structure and readability.
--ax-comp-data-table-column-bg-color	--ax-sys-color-surface-lowest	defines the background color of the columns in a data table component. It is used to differentiate column headers or individual columns, improving the table’s visual clarity and organization.
--ax-comp-data-table-header-bg-color	--ax-sys-color-surface-low	this variable specifies the background color of the header row in a data table component. It helps visually distinguish the header from the rest of the table, enhancing readability and structure.
--ax-comp-data-table-header-text-color	--ax-sys-color-on-surface-low	defines the text color for the header row in a data table component. It ensures the text is legible and stands out against the header background, improving readability and visual hierarchy.
--ax-comp-data-table-footer-bg-color	--ax-sys-color-surface-low	this variable specifies the background color of the footer row in a data table component. It helps visually distinguish the footer from the rest of the table, creating a clear separation for pagination or summary information.
--ax-comp-data-table-footer-text-color	--ax-sys-color-on-surface-low	defines the text color for the footer row in a data table component. It ensures that the text in the footer is legible and provides adequate contrast against the footer background color.
--ax-comp-data-table-hover-bg-color	--ax-sys-color-surface	this variable specifies the background color of table rows when hovered over. It enhances user interaction by providing a visual cue, making it easier to identify the row currently being hovered.
--ax-comp-data-table-hover-text-color	--ax-sys-color-on-surface	defines the text color for table rows when hovered over. It ensures the text remains legible and visually distinct against the background during hover interactions, enhancing the user experience.
--ax-comp-data-table-focus-bg-color	--ax-sys-color-primary-100	this variable specifies the background color of table rows or cells when they are focused. It provides a visual cue for keyboard navigation or selection, improving accessibility and user interaction.
--ax-comp-data-table-focus-text-color	--ax-sys-color-on-contrast-primary	defines the text color for table rows or cells when they are focused. It ensures the text remains clear and readable when a user selects or navigates to a specific row or cell, enhancing accessibility and visual clarity.
--ax-comp-data-table-selected-bg-color	--ax-sys-color-primary-200	defines the background color of a table row or cell when it is selected. It visually highlights the selected item, making it easier for users to identify their choice in the data table.
--ax-comp-data-table-selected-text-color	--ax-sys-color-on-contrast-primary	this variable specifies the text color for a selected table row or cell. It ensures the text remains legible and stands out against the background color of the selected item, improving user interaction and clarity.
--ax-comp-data-table-selected-hover-bg-color	--ax-sys-color-primary-300	defines the background color of a selected table row or cell when hovered over. It enhances the visual feedback for the user, ensuring that the selected item is clearly highlighted during hover interactions.
--ax-comp-data-table-selected-hover-text-color	--ax-sys-color-on-contrast-primary	this variable specifies the text color for a selected table row or cell when hovered over. It ensures the text remains legible and visually distinct during hover interactions, enhancing the user experience when interacting with selected items.
--ax-comp-data-table-index-bg-color	--ax-sys-color-surface-low	defines the background color for the index column (or row number) in a data table component. It helps visually distinguish the index values from other columns, improving table organization and clarity.
--ax-comp-data-table-index-text-color	--ax-sys-color-on-surface-low	this variable specifies the text color for the index column (or row number) in a data table component. It ensures that the index text is legible and stands out against the background color of the index column.
--ax-comp-data-table-alternative-bg-color	--ax-sys-color-surface-low	defines the background color for alternating rows in a data table. It improves readability by creating a striped effect, making it easier to distinguish between consecutive rows.
--ax-comp-data-table-alternative-text-color	--ax-sys-color-on-surface-low	this variable specifies the text color for alternating rows in a data table. It ensures the text remains readable and provides enough contrast against the alternating row background, enhancing table legibility.
--ax-comp-data-table-alternative-selected-bg-color	--ax-sys-color-primary-400	defines the background color for alternating rows when they are selected in a data table. It helps visually distinguish selected rows in tables with alternating row colors, enhancing user interaction and clarity.
--ax-comp-data-table-alternative-selected-text-color	--ax-sys-color-on-contrast-primary	this variable specifies the text color for alternating rows when they are selected in a data table. It ensures the text remains legible and stands out against the background color of the selected alternating row, improving the clarity of user interactions.
--ax-comp-data-table-alternative-selected-hover-bg-color	--ax-sys-color-primary-500	defines the background color for a selected alternating row when hovered over in a data table. It provides a visual cue during hover interactions, helping users clearly identify selected rows that are being interacted with.
--ax-comp-data-table-alternative-selected-hover-text-color	--ax-sys-color-on-contrast-primary	this variable specifies the text color for a selected alternating row when hovered over in a data table. It ensures that the text remains legible and visually distinct during hover interactions, enhancing user experience and clarity.