PaginatedListDataTable

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 asChild variant="ghost">                                <Link to={`/orders/${id}`}>{value}</Link>                            </Button>                        );                    },                },            }}            page={page}            itemsPerPage={pageSize}            sorting={sorting}            columnFilters={filters}            onPageChange={(_, page, perPage) => {                setPage(page);                setPageSize(perPage);            }}            onSortChange={(_, sorting) => {                setSorting(sorting);            }}            onFilterChange={(_, filters) => {                setFilters(filters);            }}        />    );}

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

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?: BulkAction[];    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;}