Data Table Component in the Next.js 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 ServerDataLoader

Here's an example of how to use the DataTable component with ServerDataLoader:

import { ServerDataLoader } from '@makerkit/data-loader-supabase-nextjs';
import { DataTable } from '@kit/ui/enhanced-data-table';
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
function AccountsPage({ searchParams }) {
  const client = getSupabaseServerAdminClient();
  const page = searchParams.page ? parseInt(searchParams.page) : 1;
  const filters = getFilters(searchParams);
  return (
    <ServerDataLoader
      table={'accounts'}
      client={client}
      page={page}
      where={filters}
    >
      {({ data, page, pageSize, pageCount }) => (
        <DataTable
          columns={[
            // Define your columns here
          ]}
          data={data}
          page={page}
          pageSize={pageSize}
          pageCount={pageCount}
        />
      )}
    </ServerDataLoader>
  );
}

This example demonstrates how to use ServerDataLoader to fetch data from a Supabase table and pass it to the DataTable component. The ServerDataLoader handles the data fetching and pagination, 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.