Data Table Component in the Tanstack Start Supabase SaaS kit

The DataTable component is a powerful and flexible table component built on top of TanStack Table (React Table v8). It provides a range of features for displaying and interacting with tabular data, including pagination, sorting, and custom rendering.

Usage

import { DataTable } from '@kit/ui/enhanced-data-table';
function MyComponent() {
  const columns = [
    // Define your columns here
  ];
  const data = [
    // Your data array
  ];
  return (
    <DataTable
      columns={columns}
      data={data}
      pageSize={10}
      pageIndex={0}
      pageCount={5}
    />
  );
}

Props

• data: T[] (required): An array of objects representing the table data.
• columns: ColumnDef<T>[] (required): An array of column definitions.
• pageIndex?: number: The current page index (0-based).
• pageSize?: number: The number of rows per page.
• pageCount?: number: The total number of pages.
• onPaginationChange?: (pagination: PaginationState) => void: Callback function for pagination changes.
• tableProps?: React.ComponentProps<typeof Table>: Additional props to pass to the underlying Table component.

Pagination

The DataTable component handles pagination internally but can also be controlled externally. It provides navigation buttons for first page, previous page, next page, and last page.

Sorting

Sorting is handled internally by the component. Click on column headers to sort by that column.

Filtering

The component supports column filtering, which can be implemented in the column definitions.

Example with a route loader and server function

In Tanstack Start there is no ServerDataLoader component. Instead, fetch the data in a server function, call it from the route loader, and pass the paginated result down to the DataTable.

First, define a server function that queries Supabase and returns the page of data plus pagination metadata. This is the same pattern used by apps/web/src/lib/server/admin.functions.ts:

import { createServerFn } from '@tanstack/react-start';
import * as z from 'zod';
import { adminFunctionMiddleware } from '@kit/function-middleware/functions';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
const PAGE_SIZE = 10;
const AccountsSearchSchema = z.object({
  page: z.number().int().positive().default(1),
});
export const fetchAccounts = createServerFn({ method: 'GET' })
  .middleware(adminFunctionMiddleware)
  .validator(AccountsSearchSchema)
  .handler(async ({ data }) => {
    const client = getSupabaseServerClient();
    const from = (data.page - 1) * PAGE_SIZE;
    const to = from + PAGE_SIZE - 1;
    const {
      data: accounts,
      count,
      error,
    } = await client
      .from('accounts')
      .select('*', { count: 'exact' })
      .order('created_at', { ascending: false })
      .range(from, to);
    if (error) {
      throw error;
    }
    return {
      data: accounts,
      page: data.page,
      pageSize: PAGE_SIZE,
      pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
    };
  });

Then wire the server function into the route loader and render the DataTable with the loader data:

import { createFileRoute } from '@tanstack/react-router';
import { DataTable } from '@kit/ui/enhanced-data-table';
import { fetchAccounts } from '#/lib/server/accounts.functions.ts';
export const Route = createFileRoute('/admin/accounts/')({
  validateSearch: (search: Record<string, unknown>) => ({
    page: typeof search.page === 'number' && search.page > 0 ? search.page : 1,
  }),
  loaderDeps: ({ search }) => search,
  loader: ({ deps }) => fetchAccounts({ data: deps }),
  component: AccountsPage,
});
function AccountsPage() {
  const { data, page, pageSize, pageCount } = Route.useLoaderData();
  return (
    <DataTable
      columns={[
        // Define your columns here
      ]}
      data={data}
      pageIndex={page - 1}
      pageSize={pageSize}
      pageCount={pageCount}
    />
  );
}

This example demonstrates how to fetch data from a Supabase table in a server function and pass it to the DataTable. The route loader handles data fetching and pagination (re-running whenever the page search param changes via loaderDeps), while the DataTable takes care of rendering and client-side interactions.

Customization

The DataTable component is built with customization in mind. You can customize the appearance using Tailwind CSS classes and extend its functionality by passing custom props to the underlying Table component.

Internationalization

The component uses the Trans component for internationalization. Ensure you have your i18n setup correctly to leverage this feature.

The DataTable component provides a powerful and flexible solution for displaying tabular data in your React applications, with built-in support for common table features and easy integration with server-side data loading.