@simpleapps-com/augur-web 2.2.24 → 2.2.26

package/dist/data-table.d.ts

@@ -1,58 +1,55 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { SortingState, RowSelectionState } from '@tanstack/react-table';
+export { RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';
 
 interface ColumnDef<T> {
-    /** Property key on the data object. */
     key: keyof T & string;
-    /** Column header label. */
     header: string;
-    /** Enable sorting on this column. */
     sortable?: boolean;
-    /** Custom cell renderer. Receives the row data object. */
     render?: (row: T) => React.ReactNode;
-    /** Text alignment. */
     align?: "left" | "center" | "right";
+    hideable?: boolean;
+}
+interface DataTablePagination {
+    page: number;
+    totalPages: number;
+    getHref: (page: number) => string;
+    onPageChange?: (page: number) => void;
+    /** Current page size. Required when pageSizeOptions is set. */
+    pageSize?: number;
+    /** Available page size options. Renders a dropdown when provided. */
+    pageSizeOptions?: number[];
+    /** Called when the user selects a different page size. */
+    onPageSizeChange?: (size: number) => void;
 }
 interface DataTableProps<T> {
-    /** Column definitions describing each table column. */
     columns: ColumnDef<T>[];
-    /** Data rows to display. */
     data: T[];
-    /** Show a search input above the table. */
     searchable?: boolean;
-    /** Placeholder text for the search input. */
     searchPlaceholder?: string;
-    /** Callback when a row is clicked. Receives the row data. */
     onRowClick?: (row: T) => void;
-    /** Show a loading spinner instead of data. */
     loading?: boolean;
-    /** Message shown when data is empty. */
     emptyMessage?: string;
-    /** Additional toolbar content rendered between search and table. */
     toolbar?: React.ReactNode;
-    /** Additional class name for the root container. */
     className?: string;
-    /** Row key extractor. Defaults to the row index. */
     getRowId?: (row: T) => string;
+    pagination?: DataTablePagination;
+    globalFilter?: string;
+    onGlobalFilterChange?: (value: string) => void;
+    sortingState?: SortingState;
+    onSortingChange?: (state: SortingState) => void;
+    selectable?: boolean;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: (state: RowSelectionState) => void;
+    bulkActions?: (selectedRows: T[]) => React.ReactNode;
+    columnToggle?: boolean;
+    exportCsv?: boolean;
+    csvFilename?: string;
 }
-/**
- * Data-driven table with sorting and search. Wraps TanStack Table with
- * the augur-web Table primitives.
- *
- * @example
- * ```tsx
- * const columns: ColumnDef<Brand>[] = [
- *   { key: "brandsUid", header: "UID", sortable: true },
- *   { key: "brandsName", header: "Name", sortable: true },
- *   { key: "brandsDesc", header: "Description" },
- * ];
- *
- * <DataTable columns={columns} data={brands} searchable onRowClick={selectBrand} />
- * ```
- */
-declare function DataTable<T>({ columns, data, searchable, searchPlaceholder, onRowClick, loading, emptyMessage, toolbar, className, getRowId, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T>({ columns, data, searchable, searchPlaceholder, onRowClick, loading, emptyMessage, toolbar, className, getRowId, pagination, globalFilter: externalGlobalFilter, onGlobalFilterChange, sortingState, onSortingChange, selectable, rowSelection, onRowSelectionChange, bulkActions, columnToggle, exportCsv, csvFilename, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
 
-export { type ColumnDef, DataTable, type DataTableProps };
+export { type ColumnDef, DataTable, type DataTablePagination, type DataTableProps };

package/dist/data-table.js

@@ -8,12 +8,36 @@ import {
   TableHeader,
   TableRow
 } from "./chunk-XIKSI7NY.js";
+import {
+  ListPagination
+} from "./chunk-3VN3FX2Q.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-RCUKSVMF.js";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./chunk-MOC5N2N4.js";
 import {
   Input
 } from "./chunk-HXQF6XTL.js";
 import {
   Spinner
 } from "./chunk-UMNTUD2P.js";
+import {
+  Button
+} from "./chunk-QICSGVX3.js";
+import {
+  Checkbox
+} from "./chunk-3UFEQSTN.js";
 
 // src/data-table.tsx
 import * as React from "react";
@@ -25,23 +49,283 @@ import {
   useReactTable
 } from "@tanstack/react-table";
 import { cn } from "@simpleapps-com/augur-utils/web";
-import { LuArrowDown, LuArrowUp, LuArrowUpDown } from "react-icons/lu";
-import { jsx, jsxs } from "react/jsx-runtime";
-function buildTanstackColumns(columns) {
-  return columns.map((col) => ({
-    id: col.key,
-    accessorKey: col.key,
-    header: col.header,
-    enableSorting: col.sortable ?? false,
-    cell: col.render ? (info) => col.render(info.row.original) : (info) => String(info.getValue() ?? ""),
-    meta: { align: col.align }
-  }));
-}
-var alignClass = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right"
-};
+import { LuArrowDown, LuArrowUp, LuArrowUpDown, LuDownload, LuSettings2 } from "react-icons/lu";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ALIGN_CLASS = { left: "text-left", center: "text-center", right: "text-right" };
+function getAlignCn(meta) {
+  const align = meta?.align ?? "left";
+  return ALIGN_CLASS[align];
+}
+function buildTanstackColumns(columns, selectable) {
+  const cols = [];
+  if (selectable) {
+    cols.push({
+      id: "_select",
+      header: ({ table }) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: table.getIsAllPageRowsSelected(),
+          onCheckedChange: (v) => table.toggleAllPageRowsSelected(!!v),
+          "aria-label": "Select all"
+        }
+      ),
+      cell: ({ row }) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: row.getIsSelected(),
+          onCheckedChange: (v) => row.toggleSelected(!!v),
+          "aria-label": "Select row",
+          onClick: (e) => e.stopPropagation()
+        }
+      ),
+      enableSorting: false,
+      enableHiding: false,
+      meta: { align: "center" }
+    });
+  }
+  for (const col of columns) {
+    cols.push({
+      id: col.key,
+      accessorKey: col.key,
+      header: col.header,
+      enableSorting: col.sortable ?? false,
+      enableHiding: col.hideable !== false,
+      cell: col.render ? (info) => col.render(info.row.original) : (info) => String(info.getValue() ?? ""),
+      meta: { align: col.align }
+    });
+  }
+  return cols;
+}
+function exportToCsv(columns, data, filename) {
+  const headers = columns.map((c) => c.header);
+  const rows = data.map(
+    (row) => columns.map((col) => {
+      const str = String(row[col.key] ?? "");
+      return str.includes(",") || str.includes('"') || str.includes("\n") ? `"${str.replace(/"/g, '""')}"` : str;
+    })
+  );
+  const csv = [headers.join(","), ...rows.map((r) => r.join(","))].join("\n");
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `${filename}.csv`;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+function SortIndicator({ direction }) {
+  if (direction === "asc") return /* @__PURE__ */ jsx(LuArrowUp, { className: "h-4 w-4" });
+  if (direction === "desc") return /* @__PURE__ */ jsx(LuArrowDown, { className: "h-4 w-4" });
+  return /* @__PURE__ */ jsx(LuArrowUpDown, { className: "text-muted-foreground/50 h-4 w-4" });
+}
+function ColumnToggle({ table }) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+      /* @__PURE__ */ jsx(LuSettings2, { className: "mr-2 h-4 w-4" }),
+      "Columns"
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Toggle columns" }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      table.getAllColumns().filter((col) => col.getCanHide()).map((col) => /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: col.getIsVisible(),
+          onCheckedChange: (v) => col.toggleVisibility(!!v),
+          children: col.columnDef.header
+        },
+        col.id
+      ))
+    ] })
+  ] });
+}
+function HeaderCell({ header }) {
+  return /* @__PURE__ */ jsx(
+    TableHead,
+    {
+      className: cn(
+        getAlignCn(header.column.columnDef.meta),
+        header.column.getCanSort() && "cursor-pointer select-none"
+      ),
+      onClick: header.column.getToggleSortingHandler(),
+      children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        flexRender(header.column.columnDef.header, header.getContext()),
+        header.column.getCanSort() && /* @__PURE__ */ jsx(SortIndicator, { direction: header.column.getIsSorted() })
+      ] })
+    }
+  );
+}
+function DataCell({ cell }) {
+  return /* @__PURE__ */ jsx(TableCell, { className: getAlignCn(cell.column.columnDef.meta), children: flexRender(cell.column.columnDef.cell, cell.getContext()) });
+}
+function DataRow({ row, onRowClick }) {
+  return /* @__PURE__ */ jsx(
+    TableRow,
+    {
+      "data-state": row.getIsSelected() ? "selected" : void 0,
+      className: cn(onRowClick && "cursor-pointer"),
+      onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+      children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(DataCell, { cell }, cell.id))
+    }
+  );
+}
+function ExportButton({
+  columns,
+  data,
+  csvFilename
+}) {
+  return /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: () => exportToCsv(columns, data, csvFilename), children: [
+    /* @__PURE__ */ jsx(LuDownload, { className: "mr-2 h-4 w-4" }),
+    "Export"
+  ] });
+}
+function BulkActionsBar({
+  selectedRows,
+  bulkActions
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [
+      selectedRows.length,
+      " selected"
+    ] }),
+    bulkActions(selectedRows)
+  ] });
+}
+function Toolbar({
+  searchable,
+  searchPlaceholder,
+  globalFilter,
+  onGlobalFilterChange,
+  selectedRows,
+  bulkActions,
+  toolbar,
+  exportCsv,
+  columns,
+  data,
+  csvFilename,
+  columnToggle,
+  table
+}) {
+  const hasSelection = selectedRows.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+    searchable && /* @__PURE__ */ jsx(
+      Input,
+      {
+        placeholder: searchPlaceholder,
+        value: globalFilter,
+        onChange: (e) => onGlobalFilterChange(e.target.value),
+        className: "max-w-sm"
+      }
+    ),
+    hasSelection && bulkActions && /* @__PURE__ */ jsx(BulkActionsBar, { selectedRows, bulkActions }),
+    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+      toolbar,
+      exportCsv && /* @__PURE__ */ jsx(ExportButton, { columns, data, csvFilename }),
+      columnToggle && /* @__PURE__ */ jsx(ColumnToggle, { table })
+    ] })
+  ] });
+}
+function TableBodyContent({
+  loading,
+  colSpan,
+  emptyMessage,
+  rows,
+  onRowClick
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "h-24 text-center", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", className: "mx-auto" }) }) });
+  }
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "h-24 text-center", children: emptyMessage }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: rows.map((row) => /* @__PURE__ */ jsx(DataRow, { row, onRowClick }, row.id)) });
+}
+function PageSizeSelector({
+  pageSize,
+  options,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Rows per page" }),
+    /* @__PURE__ */ jsxs(Select, { value: String(pageSize), onValueChange: (v) => onChange(Number(v)), children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: options.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
+    ] })
+  ] });
+}
+function PaginationFooter({ pagination }) {
+  if (!pagination) return null;
+  const showPageSize = pagination.pageSizeOptions && pagination.pageSize !== void 0 && pagination.onPageSizeChange;
+  const showPages = pagination.totalPages > 1;
+  if (!showPageSize && !showPages) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    showPageSize ? /* @__PURE__ */ jsx(
+      PageSizeSelector,
+      {
+        pageSize: pagination.pageSize,
+        options: pagination.pageSizeOptions,
+        onChange: pagination.onPageSizeChange
+      }
+    ) : /* @__PURE__ */ jsx("div", {}),
+    showPages && /* @__PURE__ */ jsx(
+      ListPagination,
+      {
+        page: pagination.page,
+        totalPages: pagination.totalPages,
+        getHref: pagination.getHref,
+        onPageChange: pagination.onPageChange
+      }
+    )
+  ] });
+}
+function useDataTable(opts) {
+  const isManualFiltering = opts.externalGlobalFilter !== void 0;
+  const isManualSorting = opts.externalSorting !== void 0;
+  const [internalSorting, setInternalSorting] = React.useState([]);
+  const [internalGlobalFilter, setInternalGlobalFilter] = React.useState("");
+  const [internalRowSelection, setInternalRowSelection] = React.useState({});
+  const [columnVisibility, setColumnVisibility] = React.useState({});
+  const sorting = opts.externalSorting ?? internalSorting;
+  const globalFilter = opts.externalGlobalFilter ?? internalGlobalFilter;
+  const rowSelectionState = opts.externalRowSelection ?? internalRowSelection;
+  const handleSortingChange = opts.onSortingChange ? (updater) => {
+    opts.onSortingChange(updater(sorting));
+  } : setInternalSorting;
+  const handleGlobalFilterChange = opts.onGlobalFilterChange ?? setInternalGlobalFilter;
+  const handleRowSelectionChange = opts.onRowSelectionChange ? (updater) => {
+    opts.onRowSelectionChange(
+      updater(rowSelectionState)
+    );
+  } : setInternalRowSelection;
+  const tanstackColumns = React.useMemo(
+    () => buildTanstackColumns(opts.columns, opts.selectable),
+    [opts.columns, opts.selectable]
+  );
+  const table = useReactTable({
+    data: opts.data,
+    columns: tanstackColumns,
+    state: {
+      sorting,
+      globalFilter: isManualFiltering ? void 0 : globalFilter,
+      rowSelection: rowSelectionState,
+      columnVisibility
+    },
+    onSortingChange: handleSortingChange,
+    onGlobalFilterChange: isManualFiltering ? void 0 : setInternalGlobalFilter,
+    onRowSelectionChange: handleRowSelectionChange,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: isManualSorting ? void 0 : getSortedRowModel(),
+    getFilteredRowModel: isManualFiltering ? void 0 : getFilteredRowModel(),
+    manualSorting: isManualSorting,
+    manualFiltering: isManualFiltering,
+    manualPagination: opts.pagination !== void 0,
+    enableRowSelection: opts.selectable,
+    getRowId: opts.getRowId ? (row) => opts.getRowId(row) : void 0
+  });
+  const selectedRows = opts.selectable ? table.getSelectedRowModel().rows.map((r) => r.original) : [];
+  return { table, tanstackColumns, globalFilter, handleGlobalFilterChange, selectedRows };
+}
 function DataTable({
   columns,
   data,
@@ -52,82 +336,70 @@ function DataTable({
   emptyMessage = "No results.",
   toolbar,
   className,
-  getRowId
+  getRowId,
+  pagination,
+  globalFilter: externalGlobalFilter,
+  onGlobalFilterChange,
+  sortingState,
+  onSortingChange,
+  selectable = false,
+  rowSelection,
+  onRowSelectionChange,
+  bulkActions,
+  columnToggle = false,
+  exportCsv = false,
+  csvFilename = "export"
 }) {
-  const [sorting, setSorting] = React.useState([]);
-  const [globalFilter, setGlobalFilter] = React.useState("");
-  const tanstackColumns = React.useMemo(() => buildTanstackColumns(columns), [columns]);
-  const table = useReactTable({
+  const { table, tanstackColumns, globalFilter, handleGlobalFilterChange, selectedRows } = useDataTable({
+    columns,
     data,
-    columns: tanstackColumns,
-    state: { sorting, globalFilter },
-    onSortingChange: setSorting,
-    onGlobalFilterChange: setGlobalFilter,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getRowId: getRowId ? (row) => getRowId(row) : void 0
+    selectable,
+    getRowId,
+    pagination,
+    externalGlobalFilter,
+    onGlobalFilterChange,
+    externalSorting: sortingState,
+    onSortingChange,
+    externalRowSelection: rowSelection,
+    onRowSelectionChange
   });
+  const showToolbar = searchable || toolbar || columnToggle || exportCsv || selectedRows.length > 0;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
-    (searchable || toolbar) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      searchable && /* @__PURE__ */ jsx(
-        Input,
+    showToolbar && /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        searchable,
+        searchPlaceholder,
+        globalFilter,
+        onGlobalFilterChange: handleGlobalFilterChange,
+        selectedRows,
+        bulkActions,
+        toolbar,
+        exportCsv,
+        columns,
+        data,
+        csvFilename,
+        columnToggle,
+        table
+      }
+    ),
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { className: "bg-background sticky top-0 z-10", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx(TableRow, { children: hg.headers.map((h) => /* @__PURE__ */ jsx(HeaderCell, { header: h }, h.id)) }, hg.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(
+        TableBodyContent,
         {
-          placeholder: searchPlaceholder,
-          value: globalFilter,
-          onChange: (e) => setGlobalFilter(e.target.value),
-          className: "max-w-sm"
+          loading,
+          colSpan: tanstackColumns.length,
+          emptyMessage,
+          rows: table.getRowModel().rows,
+          onRowClick
         }
-      ),
-      toolbar
+      ) })
     ] }),
