A performant React + TypeScript app demonstrating virtualized, sortable, and draggable user tables using TanStack Table and TanStack Virtual. User data is generated with faker.js and cached in localStorage.

• Virtualized Table: Efficiently renders large datasets (500+ users) with smooth scrolling.
• Column Sorting: Click headers to sort by any column.
• Column Reordering: Drag and drop headers to reorder columns.
• Custom Table Example: Includes a second table implementation for comparison.
• Persistent Data: User data is cached in localStorage for fast reloads.

src/
  App.tsx                # Main app, renders both tables
  components/
    DataTable.tsx        # TanStack Table implementation
    CustomTable.tsx      # Custom table wrapper
    CustomDataTable.tsx  # Custom virtualized table implementation
  hooks/
    getUser.ts           # User data fetching and caching
    useVirtualization.ts # Custom virtualization logic
  utils/
    column.tsx           # Column definitions for TanStack Table
    faker.ts             # User data generation
  types.ts               # User type definition

• Node.js (v18+ recommended)
• npm

npm install

npm run dev

Open http://localhost:5173 to view the app.

• src/utils/faker.ts: Generates random user data using faker.js.
• src/hooks/getUser.ts: Loads and caches user data.
• src/components/DataTable.tsx: Main virtualized table using TanStack Table.
• src/components/CustomDataTable.tsx: Custom virtualized table implementation.
• src/utils/column.tsx: Column definitions and formatting.

MIT