DataTable

DataTable<TData>(props): Element

Defined in: packages/react/src/components/ui/data-table/DataTable.tsx:153

Generic data table component with Load More pagination, row selection, and bulk actions.

Built on TanStack Table. Parent component provides accumulated results and Load More handler. Displays checkbox column when selection enabled, bulk action bar when items selected, and Load More button when more results available.

Type Parameters

TData

TData extends VexDocument

Row data type (must have _id field for selection)

Parameters

props

DataTableProps<TData>

Component props

Returns

Element

Data table UI

Example

// Define columns
const columns: ColumnDef<Post>[] = [
  { accessorKey: "title", header: "Title" },
  { accessorKey: "author", header: "Author" },
];

// Use with pagination hook
const pagination = usePaginatedCollection({
  collection: "posts",
  initialNumItems: 100,
});

const handleBulkDelete = async (ids: string[]) => {
  await removeMutation.mutateAsync({ ids });
  // Invalidate queries to refresh
};

<DataTable
  data={pagination.results}
  columns={columns}
  isDone={pagination.isDone}
  onLoadMore={() => pagination.loadMore(100)}
  isLoadingMore={pagination.isLoading}
  totalCount={pagination.totalCount}
  enableRowSelection={true}
  enableBulkActions={true}
  onBulkDelete={handleBulkDelete}
  isDeleting={removeMutation.isPending}
  entityName="posts"
/>

See

• react/src!usePaginatedQuery - Hook for managing pagination state
• DataTableBulkActions - Bulk action bar component (exported for callers to render themselves; not yet wired into this component’s own selection UI).
• BulkDeleteModal - Confirmation modal component