PaginatedListDataTable

@vendure/dashboard Sourcev3.4.0

A wrapper around the 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<CustomerOrderTableProps>) {    const [page, setPage] = useState(1);    const [pageSize, setPageSize] = useState(10);    const [sorting, setSorting] = useState<SortingState>([{ id: 'orderPlacedAt', desc: true }]);    const [filters, setFilters] = useState<ColumnFiltersState>([]);    return (        <PaginatedListDataTable            listQuery={customerOrderListDocument}            transformVariables={variables => {                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 <Money value={value} currency={currencyCode} />;                    },                },                totalWithTax: {                    header: 'Total with Tax',                    cell: ({ cell, row }) => {                        const value = cell.getValue();                        const currencyCode = row.original.currencyCode;                        return <Money value={value} currency={currencyCode} />;                    },                },                state: {                    header: 'State',                    cell: ({ cell }) => {                        const value = cell.getValue() as string;                        return <Badge variant="outline">{value}</Badge>;                    },                },                code: {                    header: 'Code',                    cell: ({ cell, row }) => {                        const value = cell.getValue() as string;                        const id = row.original.id;                        return (                            <Button variant="ghost" render={<Link to={`/orders/${id}`} />}>                                {value}                            </Button>                        );                    },                },            }}            page={page}            itemsPerPage={pageSize}            sorting={sorting}            columnFilters={filters}            onPageChange={(_, page, perPage) => {                setPage(page);                setPageSize(perPage);            }}            onSortChange={(_, sorting) => {                setSorting(sorting);            }}            onFilterChange={(_, filters) => {                setFilters(filters);            }}        />    );}

Signature

function PaginatedListDataTable<T extends TypedDocumentNode<U, V>, U extends Record<string, any> = any, V extends ListQueryOptionsShape = any, AC extends AdditionalColumns<T> = AdditionalColumns<T>>(props: Readonly<PaginatedListDataTableProps<T, U, V, AC>>): void

Parameters

props

parameterReadonly<PaginatedListDataTableProps<T, U, V, AC>>

PaginatedListDataTableProps

@vendure/dashboard Sourcev3.4.0

Props to configure the PaginatedListDataTable component.

Signature

interface PaginatedListDataTableProps<T extends TypedDocumentNode<U, V>, U extends ListQueryShape, V extends ListQueryOptionsShape, AC extends AdditionalColumns<T>> {    listQuery: T;    deleteMutation?: TypedDocumentNode<any, any>;    transformQueryKey?: (queryKey: any[]) => any[];    transformVariables?: (variables: V) => V;    customizeColumns?: CustomizeColumnConfig<T>;    additionalColumns?: AC;    defaultColumnOrder?: (keyof ListQueryFields<T> | keyof AC | CustomFieldKeysOfItem<ListQueryFields<T>>)[];    defaultVisibility?: Partial<Record<AllItemFieldKeys<T>, boolean>>;    onSearchTermChange?: (searchTerm: string) => NonNullable<V['options']>['filter'];    page: number;    itemsPerPage: number;    sorting: SortingState;    columnFilters?: ColumnFiltersState;    onPageChange: (table: Table<any>, page: number, perPage: number) => void;    onSortChange: (table: Table<any>, sorting: SortingState) => void;    onFilterChange: (table: Table<any>, filters: ColumnFiltersState) => void;    onColumnVisibilityChange?: (table: Table<any>, columnVisibility: VisibilityState) => void;    facetedFilters?: FacetedFilterConfig<T>;    rowActions?: RowAction<PaginatedListItemFields<T>>[];    bulkActions?: BulkActionsInput;    disableViewOptions?: boolean;    transformData?: (data: PaginatedListItemFields<T>[]) => PaginatedListItemFields<T>[];    setTableOptions?: (table: TableOptions<any>) => TableOptions<any>;    registerRefresher?: PaginatedListRefresherRegisterFn;    onReorder?: (        oldIndex: number,        newIndex: number,        item: PaginatedListItemFields<T>,    ) => void | Promise<void>;    disableDragAndDrop?: boolean;    includeSelectionColumn?: boolean;}

listQuery

propertyT

deleteMutation

propertyTypedDocumentNode<any, any>

transformQueryKey

property(queryKey: any[]) => any[]

transformVariables

property(variables: V) => V

customizeColumns

propertyCustomizeColumnConfig<T>

additionalColumns

propertyAC

defaultColumnOrder

property(keyof ListQueryFields<T> | keyof AC | CustomFieldKeysOfItem<ListQueryFields<T>>)[]

defaultVisibility

propertyPartial<Record<AllItemFieldKeys<T>, boolean>>

onSearchTermChange

property(searchTerm: string) => NonNullable<V['options']>['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

propertynumber

itemsPerPage

propertynumber

sorting

propertySortingState

columnFilters

propertyColumnFiltersState

onPageChange

property(table: Table<any>, page: number, perPage: number) => void

onSortChange

property(table: Table<any>, sorting: SortingState) => void

onFilterChange

property(table: Table<any>, filters: ColumnFiltersState) => void

onColumnVisibilityChange

property(table: Table<any>, columnVisibility: VisibilityState) => void

facetedFilters

propertyFacetedFilterConfig<T>

rowActions

propertyRowAction<PaginatedListItemFields<T>>[]

bulkActions

propertyBulkActionsInput

disableViewOptions

propertyboolean

transformData

property(data: PaginatedListItemFields<T>[]) => PaginatedListItemFields<T>[]

setTableOptions

property(table: TableOptions<any>) => TableOptions<any>

registerRefresher

propertyPaginatedListRefresherRegisterFn

onReorder

property

(         oldIndex: number,         newIndex: number,         item: PaginatedListItemFields<T>,     ) => void | Promise<void>

Callback when items are reordered via drag and drop. When provided, enables drag-and-drop functionality.

disableDragAndDrop

propertyboolean

When true, drag and drop will be disabled. This will only have an effect if the onReorder prop is also set

includeSelectionColumn

propertyboolean

Default:true

When false, the row selection checkbox column will not be included.

Was this chapter helpful?

Report Issue

Edited Jun 1, 2026·Edit this page