***

title: "DataTable"
generated: true
---------------

## DataTable

<GenerationInfo sourceFile="packages/dashboard/src/lib/components/data-table/data-table.tsx" sourceLine="188" packageName="@vendure/dashboard" since="3.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.

```ts title="Signature"
function DataTable<TData>(props: Readonly<DataTableProps<TData>>): void
```

Parameters

### props

\<MemberInfo kind="parameter" type={`Readonly<<a href='/current/core/reference/dashboard/list-views/data-table#datatableprops'>DataTableProps</a><TData>>`} />

## DataTableProps

<GenerationInfo sourceFile="packages/dashboard/src/lib/components/data-table/data-table.tsx" sourceLine="137" packageName="@vendure/dashboard" since="3.4.0" />

Props for configuring the [DataTable](/current/core/reference/dashboard/list-views/data-table#datatable).

```ts title="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;
}
```

<div className="members-wrapper">

### children

\<MemberInfo kind="property" type={`React.ReactNode`}   />

### columns

\<MemberInfo kind="property" type={`ColumnDef<TData, any>[]`}   />

### data

\<MemberInfo kind="property" type={`TData[]`}   />

### totalItems

\<MemberInfo kind="property" type={`number`}   />

### isLoading

\<MemberInfo kind="property" type={`boolean`}   />

### page

\<MemberInfo kind="property" type={`number`}   />

### itemsPerPage

\<MemberInfo kind="property" type={`number`}   />

### sorting

\<MemberInfo kind="property" type={`SortingState`}   />

### columnFilters

\<MemberInfo kind="property" type={`ColumnFiltersState`}   />

### onPageChange

\<MemberInfo kind="property" type={`(table: TableType<TData>, page: number, itemsPerPage: number) => void`}   />

### onSortChange

\<MemberInfo kind="property" type={`(table: TableType<TData>, sorting: SortingState) => void`}   />

### onFilterChange

\<MemberInfo kind="property" type={`(table: TableType<TData>, columnFilters: ColumnFilter[]) => void`}   />

### onColumnVisibilityChange

\<MemberInfo kind="property" type={`(table: TableType<TData>, columnVisibility: VisibilityState) => void`}   />

### onSearchTermChange

\<MemberInfo kind="property" type={`(searchTerm: string) => void`}   />

### defaultColumnVisibility

\<MemberInfo kind="property" type={`VisibilityState`}   />

### facetedFilters

\<MemberInfo kind="property" type={`{ [key: string]: FacetedFilter | undefined }`}   />

### disableViewOptions

\<MemberInfo kind="property" type={`boolean`}   />

### bulkActions

\<MemberInfo kind="property" type={`<a href='/current/core/reference/dashboard/list-views/bulk-actions#bulkactionsinput'>BulkActionsInput</a>`}   />

### setTableOptions

\<MemberInfo kind="property" type={`(table: TableOptions<TData>) => TableOptions<TData>`}   />

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

### onRefresh

\<MemberInfo kind="property" type={`() => void`}   />

### onReorder

\<MemberInfo kind="property" type={`(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

\<MemberInfo kind="property" type={`boolean`}   />

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

</div>