7ebff31475
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
108 lines
3.5 KiB
Plaintext
108 lines
3.5 KiB
Plaintext
---
|
|
status: "published"
|
|
|
|
label: "Data Table"
|
|
title: "Data Table Component in the Next.js Supabase SaaS kit"
|
|
description: "Learn how to use the Data Table component in the Next.js Supabase SaaS kit"
|
|
order: 2
|
|
---
|
|
|
|
|
|
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
|
|
|
|
```tsx
|
|
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:
|
|
|
|
```jsx
|
|
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. |