@tailor-platform/sdk-plugin-app-shell

Tailor Platform SDK plugin that generates tableMetadata from TailorDB table definitions for use with @tailor-platform/app-shell's DataTable component.

What it does

tableMetadata bridges your TailorDB schema to the DataTable. It tells inferColumns how to render and filter each field — for example, which fields get a date picker, which get an enum dropdown (and with what options), and which are numeric. Without it, you would need to declare all of this manually per column.

The metadata is generated at SDK generate time from your TailorDB table definitions, so it stays in sync with your schema automatically.

Installation

pnpm add -D @tailor-platform/sdk-plugin-app-shell

Setup

Supports @tailor-platform/sdk ^1 || ^2. The examples below use the v2 CLI and TailorDB table API.

Register the plugin in tailor.config.ts:

import { definePlugins } from "@tailor-platform/sdk";
import { appShellPlugin } from "@tailor-platform/sdk-plugin-app-shell";

export const plugins = definePlugins(
  appShellPlugin({
    dataTable: {
      metadataOutputPath: "src/generated/app-shell-datatable.generated.ts",
    },
  }),
);

Then run tailor generate to produce the metadata file.

Usage

Pass tableMetadata to inferColumns to get type-safe column definitions with filter editors automatically configured:

import { tableMetadata } from "@/generated/app-shell-datatable.generated";
import { createColumnHelper } from "@tailor-platform/app-shell";

const { column, inferColumns } = createColumnHelper<Order>();
const infer = inferColumns(tableMetadata.order);

const columns = [
  column(infer("title")), // string column    → text filter
  column(infer("status")), // enum column      → dropdown filter with generated values
  column(infer("createdAt")), // datetime column  → date picker filter
];

You can still override per-column defaults when needed. For example, pass a non-empty filter.operators allowlist to narrow the built-in DataTable filter UI for one field:

const columns = [column(infer("title", { filter: { operators: ["contains", "eq"] } }))];

operators only affects the built-in DataTable filter UI. Programmatic CollectionControl.addFilter(...), URL state, and saved/persisted filters still use the broader backend operator set.

For full DataTable usage, see @tailor-platform/app-shell.