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
/>

Basic

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

onSort callback

Dùng onSort để nhận key và hướng sort mỗi khi người dùng click vào header có sortable: true. Hữu ích cho server-side sorting.

#	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

onSort log:chưa có — hãy click vào cột Name hoặc Score

Custom colors

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

Header bgHeader textBody bgBody text

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

Fixed columns

Đặ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	Department	Email	Phone	City	Manager	Score	Salary	Status
1	Alice Nguyen	Engineering	alice.nguyen@company.com	+84 91111111	Hà Nội	Alice Nguyen	92	$3,200	Active
2	Bob Tran	Design	bob.tran@company.com	+84 92222222	HCM	Bob Tran	87	$2,800	Active
3	Carol Le	Management	carol.le@company.com	+84 93333333	Đà Nẵng	Carol Le	76	$4,100	Inactive
4	David Pham	Engineering	david.pham@company.com	+84 94444444	Huế	Alice Nguyen	95	$3,500	Active
5	Eva Hoang	QA	eva.hoang@company.com	+84 95555555	Cần Thơ	Bob Tran	68	$2,400	Pending
6	Frank Bui	Engineering	frank.bui@company.com	+84 96666666	Hà Nội	Carol Le	81	$3,100	Active
7	Grace Do	Marketing	grace.do@company.com	+84 97777777	HCM	Alice Nguyen	74	$2,600	Active
8	Hank Vu	Design	hank.vu@company.com	+84 98888888	Đà Nẵng	Bob Tran	90	$2,900	Inactive
9	Iris Ngo	QA	iris.ngo@company.com	+84 99999999	Huế	Carol Le	83	$2,500	Active
10	Jack Dinh	Engineering	jack.dinh@company.com	+84 1111110	Cần Thơ	Alice Nguyen	97	$3,800	Active
11	Karen Nguyen	HR	karen.nguyen@company.com	+84 2222221	Hà Nội	Bob Tran	72	$2,700	Pending
12	Leo Trinh	Marketing	leo.trinh@company.com	+84 3333332	HCM	Carol Le	88	$2,600	Active

Inner scroll (scrollY)

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

Auto width

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

#	Name	Score
1	Alice Nguyen	92
2	Bob Tran	87
3	Carol Le	76
4	David Pham	95

Pagination

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

Pagination: page size selector

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

Kết hợp: scrollY + fixed columns + pagination

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	Department	Email	Phone	City	Score	Salary	Status
1	Alice Nguyen	Engineering	alice.nguyen@company.com	+84 91111111	Hà Nội	92	$3,200	Active
2	Bob Tran	Design	bob.tran@company.com	+84 92222222	HCM	87	$2,800	Active
3	Carol Le	Management	carol.le@company.com	+84 93333333	Đà Nẵng	76	$4,100	Inactive
4	David Pham	Engineering	david.pham@company.com	+84 94444444	Huế	95	$3,500	Active
5	Eva Hoang	QA	eva.hoang@company.com	+84 95555555	Cần Thơ	68	$2,400	Pending
6	Frank Bui	Engineering	frank.bui@company.com	+84 96666666	Hà Nội	81	$3,100	Active

1–6 / 12

Loading state

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: string, dir: TableSortDir) => void`		Callback fired when a sortable column header is clicked. Receives the column key and new direction
`headerBg`	`string`		Custom header background colour
`headerColor`	`string`		Custom header text colour
`bodyBg`	`string`		Custom table body background colour
`bodyColor`	`string`		Custom table body text 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
`rounded`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'full'`		Border-radius preset, visible when bordered={true}
`className`	`string`		Extra className on the wrapper

TableColumn API

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

TablePaginationConfig API

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