Data Table

Dynamic Data Table with Shadcn UI & Tanstack Table for React

Explore this feature-rich data table, meticulously crafted using Shadcn UI components and the powerful Tanstack Table library within a React-Vite and TypeScript environment. It serves as an extended example based on Shadcn's documentation, demonstrating how to implement advanced table functionalities with a clean, modern UI. The table uses a fictional employee dataset to showcase its capabilities effectively for developers.

Features:

• Dynamic Name Search: Allows users to quickly find entries by typing in the search field.
• Faceted Column Filtering: Filter data by specific column values (e.g., location, status), with filter options dynamically generated from column data.
• Active Filter Tags & Clear Button: Displays currently active filters as tags and provides a dedicated button to clear all applied filters.
• Column Visibility Control: Empowers users to selectively show or hide table columns based on their preferences.
• Global Reset Functionality: A convenient button to clear all active filters, row selections, and revert the table to its initial state.
• Advanced Column Sorting: Supports both ascending and descending sorting for columns configured to be sortable.
• Individual Row Selection: Utilizes checkboxes in the first column for easy selection and deselection of individual rows.
• Row-Specific Actions Menu: Each row features a dropdown menu for additional actions, such as copying an employee ID to the clipboard.
• Interactive Column Reordering: Users can change the display order of columns using directional arrows provided in the table structure.
• Selected Rows Information Display: The footer clearly indicates the total number of rows currently selected by the user.
• Adjustable Rows Per Page: Offers a control to dynamically increase or decrease the number of data rows displayed per page, typically in predefined steps.
• Comprehensive Pagination Controls: Includes intuitive buttons for navigating to the first, last, next, and previous pages of data.
• Reusable Faceted Filters Component: The complex logic for faceted filtering is encapsulated within its own component, designed for easy reuse across different tables.
• Reusable Pagination Component: Pagination controls are structured as a standalone, reusable component suitable for various data table implementations.
• User Feedback via Toast Notifications: Employs toast messages to provide non-intrusive feedback for user actions, like confirming a copied ID.

Summary:

This project demonstrates a comprehensive implementation of a dynamic data table using Shadcn UI and Tanstack Table in a React-Vite setup. It highlights practical features like advanced filtering, sorting, column customization, and row actions. Developers can use this as a reference or starting point for building sophisticated and interactive data tables in their own React applications, leveraging modern UI components and table management libraries for an enhanced user experience.