-    /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
-        const align = header.column.columnDef.meta?.align ?? "left";
-        return /* @__PURE__ */ jsx(
-          TableHead,
-          {
-            className: cn(
-              alignClass[align],
-              header.column.getCanSort() && "cursor-pointer select-none"
-            ),
-            onClick: header.column.getToggleSortingHandler(),
-            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-              flexRender(header.column.columnDef.header, header.getContext()),
-              header.column.getCanSort() && /* @__PURE__ */ jsx(SortIndicator, { direction: header.column.getIsSorted() })
-            ] })
-          },
-          header.id
-        );
-      }) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", className: "mx-auto" }) }) }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: emptyMessage }) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
-        TableRow,
-        {
-          className: cn(onRowClick && "cursor-pointer"),
-          onClick: onRowClick ? () => onRowClick(row.original) : void 0,
-          children: row.getVisibleCells().map((cell) => {
-            const align = cell.column.columnDef.meta?.align ?? "left";
-            return /* @__PURE__ */ jsx(
-              TableCell,
-              {
-                className: alignClass[align],
-                children: flexRender(cell.column.columnDef.cell, cell.getContext())
-              },
-              cell.id
-            );
-          })
-        },
-        row.id
-      )) })
-    ] })
+    /* @__PURE__ */ jsx(PaginationFooter, { pagination })
   ] });
 }
 DataTable.displayName = "DataTable";
