Type-Safe TanStack Table with React Context

A demonstration of building composable, type-safe data tables using TanStack Table with React Context to eliminate prop drilling.

📚 Article

This repository contains the complete source code for the Medium article: Type-Safe TanStack Table with React Context and shadcn/ui

🎯 What This Demonstrates

• Eliminate Prop Drilling - Share table state via React Context instead of passing props through every component
• Composable Components - Build flexible table UIs by composing small, focused components
• Full Type Safety - TypeScript generics ensure type safety throughout the component tree
• shadcn/ui Integration - Beautiful, accessible table components using shadcn/ui
• Business Central Example - Practical example using BC Item data

🚀 Getting Started

Prerequisites

• Node.js 18 or higher
• npm or pnpm

Installation

# Clone the repository
git clone https://github.com/yourusername/vite-tanstack-table-provider.git
cd vite-tanstack-table-provider

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 to see the app.

🔑 Key Concepts

The Problem: Prop Drilling

Without context, you end up passing the table instance everywhere:

<TableToolbar table={table} />
<TableFilters table={table} />
<DataTable table={table} />
<TablePagination table={table} />

The Solution: Table Context

With context, components access the table directly:

<DataTableProvider data={items} columns={columns}>
  <TableToolbar />
  <TableFilters />
  <DataTable />
  <TablePagination />
</DataTableProvider>

Type-Safe Context Hook

function MyTableComponent() {
  const { table } = useDataTableContext<Item>()
  
  // Full type safety and IntelliSense!
  return <div>{table.getRowCount()} items</div>
}

🧩 Components

DataTableProvider

Creates and manages the TanStack Table instance, making it available to all child components via context.

Props:

• data - Array of data to display
• columns - Column definitions
• children - Child components

DataTable

Renders the table UI using shadcn/ui components and the table instance from context.

useDataTableContext Hook

Provides access to the table instance from any component within the provider.

🛠️ Available Scripts

• npm run dev - Start development server on port 3000
• npm run build - Build for production
• npm run preview - Preview production build
• npm run test - Run tests with Vitest
• npm run lint - Lint code with ESLint
• npm run format - Format code with Prettier
• npm run check - Format and lint together

📦 Tech Stack

• TanStack Start - Full-stack React framework
• TanStack Router - Type-safe routing
• TanStack Query - Server state management
• TanStack Table - Headless table library
• shadcn/ui - UI component library
• Tailwind CSS - Utility-first CSS
• TypeScript - Type safety

🎨 Adding shadcn/ui Components

npx shadcn@latest add button
npx shadcn@latest add table
npx shadcn@latest add dropdown-menu

📖 Usage Example

import { DataTableProvider } from '@/components/data-table/data-table-provider'
import { DataTable } from '@/components/data-table/data-table'
import { itemColumns } from '@/lib/columns'

function ItemsPage() {
  const { data } = useSuspenseQuery(itemsQueryOptions)

  return (
    <DataTableProvider data={data} columns={itemColumns()}>
      <h1>Business Central Items</h1>
      <DataTable<Item> />
    </DataTableProvider>
  )
}

🔧 Extending the Pattern

This basic pattern can be extended with:

• Filtering & Sorting - Add state management for filters and sorting
• Pagination - Implement pagination controls
• Column Visibility - Toggle column visibility
• Row Selection - Select multiple rows
• Server-Side Data - Integrate with TanStack Query for server data

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

📝 License

MIT

👤 Author

Hans Philip Eide

• GitHub: @sn4h
• Medium: @hpeide
• LinkedIn: @hpeide

🙏 Acknowledgments

• TanStack team for their amazing libraries
• shadcn for the beautiful UI components

---

⭐ If you find this helpful, please consider giving it a star on GitHub!