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';
export function loader() {
}
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.