***
title: "PaginatedListDataTable"
generated: true
---------------
## PaginatedListDataTable
A wrapper around the [DataTable](/current/core/reference/dashboard/list-views/data-table#datatable) component, which automatically configures functionality common to
list queries that implement the `PaginatedList` interface, which is the common way of representing lists
of data in Vendure.
Given a GraphQL query document node, the component will automatically configure the required columns
with sorting & filtering functionality.
The automatic features can be further customized and enhanced using the many options available in the props.
*Example*
```tsx
import { Money } from '@/vdb/components/data-display/money.js';
import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
import { Badge } from '@/vdb/components/ui/badge.js';
import { Button } from '@/vdb/components/ui/button.js';
import { Link } from '@tanstack/react-router';
import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
import { useState } from 'react';
import { customerOrderListDocument } from '../customers.graphql.js';
interface CustomerOrderTableProps {
customerId: string;
}
export function CustomerOrderTable({ customerId }: Readonly) {
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [sorting, setSorting] = useState([{ id: 'orderPlacedAt', desc: true }]);
const [filters, setFilters] = useState([]);
return (
{
return {
...variables,
customerId,
};
}}
defaultVisibility={{
id: false,
createdAt: false,
updatedAt: false,
type: false,
currencyCode: false,
total: false,
}}
customizeColumns={{
total: {
header: 'Total',
cell: ({ cell, row }) => {
const value = cell.getValue();
const currencyCode = row.original.currencyCode;
return ;
},
},
totalWithTax: {
header: 'Total with Tax',
cell: ({ cell, row }) => {
const value = cell.getValue();
const currencyCode = row.original.currencyCode;
return ;
},
},
state: {
header: 'State',
cell: ({ cell }) => {
const value = cell.getValue() as string;
return {value};
},
},
code: {
header: 'Code',
cell: ({ cell, row }) => {
const value = cell.getValue() as string;
const id = row.original.id;
return (
}>
{value}
);
},
},
}}
page={page}
itemsPerPage={pageSize}
sorting={sorting}
columnFilters={filters}
onPageChange={(_, page, perPage) => {
setPage(page);
setPageSize(perPage);
}}
onSortChange={(_, sorting) => {
setSorting(sorting);
}}
onFilterChange={(_, filters) => {
setFilters(filters);
}}
/>
);
}
```
```ts title="Signature"
function PaginatedListDataTable, U extends Record = any, V extends ListQueryOptionsShape = any, AC extends AdditionalColumns = AdditionalColumns>(props: Readonly>): void
```
Parameters
### props
\PaginatedListDataTableProps>`} />
## PaginatedListDataTableProps
Props to configure the [PaginatedListDataTable](/current/core/reference/dashboard/list-views/paginated-list-data-table#paginatedlistdatatable) component.
```ts title="Signature"
interface PaginatedListDataTableProps, U extends ListQueryShape, V extends ListQueryOptionsShape, AC extends AdditionalColumns> {
listQuery: T;
deleteMutation?: TypedDocumentNode;
transformQueryKey?: (queryKey: any[]) => any[];
transformVariables?: (variables: V) => V;
customizeColumns?: CustomizeColumnConfig;
additionalColumns?: AC;
defaultColumnOrder?: (keyof ListQueryFields | keyof AC | CustomFieldKeysOfItem>)[];
defaultVisibility?: Partial, boolean>>;
onSearchTermChange?: (searchTerm: string) => NonNullable['filter'];
page: number;
itemsPerPage: number;
sorting: SortingState;
columnFilters?: ColumnFiltersState;
onPageChange: (table: Table, page: number, perPage: number) => void;
onSortChange: (table: Table, sorting: SortingState) => void;
onFilterChange: (table: Table, filters: ColumnFiltersState) => void;
onColumnVisibilityChange?: (table: Table, columnVisibility: VisibilityState) => void;
facetedFilters?: FacetedFilterConfig;
rowActions?: RowAction>[];
bulkActions?: BulkActionsInput;
disableViewOptions?: boolean;
transformData?: (data: PaginatedListItemFields[]) => PaginatedListItemFields[];
setTableOptions?: (table: TableOptions) => TableOptions;
registerRefresher?: PaginatedListRefresherRegisterFn;
onReorder?: (
oldIndex: number,
newIndex: number,
item: PaginatedListItemFields,
) => void | Promise;
disableDragAndDrop?: boolean;
includeSelectionColumn?: boolean;
}
```
### listQuery
\
### deleteMutation
\`} />
### transformQueryKey
\ any[]`} />
### transformVariables
\ V`} />
### customizeColumns
\`} />
### additionalColumns
\
### defaultColumnOrder
\ | keyof AC | CustomFieldKeysOfItem>)[]`} />
### defaultVisibility
\, boolean>>`} />
### onSearchTermChange
\ NonNullable['filter']`} />
Called whenever the debounced search term changes (including when it
becomes empty). Return a partial filter to merge with the column /
faceted filters. The returned filter is only applied when the term is
non-empty — when the term is `''`, the returned value is discarded so
that callers can write `{ field: { contains: searchTerm } }` without
producing tautological `contains: ''` clauses. The callback itself is
still invoked on every change so pages can use it as a state-sync hook.
### page
\
### itemsPerPage
\
### sorting
\
### columnFilters
\
### onPageChange
\, page: number, perPage: number) => void`} />
### onSortChange
\, sorting: SortingState) => void`} />
### onFilterChange
\, filters: ColumnFiltersState) => void`} />
### onColumnVisibilityChange
\, columnVisibility: VisibilityState) => void`} />
### facetedFilters
\`} />
### rowActions
\>[]`} />
### bulkActions
\BulkActionsInput`} />
### disableViewOptions
\
### transformData
\[]) => PaginatedListItemFields[]`} />
### setTableOptions
\) => TableOptions`} />
### registerRefresher
\
### onReorder
\, ) => void | Promise`} />
Callback when items are reordered via drag and drop.
When provided, enables drag-and-drop functionality.
### disableDragAndDrop
\
When true, drag and drop will be disabled. This will only have an effect if the onReorder prop is also set
### includeSelectionColumn
\
When false, the row selection checkbox column will not be included.