​
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:
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:
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:
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:

​
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:
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:
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:
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:
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:

​
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:
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:

​
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:
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:

​
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:

​
Cài đặt

​
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:

​
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:

​
API Utilities

Các hàm tiện ích của TanStack Table:

​
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:

​
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

2

Thêm phân trang

3

Thêm chọn dòng

4

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

5

Bảng phân trang server-side

6

Gom nhóm theo cột

7

Ghim cột khi cuộn ngang

8

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

​
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.