The Pain We All Know
You're building a SaaS dashboard. Your PM asks for "a simple data table with filters."
You know what's coming:
- Hour 1: Write the base query with Drizzle
- Hour 2: Add pagination logic
- Hour 3: Implement filters (status, date range, search)
- Hour 4: Handle sorting, joins, edge cases
- Hour 5: Debug why the filter doesn't work with pagination
5 hours later, you have one working table endpoint.
Then they ask for 14 more tables. 😫
What If It Took 5 Minutes Instead?
That's why I'm building TableCraft.
The promise: Production-ready complex table APIs in minutes, not hours.
The twist: You don't write code. AI does it for you.
How It Works: The TableCraft Workflow
1️⃣ Tell AI What You Want
You: "Create a bookings API with customer name, status filter,
date range, pagination, and sort by creation date"
AI Skill: ✨ Generates complete TableCraft config
No manual typing. No syntax to learn. Just describe your table.
2️⃣ See It Visually (Query Engine Builder)
The AI generates a config, but you see it in a visual builder:
┌─────────────────────────────────────┐
│ 📊 Query Engine Builder │
├─────────────────────────────────────┤
│ Base Table: bookings │
│ │
│ Columns: │
│ ├─ id │
│ ├─ customerName (searchable) │
│ ├─ status (filterable) │
│ └─ createdAt (sortable) │
│ │
│ Joins: │
│ └─ customers (left join) │
│ │
│ Filters: │
│ ├─ Status: [pending, confirmed] │
│ └─ Date Range: [from → to] │
│ │
│ Backend Rules: │
│ └─ Hide deleted records │
└─────────────────────────────────────┘
Edit visually with drag-drop, OR edit the JSON directly. Both stay in sync.
3️⃣ Generate Your API (One Click)
Hit "Generate" and choose:
Option A: Copy Drizzle Code
// Human-readable Drizzle query
const result = await db
.select({
id: bookings.id,
customerName: customers.name,
status: bookings.status,
createdAt: bookings.createdAt
})
.from(bookings)
.leftJoin(customers, eq(bookings.customerId, customers.id))
.where(and(
inArray(bookings.status, params.filter.status),
gte(bookings.createdAt, params.filter.dateFrom),
isNull(bookings.deletedAt)
))
.orderBy(desc(bookings.createdAt))
.limit(params.pageSize)
.offset((params.page - 1) * params.pageSize);
Option B: Auto-Generated API Handler
// One line = complete API endpoint
import { createTableHandler } from '@tablecraft/engine';
export const GET = createTableHandler(bookingsConfig);
That's it. Now you have:
GET /api/bookings?page=1&pageSize=25
GET /api/bookings?filter[status]=confirmed&sort=-createdAt
GET /api/bookings?search=john&filter[date][gte]=2024-01-01
GET /api/bookings/export?format=csv
All working. All type-safe. All in 5 minutes.
What Makes TableCraft Different?
✨ AI-Powered Schema Generation
No learning curve. No documentation to read.
Describe what you want → AI builds the config
✨ Visual + Code (Your Choice)
- Prefer UI? Use the visual builder
- Prefer JSON? Edit code directly
- Both stay perfectly in sync
✨ Production-Ready Out of the Box
- Multi-tenancy support
- Security rules (backend conditions)
- Complex joins (nested, conditional)
- Aggregations (SUM, COUNT, AVG)
- Type-safe with full TypeScript
✨ Drizzle-Native
Not a black box. Generates real Drizzle code you can:
- Copy and customize
- Understand and modify
- Own completely
Real-World Impact
Building an admin dashboard with 15 tables:
Before TableCraft:
- 15 API routes × 5 hours each = 75 hours
- ~3,000 lines of repetitive code
- Bugs in pagination, filter combinations, edge cases
After TableCraft:
- 15 configs × 5 minutes each = 75 minutes
- AI generates everything
- Tested, production-ready patterns
Result: 98% time saved. Zero boilerplate.
Coming Soon: Universal Table Component
The Query Engine Builder is just Phase 1.
Phase 2 brings the Universal Table Component:
// The same config powers your UI
import { UniversalTable } from '@tablecraft/table';
<UniversalTable
config={bookingsConfig}
endpoint="/api/bookings"
/>
Automatically renders:
- ✅ Responsive data table (Shadcn UI)
- ✅ Search bar
- ✅ Filter dropdowns (based on your config)
- ✅ Pagination controls
- ✅ Sort indicators
- ✅ Loading & empty states
- ✅ Airtable-like experience
One config. API + UI. Zero duplication.
(More details in the next blog post!)
The Big Picture
TableCraft has three phases:
📍 Phase 1: Query Engine Builder (In Development)
AI-powered config generation → Production-ready APIs
📅 Phase 2: Universal Table Component (Coming Soon)
Same config → Beautiful, functional UI components
📅 Phase 3: Visual Schema Designer (Future)
Full drag-drop experience for non-technical users
The Climax: Zero-Config Magic
Here's the vision fully realized:
# In your terminal
You: "Create a customer orders table with filters and export"
AI: ✨ Config generated
✨ API endpoint ready
✨ React component ready
✨ Export functionality ready
# 30 seconds later...
GET /api/orders ✅
<UniversalTable config={ordersConfig} /> ✅
Zero manual configuration.
Production-ready complex tables.
Ready in seconds.
That's TableCraft.
Current Status: In Development
Full transparency:
This is day zero. The Git repo was just initialized.
I'm building this in internal development right now, and I'll be sharing:
- ✅ Weekly progress updates
- ✅ Technical deep-dives
- ✅ Early access for interested developers
- ✅ The next blog post when Phase 1 is ready
Why share before building?
Because I want YOUR input to shape what gets built first.
I Need Your Feedback
Help me prioritize:
-
What's your biggest table pain point?
- Writing filters? Joins? Pagination? Search?
-
Would you use AI-generated configs?
- Or prefer writing JSON manually?
-
What would make this a must-have?
- Specific features? Better DX? Documentation?
-
What ORMs do you use?
- Starting with Drizzle + Postgres, what else?
Every comment helps shape the roadmap. 👇
Follow the Journey
I'm building this in public. Here's how to stay updated:
📦 GitHub: github.com/jacksonkasi1/TableCraft
📝 Next Blog Post: "Building the Query Engine" (coming in 2-3 weeks)
🔔 Updates: Follow me here on Dev.to for weekly progress
Tech Stack
- Drizzle ORM - Type-safe database queries
- PostgreSQL - Primary database (MySQL/SQLite planned)
- TypeScript - Full type safety
- Shadcn UI - Universal Table components
- AI Skills (MCP) - Claude-powered config generation
Join the Journey
This is an experiment. A bet that we can make table development 50x faster.
If this resonates with you:
- ⭐ Star the repo to follow development
- 💬 Comment your thoughts below
- 🤝 Reach out if you want to contribute
Next post: I'll show you the actual Query Engine Builder in action, with live examples and code.
Stay tuned. The boring parts of backend development are about to get interesting. 🚀
P.S. What table feature causes you the most pain? Drop it in the comments. If enough people mention the same thing, it goes to the top of the roadmap. 👀
Top comments (0)