DataGrid

Advanced data table with built-in sorting, filtering, pagination, and row selection.

tsx

import { DataGrid } from '@xdev-asia/x-ui-react';

Example

	ID↕	Name↕	Email↕	Role↕	Status

	1	John Doe	john@example.com	Admin	active
	2	Jane Smith	jane@example.com	Editor	active
	3	Bob Johnson	bob@example.com	Viewer	inactive
	4	Alice Brown	alice@example.com	Editor	active
	5	Charlie Wilson	charlie@example.com	Admin	active

Rows per page:

1 - 5 of 5

1 / 1

Features

✅ Column sorting (ascending/descending)
✅ Column filtering with text search
✅ Pagination with customizable page sizes
✅ Row selection (single or multiple)
✅ Custom cell renderers
✅ Loading and empty states

Props

data - Array of data objects
columns - Column definitions array
rowKey - Unique row identifier
pagination - Enable pagination
pageSize - Items per page (default: 10)
selectable - Enable row selection
selectionMode - 'single' | 'multiple'
loading - Show loading state
variant - 'default' | 'striped' | 'bordered'