Skip to main content

ListPage

ListPage​

@vendure/dashboardlist-page.tsx
v3.3.0

Status: Developer Preview

Auto-generates a list page with columns generated based on the provided query document fields.

Signature
function ListPage<T extends TypedDocumentNode<U, V>, U extends Record<string, any> = any, V extends ListQueryOptionsShape = ListQueryOptionsShape, AC extends AdditionalColumns<T> = AdditionalColumns<T>>(props: ListPageProps<T, U, V, AC>): void

Parameters

props​

parameter
ListPageProps<T, U, V, AC>

ListPageProps​

@vendure/dashboardlist-page.tsx
v3.3.0

Status: Developer Preview

Signature
interface ListPageProps<T extends TypedDocumentNode<U, V>, U extends ListQueryShape, V extends ListQueryOptionsShape, AC extends AdditionalColumns<T>> {
    pageId?: string;
    route: AnyRoute | (() => AnyRoute);
    title: string | React.ReactElement;
    listQuery: T;
    deleteMutation?: TypedDocumentNode<any, { id: string }>;
    transformVariables?: (variables: V) => V;
    onSearchTermChange?: (searchTerm: string) => NonNullable<V['options']>['filter'];
    customizeColumns?: CustomizeColumnConfig<T>;
    additionalColumns?: AC;
    defaultColumnOrder?: (keyof ListQueryFields<T> | keyof AC | CustomFieldKeysOfItem<ListQueryFields<T>>)[];
    defaultSort?: SortingState;
    defaultVisibility?: Partial<
        Record<keyof ListQueryFields<T> | keyof AC | CustomFieldKeysOfItem<ListQueryFields<T>>, boolean>
    >;
    children?: React.ReactNode;
    facetedFilters?: FacetedFilterConfig<T>;
    rowActions?: RowAction<ListQueryFields<T>>[];
    transformData?: (data: any[]) => any[];
    setTableOptions?: (table: TableOptions<any>) => TableOptions<any>;
}

pageId​

property
string

route​

property
AnyRoute | (() => AnyRoute)

title​

property
string | React.ReactElement

listQuery​

property
T

deleteMutation​

property
TypedDocumentNode<any, { id: string }>

transformVariables​

property
(variables: V) => V

onSearchTermChange​

property
(searchTerm: string) => NonNullable<V['options']>['filter']

customizeColumns​

property
CustomizeColumnConfig<T>

additionalColumns​

property
AC

defaultColumnOrder​

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

defaultSort​

property
SortingState

defaultVisibility​

property
Partial< Record<keyof ListQueryFields<T> | keyof AC | CustomFieldKeysOfItem<ListQueryFields<T>>, boolean> >

children​

property
React.ReactNode

facetedFilters​

property
FacetedFilterConfig<T>

rowActions​

property
RowAction<ListQueryFields<T>>[]

transformData​

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

setTableOptions​

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