​
Giới thiệu TanStack Table

TanStack Table (trước đây là React Table) là một headless table library — một trong những thư viện quản lý bảng dữ liệu mạnh mẽ nhất cho React.
“Headless” nghĩa là gì? Thư viện không có giao diện sẵn — bạn tự xây dựng mọi thứ. Giống như có bộ xương nhưng chưa có da và thịt. Nhờ vậy bạn tự do thiết kế UI, không bị giới hạn bởi style có sẵn.
  • 📦 Không có UI - bạn tự xây dựng giao diện
  • 🔧 Linh hoạt - tích hợp với bất kỳ UI framework nào (shadcn/ui, Material-UI, v.v.)
  • ⚡ Hiệu năng cao - tối ưu hóa render, chỉ update những gì cần thiết
  • 🎯 Tính năng mạnh mẽ - sắp xếp, lọc, phân trang, gom nhóm, ghim cột…
  • 📱 Đa nền tảng - hỗ trợ React, Vue, Angular, Svelte…

​
Tính năng Chính

​
Quản lý cột (Column Management)

Cho phép kéo thả để thay đổi thứ tự các cột trong bảng. Người dùng có thể tự do sắp xếp lại vị trí các cột theo ý muốn.Prompt mẫu:
Thêm chức năng kéo thả để sắp xếp lại thứ tự các cột trong bảng TanStack Table.
Ghim một hoặc nhiều cột ở bên trái hoặc bên phải. Khi cuộn ngang, các cột được ghim sẽ luôn hiển thị.Prompt mẫu:
Ghim cột "Name" và cột "Actions" ở bên trái. Khi cuộn ngang, hai cột này luôn hiển thị.
Người dùng kéo mép cột để thay đổi độ rộng. Hỗ trợ cả resize tự động và resize thủ công.Prompt mẫu:
Cho phép kéo thay đổi kích thước từng cột trong bảng.
Bật tắt hiển thị từng cột. Hữu ích khi bảng có nhiều cột và người dùng muốn tập trung vào một số cột nhất định.Prompt mẫu:
Thêm dropdown để ẩn/hiện từng cột. Mặc định hiển thị tất cả.

​
Xử lý dữ liệu (Data Manipulation)

Sắp xếp dữ liệu theo một hoặc nhiều cột. Click vào header để sort tăng dần, giảm dần, hoặc huỷ sort.Prompt mẫu:
Thêm chức năng sắp xếp: click một lần vào header để sort tăng dần, click lần nữa để sort giảm dần, click lần ba để huỷ.
Lọc dữ liệu theo từng cột hoặc lọc toàn bộ bảng. Hỗ trợ nhiều kiểu lọc: text, number, date, fuzzy matching.Prompt mẫu:
Thêm thanh tìm kiếm lọc trên tất cả các cột cùng lúc. Ngoài ra, thêm ô lọc riêng cho cột "Status" với dropdown chọn giá trị.
Gom các dòng có cùng giá trị vào một nhóm. Có thể gom theo một hoặc nhiều cột.Prompt mẫu:
Thêm chức năng gom nhóm theo cột "Department". Mỗi nhóm có thể thu gọn/mở rộng.
Tính toán giá trị tổng, trung bình, count, min, max cho mỗi nhóm hoặc toàn bộ bảng.Prompt mẫu:
Thêm dòng tổng ở cuối mỗi nhóm, hiển thị tổng số lượng (count) và giá trị trung bình (average) của cột "Amount".
Hiển thị chi tiết của một dòng bằng cách mở rộng nó. Hữu ích cho dữ liệu có quan hệ cha-con.Prompt mẫu:
Thêm nút mở rộng ở mỗi dòng. Khi click, hiển thị thêm thông tin chi tiết của dòng đó bên dưới.

​
Phân trang (Pagination)

