@vendure/dashboard 3.3.6-master-202507041203 → 3.4.0-minor-202506250934

package/src/lib/components/data-table/add-filter-menu.tsx

@@ -1,23 +1,30 @@
-import { DataTableFilterDialog } from '@/vdb/components/data-table/data-table-filter-dialog.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Dialog } from '@/vdb/components/ui/dialog.js';
+import { Button } from '@/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { camelCaseToTitleCase } from '@/vdb/lib/utils.js';
+} from '@/components/ui/dropdown-menu.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog.js';
+import { DataTableFilterDialog } from '@/components/data-table/data-table-filter-dialog.js';
 import { Column, ColumnDef } from '@tanstack/react-table';
 import { PlusCircle } from 'lucide-react';
-import { useState } from 'react';
+import { Trans } from '@/lib/trans.js';
+import React, { useState } from 'react';
+import { camelCaseToTitleCase } from '@/lib/utils.js';
 
 export interface AddFilterMenuProps {
     columns: Column<any, unknown>[];
 }
 
-export function AddFilterMenu({ columns }: Readonly<AddFilterMenuProps>) {
+export function AddFilterMenu({ columns }: AddFilterMenuProps) {
     const [selectedColumn, setSelectedColumn] = useState<ColumnDef<any> | null>(null);
     const [isDialogOpen, setIsDialogOpen] = useState(false);
 
@@ -46,7 +53,9 @@ export function AddFilterMenu({ columns }: Readonly<AddFilterMenuProps>) {
                     ))}
                 </DropdownMenuContent>
             </DropdownMenu>
-            {selectedColumn && <DataTableFilterDialog column={selectedColumn as any} />}
+            {selectedColumn && (
+                <DataTableFilterDialog column={selectedColumn as any} />
+            )}
         </Dialog>
     );
 }

package/src/lib/components/data-table/data-table-column-header.tsx

@@ -1,14 +1,32 @@
-import { Button } from '@/vdb/components/ui/button.js';
-import { camelCaseToTitleCase } from '@/vdb/lib/utils.js';
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog.js';
+import { DataTableFilterDialog } from '@/components/data-table/data-table-filter-dialog.js';
+import { FieldInfo } from '@/framework/document-introspection/get-document-structure.js';
+import { camelCaseToTitleCase } from '@/lib/utils.js';
+import { Trans } from '@/lib/trans.js';
 import { ColumnDef, HeaderContext } from '@tanstack/table-core';
-import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
+import { ArrowDown, ArrowUp, ArrowUpDown, EllipsisVertical, Filter } from 'lucide-react';
+import React from 'react';
 
 export interface DataTableColumnHeaderProps {
     customConfig: Partial<ColumnDef<any>>;
     headerContext: HeaderContext<any, any>;
 }
 
