Data Tables

The data-tables module provides the table layer used by Tulip admin screens and provider modules.

It has three main responsibilities:

• table primitives and data-table components
• typed column definitions and table config helpers
• loading strategies for server-first and local-first tables

Query state lives in @tulip-systems/query. Data tables consume query controllers for filtering, sorting, and pagination.

Entry points

Use the server-safe entrypoint for table types and primitive components:

import { type TableColumnDef, TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";

Use the client entrypoint for table providers and loading strategies:

import {
  createTableConfig,
  TableConfigProvider,
  useInfiniteStrategy,
  useLocalStrategy,
} from "@tulip-systems/data-tables/client";

Use the query entrypoints for filters, sorting, and pagination:

import { offsetPagination } from "@tulip-systems/query";
import { useFilters, usePagination, useSorting } from "@tulip-systems/query/client";

Query contract

Filters, sorting, and pagination are descriptor/controller based. The table config receives the resolved query controllers.

const pagination = usePagination(offsetPagination);
const filtering = useFilters(customerFilters);
const sorting = useSorting(customerSorting);

const config = createTableConfig({
  queryData,
  columns,
  strategy,
  pagination,
  filtering,
  sorting,
});

Loading strategies

Data tables separate configuration from data loading.

• use pagination or infinite strategies when the server remains the source of truth
• use the local strategy when rows already live in client state or TanStack DB
• keep query definitions portable so server-first and local-first flows share one contract

Related Pages