Previewvendurehq/vendure/master

Getting Started

How to use

Preview: Vendure Core (master) | Vendure Docs

Previewvendurehq/vendure/master

Getting Started

How to usev3.7.2

v3.7.2

Home
Vendure Core
List Views
DataTable

DataTable

@vendure/dashboard Sourcev3.4.0

A data table which includes sorting, filtering, pagination, bulk actions, column controls etc.

This is the building block of all data tables in the Dashboard.

PreviousBulk Actions NextDataTableCellComponent

8.3k

Home
Vendure Core
List Views
DataTable

DataTable

@vendure/dashboard Sourcev3.4.0

A data table which includes sorting, filtering, pagination, bulk actions, column controls etc.

This is the building block of all data tables in the Dashboard.

PreviousBulk Actions NextDataTableCellComponent

Signature

function DataTable<TData>(props: Readonly<DataTableProps<TData>>): void

Parameters

props

parameterReadonly<DataTableProps<TData>>

DataTableProps

@vendure/dashboard Sourcev3.4.0

Props for configuring the DataTable.

Signature

interface DataTableProps<TData> {    children?: React.ReactNode;    columns: ColumnDef<TData, any>[];    data: TData[];    totalItems: number;    isLoading?: boolean;    page?: number;    itemsPerPage?: number;    sorting?: SortingState;    columnFilters?: ColumnFiltersState;    onPageChange?: (table: TableType<TData>, page: number, itemsPerPage: number) => void;    onSortChange?: (table: TableType<TData>, sorting: SortingState) => void;    onFilterChange?: (table: TableType<TData>, columnFilters: ColumnFilter[]) => void;    onColumnVisibilityChange?: (table: TableType<TData>, columnVisibility: VisibilityState) => void;    onSearchTermChange?: (searchTerm: string) => void;    defaultColumnVisibility?: VisibilityState;    facetedFilters?: { [key: string]: FacetedFilter | undefined };    disableViewOptions?: boolean;    bulkActions?: BulkActionsInput;    setTableOptions?: (table: TableOptions<TData>) => TableOptions<TData>;    onRefresh?: () => void;    onReorder?: (oldIndex: number, newIndex: number, item: TData, allItems?: TData[]) => void | Promise<void>;    disableDragAndDrop?: boolean;}

children

propertyReact.ReactNode

columns

propertyColumnDef<TData, any>[]

data

propertyTData[]

totalItems

propertynumber

isLoading

propertyboolean

page

propertynumber

itemsPerPage

propertynumber

sorting

propertySortingState

columnFilters

propertyColumnFiltersState

onPageChange

property(table: TableType<TData>, page: number, itemsPerPage: number) => void

onSortChange

property(table: TableType<TData>, sorting: SortingState) => void

onFilterChange

property(table: TableType<TData>, columnFilters: ColumnFilter[]) => void

onColumnVisibilityChange

property(table: TableType<TData>, columnVisibility: VisibilityState) => void

onSearchTermChange

property(searchTerm: string) => void

defaultColumnVisibility

propertyVisibilityState

facetedFilters

property{ [key: string]: FacetedFilter | undefined }

disableViewOptions

propertyboolean

bulkActions

propertyBulkActionsInput

setTableOptions

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

This property allows full control over all features of TanStack Table when needed.

onRefresh

property() => void

onReorder

property(oldIndex: number, newIndex: number, item: TData, allItems?: TData[]) => void | Promise<void>

Callback when items are reordered via drag and drop. When provided, enables drag-and-drop functionality. The fourth parameter provides all items for context-aware reordering.

disableDragAndDrop

propertyboolean

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

Past the docs?

Architecture reviews, custom plugin work, migrations, ongoing support. Get a hand from the team that builds Vendure.

Talk to the team