DEV Community

Cover image for TableCraft - How I Built a Production-Ready Data Table Engine
Jackson Kasi
Jackson Kasi Subscriber

Posted on • Edited on

TableCraft - How I Built a Production-Ready Data Table Engine

#devchallenge #githubchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

This is a submission for the GitHub Copilot CLI Challenge

What I Built

TableCraft - A Drizzle-powered data table engine that transforms the nightmare of building 80+ complex tables into a 5-minute task.

The Problem That Haunted Me

Our company's logistics application has 80+ data tables. Each table isn't just "show data" - it has:

  • Sorting functionality
  • Date range filtering
  • Search across multiple columns
  • Pagination (offset and cursor-based)
  • Export to CSV/JSON
  • Column resizing and reordering
  • Complex joins across relationships
  • Role-based column visibility

We were upgrading from a 3-year-old stack (Material UI + Express.js + Prisma ORM). The code had become heavy, developer experience degraded, and building each new table was taking hours. Even with AI assistance, inconsistencies crept in:

  • Response structures varied between endpoints
  • Sorting would break on certain columns
  • Date filters had edge case bugs
  • Type safety was inconsistent between frontend and backend

I had already built tnks-data-table for frontend reusability, but the backend still required writing export logic, filter handlers, and sorting implementations manually. The bottleneck remained.

The Solution

TableCraft is a monorepo with packages for both backend and frontend:

Package Purpose
@tablecraft/engine Core query builder with filtering, sorting, pagination
@tablecraft/table React DataTable component (TanStack Table + Shadcn)
@tablecraft/client Frontend SDK for any framework
@tablecraft/codegen TypeScript type generator from API metadata
@tablecraft/adapter-* Adapters for Hono, Express, Next.js, Elysia

Define once, get everything:

import { defineTable } from '@tablecraft/engine';
import { products } from './db/schema';

export const productConfig = defineTable(products)
  .label('name', 'Product Name')
  .search('name', 'description')
  .sort('-createdAt')
  .filter('category', 'isArchived')
  .pageSize(20)
  .toConfig();
Enter fullscreen mode Exit fullscreen mode

That's it. You now have:

  • Backend API with complex query support
  • Auto-generated metadata endpoint
  • Type-safe frontend integration
  • Date filtering with presets
  • Export functionality

For more details, explore the documentation.

Demo

Repository: github.com/jacksonkasi1/TableCraft
Web: https://tablecraft-demo.vercel.app

Quick Start:

# Backend
pnpm add @tablecraft/engine @tablecraft/adapter-hono

# Frontend
pnpm add @tablecraft/table

# Type generation
pnpm add -D @tablecraft/codegen
npx @tablecraft/codegen --url http://localhost:5000/engine --out ./src/generated
Enter fullscreen mode Exit fullscreen mode

Frontend DataTable:

import { DataTable } from '@tablecraft/table';
import { createProductsAdapter } from '../generated';

export function ProductsPage() {
  const adapter = createProductsAdapter({ baseUrl: '/api/engine' });

  return (
    <DataTable
      adapter={adapter}
      config={{
        enableSearch: true,
        enableExport: true,
        enableColumnResizing: true,
      }}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

My Experience with GitHub Copilot CLI

Why I Needed Two Copilot Accounts

This is a substantial project. TableCraft isn't a weekend hack - it's production infrastructure for enterprise logistics applications. The scope demanded intensive AI assistance across multiple domains:

  • Core engine architecture - Query building, SQL generation, relationship handling
  • Frontend components - React hooks, TanStack Table integration, Shadcn styling
  • Type generation - AST parsing, TypeScript emitter
  • Multiple framework adapters - Hono, Express, Next.js, Elysia
  • Documentation - 15+ documentation files
  • Testing - Unit tests, integration tests, edge cases

One account's credits would have been exhausted before completing the core functionality.

Strategic Model Selection

I discovered that different models excel at different tasks:

Task Model Why
Core engine architecture Claude Opus 4.6 / Claude Opus Best at complex reasoning, SQL logic, type systems
Frontend components Gemini 3 Pro / Gemini 3 Flash Fast iterations, good at React patterns
Unit tests Grok Code Fast 1, Raptor Mini Good coverage, found edge cases I missed
Documentation GPT-5 Clear explanations, good structure

Raptor Mini became my go-to for testing - it felt more familiar with test patterns and caught subtle edge cases.

How Copilot CLI Accelerated Development

  1. Brainstorming Sessions

    • Used Copilot Chat for architectural decisions
    • "How should I handle relationship joins with filtering?"
    • "What's the best pattern for pluggable adapters?"

  2. Code Generation

    • Scaffolding adapters for 4 different frameworks
    • Generating TypeScript types from Drizzle schemas
    • Creating consistent API response structures

  3. Debugging

    • "Why is this SQL query not using the index?"
    • "The date filter is failing for timezone edge cases"
    • Copilot caught issues before they became production bugs

  4. Documentation

    • Generated initial docs structure
    • Ensured consistency across 15+ markdown files

The Time Savings

Before TableCraft:

  • Complex table with 15 columns, joins, filters, export: ~4-6 hours
  • With inconsistencies and bugs requiring fixes: +2-3 hours

After TableCraft:

  • Same table: ~5 minutes
  • Type-safe, consistent, production-ready: 0 extra time

For 80+ tables: ~400 hours saved in initial development alone.

Beyond the Hackathon

This project wasn't built specifically for this challenge - the GitHub Copilot CLI Challenge provided the push to complete and document it properly. My real motivation:

  1. Upgrade our company's logistics platform from outdated tech
  2. Reduce development time for complex admin interfaces
  3. Maintain speed without sacrificing quality
  4. Cut costs by reducing repetitive development work

TableCraft achieves all four goals.

Current Status

TableCraft is nearly production-ready. I'm currently:

  • Testing edge cases in real production scenarios
  • Gathering feedback from early adopters
  • Improving documentation
  • Adding more examples and use cases

Call for Community

If you find this project useful:

You don't have to write code to contribute. Documentation improvements, bug reports, and meaningful feedback are equally valuable.

Why This Matters

Every developer building admin panels, dashboards, or management systems faces the same pain: data tables are deceptively complex. What looks simple - show data, sort, filter, export - becomes a nightmare at scale.

TableCraft solves this. Not with magic, but with thoughtful architecture, type safety, and the acceleration that GitHub Copilot CLI provided.

If you've ever spent hours on a table that should have taken minutes, TableCraft was built for you.

Resources:

Your comments and feedback motivate me to build more tools like this. Give TableCraft a try and let me know what you think!

Top comments (0)