Build complex Data Table với TanStack Table
Demo này build dựa trên ShadcnUI Table, thêm các tính năng hữu ích như sorting, filtering và pagination với UI components từ HeroUI.
Sử dụng nó làm ví dụ để tạo các data tables có tính flexible cao, có thể sử dụng trong các project thực tế
Pin | Employee ID | Name | Email | Role | Country | Annual Salary | Date of Joining | Hire Type | Contract Type | Contract End Date | Probation End Date | Manager Name | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
EMP001 | John Smith | john.smith@company.com | Senior Software Engineer | United States | $120,000.00 | 3/15/2020 | Direct | Permanent | 12/9/2025 | 6/15/2020 | Sarah Johnson | ||
EMP002 | Sarah Johnson | sarah.johnson@company.com | Engineering Manager | United States | $145,000.00 | 1/10/2019 | Direct | Permanent | - | 4/10/2019 | James Wilson | ||
EMP003 | Miguel Rodriguez | miguel.rodriguez@company.com | Frontend Developer | Spain | $65,000.00 | 5/22/2021 | Direct | Permanent | - | 8/22/2021 | Sarah Johnson | ||
EMP004 | Priya Patel | priya.patel@company.com | Product Manager | India | $95,000.00 | 11/3/2020 | Direct | Permanent | - | 2/3/2021 | James Wilson | ||
EMP005 | James Wilson | james.wilson@company.com | CTO | United Kingdom | $185,000.00 | 6/1/2018 | Direct | Permanent | - | 9/1/2018 | |||
EMP006 | Fatima Al-Farsi | fatima.alfarsi@company.com | Backend Developer | United Arab Emirates | $78,000.00 | 1/15/2022 | Direct | Permanent | - | 4/15/2022 | Sarah Johnson | ||
EMP007 | Chen Wei | chen.wei@company.com | Data Scientist | China | $88,000.00 | 9/20/2021 | Direct | Permanent | - | 12/20/2021 | Vikram Patel | ||
EMP008 | Lisa Thompson | lisa.thompson@company.com | UX Designer | Canada | $82,000.00 | 8/3/2020 | Agency | Permanent | - | 11/3/2020 | Emma Watson | ||
EMP009 | Tomas Novak | tomas.novak@company.com | DevOps Engineer | Czech Republic | $72,000.00 | 11/15/2021 | Direct | Permanent | - | 2/15/2022 | Sarah Johnson | ||
EMP010 | Emily Baker | emily.baker@company.com | HR Manager | United States | $92,000.00 | 7/12/2019 | Direct | Permanent | - | 10/12/2019 | Robert Chen | ||
EMP011 | Alejandro Gomez | alejandro.gomez@company.com | Software Engineer | Mexico | $68,000.00 | 3/1/2022 | Direct | Permanent | - | 6/1/2022 | John Smith | ||
EMP012 | Sophia Müller | sophia.muller@company.com | Marketing Specialist | Germany | $71,000.00 | 2/15/2021 | Agency | Permanent | - | 5/15/2021 | Jasmine Wong | ||
EMP013 | Hiroshi Tanaka | hiroshi.tanaka@company.com | QA Engineer | Japan | $75,000.00 | 10/5/2020 | Direct | Permanent | - | 1/5/2021 | Sarah Johnson | ||
EMP014 | Anna Kowalski | anna.kowalski@company.com | Frontend Developer | Poland | $62,000.00 | 5/10/2022 | Direct | Contract | 5/10/2023 | 8/10/2022 | John Smith | ||
EMP015 | Robert Chen | robert.chen@company.com | CFO | United States | $175,000.00 | 3/15/2018 | Direct | Permanent | - | 6/15/2018 | James Wilson | ||
EMP016 | Olivia Bennett | olivia.bennett@company.com | Content Writer | Australia | $65,000.00 | 7/20/2021 | Direct | Permanent | - | 10/20/2021 | Jasmine Wong | ||
EMP017 | Lukas Eriksson | lukas.eriksson@company.com | Backend Developer | Sweden | $79,000.00 | 4/12/2020 | Direct | Permanent | - | 7/12/2020 | Thomas Wagner | ||
EMP018 | Aisha Mbeki | aisha.mbeki@company.com | Data Analyst | South Africa | $70,000.00 | 8/5/2021 | Agency | Contract | 8/5/2023 | 11/5/2021 | Vikram Patel | ||
EMP019 | Carlos Santos | carlos.santos@company.com | Project Manager | Brazil | $85,000.00 | 10/15/2019 | Direct | Permanent | - | 1/15/2020 | Priya Patel | ||
EMP020 | Emma Watson | emma.watson@company.com | Senior UX Designer | United Kingdom | $95,000.00 | 5/23/2019 | Direct | Permanent | - | 8/23/2019 | Priya Patel |
Cài đặt tính năng
Ghim tiêu đề
Ghim tiêu đề ở trên cùng để giữ nó hiển thị khi cuộn.
Chọn hàng
Chọn các hàng bằng cách nhấp vào ô đánh dấu của hàng.
Đã chọn 0 trên 50
Ghim hàng
Ghim các hàng lên trên hoặc xuống dưới để giữ chúng luôn hiển thị.
Phân trang
Phân trang cho phép bạn chia tập dữ liệu lớn thành các phần nhỏ hơn.
Lọc dữ liệu
Lọc toàn bộ hoặc theo tiêu chí cụ thể.
Sắp xếp cột
Sắp xếp các cột bằng cách nhấp vào tiêu đề cột. Nhấp lại để đảo ngược thứ tự sắp xếp.
Ghim cột
Ghim các cột vào bên trái hoặc phải của bảng để giữ chúng hiển thị khi cuộn ngang.
Thay đổi kích thước cột
Thay đổi kích thước cột bằng cách kéo cạnh của tiêu đề cột.
Sắp xếp lại cột
Sắp xếp lại các cột bằng cách kéo tiêu đề cột.
Hiển thị cột
Bật/tắt hiển thị các cột bằng cách chọn hoặc bỏ chọn các ô đánh dấu.
Về tác giả
Nguyễn Phi Vũ
NAB, Lead Engineer
Mình là Vũ, hiện là Lead Engineer ở NAB (National Australia Bank). Mình bắt đầu ở mảng Home Lending, giờ đang lead một team làm sản phẩm cho HICAPS, dịch vụ point-of-sale claiming bảo hiểm sức khỏe tư nhân lớn nhất ở Úc. Trước NAB, mình từng làm ở các startup và nhiều team khác với đa dạng stack.
Upskills là nơi mình chia sẻ những kiến thức thực tế từ công việc, để giúp bạn build và ship dự án tốt hơn. Ngoài tutorial, sắp tới sẽ có thêm nhiều nội dung: project showcase, interview prep, và các AI tool, như những resource cho hành trình học của bạn. Mình rất vui được chia sẻ những kiến thức và kinh nghiệm đã học được trong suốt quá trình làm việc, và có thể chia sẻ thêm nhiều điều thú vị cùng nhau khi chúng ta tiếp tục build những thứ hay ho.
Cộng đồng Upskills
Upskills
upskills.dev
Tham gia cộng đồng Discord để được hỗ trợ về các bài hướng dẫn và đặt câu hỏi.
Vu Nguyen
@nphivu414
Theo dõi tôi trên X để nhận cập nhật và tin tức mới nhất về Upskills.