我打赌你的 Table Code 超过 200 行。证明我错了。 😏

Source: Dev.to

挑战

我打了个赌。你的表格实现包括：

• 列定义（手动编写）
• 过滤逻辑
• 排序逻辑
• 分页状态
• API 连接
• 加载状态
• URL 同步
• 导出功能

这至少有 200 行代码。我见过有 600 行以上的项目。不信？现在就数数你的代码。我等着。 ☕️

为什么 TanStack Table 仍然需要样板代码

TanStack Table 很棒——无头、灵活且功能强大。但这正是陷阱所在：它只提供原语，你仍然需要：

• 将你的模式映射到列
• 构建过滤/排序/分页 UI
• 连接服务器端逻辑
• 处理 URL 状态
• 添加导出功能

这不是 TanStack 的错；它本身就是无头设计的。我已经为此折腾了三年。

介绍 TableCraft

TableCraft 是基于 TanStack Table 的一层包装，能够从你的 Drizzle 模式自动生成所有内容。

// Backend: Connect schema, get full API
const users = defineTable(schema.users)
  .hide('password')
  .search('email', 'name')
  .sort('-createdAt')

// Frontend: One component, done

你将获得

• ✅ 从模式自动生成列
• ✅ 服务器端过滤、排序、分页
• ✅ 搜索、导出、日期选择器
• ✅ URL 状态同步
• ✅ TypeScript 类型

所有这些都在底层由 TanStack Table 提供支持。

行动号召

统计一下你上一个项目中与表格相关的代码行数（列、过滤器、分页、API 路由）。我见过的最高是 600 行以上。超越它吧。 🏆

在下方评论：

• 代码行数
• 花费的时间
• 你是否会使用自动生成这些代码的工具？

我先来：340 行、4 小时，以及是——我自己构建了这个工具。轮到你了。 👇

链接

• 🔗 GitHub Repository
• 📚 Documentation