Chia dữ liệu thành nhiều trang ở phía trình duyệt. Phù hợp khi dữ liệu đã load đầy đủ.Prompt mẫu:
Thêm phân trang: mỗi trang 10 dòng, có nút Previous/Next và hiển thị "Trang X của Y".
Chỉ load dữ liệu của trang hiện tại từ server. Phù hợp khi dữ liệu rất lớn (hàng nghìn hoặc hàng triệu dòng).Prompt mẫu:
Tạo bảng phân trang server-side: gọi API /api/users?page=X&limit=Y khi người dùng chuyển trang. Xử lý trạng thái loading và error.

​
Chọn dòng (Row Selection)

Dùng checkbox để chọn dòng. Hỗ trợ chọn tất cả, chọn một phần, chọn dòng lồng nhau.Prompt mẫu:
Thêm checkbox ở đầu mỗi dòng để chọn được nhiều dòng. Hiển thị số dòng đang chọn ở phía trên bảng. Có checkbox "Chọn tất cả" ở header.
Ghim một hoặc nhiều dòng ở trên cùng hoặc dưới cùng của bảng. Hữu ích để giữ các dòng quan trọng luôn hiển thị.Prompt mẫu:
Ghim dòng tổng ở dưới cùng bảng. Dòng này không bị ảnh hưởng khi sắp xếp hay lọc.

​
Hiệu năng (Performance)

Chỉ render những dòng đang hiển thị trên màn hình. Cho phép hiển thị hàng triệu dòng mà không bị chậm.Prompt mẫu:
Thêm virtual scrolling cho bảng để xử lý 10,000+ dòng mà không bị giật lag.

​
Cài đặt

# Cài đặt TanStack Table
npm install @tanstack/react-table

# Nếu dùng với shadcn/ui (optional)
npx shadcn-ui@latest add table

​
Các tính năng nâng cao

​
Faceting — đếm giá trị duy nhất

Faceting giúp bạn biết có bao nhiêu giá trị khác nhau trong một cột. Ví dụ: cột “Status” có thể có 3 dòng “active” và 2 dòng “inactive”. Faceting trả về thông tin này để bạn hiển thị bộ lọc dạng dropdown với số lượng. Prompt mẫu: 
Thêm bộ lọc cho cột "Status": hiển thị dropdown với các giá trị duy nhất ("active", "inactive") kèm số lượng dòng mỗi giá trị bên cạnh.

​
Click-outside và Keyboard Navigation

TanStack Table hỗ trợ điều hướng bằng bàn phím (phím mũi tên di chuyển giữa các ô, Enter để chọn…) và detect click outside để đóng dropdown, popup. Các tính năng này được bật mặc định khi sử dụng các row models có sẵn.

​
Tích hợp với shadcn/ui

TanStack Table là “bộ não” xử lý dữ liệu, còn shadcn/ui cung cấp giao diện bảng đẹp sẵn. Khi kết hợp, bạn có cả logic mạnh mẽ lẫn UI chuyên nghiệp. shadcn/ui cung cấp các component: Table, TableHeader, TableBody, TableHead, TableRow, TableCell. Bạn dùng chúng thay cho thẻ HTML <table> thông thường. Prompt mẫu: 
Tạo bảng TanStack Table với shadcn/ui component. Dùng Table, TableHeader, TableBody, TableRow, TableHead, TableCell. Thêm sort và filter.

​
API Utilities

Các hàm tiện ích của TanStack Table:
HàmMô tả
getCoreRowModel()Logic xử lý cơ bản của bảng
getSortedRowModel()Hỗ trợ sắp xếp cột
getFilteredRowModel()Hỗ trợ lọc dữ liệu
getPaginationRowModel()Hỗ trợ phân trang
getGroupedRowModel()Hỗ trợ gom nhóm
getExpandedRowModel()Hỗ trợ mở rộng/thu gọn dòng
getSelectedRowModel()Hỗ trợ chọn dòng
getVisibilityRowModel()Hỗ trợ ẩn/hiện cột
getColumnSizingRowModel()Hỗ trợ thay đổi kích thước cột

​
Best Practices

1

Tối ưu columns với useMemo

Dùng useMemo để định nghĩa columns không bị tính lại mỗi lần render, giúp bảng hoạt động mượt hơn.
2