-function SortIndicator({ direction }) {
-  if (direction === "asc") return /* @__PURE__ */ jsx(LuArrowUp, { className: "h-4 w-4" });
-  if (direction === "desc") return /* @__PURE__ */ jsx(LuArrowDown, { className: "h-4 w-4" });
-  return /* @__PURE__ */ jsx(LuArrowUpDown, { className: "text-muted-foreground/50 h-4 w-4" });
-}
 export {
   DataTable
 };

package/dist/data-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/data-table.tsx"],"sourcesContent":["/** Sortable, searchable data table built on TanStack Table. */\n\"use client\";\n\nimport * as React from \"react\";\nimport {\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  getFilteredRowModel,\n  useReactTable,\n  type ColumnDef as TanstackColumnDef,\n  type SortingState,\n} from \"@tanstack/react-table\";\nimport { cn } from \"@simpleapps-com/augur-utils/web\";\nimport { LuArrowDown, LuArrowUp, LuArrowUpDown } from \"react-icons/lu\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"./table\";\nimport { Input } from \"./input\";\nimport { Spinner } from \"./spinner\";\n\nexport interface ColumnDef<T> {\n  /** Property key on the data object. */\n  key: keyof T & string;\n  /** Column header label. */\n  header: string;\n  /** Enable sorting on this column. */\n  sortable?: boolean;\n  /** Custom cell renderer. Receives the row data object. */\n  render?: (row: T) => React.ReactNode;\n  /** Text alignment. */\n  align?: \"left\" | \"center\" | \"right\";\n}\n\nexport interface DataTableProps<T> {\n  /** Column definitions describing each table column. */\n  columns: ColumnDef<T>[];\n  /** Data rows to display. */\n  data: T[];\n  /** Show a search input above the table. */\n  searchable?: boolean;\n  /** Placeholder text for the search input. */\n  searchPlaceholder?: string;\n  /** Callback when a row is clicked. Receives the row data. */\n  onRowClick?: (row: T) => void;\n  /** Show a loading spinner instead of data. */\n  loading?: boolean;\n  /** Message shown when data is empty. */\n  emptyMessage?: string;\n  /** Additional toolbar content rendered between search and table. */\n  toolbar?: React.ReactNode;\n  /** Additional class name for the root container. */\n  className?: string;\n  /** Row key extractor. Defaults to the row index. */\n  getRowId?: (row: T) => string;\n}\n\nfunction buildTanstackColumns<T>(columns: ColumnDef<T>[]): TanstackColumnDef<T, unknown>[] {\n  return columns.map((col) => ({\n    id: col.key,\n    accessorKey: col.key,\n    header: col.header,\n    enableSorting: col.sortable ?? false,\n    cell: col.render\n      ? (info) => col.render!(info.row.original)\n      : (info) => String(info.getValue() ?? \"\"),\n    meta: { align: col.align },\n  }));\n}\n\nconst alignClass = {\n  left: \"text-left\",\n  center: \"text-center\",\n  right: \"text-right\",\n} as const;\n\n/**\n * Data-driven table with sorting and search. Wraps TanStack Table with\n * the augur-web Table primitives.\n *\n * @example\n * ```tsx\n * const columns: ColumnDef<Brand>[] = [\n *   { key: \"brandsUid\", header: \"UID\", sortable: true },\n *   { key: \"brandsName\", header: \"Name\", sortable: true },\n *   { key: \"brandsDesc\", header: \"Description\" },\n * ];\n *\n * <DataTable columns={columns} data={brands} searchable onRowClick={selectBrand} />\n * ```\n */\nfunction DataTable<T>({\n  columns,\n  data,\n  searchable = false,\n  searchPlaceholder = \"Search...\",\n  onRowClick,\n  loading = false,\n  emptyMessage = \"No results.\",\n  toolbar,\n  className,\n  getRowId,\n}: DataTableProps<T>) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [globalFilter, setGlobalFilter] = React.useState(\"\");\n\n  const tanstackColumns = React.useMemo(() => buildTanstackColumns(columns), [columns]);\n\n  const table = useReactTable({\n    data,\n    columns: tanstackColumns,\n    state: { sorting, globalFilter },\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getRowId: getRowId ? (row) => getRowId(row) : undefined,\n  });\n\n  return (\n    <div className={cn(\"space-y-4\", className)}>\n      {(searchable || toolbar) && (\n        <div className=\"flex items-center gap-4\">\n          {searchable && (\n            <Input\n              placeholder={searchPlaceholder}\n              value={globalFilter}\n              onChange={(e) => setGlobalFilter(e.target.value)}\n              className=\"max-w-sm\"\n            />\n          )}\n          {toolbar}\n        </div>\n      )}\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const align =\n                  (header.column.columnDef.meta as { align?: string } | undefined)?.align ?? \"left\";\n                return (\n                  <TableHead\n                    key={header.id}\n                    className={cn(\n                      alignClass[align as keyof typeof alignClass],\n                      header.column.getCanSort() && \"cursor-pointer select-none\",\n                    )}\n                    onClick={header.column.getToggleSortingHandler()}\n                  >\n                    <span className=\"inline-flex items-center gap-1\">\n                      {flexRender(header.column.columnDef.header, header.getContext())}\n                      {header.column.getCanSort() && (\n                        <SortIndicator direction={header.column.getIsSorted()} />\n                      )}\n                    </span>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {loading ? (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n                <Spinner size=\"lg\" className=\"mx-auto\" />\n              </TableCell>\n            </TableRow>\n          ) : table.getRowModel().rows.length === 0 ? (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n                {emptyMessage}\n              </TableCell>\n            </TableRow>\n          ) : (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                key={row.id}\n                className={cn(onRowClick && \"cursor-pointer\")}\n                onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n              >\n                {row.getVisibleCells().map((cell) => {\n                  const align =\n                    (cell.column.columnDef.meta as { align?: string } | undefined)?.align ?? \"left\";\n                  return (\n                    <TableCell\n                      key={cell.id}\n                      className={alignClass[align as keyof typeof alignClass]}\n                    >\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          )}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\nDataTable.displayName = \"DataTable\";\n\nfunction SortIndicator({ direction }: { direction: false | \"asc\" | \"desc\" }) {\n  if (direction === \"asc\") return <LuArrowUp className=\"h-4 w-4\" />;\n  if (direction === \"desc\") return <LuArrowDown className=\"h-4 w-4\" />;\n  return <LuArrowUpDown className=\"text-muted-foreground/50 h-4 w-4\" />;\n}\n\nexport { DataTable };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/data-table.tsx"],"sourcesContent":["/** Feature-complete admin data table built on TanStack Table. */\n\"use client\";\n\nimport * as React from \"react\";\nimport {\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  getFilteredRowModel,\n  useReactTable,\n  type ColumnDef as TanstackColumnDef,\n  type SortingState,\n  type RowSelectionState,\n  type VisibilityState,\n  type Table as TanstackTable,\n  type Header,\n  type Row,\n  type Cell,\n} from \"@tanstack/react-table\";\nimport { cn } from \"@simpleapps-com/augur-utils/web\";\nimport { LuArrowDown, LuArrowUp, LuArrowUpDown, LuDownload, LuSettings2 } from \"react-icons/lu\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"./table\";\nimport { Input } from \"./input\";\nimport { Spinner } from \"./spinner\";\nimport { Checkbox } from \"./checkbox\";\nimport { Button } from \"./button\";\nimport { ListPagination } from \"./pagination\";\nimport { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from \"./select\";\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuCheckboxItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n} from \"./dropdown-menu\";\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport interface ColumnDef<T> {\n  key: keyof T & string;\n  header: string;\n  sortable?: boolean;\n  render?: (row: T) => React.ReactNode;\n  align?: \"left\" | \"center\" | \"right\";\n  hideable?: boolean;\n}\n\nexport interface DataTablePagination {\n  page: number;\n  totalPages: number;\n  getHref: (page: number) => string;\n  onPageChange?: (page: number) => void;\n  /** Current page size. Required when pageSizeOptions is set. */\n  pageSize?: number;\n  /** Available page size options. Renders a dropdown when provided. */\n  pageSizeOptions?: number[];\n  /** Called when the user selects a different page size. */\n  onPageSizeChange?: (size: number) => void;\n}\n\nexport interface DataTableProps<T> {\n  columns: ColumnDef<T>[];\n  data: T[];\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  onRowClick?: (row: T) => void;\n  loading?: boolean;\n  emptyMessage?: string;\n  toolbar?: React.ReactNode;\n  className?: string;\n  getRowId?: (row: T) => string;\n  pagination?: DataTablePagination;\n  globalFilter?: string;\n  onGlobalFilterChange?: (value: string) => void;\n  sortingState?: SortingState;\n  onSortingChange?: (state: SortingState) => void;\n  selectable?: boolean;\n  rowSelection?: RowSelectionState;\n  onRowSelectionChange?: (state: RowSelectionState) => void;\n  bulkActions?: (selectedRows: T[]) => React.ReactNode;\n  columnToggle?: boolean;\n  exportCsv?: boolean;\n  csvFilename?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Internal helpers\n// ---------------------------------------------------------------------------\n\nconst ALIGN_CLASS = { left: \"text-left\", center: \"text-center\", right: \"text-right\" } as const;\n\nfunction getAlignCn(meta: unknown): string {\n  const align = (meta as { align?: string } | undefined)?.align ?? \"left\";\n  return ALIGN_CLASS[align as keyof typeof ALIGN_CLASS];\n}\n\nfunction buildTanstackColumns<T>(\n  columns: ColumnDef<T>[],\n  selectable: boolean,\n): TanstackColumnDef<T, unknown>[] {\n  const cols: TanstackColumnDef<T, unknown>[] = [];\n  if (selectable) {\n    cols.push({\n      id: \"_select\",\n      header: ({ table }) => (\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}\n          aria-label=\"Select all\"\n        />\n      ),\n      cell: ({ row }) => (\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(v) => row.toggleSelected(!!v)}\n          aria-label=\"Select row\"\n          onClick={(e) => e.stopPropagation()}\n        />\n      ),\n      enableSorting: false,\n      enableHiding: false,\n      meta: { align: \"center\" },\n    });\n  }\n  for (const col of columns) {\n    cols.push({\n      id: col.key,\n      accessorKey: col.key,\n      header: col.header,\n      enableSorting: col.sortable ?? false,\n      enableHiding: col.hideable !== false,\n      cell: col.render\n        ? (info) => col.render!(info.row.original)\n        : (info) => String(info.getValue() ?? \"\"),\n      meta: { align: col.align },\n    });\n  }\n  return cols;\n}\n\nfunction exportToCsv<T>(columns: ColumnDef<T>[], data: T[], filename: string) {\n  const headers = columns.map((c) => c.header);\n  const rows = data.map((row) =>\n    columns.map((col) => {\n      const str = String(row[col.key] ?? \"\");\n      return str.includes(\",\") || str.includes('\"') || str.includes(\"\\n\")\n        ? `\"${str.replace(/\"/g, '\"\"')}\"`\n        : str;\n    }),\n  );\n  const csv = [headers.join(\",\"), ...rows.map((r) => r.join(\",\"))].join(\"\\n\");\n  const blob = new Blob([csv], { type: \"text/csv;charset=utf-8;\" });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.download = `${filename}.csv`;\n  link.click();\n  URL.revokeObjectURL(url);\n}\n\n// ---------------------------------------------------------------------------\n// Sub-components\n// ---------------------------------------------------------------------------\n\nfunction SortIndicator({ direction }: { direction: false | \"asc\" | \"desc\" }) {\n  if (direction === \"asc\") return <LuArrowUp className=\"h-4 w-4\" />;\n  if (direction === \"desc\") return <LuArrowDown className=\"h-4 w-4\" />;\n  return <LuArrowUpDown className=\"text-muted-foreground/50 h-4 w-4\" />;\n}\n\nfunction ColumnToggle<T>({ table }: { table: TanstackTable<T> }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"sm\">\n          <LuSettings2 className=\"mr-2 h-4 w-4\" />\n          Columns\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {table\n          .getAllColumns()\n          .filter((col) => col.getCanHide())\n          .map((col) => (\n            <DropdownMenuCheckboxItem\n              key={col.id}\n              checked={col.getIsVisible()}\n              onCheckedChange={(v) => col.toggleVisibility(!!v)}\n            >\n              {col.columnDef.header as string}\n            </DropdownMenuCheckboxItem>\n          ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nfunction HeaderCell<T>({ header }: { header: Header<T, unknown> }) {\n  return (\n    <TableHead\n      className={cn(\n        getAlignCn(header.column.columnDef.meta),\n        header.column.getCanSort() && \"cursor-pointer select-none\",\n      )}\n      onClick={header.column.getToggleSortingHandler()}\n    >\n      <span className=\"inline-flex items-center gap-1\">\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {header.column.getCanSort() && <SortIndicator direction={header.column.getIsSorted()} />}\n      </span>\n    </TableHead>\n  );\n}\n\nfunction DataCell<T>({ cell }: { cell: Cell<T, unknown> }) {\n  return (\n    <TableCell className={getAlignCn(cell.column.columnDef.meta)}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </TableCell>\n  );\n}\n\nfunction DataRow<T>({ row, onRowClick }: { row: Row<T>; onRowClick?: (r: T) => void }) {\n  return (\n    <TableRow\n      data-state={row.getIsSelected() ? \"selected\" : undefined}\n      className={cn(onRowClick && \"cursor-pointer\")}\n      onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <DataCell key={cell.id} cell={cell} />\n      ))}\n    </TableRow>\n  );\n}\n\nfunction ExportButton<T>({\n  columns,\n  data,\n  csvFilename,\n}: {\n  columns: ColumnDef<T>[];\n  data: T[];\n  csvFilename: string;\n}) {\n  return (\n    <Button variant=\"outline\" size=\"sm\" onClick={() => exportToCsv(columns, data, csvFilename)}>\n      <LuDownload className=\"mr-2 h-4 w-4\" />\n      Export\n    </Button>\n  );\n}\n\nfunction BulkActionsBar<T>({\n  selectedRows,\n  bulkActions,\n}: {\n  selectedRows: T[];\n  bulkActions: (rows: T[]) => React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <span className=\"text-muted-foreground text-sm\">{selectedRows.length} selected</span>\n      {bulkActions(selectedRows)}\n    </div>\n  );\n}\n\nfunction Toolbar<T>({\n  searchable,\n  searchPlaceholder,\n  globalFilter,\n  onGlobalFilterChange,\n  selectedRows,\n  bulkActions,\n  toolbar,\n  exportCsv,\n  columns,\n  data,\n  csvFilename,\n  columnToggle,\n  table,\n}: {\n  searchable: boolean;\n  searchPlaceholder: string;\n  globalFilter: string;\n  onGlobalFilterChange: (value: string) => void;\n  selectedRows: T[];\n  bulkActions?: (rows: T[]) => React.ReactNode;\n  toolbar?: React.ReactNode;\n  exportCsv: boolean;\n  columns: ColumnDef<T>[];\n  data: T[];\n  csvFilename: string;\n  columnToggle: boolean;\n  table: TanstackTable<T>;\n}) {\n  const hasSelection = selectedRows.length > 0;\n  return (\n    <div className=\"flex items-center gap-4\">\n      {searchable && (\n        <Input\n          placeholder={searchPlaceholder}\n          value={globalFilter}\n          onChange={(e) => onGlobalFilterChange(e.target.value)}\n          className=\"max-w-sm\"\n        />\n      )}\n      {hasSelection && bulkActions && (\n        <BulkActionsBar selectedRows={selectedRows} bulkActions={bulkActions} />\n      )}\n      <div className=\"ml-auto flex items-center gap-2\">\n        {toolbar}\n        {exportCsv && <ExportButton columns={columns} data={data} csvFilename={csvFilename} />}\n        {columnToggle && <ColumnToggle table={table} />}\n      </div>\n    </div>\n  );\n}\n\nfunction TableBodyContent<T>({\n  loading,\n  colSpan,\n  emptyMessage,\n  rows,\n  onRowClick,\n}: {\n  loading: boolean;\n  colSpan: number;\n  emptyMessage: string;\n  rows: Row<T>[];\n  onRowClick?: (r: T) => void;\n}) {\n  if (loading) {\n    return (\n      <TableRow>\n        <TableCell colSpan={colSpan} className=\"h-24 text-center\">\n          <Spinner size=\"lg\" className=\"mx-auto\" />\n        </TableCell>\n      </TableRow>\n    );\n  }\n  if (rows.length === 0) {\n    return (\n      <TableRow>\n        <TableCell colSpan={colSpan} className=\"h-24 text-center\">\n          {emptyMessage}\n        </TableCell>\n      </TableRow>\n    );\n  }\n  return (\n    <>\n      {rows.map((row) => (\n        <DataRow key={row.id} row={row} onRowClick={onRowClick} />\n      ))}\n    </>\n  );\n}\n\nfunction PageSizeSelector({\n  pageSize,\n  options,\n  onChange,\n}: {\n  pageSize: number;\n  options: number[];\n  onChange: (size: number) => void;\n}) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <span className=\"text-muted-foreground text-sm\">Rows per page</span>\n      <Select value={String(pageSize)} onValueChange={(v) => onChange(Number(v))}>\n        <SelectTrigger className=\"h-8 w-[70px]\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          {options.map((size) => (\n            <SelectItem key={size} value={String(size)}>\n              {size}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n\nfunction PaginationFooter({ pagination }: { pagination?: DataTablePagination }) {\n  if (!pagination) return null;\n  const showPageSize =\n    pagination.pageSizeOptions && pagination.pageSize !== undefined && pagination.onPageSizeChange;\n  const showPages = pagination.totalPages > 1;\n  if (!showPageSize && !showPages) return null;\n  return (\n    <div className=\"flex items-center justify-between\">\n      {showPageSize ? (\n        <PageSizeSelector\n          pageSize={pagination.pageSize!}\n          options={pagination.pageSizeOptions!}\n          onChange={pagination.onPageSizeChange!}\n        />\n      ) : (\n        <div />\n      )}\n      {showPages && (\n        <ListPagination\n          page={pagination.page}\n          totalPages={pagination.totalPages}\n          getHref={pagination.getHref}\n          onPageChange={pagination.onPageChange}\n        />\n      )}\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Hook: encapsulates all state management and TanStack Table configuration\n// ---------------------------------------------------------------------------\n\ninterface UseDataTableOptions<T> {\n  columns: ColumnDef<T>[];\n  data: T[];\n  selectable: boolean;\n  getRowId?: (row: T) => string;\n  pagination?: DataTablePagination;\n  externalGlobalFilter?: string;\n  onGlobalFilterChange?: (value: string) => void;\n  externalSorting?: SortingState;\n  onSortingChange?: (state: SortingState) => void;\n  externalRowSelection?: RowSelectionState;\n  onRowSelectionChange?: (state: RowSelectionState) => void;\n}\n\nfunction useDataTable<T>(opts: UseDataTableOptions<T>) {\n  const isManualFiltering = opts.externalGlobalFilter !== undefined;\n  const isManualSorting = opts.externalSorting !== undefined;\n\n  const [internalSorting, setInternalSorting] = React.useState<SortingState>([]);\n  const [internalGlobalFilter, setInternalGlobalFilter] = React.useState(\"\");\n  const [internalRowSelection, setInternalRowSelection] = React.useState<RowSelectionState>({});\n  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});\n\n  const sorting = opts.externalSorting ?? internalSorting;\n  const globalFilter = opts.externalGlobalFilter ?? internalGlobalFilter;\n  const rowSelectionState = opts.externalRowSelection ?? internalRowSelection;\n\n  const handleSortingChange = opts.onSortingChange\n    ? (updater: SortingState | ((prev: SortingState) => SortingState)) => {\n        opts.onSortingChange!((updater as (prev: SortingState) => SortingState)(sorting));\n      }\n    : setInternalSorting;\n\n  const handleGlobalFilterChange = opts.onGlobalFilterChange ?? setInternalGlobalFilter;\n\n  const handleRowSelectionChange = opts.onRowSelectionChange\n    ? (updater: RowSelectionState | ((prev: RowSelectionState) => RowSelectionState)) => {\n        opts.onRowSelectionChange!(\n          (updater as (prev: RowSelectionState) => RowSelectionState)(rowSelectionState),\n        );\n      }\n    : setInternalRowSelection;\n\n  const tanstackColumns = React.useMemo(\n    () => buildTanstackColumns(opts.columns, opts.selectable),\n    [opts.columns, opts.selectable],\n  );\n\n  const table = useReactTable({\n    data: opts.data,\n    columns: tanstackColumns,\n    state: {\n      sorting,\n      globalFilter: isManualFiltering ? undefined : globalFilter,\n      rowSelection: rowSelectionState,\n      columnVisibility,\n    },\n    onSortingChange: handleSortingChange,\n    onGlobalFilterChange: isManualFiltering ? undefined : setInternalGlobalFilter,\n    onRowSelectionChange: handleRowSelectionChange,\n    onColumnVisibilityChange: setColumnVisibility,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: isManualSorting ? undefined : getSortedRowModel(),\n    getFilteredRowModel: isManualFiltering ? undefined : getFilteredRowModel(),\n    manualSorting: isManualSorting,\n    manualFiltering: isManualFiltering,\n    manualPagination: opts.pagination !== undefined,\n    enableRowSelection: opts.selectable,\n    getRowId: opts.getRowId ? (row) => opts.getRowId!(row) : undefined,\n  });\n\n  const selectedRows = opts.selectable\n    ? table.getSelectedRowModel().rows.map((r) => r.original)\n    : [];\n\n  return { table, tanstackColumns, globalFilter, handleGlobalFilterChange, selectedRows };\n}\n\n// ---------------------------------------------------------------------------\n// Main component\n// ---------------------------------------------------------------------------\n\nfunction DataTable<T>({\n  columns,\n  data,\n  searchable = false,\n  searchPlaceholder = \"Search...\",\n  onRowClick,\n  loading = false,\n  emptyMessage = \"No results.\",\n  toolbar,\n  className,\n  getRowId,\n  pagination,\n  globalFilter: externalGlobalFilter,\n  onGlobalFilterChange,\n  sortingState,\n  onSortingChange,\n  selectable = false,\n  rowSelection,\n  onRowSelectionChange,\n  bulkActions,\n  columnToggle = false,\n  exportCsv = false,\n  csvFilename = \"export\",\n}: DataTableProps<T>) {\n  const { table, tanstackColumns, globalFilter, handleGlobalFilterChange, selectedRows } =\n    useDataTable({\n      columns,\n      data,\n      selectable,\n      getRowId,\n      pagination,\n      externalGlobalFilter,\n      onGlobalFilterChange,\n      externalSorting: sortingState,\n      onSortingChange,\n      externalRowSelection: rowSelection,\n      onRowSelectionChange,\n    });\n\n  const showToolbar = searchable || toolbar || columnToggle || exportCsv || selectedRows.length > 0;\n\n  return (\n    <div className={cn(\"space-y-4\", className)}>\n      {showToolbar && (\n        <Toolbar\n          searchable={searchable}\n          searchPlaceholder={searchPlaceholder}\n          globalFilter={globalFilter}\n          onGlobalFilterChange={handleGlobalFilterChange}\n          selectedRows={selectedRows}\n          bulkActions={bulkActions}\n          toolbar={toolbar}\n          exportCsv={exportCsv}\n          columns={columns}\n          data={data}\n          csvFilename={csvFilename}\n          columnToggle={columnToggle}\n          table={table}\n        />\n      )}\n      <Table>\n        <TableHeader className=\"bg-background sticky top-0 z-10\">\n          {table.getHeaderGroups().map((hg) => (\n            <TableRow key={hg.id}>\n              {hg.headers.map((h) => (\n                <HeaderCell key={h.id} header={h} />\n              ))}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          <TableBodyContent\n            loading={loading}\n            colSpan={tanstackColumns.length}\n            emptyMessage={emptyMessage}\n            rows={table.getRowModel().rows}\n            onRowClick={onRowClick}\n          />\n        </TableBody>\n      </Table>\n      <PaginationFooter pagination={pagination} />\n    </div>\n  );\n}\nDataTable.displayName = \"DataTable\";\n\nexport { DataTable };\nexport type { SortingState, RowSelectionState, VisibilityState };\n"],"mappings":"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","names":[]}