Table

Bảng dữ liệu đầy đủ tính năng: sort, fixed columns, inner scroll, custom colors, pagination.

Playground

#	Name	Department	Score	Status
1	Alice Nguyen	Engineering	92	Active
2	Bob Tran	Design	87	Active
3	Carol Le	Management	76	Inactive
4	David Pham	Engineering	95	Active
5	Eva Hoang	QA	68	Pending

size

bordered

striped

hoverable

rounded

<Table
  columns={columns}
  data={data}
  rowKey="id"
  hoverable
/>

Chỉ cần columns và data. Bảng tự sort nội bộ khi đặt sortable: true trên cột.

#	Name	Department	Score	Status
1	Alice Nguyen	Engineering	92	Active
2	Bob Tran	Design	87	Active
3	Carol Le	Management	76	Inactive
4	David Pham	Engineering	95	Active
5	Eva Hoang	QA	68	Pending

headerBg / headerColor thay đổi header. bodyBg đổi nền body. hoverBg đổi màu hover hàng. Click vào ô màu để chọn màu.

Header bgHeader textBody bg

Hover color

Opacity: 8%

#	Name	Department	Score	Status
1	Alice Nguyen	Engineering	92	Active
2	Bob Tran	Design	87	Active
3	Carol Le	Management	76	Inactive
4	David Pham	Engineering	95	Active
5	Eva Hoang	QA	68	Pending

Đặt fixed: 'left' hoặc fixed: 'right' trên cột. Cần khai báo width để tính offset đúng. Cuộn ngang để thấy hiệu ứng.

#	Name	Dept	Score	Salary	Status
1	Alice Nguyen	Engineering	92	$3,200	Active
2	Bob Tran	Design	87	$2,800	Active
3	Carol Le	Management	76	$4,100	Inactive
4	David Pham	Engineering	95	$3,500	Active
5	Eva Hoang	QA	68	$2,400	Pending
6	Frank Bui	Engineering	81	$3,100	Active
7	Grace Do	Marketing	74	$2,600	Active
8	Hank Vu	Design	90	$2,900	Inactive
9	Iris Ngo	QA	83	$2,500	Active
10	Jack Dinh	Engineering	97	$3,800	Active
11	Karen Nguyen	HR	72	$2,700	Pending
12	Leo Trinh	Marketing	88	$2,600	Active

scrollY giới hạn chiều cao phần body và bật cuộn dọc. Header tự động sticky.

#	Name	Department	Score	Status
1	Alice Nguyen	Engineering	92	Active
2	Bob Tran	Design	87	Active
3	Carol Le	Management	76	Inactive
4	David Pham	Engineering	95	Active
5	Eva Hoang	QA	68	Pending
6	Frank Bui	Engineering	81	Active
7	Grace Do	Marketing	74	Active
8	Hank Vu	Design	90	Inactive
9	Iris Ngo	QA	83	Active
10	Jack Dinh	Engineering	97	Active
11	Karen Nguyen	HR	72	Pending
12	Leo Trinh	Marketing	88	Active

fullWidth={false} làm bảng co lại theo nội dung thay vì kéo dài 100%.

Truyền pagination prop để bật phân trang nội bộ. Table tự slice data theo trang hiện tại.

#	Name	Department	Score	Status
1	Alice Nguyen	Engineering	92	Active
2	Bob Tran	Design	87	Active
3	Carol Le	Management	76	Inactive
4	David Pham	Engineering	95	Active

1–4 / 12

pageSizeOptions hiển thị dropdown cho phép đổi số hàng mỗi trang.

#	Name	Department	Score	Status
1	Alice Nguyen	Engineering	92	Active
2	Bob Tran	Design	87	Active
3	Carol Le	Management	76	Inactive
4	David Pham	Engineering	95	Active

1–4 / 12

Các tính năng hoạt động cùng nhau: cuộn dọc giới hạn, cột ghim, phân trang.

#	Name	Dept	Score	Salary	Status
1	Alice Nguyen	Engineering	92	$3,200	Active
2	Bob Tran	Design	87	$2,800	Active
3	Carol Le	Management	76	$4,100	Inactive
4	David Pham	Engineering	95	$3,500	Active
5	Eva Hoang	QA	68	$2,400	Pending
6	Frank Bui	Engineering	81	$3,100	Active

1–6 / 12

loading={true} thay thế nội dung bằng skeleton rows với hiệu ứng pulse.

#	Name	Department	Score	Status
1	Alice Nguyen	Engineering	92	Active
2	Bob Tran	Design	87	Active
3	Carol Le	Management	76	Inactive
4	David Pham	Engineering	95	Active
5	Eva Hoang	QA	68	Pending
6	Frank Bui	Engineering	81	Active
7	Grace Do	Marketing	74	Active
8	Hank Vu	Design	90	Inactive
9	Iris Ngo	QA	83	Active
10	Jack Dinh	Engineering	97	Active
11	Karen Nguyen	HR	72	Pending
12	Leo Trinh	Marketing	88	Active

Table API

Property	Type	Default	Description
`columns`*	`TableColumn<T>[]`	—	Column definitions
`data`*	`T[]`	—	Row data array
`rowKey`	`string \| (row) => string \| number`	—	Unique key per row
`loading`	`boolean`	false	Show skeleton rows
`loadingRows`	`number`	5	Skeleton row count
`bordered`	`boolean`	false	Border every cell and the table outline
`striped`	`boolean`	false	Alternate even-row background
`hoverable`	`boolean`	false	Highlight rows on hover
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Cell padding preset
`empty`	`ReactNode`	'Không có dữ liệu'	Empty-state content
`caption`	`string`	—	Caption below the table
`stickyHeader`	`boolean`	false	Pin header row (auto-on with scrollY)
`onSort`	`(key, dir) => void`	—	Sort callback
`headerBg`	`string`	—	Custom header background colour
`headerColor`	`string`	—	Custom header text colour
`bodyBg`	`string`	—	Custom table body background colour
`hoverBg`	`string`	—	Custom row hover background colour
`scrollY`	`string \| number`	—	Max height for inner scroll — activates vertical overflow
`fullWidth`	`boolean`	true	Stretch table to fill container width
`pagination`	`TablePaginationConfig`	—	Enable pagination bar
`className`	`string`	—	Extra className on the wrapper

Property	Type	Default	Description
`key`*	`string`	—	Unique column id, used as fallback dataIndex
`title`*	`ReactNode`	—	Header content
`dataIndex`	`string`	—	Row field to read
`render`	`(value, row, index) => ReactNode`	—	Custom cell renderer
`width`	`string \| number`	—	Column width — required for fixed columns
`align`	`'left' \| 'center' \| 'right'`	'left'	Cell text alignment
`sortable`	`boolean`	false	Enable click-to-sort
`fixed`	`'left' \| 'right'`	—	Pin column to left or right edge — requires width

Property	Type	Default	Description
`pageSize`	`number`	10	Rows per page
`total`	`number`	—	Override total count for server-side pagination
`showTotal`	`boolean`	true	Show "X–Y / Z" counter
`pageSizeOptions`	`number[]`	—	Render a page-size selector with these values
`onChange`	`(page, pageSize) => void`	—	Called on page or size change