Quick Start

Get up and running with TableCraft in 5 minutes.

Installation

Install the core engine, frontend components, and the adapter for your backend framework.

# Install core, table, and Hono adapter
pnpm add @tablecraft/engine @tablecraft/table @tablecraft/adapter-hono

# Install codegen as dev dependency
pnpm add -D @tablecraft/codegen

Define Your Table

Create a table configuration file. This defines how your table behaves, including search, sort, and filter capabilities.

// src/tables/products.ts
import { defineTable } from "@tablecraft/engine";
import { products } from "../db/schema";

export const productsConfig = defineTable(products)
  .name("products")
  .search("name", "description")
  .sort("-createdAt")
  .filter("category", "isArchived")
  .pageSize(20)
  .toConfig();

Make sure your database schema is already defined. TableCraft works with your existing Drizzle ORM schema.

Create API Routes

Mount the TableCraft engine at /api/engine. Choose your framework below:

// src/index.ts
import { Hono } from "hono";
import { createHonoApp } from "@tablecraft/adapter-hono";
import { db } from "./db";
import * as schema from "./db/schema";
import { productsConfig } from "./tables/products";

const app = new Hono();

// Mount TableCraft engine at /api/engine
app.route(
  "/api/engine",
  createHonoApp({
    db,
    schema,
    configs: { products: productsConfig },
  }),
);

export default app;

// src/server.ts
import express from "express";
import { createExpressMiddleware } from "@tablecraft/adapter-express";
import { db } from "./db";
import * as schema from "./db/schema";
import { productsConfig } from "./tables/products";

const app = express();

// Mount TableCraft engine at /api/engine/:table
// The adapter handles the dynamic :table route automatically
app.use(
  "/api/engine",
  createExpressMiddleware({
    db,
    schema,
    configs: { products: productsConfig },
  }),
);

app.listen(3000);

// app/api/engine/[table]/route.ts
import { createNextHandler } from "@tablecraft/adapter-next";
import { db } from "@/db";
import * as schema from "@/db/schema";
import { productsConfig } from "@/tables/products";

const handler = createNextHandler({
  db,
  schema,
  configs: { products: productsConfig },
});

export const GET = handler;

// src/hooks.server.ts
import type { Handle } from "@sveltejs/kit";
import { sequence } from "@sveltejs/kit/hooks";
import { createSvelteKitHandle } from "@tablecraft/adapter-sveltekit";
import { db } from "./db";
import * as schema from "./db/schema";
import { productsConfig } from "./tables/products";

const authHandle: Handle = async ({ event, resolve }) => {
  event.locals.user = { id: "1", roles: ["admin"] };
  return resolve(event);
};

const tablecraftHandle = createSvelteKitHandle({
  db,
  schema,
  configs: { products: productsConfig },
  prefix: "/api/engine",
  getContext: async (event) => ({
    user: event.locals.user,
  }),
});

export const handle: Handle = sequence(authHandle, tablecraftHandle);

// src/index.ts
import { Elysia } from "elysia";
import { createElysiaPlugin } from "@tablecraft/adapter-elysia";
import { db } from "./db";
import * as schema from "./db/schema";
import { productsConfig } from "./tables/products";

const app = new Elysia()
  .use(
    createElysiaPlugin({
      db,
      schema,
      configs: { products: productsConfig },
      prefix: "/api/engine", // Mounts at /api/engine/:table
    }),
  )
  .listen(3000);

Setup Styles (Tailwind CSS v4)

Import the table styles and add the @source directive so Tailwind picks up the utility classes used by @tablecraft/table:

/* src/index.css */
@import "tailwindcss";
@import "@tablecraft/table/styles.css";

@source "../node_modules/@tablecraft/table/src";

The @source path is relative to your CSS file, not the project root. If your CSS file is deeper (e.g. apps/web/src/index.css), adjust accordingly: @source "../../../node_modules/@tablecraft/table/src";

Generate Types

Run the codegen tool to introspect your API and generate type-safe client adapters.

npx @tablecraft/codegen --url http://localhost:3000/api/engine --out ./src/generated

Ensure your backend server is running before executing this command, as it needs to fetch metadata from the API.

Create DataTable Page

Import the generated adapter and use it with the DataTable component.

// src/pages/products-page.tsx
import { DataTable } from "@tablecraft/table";
import { createProductsAdapter, type ProductsRow } from "../generated";

export function ProductsPage() {
  // Initialize the adapter with your API base URL
  const adapter = createProductsAdapter({
    baseUrl: "/api/engine",
  });

  return (
    <DataTable<ProductsRow>
      adapter={adapter}
      config={{
        enableSearch: true,
        enableExport: true,
        enableColumnResizing: true,
      }}
    />
  );
}

Next Steps

Explore more features to customize your tables.

Topic

Advanced Config

Description

Learn about custom cells, actions, and detailed configuration.

Link

Advanced

Topic

Relationships

Description

Display data from related tables (joins).

Link

Relationships

Topic

Metadata API

Description

Understand the underlying metadata API.

Link

Metadata API

Topic

Security

Description

Implement Role-Based Access Control (RBAC).

Link

Security

PreviousIntroduction NextPackages Overview

Last updated 13 days ago

Was this helpful?

Good night

hashtagInstallation

hashtagDefine Your Table

hashtagCreate API Routes

hashtagSetup Styles (Tailwind CSS v4)

hashtagGenerate Types

hashtagCreate DataTable Page

hashtagNext Steps

Installation

Define Your Table

Create API Routes

Setup Styles (Tailwind CSS v4)

Generate Types

Create DataTable Page

Next Steps