@k3-universe/react-kit 0.0.27 → 0.0.29

package/src/kit/builder/data-table/components/DataTable.tsx

@@ -15,13 +15,29 @@ import {
 import { Loader2, RefreshCw } from 'lucide-react';
 import * as React from 'react';
 import { cn } from '../../../../shadcn/lib/utils';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../../shadcn/ui/accordion';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '../../../../shadcn/ui/accordion';
 import { Button } from '../../../../shadcn/ui/button';
 import { Checkbox } from '../../../../shadcn/ui/checkbox';
 import { Skeleton } from '../../../../shadcn/ui/skeleton';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../../shadcn/ui/table';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../../shadcn/ui/table';
 import { FormBuilder, type FormBuilderSectionConfig } from '../../form';
-import type { DataTableAction, DataTableBatchAction, DataTableFiltersProp } from '../types';
+import type {
+  DataTableAction,
+  DataTableBatchAction,
+  DataTableFiltersProp,
+} from '../types';
 import { DataTablePagination } from './DataTablePagination';
 import { DataTableViewOptions } from './DataTableViewOptions';
 
@@ -39,6 +55,7 @@ export interface DataTableProps<TData, TValue> {
   rowCount?: number;
   pagination?: boolean;
   paginationState?: PaginationState;
+  paginationVariant?: 'full' | 'compact';
   onPaginationChange?: (newState: PaginationState) => void;
   columnVisibility?: boolean;
   columnVisibilityState?: VisibilityState;
@@ -79,6 +96,7 @@ export function DataTable<TData, TValue>({
   onColumnFiltersChange,
   rowCount,
   pagination,
+  paginationVariant = 'full',
   onPaginationChange,
   paginationState,
   columnVisibility,
@@ -100,51 +118,68 @@ export function DataTable<TData, TValue>({
   filterTitle,
   filterShowActionsSeparator,
 }: DataTableProps<TData, TValue>) {
-  const [rowSelection, setRowSelection] = React.useState<Record<string, boolean>>({});
-  const [internalSortingState, setInternalSortingState] = React.useState<SortingState>([]);
-  const [internalFiltersState, setInternalFiltersState] = React.useState<ColumnFiltersState>([]);
-  const [internalPaginationState, setInternalPaginationState] = React.useState<PaginationState>({ pageIndex: 0, pageSize: 10 });
-  const [internalVisibilityState, setInternalVisibilityState] = React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState<
+    Record<string, boolean>
+  >({});
+  const [internalSortingState, setInternalSortingState] =
+    React.useState<SortingState>([]);
+  const [internalFiltersState, setInternalFiltersState] =
+    React.useState<ColumnFiltersState>([]);
+  const [internalPaginationState, setInternalPaginationState] =
+    React.useState<PaginationState>({ pageIndex: 0, pageSize: 10 });
+  const [internalVisibilityState, setInternalVisibilityState] =
+    React.useState<VisibilityState>({});
 
   const effectiveSortingState = sortingState ?? internalSortingState;
   const effectiveFiltersState = columnFiltersState ?? internalFiltersState;
-  const effectiveVisibilityState = columnVisibilityState ?? internalVisibilityState;
+  const effectiveVisibilityState =
+    columnVisibilityState ?? internalVisibilityState;
   const effectivePaginationState = paginationState ?? internalPaginationState;
 
   const isPaginationEnabled = pagination;
-  const isManualPaginationEnabled = paginationState !== undefined && onPaginationChange !== undefined;
+  const isManualPaginationEnabled =
+    paginationState !== undefined && onPaginationChange !== undefined;
   const isSortingEnabled = sorting;
   const isColumnFiltersEnabled = columnFilters;
   const isColumnVisibilityEnabled = columnVisibility;
 
   // Build selection-aware columns by injecting a selection column at the start
-  const selectionColumn = React.useMemo<ColumnDef<TData, unknown>>(() => ({
-    id: '__select',
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-        onCheckedChange={val => table.toggleAllPageRowsSelected(!!val)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={val => row.toggleSelected(!!val)}
-        aria-label="Select row"
-        onClick={e => e.stopPropagation()}
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-    size: 32,
-    minSize: 32,
-    maxSize: 32,
-  }), []);
+  const selectionColumn = React.useMemo<ColumnDef<TData, unknown>>(
+    () => ({
+      id: '__select',
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && 'indeterminate')
+          }
+          onCheckedChange={(val) => table.toggleAllPageRowsSelected(!!val)}
+          aria-label="Select all"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(val) => row.toggleSelected(!!val)}
+          aria-label="Select row"
+          onClick={(e) => e.stopPropagation()}
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+      size: 32,
+      minSize: 32,
+      maxSize: 32,
+    }),
+    [],
+  );
 
   const renderedColumns = React.useMemo(
-    () => (selectable ? [selectionColumn as unknown as ColumnDef<TData, TValue>, ...columns] : columns),
-    [selectable, selectionColumn, columns]
+    () =>
+      selectable
+        ? [selectionColumn as unknown as ColumnDef<TData, TValue>, ...columns]
+        : columns,
+    [selectable, selectionColumn, columns],
   );
 
   const table = useReactTable({
@@ -166,23 +201,49 @@ export function DataTable<TData, TValue>({
     manualPagination: isManualPaginationEnabled,
     enableSorting: isSortingEnabled,
     enableColumnFilters: isColumnFiltersEnabled,
-    onSortingChange: isSortingEnabled ? updater => {
-      const next = typeof updater === 'function' ? (updater as (old: SortingState) => SortingState)(effectiveSortingState) : updater;
-      setInternalSortingState(next);
-      onSortingChange?.(next);
-    } : undefined,
-    onColumnFiltersChange: isColumnFiltersEnabled ? updater => {
-      const next = typeof updater === 'function' ? (updater as (old: ColumnFiltersState) => ColumnFiltersState)(effectiveFiltersState) : updater;
-      setInternalFiltersState(next);
-      onColumnFiltersChange?.(next);
-    } : undefined,
-    onPaginationChange: isPaginationEnabled ? updater => {
-      const next = typeof updater === 'function' ? (updater as (old: PaginationState) => PaginationState)(effectivePaginationState) : updater;
-      setInternalPaginationState(next);
-      onPaginationChange?.(next);
-    } : undefined,
-    onColumnVisibilityChange: updater => {
-      const next = typeof updater === 'function' ? (updater as (old: VisibilityState) => VisibilityState)(effectiveVisibilityState) : updater;
+    onSortingChange: isSortingEnabled
+      ? (updater) => {
+          const next =
+            typeof updater === 'function'
+              ? (updater as (old: SortingState) => SortingState)(
+                  effectiveSortingState,
+                )
+              : updater;
+          setInternalSortingState(next);
+          onSortingChange?.(next);
+        }
+      : undefined,
+    onColumnFiltersChange: isColumnFiltersEnabled
+      ? (updater) => {
+          const next =
+            typeof updater === 'function'
+              ? (updater as (old: ColumnFiltersState) => ColumnFiltersState)(
+                  effectiveFiltersState,
+                )
+              : updater;
+          setInternalFiltersState(next);
+          onColumnFiltersChange?.(next);
+        }
+      : undefined,
+    onPaginationChange: isPaginationEnabled
+      ? (updater) => {
+          const next =
+            typeof updater === 'function'
+              ? (updater as (old: PaginationState) => PaginationState)(
+                  effectivePaginationState,
+                )
+              : updater;
+          setInternalPaginationState(next);
+          onPaginationChange?.(next);
+        }
+      : undefined,
+    onColumnVisibilityChange: (updater) => {
+      const next =
+        typeof updater === 'function'
+          ? (updater as (old: VisibilityState) => VisibilityState)(
+              effectiveVisibilityState,
+            )
+          : updater;
       setInternalVisibilityState(next);
       onColumnVisibilityChange?.(next);
     },
@@ -198,16 +259,25 @@ export function DataTable<TData, TValue>({
   }, [onTable, table]);
 
   // Selected rows convenience
-  const selectedRows = table.getSelectedRowModel().rows.map(r => r.original as TData);
+  const selectedRows = table
+    .getSelectedRowModel()
+    .rows.map((r) => r.original as TData);
 
   // Safe action arrays to avoid array literal defaults in props
   const safeActions = React.useMemo(() => actions ?? [], [actions]);
-  const safeBatchActions = React.useMemo(() => batchActions ?? [], [batchActions]);
+  const safeBatchActions = React.useMemo(
+    () => batchActions ?? [],
+    [batchActions],
+  );
 
   // Skeleton row keys (avoid using array index as key)
   const skeletonRowKeys = React.useMemo(
-    () => Array.from({ length: Math.max(3, effectivePaginationState.pageSize ?? 10) }, () => Math.random().toString(36).slice(2)),
-    [effectivePaginationState.pageSize]
+    () =>
+      Array.from(
+        { length: Math.max(3, effectivePaginationState.pageSize ?? 10) },
+        () => Math.random().toString(36).slice(2),
+      ),
+    [effectivePaginationState.pageSize],
   );
 
   // Standard actions state
@@ -218,10 +288,17 @@ export function DataTable<TData, TValue>({
 
   // Render a button from action definition
   const renderActionButton = (action: DataTableAction, key: React.Key) => {
-    if (action.element) return <React.Fragment key={key}>{action.element}</React.Fragment>;
+    if (action.element)
+      return <React.Fragment key={key}>{action.element}</React.Fragment>;
     const content = (
       <div className="flex items-center gap-x-2">
-        {action.icon && <span className={cn(action.iconPosition === 'right' ? 'order-last' : '')}>{action.icon}</span>}
+        {action.icon && (
+          <span
+            className={cn(action.iconPosition === 'right' ? 'order-last' : '')}
+          >
+            {action.icon}
+          </span>
+        )}
         {action.label}
       </div>
     );
@@ -239,12 +316,26 @@ export function DataTable<TData, TValue>({
     );
   };
 
-  const renderBatchButton = (action: DataTableBatchAction<TData>, key: React.Key) => {
-    if (action.element) return <React.Fragment key={key}>{action.element}</React.Fragment>;
-    const onClick = () => action.onClick?.({ selectedRows, clearSelection: () => table.resetRowSelection() });
+  const renderBatchButton = (
+    action: DataTableBatchAction<TData>,
+    key: React.Key,
+  ) => {
+    if (action.element)
+      return <React.Fragment key={key}>{action.element}</React.Fragment>;
+    const onClick = () =>
+      action.onClick?.({
+        selectedRows,
+        clearSelection: () => table.resetRowSelection(),
+      });
     const content = (
       <div className="flex items-center gap-x-2">
-        {action.icon && <span className={cn(action.iconPosition === 'right' ? 'order-last' : '')}>{action.icon}</span>}
+        {action.icon && (
+          <span
+            className={cn(action.iconPosition === 'right' ? 'order-last' : '')}
+          >
+            {action.icon}
+          </span>
+        )}
         {action.label}
       </div>
     );
@@ -268,18 +359,27 @@ export function DataTable<TData, TValue>({
 
   return (
     <div className={cn('space-y-3', className)}>
-      {formFilters && formFilters.length ? (
+      {formFilters?.length ? (
         effectiveFilterWrapper === 'accordion' ? (
           <div className="rounded-md border border-border">
-            <Accordion type="single" collapsible className="w-full" defaultValue="filters">
+            <Accordion
+              type="single"
+              collapsible
+              className="w-full"
+              defaultValue="filters"
+            >
               <AccordionItem value="filters">
-                <AccordionTrigger className="px-4 py-3 border-b border-border text-md">{effectiveFilterTitle}</AccordionTrigger>
+                <AccordionTrigger className="px-4 py-3 border-b border-border text-md">
+                  {effectiveFilterTitle}
+                </AccordionTrigger>
                 <AccordionContent className="px-4 pb-4 pt-5">
                   <FormBuilder
                     key={JSON.stringify(formFilterValues ?? {})}
                     sections={formFilters as FormBuilderSectionConfig[]}
                     defaultValues={formFilterValues}
-                    onSubmit={data => onFormFilterChange?.(data as Record<string, unknown>)}
+                    onSubmit={(data) =>
+                      onFormFilterChange?.(data as Record<string, unknown>)
+                    }
                     onReset={() => onFormFilterChange?.({})}
                     showActions
                     submitLabel="Apply"
@@ -296,7 +396,9 @@ export function DataTable<TData, TValue>({
               key={JSON.stringify(formFilterValues ?? {})}
               sections={formFilters as FormBuilderSectionConfig[]}
               defaultValues={formFilterValues}
-              onSubmit={data => onFormFilterChange?.(data as Record<string, unknown>)}
+              onSubmit={(data) =>
+                onFormFilterChange?.(data as Record<string, unknown>)
+              }
               onReset={() => onFormFilterChange?.({})}
               showActions
               submitLabel="Apply"
@@ -309,7 +411,9 @@ export function DataTable<TData, TValue>({
             key={JSON.stringify(formFilterValues ?? {})}
             sections={formFilters as FormBuilderSectionConfig[]}
             defaultValues={formFilterValues}
-            onSubmit={data => onFormFilterChange?.(data as Record<string, unknown>)}
+            onSubmit={(data) =>
+              onFormFilterChange?.(data as Record<string, unknown>)
+            }
             onReset={() => onFormFilterChange?.({})}
             showActions
             submitLabel="Apply"
@@ -319,11 +423,17 @@ export function DataTable<TData, TValue>({
         )
       ) : null}
       {/* Actions Bar */}
-      {(safeActions.length || showStandardActions || (selectable && table.getSelectedRowModel().rows.length > 0 && safeBatchActions.length)) && (
+      {(safeActions.length ||
+        showStandardActions ||
+        (selectable &&
+          table.getSelectedRowModel().rows.length > 0 &&
+          safeBatchActions.length)) && (
         <div className="rounded-md p-2 mt-6">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
-              {selectable && table.getSelectedRowModel().rows.length > 0 && safeBatchActions.map((a) => renderBatchButton(a, a.key))}
+              {selectable &&
+                table.getSelectedRowModel().rows.length > 0 &&
+                safeBatchActions.map((a) => renderBatchButton(a, a.key))}
             </div>
             <div className="flex items-center gap-2">
               {showStandardActions && onRefresh && (
@@ -335,7 +445,10 @@ export function DataTable<TData, TValue>({
                   className="h-8"
                   title="Refresh"
                 >
-                  <RefreshCw className={cn('h-4 w-4', loading && 'animate-spin')} /> Refresh
+                  <RefreshCw
+                    className={cn('h-4 w-4', loading && 'animate-spin')}
+                  />{' '}
+                  Refresh
                 </Button>
               )}
               {isColumnVisibilityEnabled ? (
@@ -346,7 +459,10 @@ export function DataTable<TData, TValue>({
           </div>
         </div>
       )}
-      <div className="relative overflow-hidden rounded-md border border-border" aria-busy={loading || undefined}>
+      <div
+        className="relative overflow-hidden rounded-md border border-border"
+        aria-busy={loading || undefined}
+      >
         {loading && (
           <div className="pointer-events-none absolute inset-0 z-10 flex items-start justify-end p-2">
             <span className="inline-flex items-center gap-2 rounded bg-background/80 px-2 py-1 text-xs shadow-sm ring-1 ring-border">
@@ -356,13 +472,16 @@ export function DataTable<TData, TValue>({
         )}
         <Table>
           <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
+            {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => (
+                {headerGroup.headers.map((header) => (
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(header.column.columnDef.header, header.getContext())}
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
                   </TableHead>
                 ))}
               </TableRow>
@@ -380,23 +499,35 @@ export function DataTable<TData, TValue>({
                 </TableRow>
               ))
             ) : table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
+              table.getRowModel().rows.map((row) => (
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && 'selected'}
-                  className={cn(onRowClick && 'cursor-pointer hover:bg-muted/50')}
-                  onClick={onRowClick ? () => onRowClick(row.original as TData) : undefined}
+                  className={cn(
+                    onRowClick && 'cursor-pointer hover:bg-muted/50',
+                  )}
+                  onClick={
+                    onRowClick
+                      ? () => onRowClick(row.original as TData)
+                      : undefined
+                  }
                 >
-                  {row.getVisibleCells().map(cell => (
+                  {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-                <TableCell colSpan={table.getVisibleLeafColumns().length} className="h-24 text-center">
+                <TableCell
+                  colSpan={table.getVisibleLeafColumns().length}
+                  className="h-24 text-center"
+                >
                   {emptyText}
                 </TableCell>
               </TableRow>
@@ -406,7 +537,10 @@ export function DataTable<TData, TValue>({
       </div>
 
       {isPaginationEnabled && (
-        <DataTablePagination table={table} />
+        <DataTablePagination
+          table={table}
+          paginationVariant={paginationVariant}
+        />
       )}
     </div>
   );

package/src/kit/builder/data-table/components/DataTableColumnHeader.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { type Column } from '@tanstack/react-table';
+import type { Column } from '@tanstack/react-table';
 import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from 'lucide-react';
 import { cn } from '../../../../shadcn/lib/utils';
 import { Button } from '../../../../shadcn/ui/button';
@@ -10,9 +9,10 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../../../../shadcn/ui/dropdown-menu';
+import type { HTMLAttributes } from 'react';
 
 export interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
+  extends HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>;
   label?: string;
 }
@@ -23,7 +23,7 @@ export function DataTableColumnHeader<TData, TValue>({
   className,
 }: DataTableColumnHeaderProps<TData, TValue>) {
   label = (column.columnDef.meta as { label?: string })?.label ?? label;
-  
+
   if (!column.getCanSort()) {
     return <div className={cn(className)}>{label}</div>;
   }
@@ -32,7 +32,11 @@ export function DataTableColumnHeader<TData, TValue>({
     <div className={cn('flex items-center gap-2', className)}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm" className="data-[state=open]:bg-accent -ml-3 h-8">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="data-[state=open]:bg-accent -ml-3 h-8"
+          >
             <span>{label}</span>
             {column.getIsSorted() === 'desc' ? (
               <ArrowDown className="ml-2 size-4" />

package/src/kit/builder/data-table/components/DataTablePagination.tsx

@@ -1,40 +1,62 @@
-import { type Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import type { Table } from '@tanstack/react-table';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react';
 import { Button } from '../../../../shadcn/ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../shadcn/ui/select';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../../../shadcn/ui/select';
 
 export interface DataTablePaginationProps<TData> {
   table: Table<TData>;
+  paginationVariant?: 'full' | 'compact';
 }
 
-export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
-  const pagination = table.getState().pagination ?? { pageIndex: 0, pageSize: 10 };
+export function DataTablePagination<TData>({
+  table,
+  paginationVariant = 'full',
+}: DataTablePaginationProps<TData>) {
+  const pagination = table.getState().pagination ?? {
+    pageIndex: 0,
+    pageSize: 10,
+  };
 
   return (
     <div className="flex items-center justify-between px-2">
-      <div className="text-muted-foreground flex-1 text-sm">
-        {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">
-          <p className="text-sm font-medium">Rows per page</p>
-          <Select
-            value={`${pagination.pageSize}`}
-            onValueChange={(value) => table.setPageSize(Number(value))}
-          >
-            <SelectTrigger className="h-8 w-[70px]">
-              <SelectValue placeholder={pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side="top">
-              {[10, 20, 25, 30, 40, 50].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+      {paginationVariant === 'full' && (
+        <div className="text-muted-foreground flex-1 text-sm">
+          {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">
+        {paginationVariant === 'full' && (
+          <div className="flex items-center space-x-2">
+            <p className="text-sm font-medium">Rows per page</p>
+            <Select
+              value={`${pagination.pageSize}`}
+              onValueChange={(value) => table.setPageSize(Number(value))}
+            >
+              <SelectTrigger className="h-8 w-[70px]">
+                <SelectValue placeholder={pagination.pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {[10, 20, 25, 30, 40, 50].map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
         <div className="flex w-[100px] items-center justify-center text-sm font-medium">
           Page {pagination.pageIndex + 1} of {table.getPageCount()}
         </div>

package/src/kit/builder/data-table/components/DataTableViewOptions.tsx

@@ -1,4 +1,4 @@
-import { type Table } from '@tanstack/react-table';
+import type { Table } from '@tanstack/react-table';
 import { Settings2 } from 'lucide-react';
 import { Button } from '../../../../shadcn/ui/button';
 import {
@@ -10,11 +10,19 @@ import {
   DropdownMenuTrigger,
 } from '../../../../shadcn/ui/dropdown-menu';
 
-export function DataTableViewOptions<TData>({ table }: { table: Table<TData> }) {
+export function DataTableViewOptions<TData>({
+  table,
+}: {
+  table: Table<TData>;
+}) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 lg:flex"
+        >
           <Settings2 className="mr-2 size-4" /> View
         </Button>
       </DropdownMenuTrigger>
@@ -32,7 +40,8 @@ export function DataTableViewOptions<TData>({ table }: { table: Table<TData> })
                 checked={column.getIsVisible()}
                 onCheckedChange={(value) => column.toggleVisibility(!!value)}
               >
-                {(column?.columnDef.meta as { label?: string })?.label ?? column.id}
+                {(column?.columnDef.meta as { label?: string })?.label ??
+                  column.id}
               </DropdownMenuCheckboxItem>
             );
           })}

package/src/kit/builder/data-table/types.ts

@@ -9,7 +9,13 @@ export interface DataTableAction {
   label?: React.ReactNode; // string or component
   icon?: React.ReactNode;
   iconPosition?: IconPosition;
-  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  variant?:
+    | 'default'
+    | 'destructive'
+    | 'outline'
+    | 'secondary'
+    | 'ghost'
+    | 'link';
   disabled?: boolean;
   onClick?: () => void | Promise<void>;
   // If provided, this element will be rendered directly instead of constructing a Button
@@ -21,9 +27,18 @@ export interface DataTableBatchAction<TData = unknown> {
   label?: React.ReactNode;
   icon?: React.ReactNode;
   iconPosition?: IconPosition;
-  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  variant?:
+    | 'default'
+    | 'destructive'
+    | 'outline'
+    | 'secondary'
+    | 'ghost'
+    | 'link';
   disabled?: boolean;
   // Receives selected rows and helpers
-  onClick?: (args: { selectedRows: TData[]; clearSelection: () => void }) => void | Promise<void>;
+  onClick?: (args: {
+    selectedRows: TData[];
+    clearSelection: () => void;
+  }) => void | Promise<void>;
   element?: React.ReactNode;
 }