TanStack Table Builder

A modern, extensible table builder UI for React, powered by TanStack Table. Easily create, configure, and export advanced tables for your applications.

Features

• Interactive table builder with column and row configuration
• Data sheet and column editor components
• Code generation for TanStack Table usage
• Rich set of reusable UI components
• Playground for live table demos
• TypeScript support

Tech Stack

• React
• TypeScript
• Vite
• TanStack Table
• PostCSS

Getting Started

Installation

pnpm install

Running the App

pnpm dev

Open http://localhost:5173 to view it in your browser.

Folder Structure

src/
  features/
    table-builder/         # Table builder UI and logic
      components/          # Column editor, data sheet, etc.
      services/            # Table code generation, detection
  shared/
    components/            # Reusable UI components
    hooks/                 # Custom hooks
    lib/                   # Utilities and constants
    providers/             # Context providers
    styles/                # Global styles
    types/                 # Type definitions
  routes/                  # App routes

Usage Example

Visit the Table Builder page to create and configure tables. Use the playground to test table features and export code for integration.

Contributing

Contributions are welcome! Please open issues or submit pull requests for improvements and bug fixes.

License

MIT