create-app-ui 1.0.0

package/boilerplate/react-base/src/components/data-table.tsx

@@ -0,0 +1,919 @@
+import {
+  type Column,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type Row,
+  type SortingState,
+  type Table as TanstackTable,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Download,
+  ListFilter,
+  RefreshCw,
+  Search,
+  SlidersHorizontal,
+  UserPlus,
+  X,
+} from "lucide-react";
+import * as React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData, TValue> {
+    title?: string;
+  }
+}
+
+export type DataTableFilterOption = {
+  label: string;
+  value: string;
+};
+
+export type DataTableFilterableColumn = {
+  id: string;
+  title: string;
+  options: DataTableFilterOption[];
+};
+
+export type DataTableSearchAction = {
+  label: string;
+  onClick: () => void;
+  backgroundColor?: string;
+  hoverBackgroundColor?: string;
+  textColor?: string;
+  icon?: React.ReactNode;
+  ariaLabel?: string;
+};
+
+type DataTableProps<TData, TValue> = {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  searchPlaceholder?: string;
+  filterableColumns?: DataTableFilterableColumn[];
+  onRefresh?: () => void | Promise<void>;
+  isRefreshing?: boolean;
+  onExport?: () => void;
+  enableSearch?: boolean;
+  enableRowSelection?: boolean;
+  enableColumnVisibility?: boolean;
+  searchAction?: DataTableSearchAction;
+  searchActions?: React.ReactNode;
+  toolbarActions?: React.ReactNode;
+  bulkActions?: React.ReactNode;
+  onSelectionChange?: (rows: TData[]) => void;
+};
+
+function getColumnLabel<TData>(column: Column<TData, unknown>) {
+  return column.columnDef.meta?.title ?? column.id;
+}
+
+const DataTableIconButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button> & { tooltip: string; badge?: number | string }
+>(({ tooltip, badge, children, className, ...props }, ref) => (
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button
+        ref={ref}
+        type="button"
+        variant="outline"
+        size="sm"
+        className={cn("relative h-8 w-8 shrink-0 border-dashed bg-background p-0 shadow-sm", className)}
+        aria-label={tooltip}
+        {...props}
+      >
+        {children}
+        {badge !== undefined && Number(badge) > 0 ? (
+          <Badge
+            variant="secondary"
+            className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-normal"
+          >
+            {badge}
+          </Badge>
+        ) : null}
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent side="bottom">{tooltip}</TooltipContent>
+  </Tooltip>
+));
+DataTableIconButton.displayName = "DataTableIconButton";
+
+export type DataTableRowAction = {
+  tooltip: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+  variant?: React.ComponentProps<typeof Button>["variant"];
+  disabled?: boolean;
+};
+
+export function DataTableRowActions({
+  actions,
+  className,
+  align = "center",
+}: {
+  actions: DataTableRowAction[];
+  className?: string;
+  align?: "center" | "end";
+}) {
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center gap-1",
+        align === "center" ? "justify-center" : "justify-end",
+        className,
+      )}
+    >
+      {actions.map((action, index) => (
+        <Tooltip key={`${action.tooltip}-${index}`}>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant={action.variant ?? "outline"}
+              size="sm"
+              className="h-8 w-8 shrink-0 p-0"
+              aria-label={action.tooltip}
+              onClick={action.onClick}
+              disabled={action.disabled}
+            >
+              {action.icon}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{action.tooltip}</TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  );
+}
+
+/** Standard actions column with icon-only update/delete (extend via getActions). */
+export function dataTableActionsColumn<TData>({
+  getActions,
+}: {
+  getActions: (row: TData) => DataTableRowAction[];
+}): ColumnDef<TData> {
+  return {
+    id: "actions",
+    meta: { title: "Actions" },
+    enableSorting: false,
+    enableHiding: false,
+    header: () => (
+      <div className="flex w-full justify-center">
+        <span className="text-sm font-medium">Actions</span>
+      </div>
+    ),
+    cell: ({ row }) => <DataTableRowActions actions={getActions(row.original)} align="center" />,
+  };
+}
+
+export function dataTableSelectColumn<TData>({
+  shape = "square",
+}: {
+  shape?: "rounded" | "square";
+} = {}): ColumnDef<TData> {
+  return {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        shape={shape}
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all rows on this page"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        shape={shape}
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  };
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: {
+  column: {
+    getCanSort: () => boolean;
+    getIsSorted: () => false | "asc" | "desc";
+    toggleSorting: (desc?: boolean) => void;
+  };
+  title: string;
+  className?: string;
+}) {
+  if (!column.getCanSort()) {
+    return <span className={cn("text-sm font-medium", className)}>{title}</span>;
+  }
+
+  const sorted = column.getIsSorted();
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "-ml-2 inline-flex h-8 items-center gap-1.5 rounded-md px-2 text-sm font-medium transition-colors",
+        "hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        sorted ? "text-foreground" : "text-muted-foreground",
+        className,
+      )}
+      onClick={() => column.toggleSorting(sorted === "asc")}
+    >
+      <span>{title}</span>
+      {sorted === "desc" ? (
+        <ArrowDown className="h-3.5 w-3.5" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="h-3.5 w-3.5" />
+      ) : (
+        <ArrowUpDown className="h-3.5 w-3.5 opacity-50" />
+      )}
+    </button>
+  );
+}
+
+function DataTableFacetedFilterGroup<TData>({
+  column,
+  title,
+  options,
+}: {
+  column: Column<TData, unknown> | undefined;
+  title: string;
+  options: DataTableFilterOption[];
+}) {
+  const filterValues = (column?.getFilterValue() as string[] | undefined) ?? [];
+
+  const toggleOption = (optionValue: string, checked: boolean | "indeterminate") => {
+    if (!column) {
+      return;
+    }
+
+    const next = new Set(filterValues);
+    if (checked === true) {
+      next.add(optionValue);
+    } else {
+      next.delete(optionValue);
+    }
+
+    const values = Array.from(next);
+    column.setFilterValue(values.length ? values : undefined);
+  };
+
+  return (
+    <div className="space-y-2">
+      <p className="text-sm font-medium">{title}</p>
+      <div className="space-y-1">
+        {options.map((option) => {
+          const isSelected = filterValues.includes(option.value);
+          return (
+            <div
+              key={option.value}
+              className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted/60"
+              onClick={() => toggleOption(option.value, !isSelected)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  toggleOption(option.value, !isSelected);
+                }
+              }}
+              role="button"
+              tabIndex={0}
+            >
+              <Checkbox
+                shape="square"
+                checked={isSelected}
+                onCheckedChange={(checked) => toggleOption(option.value, checked)}
+                onClick={(event) => event.stopPropagation()}
+              />
+              <span>{option.label}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function DataTableSearch<TData>({
+  table,
+  searchPlaceholder,
+  className,
+}: {
+  table: TanstackTable<TData>;
+  searchPlaceholder: string;
+  className?: string;
+}) {
+  const query = (table.getState().globalFilter as string) ?? "";
+
+  return (
+    <div className={cn("relative min-w-0 flex-1", className)}>
+      <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+      <Input
+        placeholder={searchPlaceholder}
+        value={query}
+        onChange={(event) => table.setGlobalFilter(event.target.value)}
+        className="h-9 bg-background pl-8 pr-8 shadow-sm"
+      />
+      {query ? (
+        <button
+          type="button"
+          aria-label="Clear search"
+          className="absolute right-2.5 top-2.5 rounded-sm text-muted-foreground hover:text-foreground"
+          onClick={() => table.setGlobalFilter("")}
+        >
+          <X className="h-4 w-4" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function DataTableSearchActionButton({ action }: { action: DataTableSearchAction }) {
+  const { label, onClick, backgroundColor, hoverBackgroundColor, textColor, icon, ariaLabel } = action;
+  const tooltip = ariaLabel ?? label;
+  const hasCustomColors = Boolean(backgroundColor || textColor || hoverBackgroundColor);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant={hasCustomColors ? "default" : "brand"}
+          size="sm"
+          className={cn(
+            "h-8 w-8 shrink-0 border-0 p-0 shadow-sm",
+            hasCustomColors && "bg-primary text-primary-foreground hover:bg-primary/90",
+          )}
+          style={
+            hasCustomColors
+              ? {
+                  backgroundColor,
+                  color: textColor,
+                }
+              : undefined
+          }
+          aria-label={tooltip}
+          onClick={onClick}
+          onMouseEnter={(event) => {
+            if (hoverBackgroundColor) {
+              event.currentTarget.style.backgroundColor = hoverBackgroundColor;
+            }
+          }}
+          onMouseLeave={(event) => {
+            if (backgroundColor) {
+              event.currentTarget.style.backgroundColor = backgroundColor;
+            }
+          }}
+        >
+          {icon ?? <UserPlus className="h-4 w-4" />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function DataTableFiltersPopover<TData>({
+  table,
+  filterableColumns,
+}: {
+  table: TanstackTable<TData>;
+  filterableColumns?: DataTableFilterableColumn[];
+}) {
+  const activeFilterCount = table.getState().columnFilters.length;
+
+  if (!filterableColumns?.length) {
+    return null;
+  }
+
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild>
+        <DataTableIconButton tooltip="Filters" badge={activeFilterCount || undefined}>
+          <ListFilter className="h-4 w-4" />
+        </DataTableIconButton>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="z-[100] w-80 p-0">
+        <div className="border-b px-4 py-3">
+          <p className="text-sm font-semibold">Filters</p>
+          <p className="text-xs text-muted-foreground">Filter rows by column values.</p>
+        </div>
+        <ScrollArea className="max-h-80">
+          <div className="space-y-4 p-4">
+            {filterableColumns.map((filterColumn) => (
+              <DataTableFacetedFilterGroup
+                key={filterColumn.id}
+                column={table.getColumn(filterColumn.id)}
+                title={filterColumn.title}
+                options={filterColumn.options}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+        {activeFilterCount > 0 && (
+          <div className="border-t p-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 w-full"
+              onClick={() => table.resetColumnFilters()}
+            >
+              Reset filters
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function DataTableSortDropdown<TData>({ table }: { table: TanstackTable<TData> }) {
+  const sortableColumns = table.getAllLeafColumns().filter((column) => column.getCanSort());
+  const sorting = table.getState().sorting;
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <DataTableIconButton tooltip="Sort" badge={sorting.length || undefined}>
+          <ArrowUpDown className="h-4 w-4" />
+        </DataTableIconButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="z-[100] w-52">
+        <DropdownMenuLabel>Sort by</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {sortableColumns.length === 0 ? (
+          <p className="px-2 py-3 text-sm text-muted-foreground">No sortable columns.</p>
+        ) : (
+          sortableColumns.map((column) => {
+            const sorted = column.getIsSorted();
+            return (
+              <DropdownMenuItem
+                key={column.id}
+                onSelect={(event) => {
+                  event.preventDefault();
+                  column.toggleSorting(sorted === "asc");
+                }}
+              >
+                <span className="flex-1">{getColumnLabel(column)}</span>
+                {sorted === "asc" ? (
+                  <ArrowUp className="h-4 w-4 text-muted-foreground" />
+                ) : sorted === "desc" ? (
+                  <ArrowDown className="h-4 w-4 text-muted-foreground" />
+                ) : (
+                  <ArrowUpDown className="h-4 w-4 opacity-30" />
+                )}
+              </DropdownMenuItem>
+            );
+          })
+        )}
+        {sorting.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={(event) => {
+                event.preventDefault();
+                table.resetSorting();
+              }}
+              className="text-muted-foreground"
+            >
+              Clear sorting
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function DataTableViewDropdown<TData>({ table }: { table: TanstackTable<TData> }) {
+  const hideableColumns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+  const hiddenCount = hideableColumns.filter((column) => !column.getIsVisible()).length;
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <DataTableIconButton tooltip="View columns" badge={hiddenCount || undefined}>
+          <SlidersHorizontal className="h-4 w-4" />
+        </DataTableIconButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="z-[100] w-52">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {hideableColumns.length === 0 ? (
+          <p className="px-2 py-3 text-sm text-muted-foreground">No hideable columns.</p>
+        ) : (
+          hideableColumns.map((column) => (
+            <DropdownMenuCheckboxItem
+              key={column.id}
+              checked={column.getIsVisible()}
+              onCheckedChange={(checked) => column.toggleVisibility(checked === true)}
+              onSelect={(event) => event.preventDefault()}
+            >
+              {getColumnLabel(column)}
+            </DropdownMenuCheckboxItem>
+          ))
+        )}
+        {hiddenCount > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={(event) => {
+                event.preventDefault();
+                table.resetColumnVisibility();
+              }}
+            >
+              Show all columns
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+type DataTableToolbarProps<TData> = {
+  table: TanstackTable<TData>;
+  searchPlaceholder: string;
+  filterableColumns?: DataTableFilterableColumn[];
+  onRefresh?: () => void | Promise<void>;
+  isRefreshing?: boolean;
+  onExport?: () => void;
+  enableSearch?: boolean;
+  enableColumnVisibility?: boolean;
+  searchAction?: DataTableSearchAction;
+  searchActions?: React.ReactNode;
+  toolbarActions?: React.ReactNode;
+};
+
+function DataTableToolbar<TData>({
+  table,
+  searchPlaceholder,
+  filterableColumns,
+  onRefresh,
+  isRefreshing,
+  onExport,
+  enableSearch = true,
+  enableColumnVisibility = true,
+  searchAction,
+  searchActions,
+  toolbarActions,
+}: DataTableToolbarProps<TData>) {
+  const searchRowActions = (
+    <>
+      {searchAction ? <DataTableSearchActionButton action={searchAction} /> : null}
+      {searchActions}
+    </>
+  );
+  const hasSearchRowActions = Boolean(searchAction || searchActions);
+
+  return (
+    <div className="flex flex-col gap-2 border-b bg-muted/20 px-3 py-2">
+      <div className="flex flex-wrap items-center gap-2">
+        {enableSearch ? <DataTableSearch table={table} searchPlaceholder={searchPlaceholder} /> : null}
+        <div className="ml-auto flex shrink-0 flex-wrap items-center gap-1">
+          <DataTableFiltersPopover table={table} filterableColumns={filterableColumns} />
+          <DataTableSortDropdown table={table} />
+          {onExport ? (
+            <DataTableIconButton tooltip="Export" onClick={onExport}>
+              <Download className="h-4 w-4" />
+            </DataTableIconButton>
+          ) : null}
+          {enableColumnVisibility ? <DataTableViewDropdown table={table} /> : null}
+          {toolbarActions}
+          {onRefresh ? (
+            <DataTableIconButton
+              tooltip="Refresh"
+              onClick={() => onRefresh()}
+              disabled={isRefreshing}
+            >
+              <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
+            </DataTableIconButton>
+          ) : null}
+          {hasSearchRowActions ? searchRowActions : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DataTableBulkBar<TData>({
+  table,
+  bulkActions,
+}: {
+  table: TanstackTable<TData>;
+  bulkActions?: React.ReactNode;
+}) {
+  const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+
+  if (selectedCount === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-dashed bg-muted/30 px-3 py-2">
+      <p className="text-sm text-muted-foreground">
+        {selectedCount} row{selectedCount === 1 ? "" : "s"} selected
+      </p>
+      <div className="flex flex-wrap items-center gap-2">
+        {bulkActions}
+        <Button variant="outline" size="sm" className="h-8" onClick={() => table.resetRowSelection()}>
+          Clear selection
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function DataTablePagination<TData>({
+  table,
+  pageSizeOptions,
+  enableRowSelection,
+}: {
+  table: TanstackTable<TData>;
+  pageSizeOptions: number[];
+  enableRowSelection: boolean;
+}) {
+  const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+  const totalCount = table.getFilteredRowModel().rows.length;
+
+  return (
+    <div className="flex flex-col gap-4 px-1 sm:flex-row sm:items-center sm:justify-between">
+      <p className="text-sm text-muted-foreground">
+        {enableRowSelection ? (
+          <>
+            {selectedCount} of {totalCount} row(s) selected.
+          </>
+        ) : (
+          <>{totalCount} row(s) total.</>
+        )}
+      </p>
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-6">
+        <div className="flex items-center gap-2">
+          <span className="whitespace-nowrap text-sm text-muted-foreground">Rows per page</span>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => table.setPageSize(Number(value))}
+          >
+            <SelectTrigger className="h-8 w-[4.5rem]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center justify-between gap-4 sm:justify-end">
+          <span className="whitespace-nowrap text-sm font-medium">
+            Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}
+          </span>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+              aria-label="First page"
+            >
+              <ChevronsLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              aria-label="Previous page"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              aria-label="Next page"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+              aria-label="Last page"
+            >
+              <ChevronsRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function globalUserSearchFilter<TData>(row: Row<TData>, _columnId: string, filterValue: string) {
+  const query = filterValue.trim().toLowerCase();
+  if (!query) {
+    return true;
+  }
+
+  const record = row.original as Record<string, unknown>;
+  const name = String(record.name ?? "").toLowerCase();
+  const email = String(record.email ?? "").toLowerCase();
+  const role = String(record.role ?? "").toLowerCase();
+
+  return name.includes(query) || email.includes(query) || role.includes(query);
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  pageSize = 10,
+  pageSizeOptions = [5, 10, 20, 30, 50],
+  searchPlaceholder = "Search rows...",
+  filterableColumns,
+  onRefresh,
+  isRefreshing = false,
+  onExport,
+  enableSearch = true,
+  enableRowSelection = false,
+  enableColumnVisibility = true,
+  searchAction,
+  searchActions,
+  toolbarActions,
+  bulkActions,
+  onSelectionChange,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [globalFilter, setGlobalFilter] = React.useState("");
+
+  const tableColumns = React.useMemo(
+    () => (enableRowSelection ? [dataTableSelectColumn<TData>(), ...columns] : columns),
+    [columns, enableRowSelection],
+  );
+
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      globalFilter,
+    },
+    enableRowSelection,
+    enableSorting: true,
+    enableColumnFilters: true,
+    enableHiding: true,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: globalUserSearchFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    initialState: {
+      pagination: { pageSize },
+    },
+  });
+
+  React.useEffect(() => {
+    if (!onSelectionChange) {
+      return;
+    }
+    const selected = table.getFilteredSelectedRowModel().rows.map((row) => row.original);
+    onSelectionChange(selected);
+  }, [rowSelection, data, onSelectionChange, table]);
+
+  return (
+    <div className="space-y-4">
+      <div className="overflow-hidden rounded-lg border bg-card shadow-sm">
+        <DataTableToolbar
+          table={table}
+          searchPlaceholder={searchPlaceholder}
+          filterableColumns={filterableColumns}
+          onRefresh={onRefresh}
+          isRefreshing={isRefreshing}
+          onExport={onExport}
+          enableSearch={enableSearch}
+          enableColumnVisibility={enableColumnVisibility}
+          searchAction={searchAction}
+          searchActions={searchActions}
+          toolbarActions={toolbarActions}
+        />
+
+        {enableRowSelection ? (
+          <div className="border-b px-3 py-2">
+            <DataTableBulkBar table={table} bulkActions={bulkActions} />
+          </div>
+        ) : null}
+
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="border-b bg-muted/30 hover:bg-muted/30">
+                {headerGroup.headers.map((header) => (
+                  <TableHead
+                    key={header.id}
+                    className={cn("h-11", header.column.id === "actions" && "text-center")}
+                  >
+                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={cn("h-12", cell.column.id === "actions" && "text-center")}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={table.getVisibleLeafColumns().length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <DataTablePagination
+        table={table}
+        pageSizeOptions={pageSizeOptions}
+        enableRowSelection={enableRowSelection}
+      />
+    </div>
+  );
+}