Demo thực tế
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 thực tế như sorting, filtering và pagination. Bạn có thể 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.
Theo dõi Upskills.dev
Cập nhật các bài hướng dẫn và coding tips mới nhất.