-export function DataTableColumnHeader({ headerContext, customConfig }: Readonly<DataTableColumnHeaderProps>) {
+export function DataTableColumnHeader({ headerContext, customConfig }: DataTableColumnHeaderProps) {
     const { column } = headerContext;
     const isSortable = column.getCanSort();
 

package/src/lib/components/data-table/data-table-faceted-filter.tsx

@@ -1,9 +1,10 @@
-import { Column } from '@tanstack/react-table';
-import { Check, FilterIcon } from 'lucide-react';
 import * as React from 'react';
+import { Column } from '@tanstack/react-table';
+import { Check, FilterIcon, PlusCircle } from 'lucide-react';
 
-import { Badge } from '@/vdb/components/ui/badge.js';
-import { Button } from '@/vdb/components/ui/button.js';
+import { cn } from '@/lib/utils.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
 import {
     Command,
     CommandEmpty,
@@ -12,10 +13,9 @@ import {
     CommandItem,
     CommandList,
     CommandSeparator,
-} from '@/vdb/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
-import { Separator } from '@/vdb/components/ui/separator.js';
-import { cn } from '@/vdb/lib/utils.js';
+} from '@/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { Separator } from '@/components/ui/separator.js';
 
 export interface DataTableFacetedFilterOption {
     label: string;

package/src/lib/components/data-table/data-table-filter-badge.tsx

@@ -1,8 +1,10 @@
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { CircleX, Filter } from 'lucide-react';
+import { Filter } from 'lucide-react';
+
+import { CircleX } from 'lucide-react';
 import { Badge } from '../ui/badge.js';
-import { HumanReadableOperator, Operator } from './human-readable-operator.js';
-import { ColumnDataType } from './types.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { ColumnDataType } from './data-table-types.js';
+import { HumanReadableOperator } from './human-readable-operator.js';
 
 export function DataTableFilterBadge({
     filter,
@@ -20,9 +22,7 @@ export function DataTableFilterBadge({
         <Badge key={filter.id} className="flex gap-1 items-center" variant="secondary">
             <Filter size="12" className="opacity-50" />
             <div>{filter.id}</div>
-            <div className="text-muted-foreground">
-                <HumanReadableOperator operator={operator as Operator} mode="short" />
-            </div>
+            <div className="text-muted-foreground"><HumanReadableOperator operator={operator} mode="short" /></div>
             <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
             <button className="cursor-pointer" onClick={() => onRemove(filter)}>
                 <CircleX size="14" />
@@ -31,15 +31,7 @@ export function DataTableFilterBadge({
     );
 }
 
-function FilterValue({
-    value,
-    dataType,
-    currencyCode,
-}: {
-    value: unknown;
-    dataType: ColumnDataType;
-    currencyCode: string;
-}) {
+function FilterValue({ value, dataType, currencyCode }: { value: unknown, dataType: ColumnDataType, currencyCode: string }) {
     const { formatDate, formatCurrency } = useLocalFormat();
     if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
         return Object.entries(value as Record<string, unknown>).map(([key, value]) => (

package/src/lib/components/data-table/data-table-filter-dialog.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/vdb/components/ui/button.js';
+import { Button } from '@/components/ui/button.js';
 import {
     DialogClose,
     DialogContent,
@@ -6,8 +6,8 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from '@/vdb/components/ui/dialog.js';
-import { Trans } from '@/vdb/lib/trans.js';
+} from '@/components/ui/dialog.js';
+import { Trans } from '@/lib/trans.js';
 import { Column } from '@tanstack/react-table';
 import { useState } from 'react';
 import { DataTableBooleanFilter } from './filters/data-table-boolean-filter.js';
@@ -15,13 +15,13 @@ import { DataTableDateTimeFilter } from './filters/data-table-datetime-filter.js
 import { DataTableIdFilter } from './filters/data-table-id-filter.js';
 import { DataTableNumberFilter } from './filters/data-table-number-filter.js';
 import { DataTableStringFilter } from './filters/data-table-string-filter.js';
-import { ColumnDataType } from './types.js';
+import { ColumnDataType } from './data-table-types.js';
 
 export interface DataTableFilterDialogProps {
     column: Column<any>;
 }
 
-export function DataTableFilterDialog({ column }: Readonly<DataTableFilterDialogProps>) {
+export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
     const columnFilter = column.getFilterValue() as Record<string, string> | undefined;
     const [filter, setFilter] = useState(columnFilter);
 
@@ -38,7 +38,7 @@ export function DataTableFilterDialog({ column }: Readonly<DataTableFilterDialog
             {columnDataType === 'String' ? (
                 <DataTableStringFilter value={filter} onChange={e => setFilter(e)} />
             ) : columnDataType === 'Int' || columnDataType === 'Float' ? (
-                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode="number" />
+                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode='number' />
             ) : columnDataType === 'DateTime' ? (
                 <DataTableDateTimeFilter value={filter} onChange={e => setFilter(e)} />
             ) : columnDataType === 'Boolean' ? (
@@ -46,7 +46,7 @@ export function DataTableFilterDialog({ column }: Readonly<DataTableFilterDialog
             ) : columnDataType === 'ID' ? (
                 <DataTableIdFilter value={filter} onChange={e => setFilter(e)} />
             ) : columnDataType === 'Money' ? (
-                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode="money" />
+                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode='money' />
             ) : null}
             <DialogFooter className="sm:justify-end">
                 {columnFilter && (
@@ -58,7 +58,7 @@ export function DataTableFilterDialog({ column }: Readonly<DataTableFilterDialog
                     <Button
                         type="button"
                         variant="secondary"
-                        onClick={() => {
+                            onClick={e => {
                             column.setFilterValue(filter);
                             setFilter(undefined);
                         }}

package/src/lib/components/data-table/data-table-pagination.tsx

@@ -1,19 +1,19 @@
 import { Table } from '@tanstack/react-table';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 
-import { Button } from '@/vdb/components/ui/button.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { Button } from '@/components/ui/button.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
 
 interface DataTablePaginationProps<TData> {
     table: Table<TData>;
 }
 
 export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
-    const selectedRowCount = Object.keys(table.getState().rowSelection).length;
     return (
         <div className="flex items-center justify-between px-2">
             <div className="flex-1 text-sm text-muted-foreground">
-                {selectedRowCount} of {table.getFilteredRowModel().rows.length} row(s) selected.
+                {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length}{' '}
+                row(s) selected.
             </div>
             <div className="flex items-center space-x-6 lg:space-x-8">
                 <div className="flex items-center space-x-2">

package/src/lib/components/data-table/data-table-view-options.tsx

@@ -1,31 +1,38 @@
 'use client';
 
 import { DndContext, closestCenter } from '@dnd-kit/core';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import {
+    restrictToVerticalAxis,
+} from '@dnd-kit/modifiers';
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Table } from '@tanstack/react-table';
 import { GripVertical, Settings2 } from 'lucide-react';
 
-import { Button } from '@/vdb/components/ui/button.js';
+import { Button } from '@/components/ui/button.js';
 import {
+    DropdownMenuSeparator, DropdownMenuTrigger,
     DropdownMenu,
     DropdownMenuCheckboxItem,
     DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { usePage } from '@/vdb/hooks/use-page.js';
-import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
+    DropdownMenuItem
+} from '@/components/ui/dropdown-menu.js';
+import { usePage } from '@/hooks/use-page.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { Trans } from '@/lib/trans.js';
 
 interface DataTableViewOptionsProps<TData> {
     table: Table<TData>;
 }
 
 function SortableItem({ id, children }: { id: string; children: React.ReactNode }) {
-    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+    } = useSortable({ id });
 
     const style = {
         transform: CSS.Transform.toString(transform),
@@ -58,11 +65,7 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
             const newColumns = [...columns];
             newColumns.splice(overIndex, 0, newColumns.splice(activeIndex, 1)[0]);
             if (page?.pageId) {
-                setTableSettings(
-                    page.pageId,
-                    'columnOrder',
-                    newColumns.map(col => col.id),
-                );
+                setTableSettings(page.pageId, 'columnOrder', newColumns.map(col => col.id));
             }
         }
     };
@@ -84,22 +87,15 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-[150px]">
-                    <DndContext
-                        collisionDetection={closestCenter}
-                        onDragEnd={handleDragEnd}
-                        modifiers={[restrictToVerticalAxis]}
-                    >
-                        <SortableContext
-                            items={columns.map(col => col.id)}
-                            strategy={verticalListSortingStrategy}
-                        >
+                    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]}>
+                        <SortableContext items={columns.map(col => col.id)} strategy={verticalListSortingStrategy}>
                             {columns.map(column => (
                                 <SortableItem key={column.id} id={column.id}>
                                     <DropdownMenuCheckboxItem
                                         className="capitalize"
                                         checked={column.getIsVisible()}
                                         onCheckedChange={value => column.toggleVisibility(!!value)}
-                                        onSelect={e => e.preventDefault()}
+                                        onSelect={(e) => e.preventDefault()}
                                     >
                                         {column.id}
                                     </DropdownMenuCheckboxItem>

package/src/lib/components/data-table/data-table.tsx

@@ -1,13 +1,9 @@
 'use client';
 
-import { DataTablePagination } from '@/vdb/components/data-table/data-table-pagination.js';
-import { DataTableViewOptions } from '@/vdb/components/data-table/data-table-view-options.js';
-import { RefreshButton } from '@/vdb/components/data-table/refresh-button.js';
-import { Input } from '@/vdb/components/ui/input.js';
-import { Skeleton } from '@/vdb/components/ui/skeleton.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
-import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
-import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { DataTablePagination } from '@/components/data-table/data-table-pagination.js';
+import { DataTableViewOptions } from '@/components/data-table/data-table-view-options.js';
+import { Input } from '@/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
 import {
     ColumnDef,
     ColumnFilter,
@@ -21,12 +17,13 @@ import {
     useReactTable,
     VisibilityState,
 } from '@tanstack/react-table';
-import { RowSelectionState, TableOptions } from '@tanstack/table-core';
+import { TableOptions } from '@tanstack/table-core';
 import React, { Suspense, useEffect } from 'react';
 import { AddFilterMenu } from './add-filter-menu.js';
-import { DataTableBulkActions } from './data-table-bulk-actions.js';
 import { DataTableFacetedFilter, DataTableFacetedFilterOption } from './data-table-faceted-filter.js';
 import { DataTableFilterBadge } from './data-table-filter-badge.js';
+import { useChannel } from '@/hooks/use-channel.js';
+import { RefreshButton } from '@/components/data-table/refresh-button.js';
 
 export interface FacetedFilter {
     title: string;
@@ -39,7 +36,6 @@ interface DataTableProps<TData> {
     columns: ColumnDef<TData, any>[];
     data: TData[];
     totalItems: number;
-    isLoading?: boolean;
     page?: number;
     itemsPerPage?: number;
     sorting?: SortingState;
@@ -52,7 +48,6 @@ interface DataTableProps<TData> {
     defaultColumnVisibility?: VisibilityState;
     facetedFilters?: { [key: string]: FacetedFilter | undefined };
     disableViewOptions?: boolean;
-    bulkActions?: BulkAction[];
     /**
      * This property allows full control over _all_ features of TanStack Table
      * when needed.
@@ -62,26 +57,24 @@ interface DataTableProps<TData> {
 }
 
 export function DataTable<TData>({
-    columns,
-    data,
-    totalItems,
-    isLoading,
-    page,
-    itemsPerPage,
-    sorting: sortingInitialState,
-    columnFilters: filtersInitialState,
-    onPageChange,
-    onSortChange,
-    onFilterChange,
-    onSearchTermChange,
-    onColumnVisibilityChange,
-    defaultColumnVisibility,
-    facetedFilters,
-    disableViewOptions,
-    bulkActions,
-    setTableOptions,
-    onRefresh,
-}: Readonly<DataTableProps<TData>>) {
+                                     columns,
+                                     data,
+                                     totalItems,
+                                     page,
+                                     itemsPerPage,
+                                     sorting: sortingInitialState,
+                                     columnFilters: filtersInitialState,
+                                     onPageChange,
+                                     onSortChange,
+                                     onFilterChange,
+                                     onSearchTermChange,
+                                     onColumnVisibilityChange,
+                                     defaultColumnVisibility,
+                                     facetedFilters,
+                                     disableViewOptions,
+                                     setTableOptions,
+                                     onRefresh,
+                                 }: DataTableProps<TData>) {
     const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
     const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
     const { activeChannel } = useChannel();
@@ -92,15 +85,11 @@ export function DataTable<TData>({
     const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(
         defaultColumnVisibility ?? {},
     );
-    const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
 
     useEffect(() => {
         // If the defaultColumnVisibility changes externally (e.g. the user reset the table settings),
         // we want to reset the column visibility to the default.
-        if (
-            defaultColumnVisibility &&
-            JSON.stringify(defaultColumnVisibility) !== JSON.stringify(columnVisibility)
-        ) {
+        if (defaultColumnVisibility && JSON.stringify(defaultColumnVisibility) !== JSON.stringify(columnVisibility)) {
             setColumnVisibility(defaultColumnVisibility);
         }
         // We intentionally do not include `columnVisibility` in the dependency array
@@ -109,7 +98,6 @@ export function DataTable<TData>({
     let tableOptions: TableOptions<TData> = {
         data,
         columns,
-        getRowId: row => (row as { id: string }).id,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         manualPagination: true,
@@ -120,13 +108,11 @@ export function DataTable<TData>({
         onSortingChange: setSorting,
         onColumnVisibilityChange: setColumnVisibility,
         onColumnFiltersChange: setColumnFilters,
-        onRowSelectionChange: setRowSelection,
         state: {
             pagination,
             sorting,
             columnVisibility,
             columnFilters,
-            rowSelection,
         },
     };
 
@@ -152,7 +138,6 @@ export function DataTable<TData>({
         onColumnVisibilityChange?.(table, columnVisibility);
     }, [columnVisibility]);
 
-    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
     return (
         <>
             <div className="flex justify-between items-start">
@@ -186,29 +171,21 @@ export function DataTable<TData>({
                             .map(f => {
                                 const column = table.getColumn(f.id);
                                 const currency = activeChannel?.defaultCurrencyCode ?? 'USD';
-                                return (
-                                    <DataTableFilterBadge
-                                        key={f.id}
-                                        filter={f}
-                                        currencyCode={currency}
-                                        dataType={
-                                            (column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'
-                                        }
-                                        onRemove={() =>
-                                            setColumnFilters(old => old.filter(x => x.id !== f.id))
-                                        }
-                                    />
-                                );
+                                return <DataTableFilterBadge
+                                    key={f.id}
+                                    filter={f}
+                                    currencyCode={currency}
+                                    dataType={(column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'}
+                                    onRemove={() => setColumnFilters(old => old.filter(x => x.id !== f.id))} />;
                             })}
                     </div>
                 </div>
                 <div className="flex items-center justify-start gap-2">
                     {!disableViewOptions && <DataTableViewOptions table={table} />}
-                    {onRefresh && <RefreshButton onRefresh={onRefresh} isLoading={isLoading ?? false} />}
+                    {onRefresh && <RefreshButton onRefresh={onRefresh} />}
                 </div>
             </div>
-
-            <div className="rounded-md border my-2 relative">
+            <div className="rounded-md border my-2">
                 <Table>
                     <TableHeader>
                         {table.getHeaderGroups().map(headerGroup => (
@@ -219,9 +196,9 @@ export function DataTable<TData>({
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                      header.column.columnDef.header,
-                                                      header.getContext(),
-                                                  )}
+                                                    header.column.columnDef.header,
+                                                    header.getContext(),
+                                                )}
                                         </TableHead>
                                     );
                                 })}
@@ -229,38 +206,18 @@ export function DataTable<TData>({
                         ))}
                     </TableHeader>
                     <TableBody>
-                        {isLoading && !data?.length ? (
-                            Array.from({ length: pagination.pageSize }).map((_, index) => (
-                                <TableRow
-                                    key={`skeleton-${index}`}
-                                    className="animate-in fade-in duration-100"
-                                >
-                                    {Array.from({ length: visibleColumnCount }).map((_, cellIndex) => (
-                                        <TableCell
-                                            key={`skeleton-cell-${index}-${cellIndex}`}
-                                            className="h-12"
-                                        >
-                                            <Skeleton className="h-4 my-2 w-full" />
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : table.getRowModel().rows?.length ? (
+                        {table.getRowModel().rows?.length ? (
                             table.getRowModel().rows.map(row => (
-                                <TableRow
-                                    key={row.id}
-                                    data-state={row.getIsSelected() && 'selected'}
-                                    className="animate-in fade-in duration-100"
-                                >
+                                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
                                     {row.getVisibleCells().map(cell => (
-                                        <TableCell key={cell.id} className="h-12">
+                                        <TableCell key={cell.id}>
                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                         </TableCell>
                                     ))}
                                 </TableRow>
                             ))
                         ) : (
-                            <TableRow className="animate-in fade-in duration-100">
+                            <TableRow>
                                 <TableCell colSpan={columns.length} className="h-24 text-center">
                                     No results.
                                 </TableCell>
@@ -268,7 +225,6 @@ export function DataTable<TData>({
                         )}
                     </TableBody>
                 </Table>
-                <DataTableBulkActions bulkActions={bulkActions ?? []} table={table} />
             </div>
             <DataTablePagination table={table} />
         </>

package/src/lib/components/data-table/filters/data-table-boolean-filter.tsx

@@ -1,10 +1,10 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from "@/lib/trans.js";
 
-import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { Select, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.js";
 
-import { SelectContent } from '@/vdb/components/ui/select.js';
-import { useEffect, useState } from 'react';
-import { HumanReadableOperator } from '../human-readable-operator.js';
+import { SelectContent } from "@/components/ui/select.js";
+import { useEffect, useState } from "react";
+import { HumanReadableOperator } from "../human-readable-operator.js";
 
 export interface DataTableBooleanFilterProps {
     value: Record<string, any> | undefined;
@@ -13,14 +13,11 @@ export interface DataTableBooleanFilterProps {
 
 export const BOOLEAN_OPERATORS = ['eq', 'isNull'] as const;
 
-export function DataTableBooleanFilter({
-    value: incomingValue,
-    onChange,
-}: Readonly<DataTableBooleanFilterProps>) {
-    const initialOperator = incomingValue ? (Object.keys(incomingValue)[0] ?? 'eq') : 'eq';
+export function DataTableBooleanFilter({ value: incomingValue, onChange }: DataTableBooleanFilterProps) {
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] ?? 'eq' : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : true;
     const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
-    const [value, setValue] = useState<boolean>((initialValue as boolean) ?? true);
+    const [value, setValue] = useState<boolean>(initialValue as boolean ?? true);
 
     useEffect(() => {
         onChange({ [operator]: value });