Frequently Asked Questions

Can I use TableCraft without Next.js?

Partially. The translation bridge defaults to next-intl and several internal hooks rely on Next.js navigation primitives. You can work around this in two ways:

• Pass a translationFn prop directly to bypass the next-intl bridge with your own i18n solution.
• Replace the internal navigation hooks (used for URL sync) with stubs or your router's equivalents.

Full standalone support — with zero Next.js dependencies — is on the roadmap.

Can I use TableCraft with React Server Components?

Table components are client components and must be marked with "use client". However, you can render them from a Server Component by fetching data on the server and passing it down as props.

// app/users/page.tsx (Server Component)
import { fetchUsers } from "@/lib/api";
import { UsersTable } from "@/components/users-table"; // "use client"

export default async function UsersPage() {
  const users = await fetchUsers();

  return (
    <main>
      <h1>Users</h1>
      <UsersTable data={users} />
    </main>
  );
}

How do I add custom filter types?

Use the DataTableSearchableColumn interface and its type field, which accepts text, number, checkbox, or date. For a fully custom filter UI, set isQuerySearch on your config and drive filtering through searchableQuery — this hands full control of the search/filter state to your own UI layer.

Why isn't my config change taking effect?

TableCraft resolves configuration through a layered priority order. Values defined earlier in the list are overridden by values defined later:

1. Defaults — built-in fallback values
2. Provider Config — set via TableProvider
3. Instance Config — passed as the config prop to a specific table
4. Props — individual props on the component (highest priority)

For example, if you pass showPagination={false} as a prop, it overrides config.features.pagination regardless of what the config says.

How do I disable all features for a minimal table?

Set every feature flag to false in your config and also pass showFilter={false} as a prop:

import { createTableConfig } from "@/lib/table";

const minimalConfig = createTableConfig({
  features: {
    search: false,
    filter: false,
    sort: false,
    columnVisibility: false,
    pagination: false,
    rowSelection: false,
    export: false,
    cardView: false,
    advancedFilter: false,
  },
});

<DataTable
  config={minimalConfig}
  showFilter={false}
  columns={columns}
  data={data}
/>

How do I access the TanStack Table instance?

DataTable creates the TanStack Table instance internally and does not expose a ref to it. To interact with table state or methods from outside the component, use one of these patterns:

• Pass data through meta properties defined on your column definitions.
• Use callback-based props (such as onRowSelectionChange) to respond to internal state changes.

Are there keyboard shortcuts?

Keyboard navigation within dropdowns, dialogs, and menus is provided automatically by the Radix UI primitives that TableCraft uses internally. There are no custom keyboard shortcuts beyond standard browser behavior. Users can tab through interactive elements and use arrow keys within menus as expected.