Build a complex Data Table with TansTack Table
This showcase builds on the ShadcnUI Table, adding useful features like sorting, filtering, and pagination with UI components from HeroUI.
Use it as a reference to create flexible, production-ready data tables for your app.
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 |
Feature Settings
Header Pinning
Pin header to the top to keep it visible while scrolling.
Row Selection
Select rows by clicking on the row checkboxes.
0 of 50 selected
Row Pinning
Pin rows to the top or bottom to keep them always visible.
Pagination
Pagination allows you to divide large datasets into smaller chunks.
Filtering
Filter globally or by specific criteria.
Column Sorting
Sort columns by clicking on the column headers. Click again to reverse the sort order.
Column Pinning
Pin columns to the left or right side of the table to keep them visible while scrolling horizontally.
Column Resizing
Resize columns by dragging the edges of the column headers.
Column Reordering
Reorder columns by dragging the column headers.
Column Visibility
Toggle the visibility of columns by checking or unchecking the checkboxes.
About the author
Vu Nguyen
NAB, Lead Engineer
I'm Vu, a Lead Engineer at NAB (National Australia Bank). I started on Home Lending products and now lead a team building for HICAPS, Australia's largest point of sale claiming service for private health insurance. Before NAB, I worked at startups and across a range of teams and stacks.
Upskills is where I share practical, real-world knowledge to help you build and ship projects better. Beyond tutorials, more content is coming: project showcases, interview prep, and AI tools as resources for your learning journey. I'm excited to share what I've learned and keep learning together as we build cool things.
Upskills Community
Upskills
upskills.dev
Join our community on Discord to get help about the tutorials and ask your questions.
@upskillsdev
Checkout our GitHub to find the source code and submit any issues or feature requests.