Phân trang cho dữ liệu lớn

Dùng server-side pagination thay vì load toàn bộ dữ liệu nếu bảng có hàng nghìn dòng trở lên.
3

Khai báo TypeScript types

Luôn khai báo kiểu dữ liệu cho bảng (interface/object) để TypeScript hỗ trợ autocomplete và bắt lỗi.
4

Tách component riêng

Tách logic bảng ra component riêng để tái sử dụng ở nhiều nơi trong ứng dụng.
5

Xử lý trạng thái loading và error

Luôn hiển thị trạng thái đang tải và lỗi khi fetch dữ liệu từ API.
6

Virtual scrolling cho bảng lớn

Nếu bảng có hơn 1,000 dòng, dùng virtual scrolling để chỉ render những dòng đang hiển thị.

​
Plugins & Extensions

TanStack Table có hệ sinh thái plugins cho nhiều framework:

​
Thuật ngữ

Những thuật ngữ thường gặp khi làm việc với TanStack Table:
Thuật ngữGiải thích
ColumnDefĐịnh nghĩa cột — khai báo cột hiển thị gì, format ra sao, có thể sort/filter không
SortingStateTrạng thái sắp xếp — lưu cột nào đang sort, theo thứ tự nào
Row ModelCông thức xử lý dữ liệu: sort, filter, phân trang, chọn dòng…
Global FilterThanh tìm kiếm tìm trên tất cả các cột cùng lúc
PaginationPhân trang — chia dữ liệu thành nhiều trang để xem
Row SelectionChọn dòng — dùng checkbox để chọn một hoặc nhiều dòng
Column VisibilityẨn/hiện cột — bật tắt hiển thị từng cột
Column PinningGhim cột — cố định cột ở trái/phải khi cuộn ngang
Virtual ScrollingChỉ render dòng đang hiển thị — giúp bảng lớn vẫn mượt

​
Cách Prompt với Claude Code

Dưới đây là các prompt mẫu bạn có thể dùng trực tiếp để yêu cầu Claude Code tạo bảng TanStack Table.
1

Tạo bảng cơ bản với sort và filter

Tạo một bảng TanStack Table với các cột: name, email, status. Dùng shadcn/ui Table component. Thêm chức năng sắp xếp (click vào header để sort) và thanh tìm kiếm toàn bảng.
2

Thêm phân trang

Mở rộng bảng trên: thêm phân trang, mỗi trang 10 dòng, có nút Previous/Next và hiển thị "Trang X của Y".
3

Thêm chọn dòng

Thêm checkbox ở đầu mỗi dòng để chọn được nhiều dòng. Hiển thị số dòng đang chọn ở phía trên bảng. Có nút "Chọn tất cả" ở header.
4

Thêm ẩn/hiện cột

Thêm dropdown hoặc danh sách checkbox để ẩn/hiện từng cột. Mặc định hiển thị tất cả cột.
5

Bảng phân trang server-side

Tạo bảng phân trang server-side: gọi API /api/users?page=X&limit=Y, hiển thị dữ liệu từ API, xử lý trạng thái loading và error.
6

Gom nhóm theo cột

Thêm chức năng gom nhóm theo cột "Department". Mỗi nhóm có thể thu gọn/mở rộng. Hiển thị tổng số dòng mỗi nhóm.
7

Ghim cột khi cuộn ngang

Ghim cột "Name" ở bên trái. Khi người dùng cuộn ngang, cột Name luôn hiển thị.
8

Bảng với dữ liệu lớn (virtual scrolling)

Tạo bảng với virtual scrolling xử lý 10,000 dòng. Chỉ render những dòng đang hiển thị trên màn hình.

​
Tài nguyên

​
Kết luận

TanStack Table là lựa chọn tốt nhất cho việc xây dựng các data tables phức tạp trong React. Với headless design, bạn có toàn quyền kiểm soát giao diện UI và có thể tích hợp với bất kỳ UI component library nào. Sự kết hợp với shadcn/ui tạo nên một giải pháp hiệu quả để xây dựng professional data tables.