Data Table with TanStack Table

I'll create a complete data table example using shadcn/ui and TanStack Table with filtering, sorting, pagination, and row selection.

Features Implemented

This data table example includes all the requested features 1:

1. Filtering:

   • Email column filtering with an input field
   • Column visibility toggle via dropdown

2. Sorting:

   • Click on column headers to sort ascending/descending
   • Visual indicators showing sort direction

3. Pagination:

   • Page navigation controls (first, previous, next, last)
   • Page size selection (10, 20, 30, 40, 50 rows)
   • Current page indicator

4. Row Selection:

   • Individual row checkboxes
   • "Select all" checkbox in header
   • Selection count display

How to Use

1. Install the required dependencies:

   npm install @tanstack/react-table

2. Make sure you have the shadcn/ui components installed:

   npx shadcn@latest add table button input dropdown-menu select badge

3. Copy the files into your project structure:

   • data-table.tsx - Main table component
   • columns.tsx - Column definitions
   • data-table-pagination.tsx - Pagination component
   • data.tsx - Sample data
   • page.tsx - Page component that uses the table
4. Import and use the DataTable component in your page.

The table is fully responsive and follows accessibility best practices with proper ARIA labels and keyboard navigation support.