@sqlrooms/data-table 0.15.0 → 0.16.0

package/README.md

@@ -50,34 +50,6 @@ function MyDataTable() {
 }
 ```
 
-### Virtualized Data Table for Large Datasets
-
-```tsx
-import {DataTableVirtualized} from '@sqlrooms/data-table';
-
-function LargeDataTable() {
-  // Imagine this is a very large dataset
-  const largeDataset = generateLargeDataset(10000);
-
-  const columns = [
-    {accessorKey: 'id', header: 'ID'},
-    {accessorKey: 'name', header: 'Name'},
-    {accessorKey: 'email', header: 'Email'},
-    {accessorKey: 'status', header: 'Status'},
-    {accessorKey: 'lastActive', header: 'Last Active'},
-  ];
-
-  return (
-    <DataTableVirtualized
-      data={largeDataset}
-      columns={columns}
-      height={500}
-      width="100%"
-    />
-  );
-}
-```
-
 ### Working with SQL Query Results
 
 ```tsx

package/dist/ColumnTypeBadge.d.ts

@@ -0,0 +1,11 @@
+import { ColumnTypeCategory } from '@sqlrooms/duckdb';
+import { FC } from 'react';
+/**∏
+ * A badge that displays the type of a database table column.
+ */
+export declare const ColumnTypeBadge: FC<{
+    className?: string;
+    columnType: unknown;
+    typeCategory?: ColumnTypeCategory;
+}>;
+//# sourceMappingURL=ColumnTypeBadge.d.ts.map

package/dist/ColumnTypeBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnTypeBadge.d.ts","sourceRoot":"","sources":["../src/ColumnTypeBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAEzB;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC,CA2BA,CAAC"}

package/dist/ColumnTypeBadge.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@sqlrooms/ui';
+/**∏
+ * A badge that displays the type of a database table column.
+ */
+export const ColumnTypeBadge = ({ className, columnType, typeCategory }) => (_jsx("div", { title: String(columnType), className: cn('py-0.25 w-[55px] flex-shrink-0 overflow-hidden text-ellipsis rounded-sm px-1 text-center text-[9px]', 'cursor-default lowercase', {
+        'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400': !typeCategory,
+        'bg-blue-100 text-blue-500 dark:bg-blue-900 dark:text-blue-400': typeCategory === 'string',
+        'bg-green-100 text-green-500 dark:bg-green-900 dark:text-green-400': typeCategory === 'number',
+        'bg-yellow-100 text-yellow-500 dark:bg-yellow-900 dark:text-yellow-400': typeCategory === 'datetime',
+        'bg-red-100 text-red-500 dark:bg-red-900 dark:text-red-400': typeCategory === 'boolean',
+        'bg-orange-100 text-orange-400 dark:bg-orange-900 dark:text-orange-400': typeCategory === 'binary' || typeCategory === 'geometry',
+        'bg-purple-100 text-purple-500 dark:bg-purple-900 dark:text-purple-400': typeCategory === 'json' || typeCategory === 'struct',
+    }, className), children: String(columnType) }));
+//# sourceMappingURL=ColumnTypeBadge.js.map

package/dist/ColumnTypeBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnTypeBadge.js","sourceRoot":"","sources":["../src/ColumnTypeBadge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAIvB,CAAC,EAAC,SAAS,EAAE,UAAU,EAAE,YAAY,EAAC,EAAE,EAAE,CAAC,CAC9C,cACE,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,EACzB,SAAS,EAAE,EAAE,CACX,qGAAqG,EACrG,0BAA0B,EAC1B;QACE,+DAA+D,EAC7D,CAAC,YAAY;QACf,+DAA+D,EAC7D,YAAY,KAAK,QAAQ;QAC3B,mEAAmE,EACjE,YAAY,KAAK,QAAQ;QAC3B,uEAAuE,EACrE,YAAY,KAAK,UAAU;QAC7B,2DAA2D,EACzD,YAAY,KAAK,SAAS;QAC5B,uEAAuE,EACrE,YAAY,KAAK,QAAQ,IAAI,YAAY,KAAK,UAAU;QAC1D,uEAAuE,EACrE,YAAY,KAAK,MAAM,IAAI,YAAY,KAAK,QAAQ;KACvD,EACD,SAAS,CACV,YAEA,MAAM,CAAC,UAAU,CAAC,GACf,CACP,CAAC","sourcesContent":["import {ColumnTypeCategory} from '@sqlrooms/duckdb';\nimport {cn} from '@sqlrooms/ui';\nimport {FC} from 'react';\n\n/**∏\n * A badge that displays the type of a database table column.\n */\nexport const ColumnTypeBadge: FC<{\n  className?: string;\n  columnType: unknown;\n  typeCategory?: ColumnTypeCategory;\n}> = ({className, columnType, typeCategory}) => (\n  <div\n    title={String(columnType)}\n    className={cn(\n      'py-0.25 w-[55px] flex-shrink-0 overflow-hidden text-ellipsis rounded-sm px-1 text-center text-[9px]',\n      'cursor-default lowercase',\n      {\n        'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400':\n          !typeCategory,\n        'bg-blue-100 text-blue-500 dark:bg-blue-900 dark:text-blue-400':\n          typeCategory === 'string',\n        'bg-green-100 text-green-500 dark:bg-green-900 dark:text-green-400':\n          typeCategory === 'number',\n        'bg-yellow-100 text-yellow-500 dark:bg-yellow-900 dark:text-yellow-400':\n          typeCategory === 'datetime',\n        'bg-red-100 text-red-500 dark:bg-red-900 dark:text-red-400':\n          typeCategory === 'boolean',\n        'bg-orange-100 text-orange-400 dark:bg-orange-900 dark:text-orange-400':\n          typeCategory === 'binary' || typeCategory === 'geometry',\n        'bg-purple-100 text-purple-500 dark:bg-purple-900 dark:text-purple-400':\n          typeCategory === 'json' || typeCategory === 'struct',\n      },\n      className,\n    )}\n  >\n    {String(columnType)}\n  </div>\n);\n"]}

package/dist/DataTableArrowPaginated.d.ts

@@ -0,0 +1,11 @@
+import * as arrow from 'apache-arrow';
+import { FC } from 'react';
+import { DataTablePaginatedProps } from './DataTablePaginated';
+export declare const DataTableArrowPaginated: FC<{
+    className?: string;
+    table: arrow.Table | undefined;
+    fontSize?: DataTablePaginatedProps<any>['fontSize'];
+    footerActions?: DataTablePaginatedProps<any>['footerActions'];
+    pageSize?: number;
+}>;
+//# sourceMappingURL=DataTableArrowPaginated.d.ts.map

package/dist/DataTableArrowPaginated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableArrowPaginated.d.ts","sourceRoot":"","sources":["../src/DataTableArrowPaginated.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,EAAC,EAAE,EAAW,MAAM,OAAO,CAAC;AACnC,OAA2B,EACzB,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAI9B,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAuBA,CAAC"}

package/dist/DataTableArrowPaginated.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import DataTablePaginated from './DataTablePaginated';
+import useArrowDataTable from './useArrowDataTable';
+export const DataTableArrowPaginated = ({ className, table, fontSize, footerActions, pageSize = 100 }) => {
+    const adt = useArrowDataTable(table);
+    const [pagination, setPagination] = useState(
+    // If the table has less than pageSize rows, don't show pagination.
+    table?.numRows && table.numRows <= pageSize
+        ? undefined
+        : { pageIndex: 0, pageSize });
+    if (!adt) {
+        return _jsx("div", { className: "p-4 text-xs", children: "No data" });
+    }
+    return (_jsx(DataTablePaginated, { className: className, data: adt.data, columns: adt.columns, numRows: table?.numRows, pagination: pagination, onPaginationChange: setPagination, fontSize: fontSize, footerActions: footerActions }));
+};
+//# sourceMappingURL=DataTableArrowPaginated.js.map

package/dist/DataTableArrowPaginated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableArrowPaginated.js","sourceRoot":"","sources":["../src/DataTableArrowPaginated.tsx"],"names":[],"mappings":";AACA,OAAO,EAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AACnC,OAAO,kBAEN,MAAM,sBAAsB,CAAC;AAC9B,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAGpD,MAAM,CAAC,MAAM,uBAAuB,GAM/B,CAAC,EAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,GAAG,GAAG,EAAC,EAAE,EAAE;IACnE,MAAM,GAAG,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ;IAC1C,mEAAmE;IACnE,KAAK,EAAE,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,QAAQ;QACzC,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,EAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAC,CAC7B,CAAC;IACF,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,OAAO,cAAK,SAAS,EAAC,aAAa,wBAAc,CAAC;IACpD,CAAC;IACD,OAAO,CACL,KAAC,kBAAkB,IACjB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,OAAO,EAAE,GAAG,CAAC,OAAO,EACpB,OAAO,EAAE,KAAK,EAAE,OAAO,EACvB,UAAU,EAAE,UAAU,EACtB,kBAAkB,EAAE,aAAa,EACjC,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as arrow from 'apache-arrow';\nimport {FC, useState} from 'react';\nimport DataTablePaginated, {\n  DataTablePaginatedProps,\n} from './DataTablePaginated';\nimport useArrowDataTable from './useArrowDataTable';\nimport {PaginationState} from '@tanstack/react-table';\n\nexport const DataTableArrowPaginated: FC<{\n  className?: string;\n  table: arrow.Table | undefined;\n  fontSize?: DataTablePaginatedProps<any>['fontSize'];\n  footerActions?: DataTablePaginatedProps<any>['footerActions'];\n  pageSize?: number;\n}> = ({className, table, fontSize, footerActions, pageSize = 100}) => {\n  const adt = useArrowDataTable(table);\n  const [pagination, setPagination] = useState<PaginationState | undefined>(\n    // If the table has less than pageSize rows, don't show pagination.\n    table?.numRows && table.numRows <= pageSize\n      ? undefined\n      : {pageIndex: 0, pageSize},\n  );\n  if (!adt) {\n    return <div className=\"p-4 text-xs\">No data</div>;\n  }\n  return (\n    <DataTablePaginated\n      className={className}\n      data={adt.data}\n      columns={adt.columns}\n      numRows={table?.numRows}\n      pagination={pagination}\n      onPaginationChange={setPagination}\n      fontSize={fontSize}\n      footerActions={footerActions}\n    />\n  );\n};\n"]}

package/dist/DataTablePaginated.d.ts

@@ -1,16 +1,23 @@
 import { ColumnDef, PaginationState, SortingState } from '@tanstack/react-table';
 export type DataTablePaginatedProps<Data extends object> = {
+    className?: string;
+    /** Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base */
+    fontSize?: string;
     data?: ArrayLike<Data> | undefined;
     columns?: ColumnDef<Data, any>[] | undefined;
     pageCount?: number | undefined;
     numRows?: number | undefined;
     isFetching?: boolean;
-    isExporting?: boolean;
-    pagination?: PaginationState;
+    pagination?: PaginationState | undefined;
     sorting?: SortingState;
+    footerActions?: React.ReactNode;
     onPaginationChange?: (pagination: PaginationState) => void;
     onSortingChange?: (sorting: SortingState) => void;
-    onExport?: () => void;
 };
-export default function DataTablePaginated<Data extends object>({ data, columns, pageCount, numRows, pagination, sorting, onPaginationChange, onSortingChange, onExport, isExporting, isFetching, }: DataTablePaginatedProps<Data>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Data table with pagination, sorting, and custom actions.
+ * @param props
+ * @returns
+ */
+export default function DataTablePaginated<Data extends object>({ className, fontSize, data, columns, numRows, pagination, sorting, onPaginationChange, onSortingChange, footerActions, isFetching, }: DataTablePaginatedProps<Data>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataTablePaginated.d.ts.map

package/dist/DataTablePaginated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePaginated.d.ts","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"AA0BA,OAAO,EACL,SAAS,EACT,eAAe,EACf,YAAY,EAKb,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,uBAAuB,CAAC,IAAI,SAAS,MAAM,IAAI;IACzD,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,IAAI,SAAS,MAAM,EAAE,EAC9D,IAAI,EACJ,OAAO,EACP,SAAS,EACT,OAAO,EACP,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,QAAQ,EACR,WAAW,EACX,UAAU,GACX,EAAE,uBAAuB,CAAC,IAAI,CAAC,2CA6N/B"}
+{"version":3,"file":"DataTablePaginated.d.ts","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"AA0BA,OAAO,EACL,SAAS,EACT,eAAe,EACf,YAAY,EAKb,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,uBAAuB,CAAC,IAAI,SAAS,MAAM,IAAI;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,IAAI,SAAS,MAAM,EAAE,EAC9D,SAAS,EACT,QAAsB,EACtB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,UAAU,GACX,EAAE,uBAAuB,CAAC,IAAI,CAAC,2CAwO/B"}

package/dist/DataTablePaginated.js

@@ -1,15 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDownIcon, ChevronUpIcon, ArrowDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronLeftIcon, ChevronRightIcon, } from '@heroicons/react/24/solid';
-import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge, } from '@sqlrooms/ui';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, ChevronsLeftIcon as ChevronDoubleLeftIcon, ChevronsRightIcon as ChevronDoubleRightIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react';
+import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge, cn, } from '@sqlrooms/ui';
 import { formatCount } from '@sqlrooms/utils';
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
 import { useEffect, useMemo, useState } from 'react';
-export default function DataTablePaginated({ data, columns, pageCount, numRows, pagination, sorting, onPaginationChange, onSortingChange, onExport, isExporting, isFetching, }) {
+/**
+ * Data table with pagination, sorting, and custom actions.
+ * @param props
+ * @returns
+ */
+export default function DataTablePaginated({ className, fontSize = 'text-base', data, columns, numRows, pagination, sorting, onPaginationChange, onSortingChange, footerActions, isFetching, }) {
     const defaultData = useMemo(() => [], []);
+    const pageCount = pagination && numRows !== undefined
+        ? Math.ceil(numRows / pagination.pageSize)
+        : undefined;
     const table = useReactTable({
         data: (data ?? defaultData),
         columns: columns ?? [],
-        pageCount: pageCount ?? -1,
+        pageCount: pageCount ?? 0,
         getSortedRowModel: getSortedRowModel(),
         onSortingChange: (update) => {
             if (onSortingChange && sorting && typeof update === 'function') {
@@ -17,7 +25,7 @@ export default function DataTablePaginated({ data, columns, pageCount, numRows,
             }
         },
         onPaginationChange: (update) => {
-            if (onPaginationChange && pagination && typeof update === 'function') {
+            if (pagination && onPaginationChange && typeof update === 'function') {
                 onPaginationChange(update(pagination));
             }
         },
@@ -32,25 +40,25 @@ export default function DataTablePaginated({ data, columns, pageCount, numRows,
     useEffect(() => {
         setInternalPageIndex(pagination?.pageIndex ?? 0);
     }, [pagination?.pageIndex]);
-    return (_jsxs("div", { className: "relative flex h-full w-full flex-col", children: [_jsx("div", { className: "border-border flex-1 overflow-hidden border font-mono", children: _jsx("div", { className: "h-full overflow-auto", children: _jsxs(Table, { disableWrapper: true, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsxs(TableRow, { children: [_jsx(TableHead, { className: `bg-background sticky left-0 top-[-1px] z-20 w-auto whitespace-nowrap border-r py-2 text-center`, children: isFetching ? (_jsx("div", { className: "border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" })) : null }), headerGroup.headers.map((header) => {
+    return (_jsxs("div", { className: cn(`relative flex h-full w-full flex-col`, className), children: [_jsx("div", { className: "border-border flex-1 overflow-hidden border font-mono", children: _jsx("div", { className: "h-full overflow-auto", children: _jsxs(Table, { disableWrapper: true, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsxs(TableRow, { children: [_jsx(TableHead, { className: `bg-background sticky left-0 top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2 text-center`, children: isFetching ? (_jsx("div", { className: "border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" })) : null }), headerGroup.headers.map((header) => {
                                             const meta = header.column.columnDef
                                                 .meta;
-                                            return (_jsx(TableHead, { colSpan: header.colSpan, className: `bg-background hover:bg-muted sticky top-[-1px] z-10 w-auto cursor-pointer whitespace-nowrap border-r py-2 ${meta?.isNumeric ? 'text-right' : 'text-left'} `, onClick: header.column.getToggleSortingHandler(), children: _jsxs("div", { className: "flex items-center gap-2", children: [header.isPlaceholder ? null : (_jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) })), header.column.getIsSorted() ? (header.column.getIsSorted() === 'desc' ? (_jsx(ChevronDownIcon, { className: "h-4 w-4" })) : (_jsx(ChevronUpIcon, { className: "h-4 w-4" }))) : null, _jsx("div", { className: "flex-1" }), _jsx(Badge, { variant: "outline", className: "max-w-[400px] truncate text-xs opacity-30", children: String(meta?.type) })] }) }, header.id));
-                                        }), _jsx(TableHead, { className: "bg-background sticky top-0 w-full whitespace-nowrap border-r border-t py-2" })] }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, i) => (_jsxs(TableRow, { className: "hover:bg-muted bg-background", children: [_jsx(TableCell, { className: "bg-background text-muted-foreground sticky left-0 border-r text-center text-xs", children: pagination
+                                            return (_jsx(TableHead, { colSpan: header.colSpan, className: cn('bg-background hover:bg-muted sticky top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2', pagination ? 'cursor-pointer' : '', meta?.isNumeric ? 'text-right' : 'text-left', fontSize), onClick: header.column.getToggleSortingHandler(), children: _jsxs("div", { className: "flex items-center gap-2", children: [header.isPlaceholder ? null : (_jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) })), header.column.getIsSorted() ? (header.column.getIsSorted() === 'desc' ? (_jsx(ChevronDownIcon, { className: "h-4 w-4" })) : (_jsx(ChevronUpIcon, { className: "h-4 w-4" }))) : null, _jsx("div", { className: "flex-1" }), _jsx(Badge, { variant: "outline", className: `max-w-[400px] truncate text-xs opacity-30`, children: String(meta?.type) })] }) }, header.id));
+                                        }), _jsx(TableHead, { className: "bg-background sticky top-0 w-full whitespace-nowrap border-r border-t py-2" })] }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, i) => (_jsxs(TableRow, { className: "hover:bg-muted bg-background", children: [_jsx(TableCell, { className: `bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSize}`, children: pagination
                                                 ? `${pagination.pageIndex * pagination.pageSize + i + 1}`
-                                                : '' }), row.getVisibleCells().map((cell) => {
+                                                : `${i + 1}` }), row.getVisibleCells().map((cell) => {
                                             const meta = cell.column.columnDef.meta;
-                                            return (_jsx(TableCell, { className: `max-w-[500px] overflow-hidden truncate border-r px-7 text-xs ${meta?.isNumeric ? 'text-right' : 'text-left'} `, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                                        }), _jsx(TableCell, { className: "border-r", children: "\u00A0" })] }, row.id))) })] }) }) }), _jsxs("div", { className: "bg-background sticky bottom-0 left-0 flex flex-wrap items-center gap-2 border border-t-0 p-2", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronDoubleLeftIcon, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsxs("div", { className: "ml-1 flex items-center gap-1 text-sm", children: [_jsx("div", { children: "Page" }), _jsx(Input, { type: "number", min: 1, max: table.getPageCount(), className: "h-8 w-16", value: internalPageIndex + 1, onChange: (e) => {
-                                    const value = e.target.value;
-                                    if (value) {
-                                        const page = Math.max(0, Math.min(table.getPageCount() - 1, Number(value) - 1));
-                                        setInternalPageIndex(page);
-                                    }
-                                }, onBlur: () => {
-                                    if (internalPageIndex !== pagination?.pageIndex) {
-                                        table.setPageIndex(internalPageIndex);
-                                    }
-                                } }), _jsx("div", { children: `of ${formatCount(table.getPageCount())}` })] }), _jsx(Button, { variant: "outline", size: "icon", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), children: _jsx(ChevronDoubleRightIcon, { className: "h-4 w-4" }) }), _jsxs(Select, { value: String(table.getState().pagination.pageSize), onValueChange: (value) => table.setPageSize(Number(value)), children: [_jsx(SelectTrigger, { className: "h-8 w-[110px]", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: [10, 50, 100, 500, 1000].map((pageSize) => (_jsx(SelectItem, { value: String(pageSize), children: `${pageSize} rows` }, pageSize))) })] }), _jsx("div", { className: "flex-1" }), numRows !== undefined && isFinite(numRows) ? (_jsx("div", { className: "text-sm font-normal", children: `${formatCount(numRows)} rows` })) : null, onExport ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: onExport, disabled: isExporting, children: [isExporting ? (_jsx("div", { className: "border-primary mr-2 h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" })) : (_jsx(ArrowDownIcon, { className: "mr-2 h-4 w-4" })), "Export CSV"] })) : null] }), isFetching ? (_jsx("div", { className: "bg-background/80 absolute inset-0 animate-pulse" })) : null] }));
+                                            return (_jsx(TableCell, { className: cn('max-w-[500px] overflow-hidden truncate border-r px-7', fontSize, meta?.isNumeric ? 'text-right' : 'text-left'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                        }), _jsx(TableCell, { className: "border-r", children: "\u00A0" })] }, row.id))) })] }) }) }), pagination || footerActions ? (_jsxs("div", { className: "bg-background sticky bottom-0 left-0 flex flex-wrap items-center gap-2 border border-t-0 p-2", children: [pagination ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronDoubleLeftIcon, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsxs("div", { className: `ml-1 flex items-center gap-1 ${fontSize}`, children: [_jsx("div", { children: "Page" }), _jsx(Input, { type: "number", min: 1, max: table.getPageCount(), className: "h-8 w-16", value: internalPageIndex + 1, onChange: (e) => {
+                                                    const value = e.target.value;
+                                                    if (value) {
+                                                        const page = Math.max(0, Math.min(table.getPageCount() - 1, Number(value) - 1));
+                                                        setInternalPageIndex(page);
+                                                    }
+                                                }, onBlur: () => {
+                                                    if (internalPageIndex !== pagination?.pageIndex) {
+                                                        table.setPageIndex(internalPageIndex);
+                                                    }
+                                                } }), _jsx("div", { children: `of ${formatCount(table.getPageCount())}` })] }), _jsx(Button, { variant: "outline", size: "icon", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), children: _jsx(ChevronDoubleRightIcon, { className: "h-4 w-4" }) }), _jsxs(Select, { value: String(table.getState().pagination.pageSize), onValueChange: (value) => table.setPageSize(Number(value)), children: [_jsx(SelectTrigger, { className: "h-8 w-[110px]", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: [10, 50, 100, 500, 1000].map((pageSize) => (_jsx(SelectItem, { value: String(pageSize), children: `${pageSize} rows` }, pageSize))) })] })] }), _jsx("div", { className: "flex-1" })] })) : null, _jsx(_Fragment, { children: numRows !== undefined && isFinite(numRows) ? (_jsx("div", { className: `font-normal ${fontSize}`, children: `${formatCount(numRows)} rows` })) : null }), footerActions] })) : null, isFetching ? (_jsx("div", { className: "bg-background/80 absolute inset-0 animate-pulse" })) : null] }));
 }
 //# sourceMappingURL=DataTablePaginated.js.map

package/dist/DataTablePaginated.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePaginated.js","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ArrowDownIcon,\n  ChevronDoubleLeftIcon,\n  ChevronDoubleRightIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@heroicons/react/24/solid';\nimport {\n  Button,\n  Input,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  Badge,\n} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n  ColumnDef,\n  PaginationState,\n  SortingState,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport {useEffect, useMemo, useState} from 'react';\nimport {ArrowColumnMeta} from './useArrowDataTable';\n\nexport type DataTablePaginatedProps<Data extends object> = {\n  data?: ArrayLike<Data> | undefined;\n  columns?: ColumnDef<Data, any>[] | undefined;\n  pageCount?: number | undefined;\n  numRows?: number | undefined;\n  isFetching?: boolean;\n  isExporting?: boolean;\n  pagination?: PaginationState;\n  sorting?: SortingState;\n  onPaginationChange?: (pagination: PaginationState) => void;\n  onSortingChange?: (sorting: SortingState) => void;\n  onExport?: () => void;\n};\n\nexport default function DataTablePaginated<Data extends object>({\n  data,\n  columns,\n  pageCount,\n  numRows,\n  pagination,\n  sorting,\n  onPaginationChange,\n  onSortingChange,\n  onExport,\n  isExporting,\n  isFetching,\n}: DataTablePaginatedProps<Data>) {\n  const defaultData = useMemo(() => [], []);\n  const table = useReactTable({\n    data: (data ?? defaultData) as any[],\n    columns: columns ?? [],\n    pageCount: pageCount ?? -1,\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: (update) => {\n      if (onSortingChange && sorting && typeof update === 'function') {\n        onSortingChange(update(sorting));\n      }\n    },\n    onPaginationChange: (update) => {\n      if (onPaginationChange && pagination && typeof update === 'function') {\n        onPaginationChange(update(pagination));\n      }\n    },\n    getCoreRowModel: getCoreRowModel(),\n    manualPagination: true,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  const [internalPageIndex, setInternalPageIndex] = useState(\n    pagination?.pageIndex ?? 0,\n  );\n  useEffect(() => {\n    setInternalPageIndex(pagination?.pageIndex ?? 0);\n  }, [pagination?.pageIndex]);\n\n  return (\n    <div className=\"relative flex h-full w-full flex-col\">\n      <div className=\"border-border flex-1 overflow-hidden border font-mono\">\n        <div className=\"h-full overflow-auto\">\n          <Table disableWrapper>\n            <TableHeader>\n              {table.getHeaderGroups().map((headerGroup) => (\n                <TableRow key={headerGroup.id}>\n                  <TableHead\n                    className={`bg-background sticky left-0 top-[-1px] z-20 w-auto whitespace-nowrap border-r py-2 text-center`}\n                  >\n                    {isFetching ? (\n                      <div className=\"border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n                    ) : null}\n                  </TableHead>\n                  {headerGroup.headers.map((header) => {\n                    const meta = header.column.columnDef\n                      .meta as ArrowColumnMeta;\n                    return (\n                      <TableHead\n                        key={header.id}\n                        colSpan={header.colSpan}\n                        className={`bg-background hover:bg-muted sticky top-[-1px] z-10 w-auto cursor-pointer whitespace-nowrap border-r py-2 ${meta?.isNumeric ? 'text-right' : 'text-left'} `}\n                        onClick={header.column.getToggleSortingHandler()}\n                      >\n                        <div className=\"flex items-center gap-2\">\n                          {header.isPlaceholder ? null : (\n                            <div>\n                              {flexRender(\n                                header.column.columnDef.header,\n                                header.getContext(),\n                              )}\n                            </div>\n                          )}\n                          {header.column.getIsSorted() ? (\n                            header.column.getIsSorted() === 'desc' ? (\n                              <ChevronDownIcon className=\"h-4 w-4\" />\n                            ) : (\n                              <ChevronUpIcon className=\"h-4 w-4\" />\n                            )\n                          ) : null}\n                          <div className=\"flex-1\" />\n                          <Badge\n                            variant=\"outline\"\n                            className=\"max-w-[400px] truncate text-xs opacity-30\"\n                          >\n                            {String(meta?.type)}\n                          </Badge>\n                        </div>\n                      </TableHead>\n                    );\n                  })}\n                  <TableHead className=\"bg-background sticky top-0 w-full whitespace-nowrap border-r border-t py-2\" />\n                </TableRow>\n              ))}\n            </TableHeader>\n            <TableBody>\n              {table.getRowModel().rows.map((row, i) => (\n                <TableRow key={row.id} className=\"hover:bg-muted bg-background\">\n                  <TableCell className=\"bg-background text-muted-foreground sticky left-0 border-r text-center text-xs\">\n                    {pagination\n                      ? `${pagination.pageIndex * pagination.pageSize + i + 1}`\n                      : ''}\n                  </TableCell>\n                  {row.getVisibleCells().map((cell) => {\n                    const meta = cell.column.columnDef.meta as ArrowColumnMeta;\n                    return (\n                      <TableCell\n                        key={cell.id}\n                        className={`max-w-[500px] overflow-hidden truncate border-r px-7 text-xs ${meta?.isNumeric ? 'text-right' : 'text-left'} `}\n                      >\n                        {flexRender(\n                          cell.column.columnDef.cell,\n                          cell.getContext(),\n                        )}\n                      </TableCell>\n                    );\n                  })}\n                  <TableCell className=\"border-r\">&nbsp;</TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\n      </div>\n      <div className=\"bg-background sticky bottom-0 left-0 flex flex-wrap items-center gap-2 border border-t-0 p-2\">\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => table.setPageIndex(0)}\n          disabled={!table.getCanPreviousPage()}\n        >\n          <ChevronDoubleLeftIcon className=\"h-4 w-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => table.previousPage()}\n          disabled={!table.getCanPreviousPage()}\n        >\n          <ChevronLeftIcon className=\"h-4 w-4\" />\n        </Button>\n        <div className=\"ml-1 flex items-center gap-1 text-sm\">\n          <div>Page</div>\n          <Input\n            type=\"number\"\n            min={1}\n            max={table.getPageCount()}\n            className=\"h-8 w-16\"\n            value={internalPageIndex + 1}\n            onChange={(e) => {\n              const value = e.target.value;\n              if (value) {\n                const page = Math.max(\n                  0,\n                  Math.min(table.getPageCount() - 1, Number(value) - 1),\n                );\n                setInternalPageIndex(page);\n              }\n            }}\n            onBlur={() => {\n              if (internalPageIndex !== pagination?.pageIndex) {\n                table.setPageIndex(internalPageIndex);\n              }\n            }}\n          />\n          <div>{`of ${formatCount(table.getPageCount())}`}</div>\n        </div>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => table.nextPage()}\n          disabled={!table.getCanNextPage()}\n        >\n          <ChevronRightIcon className=\"h-4 w-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n          disabled={!table.getCanNextPage()}\n        >\n          <ChevronDoubleRightIcon className=\"h-4 w-4\" />\n        </Button>\n        <Select\n          value={String(table.getState().pagination.pageSize)}\n          onValueChange={(value) => table.setPageSize(Number(value))}\n        >\n          <SelectTrigger className=\"h-8 w-[110px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {[10, 50, 100, 500, 1000].map((pageSize) => (\n              <SelectItem key={pageSize} value={String(pageSize)}>\n                {`${pageSize} rows`}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n\n        <div className=\"flex-1\" />\n\n        {numRows !== undefined && isFinite(numRows) ? (\n          <div className=\"text-sm font-normal\">\n            {`${formatCount(numRows)} rows`}\n          </div>\n        ) : null}\n\n        {onExport ? (\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={onExport}\n            disabled={isExporting}\n          >\n            {isExporting ? (\n              <div className=\"border-primary mr-2 h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n            ) : (\n              <ArrowDownIcon className=\"mr-2 h-4 w-4\" />\n            )}\n            Export CSV\n          </Button>\n        ) : null}\n      </div>\n      {isFetching ? (\n        <div className=\"bg-background/80 absolute inset-0 animate-pulse\" />\n      ) : null}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"DataTablePaginated.js","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ChevronsLeftIcon as ChevronDoubleLeftIcon,\n  ChevronsRightIcon as ChevronDoubleRightIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from 'lucide-react';\nimport {\n  Button,\n  Input,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  Badge,\n  cn,\n} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n  ColumnDef,\n  PaginationState,\n  SortingState,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport {useEffect, useMemo, useState} from 'react';\nimport {ArrowColumnMeta} from './useArrowDataTable';\n\nexport type DataTablePaginatedProps<Data extends object> = {\n  className?: string;\n  /** Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base */\n  fontSize?: string;\n  data?: ArrayLike<Data> | undefined;\n  columns?: ColumnDef<Data, any>[] | undefined;\n  pageCount?: number | undefined;\n  numRows?: number | undefined;\n  isFetching?: boolean;\n  pagination?: PaginationState | undefined;\n  sorting?: SortingState;\n  footerActions?: React.ReactNode;\n  onPaginationChange?: (pagination: PaginationState) => void;\n  onSortingChange?: (sorting: SortingState) => void;\n};\n\n/**\n * Data table with pagination, sorting, and custom actions.\n * @param props\n * @returns\n */\nexport default function DataTablePaginated<Data extends object>({\n  className,\n  fontSize = 'text-base',\n  data,\n  columns,\n  numRows,\n  pagination,\n  sorting,\n  onPaginationChange,\n  onSortingChange,\n  footerActions,\n  isFetching,\n}: DataTablePaginatedProps<Data>) {\n  const defaultData = useMemo(() => [], []);\n  const pageCount =\n    pagination && numRows !== undefined\n      ? Math.ceil(numRows / pagination.pageSize)\n      : undefined;\n\n  const table = useReactTable({\n    data: (data ?? defaultData) as any[],\n    columns: columns ?? [],\n    pageCount: pageCount ?? 0,\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: (update) => {\n      if (onSortingChange && sorting && typeof update === 'function') {\n        onSortingChange(update(sorting));\n      }\n    },\n    onPaginationChange: (update) => {\n      if (pagination && onPaginationChange && typeof update === 'function') {\n        onPaginationChange(update(pagination));\n      }\n    },\n    getCoreRowModel: getCoreRowModel(),\n    manualPagination: true,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  const [internalPageIndex, setInternalPageIndex] = useState(\n    pagination?.pageIndex ?? 0,\n  );\n  useEffect(() => {\n    setInternalPageIndex(pagination?.pageIndex ?? 0);\n  }, [pagination?.pageIndex]);\n\n  return (\n    <div className={cn(`relative flex h-full w-full flex-col`, className)}>\n      <div className=\"border-border flex-1 overflow-hidden border font-mono\">\n        <div className=\"h-full overflow-auto\">\n          <Table disableWrapper>\n            <TableHeader>\n              {table.getHeaderGroups().map((headerGroup) => (\n                <TableRow key={headerGroup.id}>\n                  <TableHead\n                    className={`bg-background sticky left-0 top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2 text-center`}\n                  >\n                    {isFetching ? (\n                      <div className=\"border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n                    ) : null}\n                  </TableHead>\n                  {headerGroup.headers.map((header) => {\n                    const meta = header.column.columnDef\n                      .meta as ArrowColumnMeta;\n                    return (\n                      <TableHead\n                        key={header.id}\n                        colSpan={header.colSpan}\n                        className={cn(\n                          'bg-background hover:bg-muted sticky top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2',\n                          pagination ? 'cursor-pointer' : '',\n                          meta?.isNumeric ? 'text-right' : 'text-left',\n                          fontSize,\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                      >\n                        <div className=\"flex items-center gap-2\">\n                          {header.isPlaceholder ? null : (\n                            <div>\n                              {flexRender(\n                                header.column.columnDef.header,\n                                header.getContext(),\n                              )}\n                            </div>\n                          )}\n                          {header.column.getIsSorted() ? (\n                            header.column.getIsSorted() === 'desc' ? (\n                              <ChevronDownIcon className=\"h-4 w-4\" />\n                            ) : (\n                              <ChevronUpIcon className=\"h-4 w-4\" />\n                            )\n                          ) : null}\n                          <div className=\"flex-1\" />\n                          <Badge\n                            variant=\"outline\"\n                            className={`max-w-[400px] truncate text-xs opacity-30`}\n                          >\n                            {String(meta?.type)}\n                          </Badge>\n                        </div>\n                      </TableHead>\n                    );\n                  })}\n                  <TableHead className=\"bg-background sticky top-0 w-full whitespace-nowrap border-r border-t py-2\" />\n                </TableRow>\n              ))}\n            </TableHeader>\n            <TableBody>\n              {table.getRowModel().rows.map((row, i) => (\n                <TableRow key={row.id} className=\"hover:bg-muted bg-background\">\n                  <TableCell\n                    className={`bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSize}`}\n                  >\n                    {pagination\n                      ? `${pagination.pageIndex * pagination.pageSize + i + 1}`\n                      : `${i + 1}`}\n                  </TableCell>\n                  {row.getVisibleCells().map((cell) => {\n                    const meta = cell.column.columnDef.meta as ArrowColumnMeta;\n                    return (\n                      <TableCell\n                        key={cell.id}\n                        className={cn(\n                          'max-w-[500px] overflow-hidden truncate border-r px-7',\n                          fontSize,\n                          meta?.isNumeric ? 'text-right' : 'text-left',\n                        )}\n                      >\n                        {flexRender(\n                          cell.column.columnDef.cell,\n                          cell.getContext(),\n                        )}\n                      </TableCell>\n                    );\n                  })}\n                  <TableCell className=\"border-r\">&nbsp;</TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\n      </div>\n      {pagination || footerActions ? (\n        <div className=\"bg-background sticky bottom-0 left-0 flex flex-wrap items-center gap-2 border border-t-0 p-2\">\n          {pagination ? (\n            <>\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  onClick={() => table.setPageIndex(0)}\n                  disabled={!table.getCanPreviousPage()}\n                >\n                  <ChevronDoubleLeftIcon className=\"h-4 w-4\" />\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n                >\n                  <ChevronLeftIcon className=\"h-4 w-4\" />\n                </Button>\n                <div className={`ml-1 flex items-center gap-1 ${fontSize}`}>\n                  <div>Page</div>\n                  <Input\n                    type=\"number\"\n                    min={1}\n                    max={table.getPageCount()}\n                    className=\"h-8 w-16\"\n                    value={internalPageIndex + 1}\n                    onChange={(e) => {\n                      const value = e.target.value;\n                      if (value) {\n                        const page = Math.max(\n                          0,\n                          Math.min(table.getPageCount() - 1, Number(value) - 1),\n                        );\n                        setInternalPageIndex(page);\n                      }\n                    }}\n                    onBlur={() => {\n                      if (internalPageIndex !== pagination?.pageIndex) {\n                        table.setPageIndex(internalPageIndex);\n                      }\n                    }}\n                  />\n                  <div>{`of ${formatCount(table.getPageCount())}`}</div>\n                </div>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n                >\n                  <ChevronRightIcon className=\"h-4 w-4\" />\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                  disabled={!table.getCanNextPage()}\n                >\n                  <ChevronDoubleRightIcon className=\"h-4 w-4\" />\n                </Button>\n                <Select\n                  value={String(table.getState().pagination.pageSize)}\n                  onValueChange={(value) => table.setPageSize(Number(value))}\n                >\n                  <SelectTrigger className=\"h-8 w-[110px]\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {[10, 50, 100, 500, 1000].map((pageSize) => (\n                      <SelectItem key={pageSize} value={String(pageSize)}>\n                        {`${pageSize} rows`}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex-1\" />\n            </>\n          ) : null}\n\n          <>\n            {numRows !== undefined && isFinite(numRows) ? (\n              <div className={`font-normal ${fontSize}`}>\n                {`${formatCount(numRows)} rows`}\n              </div>\n            ) : null}\n          </>\n          {footerActions}\n        </div>\n      ) : null}\n\n      {isFetching ? (\n        <div className=\"bg-background/80 absolute inset-0 animate-pulse\" />\n      ) : null}\n    </div>\n  );\n}\n"]}

package/dist/DataTableVirtualized.d.ts

@@ -11,5 +11,8 @@ export type DataTableProps<Data extends object> = {
     columns: ColumnDef<Data, any>[];
     isPreview?: boolean;
 };
+/**
+ * @deprecated Use `DataTablePaginated` instead.
+ */
 export default function DataTableWithLoader<Data extends object>(props: DataTableVirtualizedProps<Data>): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=DataTableVirtualized.d.ts.map

package/dist/DataTableVirtualized.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableVirtualized.d.ts","sourceRoot":"","sources":["../src/DataTableVirtualized.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,SAAS,EAMV,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,yBAAyB,CAAC,IAAI,SAAS,MAAM,IAAI;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,IAAI,SAAS,MAAM,IAAI;IAChD,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IACtB,OAAO,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAgIF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,IAAI,SAAS,MAAM,EAC7D,KAAK,EAAE,yBAAyB,CAAC,IAAI,CAAC,kDAevC"}
+{"version":3,"file":"DataTableVirtualized.d.ts","sourceRoot":"","sources":["../src/DataTableVirtualized.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,SAAS,EAMV,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,yBAAyB,CAAC,IAAI,SAAS,MAAM,IAAI;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,IAAI,SAAS,MAAM,IAAI;IAChD,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IACtB,OAAO,EAAE,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAgIF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,IAAI,SAAS,MAAM,EAC7D,KAAK,EAAE,yBAAyB,CAAC,IAAI,CAAC,kDAevC"}

package/dist/DataTableVirtualized.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge, } from '@sqlrooms/ui';
 import { ErrorPane, SpinnerPane } from '@sqlrooms/ui';
 import { formatCount } from '@sqlrooms/utils';
@@ -43,6 +43,9 @@ const DataTableVirtualized = React.memo(function DataTableVirtualized({ data, co
                                                 })] }, row.id));
                                     }), paddingBottom > 0 && (_jsx(TableRow, { children: _jsx(TableCell, { style: { height: `${paddingBottom}px` } }) }))] })] }) }) }), _jsx("div", { className: "bg-background sticky bottom-0 left-0 border border-t-0 px-4 py-2 font-mono text-xs", children: `${isPreview ? 'Preview of the first ' : ''}${formatCount(data.length)} rows` })] }));
 });
+/**
+ * @deprecated Use `DataTablePaginated` instead.
+ */
 export default function DataTableWithLoader(props) {
     const { isPreview, isFetching, error, ...rest } = props;
     const { data, columns } = rest;

package/dist/DataTableVirtualized.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableVirtualized.js","sourceRoot":"","sources":["../src/DataTableVirtualized.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AACzE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,KAAK,GACN,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,cAAc,CAAC;AACpD,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAGL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAgBzC,MAAM,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,oBAAoB,CAEnE,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAuB;IAChD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAe,EAAE,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,OAAO;QACP,IAAI,EAAE,IAAc;QACpB,eAAe,EAAE,UAAU;QAC3B,eAAe,EAAE,eAAe,EAAE;QAClC,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,KAAK,EAAE;YACL,OAAO;SACR;KACF,CAAC,CAAC;IACH,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7D,MAAM,EAAC,IAAI,EAAC,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;IACnC,MAAM,cAAc,GAAG,UAAU,CAAC;QAChC,SAAS,EAAE,iBAAiB;QAC5B,IAAI,EAAE,IAAI,CAAC,MAAM;QACjB,QAAQ,EAAE,EAAE;KACb,CAAC,CAAC;IACH,MAAM,EAAC,YAAY,EAAE,WAAW,EAAE,SAAS,EAAC,GAAG,cAAc,CAAC;IAE9D,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7E,MAAM,aAAa,GACjB,WAAW,CAAC,MAAM,GAAG,CAAC;QACpB,CAAC,CAAC,SAAS,GAAG,CAAC,WAAW,EAAE,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC,CAAC;IAER,OAAO,CACL,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,sCAAsC,YACnD,cAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAC,sBAAsB,YAC3D,MAAC,KAAK,IAAC,cAAc,mBACnB,KAAC,WAAW,cACT,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC5C,MAAC,QAAQ,eACP,KAAC,SAAS,IACR,SAAS,EAAE,2FAA2F,GACtG,EACD,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;4CAClC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAW,CAAC;4CACjD,OAAO,CACL,KAAC,SAAS,IAER,SAAS,EAAE,mHAAmH,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,GAAG,EAC7K,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE,YAEhD,eACE,SAAS,EAAE,2BACT,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eACpC,EAAE,aAED,UAAU,CACT,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAC9B,MAAM,CAAC,UAAU,EAAE,CACpB,EACA,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAC7B,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,CACvC,KAAC,eAAe,IAAC,SAAS,EAAC,SAAS,GAAG,CACxC,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAC,SAAS,EAAC,SAAS,GAAG,CACtC,CACF,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAC,QAAQ,GAAG,EAC1B,KAAC,KAAK,IACJ,OAAO,EAAC,SAAS,EACjB,SAAS,EAAC,uBAAuB,YAEhC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GACb,IACJ,IA3BD,MAAM,CAAC,EAAE,CA4BJ,CACb,CAAC;wCACJ,CAAC,CAAC,KAtCW,WAAW,CAAC,EAAE,CAuClB,CACZ,CAAC,GACU,EACd,MAAC,SAAS,eACP,UAAU,GAAG,CAAC,IAAI,CACjB,KAAC,QAAQ,cACP,KAAC,SAAS,IAAC,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,UAAU,IAAI,EAAC,GAAI,GACxC,CACZ,EACA,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;wCAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;wCACnC,IAAI,CAAC,GAAG;4CAAE,OAAO,IAAI,CAAC;wCACtB,OAAO,CACL,MAAC,QAAQ,IAAc,SAAS,EAAC,mBAAmB,aAClD,KAAC,SAAS,IAAC,SAAS,EAAC,2EAA2E,YAC7F,UAAU,CAAC,KAAK,GAAG,CAAC,GACX,EACX,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oDAClC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAW,CAAC;oDAC/C,OAAO,CACL,KAAC,SAAS,IAER,SAAS,EAAE,gEAAgE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,GAAG,YAEzH,UAAU,CACT,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAC1B,IAAI,CAAC,UAAU,EAAE,CAClB,IANI,IAAI,CAAC,EAAE,CAOF,CACb,CAAC;gDACJ,CAAC,CAAC,KAjBW,GAAG,CAAC,EAAE,CAkBV,CACZ,CAAC;oCACJ,CAAC,CAAC,EACD,aAAa,GAAG,CAAC,IAAI,CACpB,KAAC,QAAQ,cACP,KAAC,SAAS,IAAC,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,aAAa,IAAI,EAAC,GAAI,GAC3C,CACZ,IACS,IACN,GACJ,GACF,EACN,cAAK,SAAS,EAAC,oFAAoF,YAChG,GAAG,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,GAC1E,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,KAAsC;IAEtC,MAAM,EAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,GAAG,KAAK,CAAC;IACtD,MAAM,EAAC,IAAI,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC;IAC7B,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,CAC5B,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,KAAC,WAAW,IAAC,CAAC,EAAC,MAAM,GAAG,CACzB,CAAC,CAAC,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,CACpB,KAAC,oBAAoB,IACnB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAc,EACvB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC","sourcesContent":["import {ChevronDownIcon, ChevronUpIcon} from '@heroicons/react/24/solid';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  Badge,\n} from '@sqlrooms/ui';\nimport {ErrorPane, SpinnerPane} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n  ColumnDef,\n  SortingState,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport * as React from 'react';\nimport {useVirtual} from 'react-virtual';\n\nexport type DataTableVirtualizedProps<Data extends object> = {\n  data?: ArrayLike<Data>;\n  columns?: ColumnDef<Data, any>[];\n  isFetching?: boolean;\n  error?: any;\n  isPreview?: boolean;\n};\n\nexport type DataTableProps<Data extends object> = {\n  data: ArrayLike<Data>;\n  columns: ColumnDef<Data, any>[];\n  isPreview?: boolean;\n};\n\nconst DataTableVirtualized = React.memo(function DataTableVirtualized<\n  Data extends object,\n>({data, columns, isPreview}: DataTableProps<Data>) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const table = useReactTable({\n    columns,\n    data: data as Data[],\n    onSortingChange: setSorting,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      sorting,\n    },\n  });\n  const tableContainerRef = React.useRef<HTMLDivElement>(null);\n\n  const {rows} = table.getRowModel();\n  const rowVirtualizer = useVirtual({\n    parentRef: tableContainerRef,\n    size: rows.length,\n    overscan: 20,\n  });\n  const {virtualItems: virtualRows, totalSize} = rowVirtualizer;\n\n  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;\n  const paddingBottom =\n    virtualRows.length > 0\n      ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0)\n      : 0;\n\n  return (\n    <div className=\"flex flex-col overflow-hidden\">\n      <div className=\"border-border overflow-hidden border\">\n        <div ref={tableContainerRef} className=\"h-full overflow-auto\">\n          <Table disableWrapper>\n            <TableHeader>\n              {table.getHeaderGroups().map((headerGroup) => (\n                <TableRow key={headerGroup.id}>\n                  <TableHead\n                    className={`bg-background sticky left-0 top-0 z-20 w-auto whitespace-nowrap border-r py-2 text-center`}\n                  />\n                  {headerGroup.headers.map((header) => {\n                    const meta = header.column.columnDef.meta as any;\n                    return (\n                      <TableHead\n                        key={header.id}\n                        className={`bg-background hover:bg-muted/80 sticky top-0 z-10 cursor-pointer whitespace-nowrap border-r px-7 py-2 font-mono ${meta?.isNumeric ? 'text-right' : 'text-left'} `}\n                        onClick={header.column.getToggleSortingHandler()}\n                      >\n                        <div\n                          className={`flex items-center gap-1 ${\n                            meta?.isNumeric ? 'justify-end' : 'justify-start'\n                          }`}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {header.column.getIsSorted() ? (\n                            header.column.getIsSorted() === 'desc' ? (\n                              <ChevronDownIcon className=\"h-4 w-4\" />\n                            ) : (\n                              <ChevronUpIcon className=\"h-4 w-4\" />\n                            )\n                          ) : null}\n                          <div className=\"flex-1\" />\n                          <Badge\n                            variant=\"outline\"\n                            className=\"text-[9px] opacity-30\"\n                          >\n                            {String(meta?.type)}\n                          </Badge>\n                        </div>\n                      </TableHead>\n                    );\n                  })}\n                </TableRow>\n              ))}\n            </TableHeader>\n            <TableBody>\n              {paddingTop > 0 && (\n                <TableRow>\n                  <TableCell style={{height: `${paddingTop}px`}} />\n                </TableRow>\n              )}\n              {virtualRows.map((virtualRow) => {\n                const row = rows[virtualRow.index];\n                if (!row) return null;\n                return (\n                  <TableRow key={row.id} className=\"hover:bg-muted/50\">\n                    <TableCell className=\"bg-muted text-muted-foreground sticky left-0 border-r text-center text-xs\">\n                      {virtualRow.index + 1}\n                    </TableCell>\n                    {row.getVisibleCells().map((cell) => {\n                      const meta = cell.column.columnDef.meta as any;\n                      return (\n                        <TableCell\n                          key={cell.id}\n                          className={`max-w-[500px] overflow-hidden truncate border-r px-7 text-xs ${meta?.isNumeric ? 'text-right' : 'text-left'} `}\n                        >\n                          {flexRender(\n                            cell.column.columnDef.cell,\n                            cell.getContext(),\n                          )}\n                        </TableCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n              {paddingBottom > 0 && (\n                <TableRow>\n                  <TableCell style={{height: `${paddingBottom}px`}} />\n                </TableRow>\n              )}\n            </TableBody>\n          </Table>\n        </div>\n      </div>\n      <div className=\"bg-background sticky bottom-0 left-0 border border-t-0 px-4 py-2 font-mono text-xs\">\n        {`${isPreview ? 'Preview of the first ' : ''}${formatCount(data.length)} rows`}\n      </div>\n    </div>\n  );\n});\n\nexport default function DataTableWithLoader<Data extends object>(\n  props: DataTableVirtualizedProps<Data>,\n) {\n  const {isPreview, isFetching, error, ...rest} = props;\n  const {data, columns} = rest;\n  return error ? (\n    <ErrorPane error={error} />\n  ) : isFetching ? (\n    <SpinnerPane h=\"100%\" />\n  ) : data && columns ? (\n    <DataTableVirtualized\n      data={data}\n      columns={columns as any}\n      isPreview={isPreview}\n    />\n  ) : null;\n}\n"]}
+{"version":3,"file":"DataTableVirtualized.js","sourceRoot":"","sources":["../src/DataTableVirtualized.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ChevronDownIcon, ChevronUpIcon} from 'lucide-react';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  Badge,\n} from '@sqlrooms/ui';\nimport {ErrorPane, SpinnerPane} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n  ColumnDef,\n  SortingState,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport * as React from 'react';\nimport {useVirtual} from 'react-virtual';\n\nexport type DataTableVirtualizedProps<Data extends object> = {\n  data?: ArrayLike<Data>;\n  columns?: ColumnDef<Data, any>[];\n  isFetching?: boolean;\n  error?: any;\n  isPreview?: boolean;\n};\n\nexport type DataTableProps<Data extends object> = {\n  data: ArrayLike<Data>;\n  columns: ColumnDef<Data, any>[];\n  isPreview?: boolean;\n};\n\nconst DataTableVirtualized = React.memo(function DataTableVirtualized<\n  Data extends object,\n>({data, columns, isPreview}: DataTableProps<Data>) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const table = useReactTable({\n    columns,\n    data: data as Data[],\n    onSortingChange: setSorting,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      sorting,\n    },\n  });\n  const tableContainerRef = React.useRef<HTMLDivElement>(null);\n\n  const {rows} = table.getRowModel();\n  const rowVirtualizer = useVirtual({\n    parentRef: tableContainerRef,\n    size: rows.length,\n    overscan: 20,\n  });\n  const {virtualItems: virtualRows, totalSize} = rowVirtualizer;\n\n  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;\n  const paddingBottom =\n    virtualRows.length > 0\n      ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0)\n      : 0;\n\n  return (\n    <div className=\"flex flex-col overflow-hidden\">\n      <div className=\"border-border overflow-hidden border\">\n        <div ref={tableContainerRef} className=\"h-full overflow-auto\">\n          <Table disableWrapper>\n            <TableHeader>\n              {table.getHeaderGroups().map((headerGroup) => (\n                <TableRow key={headerGroup.id}>\n                  <TableHead\n                    className={`bg-background sticky left-0 top-0 z-20 w-auto whitespace-nowrap border-r py-2 text-center`}\n                  />\n                  {headerGroup.headers.map((header) => {\n                    const meta = header.column.columnDef.meta as any;\n                    return (\n                      <TableHead\n                        key={header.id}\n                        className={`bg-background hover:bg-muted/80 sticky top-0 z-10 cursor-pointer whitespace-nowrap border-r px-7 py-2 font-mono ${meta?.isNumeric ? 'text-right' : 'text-left'} `}\n                        onClick={header.column.getToggleSortingHandler()}\n                      >\n                        <div\n                          className={`flex items-center gap-1 ${\n                            meta?.isNumeric ? 'justify-end' : 'justify-start'\n                          }`}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {header.column.getIsSorted() ? (\n                            header.column.getIsSorted() === 'desc' ? (\n                              <ChevronDownIcon className=\"h-4 w-4\" />\n                            ) : (\n                              <ChevronUpIcon className=\"h-4 w-4\" />\n                            )\n                          ) : null}\n                          <div className=\"flex-1\" />\n                          <Badge\n                            variant=\"outline\"\n                            className=\"text-[9px] opacity-30\"\n                          >\n                            {String(meta?.type)}\n                          </Badge>\n                        </div>\n                      </TableHead>\n                    );\n                  })}\n                </TableRow>\n              ))}\n            </TableHeader>\n            <TableBody>\n              {paddingTop > 0 && (\n                <TableRow>\n                  <TableCell style={{height: `${paddingTop}px`}} />\n                </TableRow>\n              )}\n              {virtualRows.map((virtualRow) => {\n                const row = rows[virtualRow.index];\n                if (!row) return null;\n                return (\n                  <TableRow key={row.id} className=\"hover:bg-muted/50\">\n                    <TableCell className=\"bg-muted text-muted-foreground sticky left-0 border-r text-center text-xs\">\n                      {virtualRow.index + 1}\n                    </TableCell>\n                    {row.getVisibleCells().map((cell) => {\n                      const meta = cell.column.columnDef.meta as any;\n                      return (\n                        <TableCell\n                          key={cell.id}\n                          className={`max-w-[500px] overflow-hidden truncate border-r px-7 text-xs ${meta?.isNumeric ? 'text-right' : 'text-left'} `}\n                        >\n                          {flexRender(\n                            cell.column.columnDef.cell,\n                            cell.getContext(),\n                          )}\n                        </TableCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n              {paddingBottom > 0 && (\n                <TableRow>\n                  <TableCell style={{height: `${paddingBottom}px`}} />\n                </TableRow>\n              )}\n            </TableBody>\n          </Table>\n        </div>\n      </div>\n      <div className=\"bg-background sticky bottom-0 left-0 border border-t-0 px-4 py-2 font-mono text-xs\">\n        {`${isPreview ? 'Preview of the first ' : ''}${formatCount(data.length)} rows`}\n      </div>\n    </div>\n  );\n});\n\n/**\n * @deprecated Use `DataTablePaginated` instead.\n */\nexport default function DataTableWithLoader<Data extends object>(\n  props: DataTableVirtualizedProps<Data>,\n) {\n  const {isPreview, isFetching, error, ...rest} = props;\n  const {data, columns} = rest;\n  return error ? (\n    <ErrorPane error={error} />\n  ) : isFetching ? (\n    <SpinnerPane h=\"100%\" />\n  ) : data && columns ? (\n    <DataTableVirtualized\n      data={data}\n      columns={columns as any}\n      isPreview={isPreview}\n    />\n  ) : null;\n}\n"]}

package/dist/QueryDataTable.d.ts

@@ -1,8 +1,13 @@
 import { FC } from 'react';
+import { DataTablePaginatedProps } from './DataTablePaginated';
 export type QueryDataTableProps = {
+    className?: string;
+    /** Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base */
+    fontSize?: DataTablePaginatedProps<any>['fontSize'];
     query: string;
     queryKeyComponents?: unknown[];
+    renderActions?: (query: string) => React.ReactNode;
 };
-declare const QueryDataTableWithSuspense: FC<QueryDataTableProps>;
-export default QueryDataTableWithSuspense;
+declare const QueryDataTable: FC<QueryDataTableProps>;
+export default QueryDataTable;
 //# sourceMappingURL=QueryDataTable.d.ts.map

package/dist/QueryDataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryDataTable.d.ts","sourceRoot":"","sources":["../src/QueryDataTable.tsx"],"names":[],"mappings":"AASA,OAAO,EAAC,EAAE,EAAyC,MAAM,OAAO,CAAC;AAIjE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,EAAE,CAAC;CAChC,CAAC;AAqGF,QAAA,MAAM,0BAA0B,EAAE,EAAE,CAAC,mBAAmB,CASvD,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"QueryDataTable.d.ts","sourceRoot":"","sources":["../src/QueryDataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,EAAE,EAAoB,MAAM,OAAO,CAAC;AAC5C,OAA2B,EACzB,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAK9B,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACpD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAiD3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/QueryDataTable.js

@@ -1,91 +1,31 @@
-import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SpinnerPane } from '@sqlrooms/ui';
-import { escapeId, useExportToCsv, getColValAsNumber, useDuckDb, } from '@sqlrooms/duckdb';
-import { genRandomStr } from '@sqlrooms/utils';
-import { Suspense, useEffect, useMemo, useState } from 'react';
+import { sanitizeQuery, useSql } from '@sqlrooms/duckdb';
+import { useMemo, useState } from 'react';
 import DataTablePaginated from './DataTablePaginated';
+import { QueryDataTableActionsMenu } from './QueryDataTableActionsMenu';
 import useArrowDataTable from './useArrowDataTable';
-const QueryDataTable = ({ query }) => {
-    const connector = useDuckDb();
-    const { exportToCsv } = useExportToCsv();
+import { makePagedQuery } from './utils';
+const QueryDataTable = ({ className, fontSize = 'text-base', query, renderActions = (query) => _jsx(QueryDataTableActionsMenu, { query: query }), }) => {
     const [sorting, setSorting] = useState([]);
     const [pagination, setPagination] = useState({
         pageIndex: 0,
         pageSize: 100,
     });
-    const [count, setCount] = useState(undefined);
-    const [data, setData] = useState(null);
-    const [isFetching, setIsFetching] = useState(false);
-    const [isExporting, setIsExporting] = useState(false);
     // Sanitize the query generated by LLM to remove trailing semicolons, comments, and extra spaces
-    const sanitizedQuery = useMemo(() => {
-        return query
-            .trim() // Remove leading/trailing whitespace
-            .replace(/;+$/, '') // Remove all trailing semicolons
-            .replace(/--.*$/gm, '') // Remove single-line comments
-            .replace(/\/\*[\s\S]*?\*\//g, '') // Remove multi-line comments
-            .replace(/\s+/g, ' '); // Normalize whitespace to single spaces
-    }, [query]);
-    // Fetch row count
-    useEffect(() => {
-        const fetchCount = async () => {
-            try {
-                setIsFetching(true);
-                const countQuery = `SELECT COUNT(*)::int FROM (${sanitizedQuery})`;
-                const result = await connector.query(countQuery);
-                setCount(getColValAsNumber(result));
-            }
-            catch (error) {
-                console.error('Error fetching count:', error);
-            }
-            finally {
-                setIsFetching(false);
-            }
-        };
-        fetchCount();
-    }, [connector, sanitizedQuery]);
-    // Fetch data
-    useEffect(() => {
-        const fetchData = async () => {
-            try {
-                setIsFetching(true);
-                const result = await connector.query(`SELECT * FROM (
-            ${sanitizedQuery}
-          ) ${sorting.length > 0
-                    ? `ORDER BY ${sorting
-                        .map((d) => `${escapeId(d.id)}${d.desc ? ' DESC' : ''}`)
-                        .join(', ')}`
-                    : ''}
-          OFFSET ${pagination.pageIndex * pagination.pageSize}
-          LIMIT ${pagination.pageSize}`);
-                setData(result);
-            }
-            catch (error) {
-                console.error('Error fetching data:', error);
-            }
-            finally {
-                setIsFetching(false);
-            }
-        };
-        fetchData();
-    }, [pagination, sorting, connector, sanitizedQuery]);
-    const arrowTableData = useArrowDataTable(data);
-    const handleExport = async () => {
-        if (!query)
-            return;
-        try {
-            setIsExporting(true);
-            await exportToCsv(query, `export-${genRandomStr(5)}.csv`);
-        }
-        finally {
-            setIsExporting(false);
-        }
-    };
-    return (_jsx(DataTablePaginated, { ...arrowTableData, pageCount: Math.ceil((count ?? 0) / pagination.pageSize), numRows: count, isFetching: isFetching, pagination: pagination, onPaginationChange: setPagination, sorting: sorting, onSortingChange: setSorting, onExport: handleExport, isExporting: isExporting }));
-};
-const QueryDataTableWithSuspense = (props) => {
-    return (_jsx(Suspense, { fallback: _jsx(SpinnerPane, { className: "h-full w-full" }), children: _createElement(QueryDataTable, { ...props, key: props.query }) }));
+    const sanitizedQuery = useMemo(() => sanitizeQuery(query), [query]);
+    const pagedQuery = makePagedQuery(sanitizedQuery, sorting, pagination);
+    const queryResult = useSql({ query: pagedQuery });
+    const countQueryResult = useSql({
+        query: `SELECT COUNT(*)::int AS count FROM (${sanitizedQuery})`,
+    });
+    const arrowTableData = useArrowDataTable(queryResult.data?.arrowTable);
+    if (queryResult.error) {
+        return (_jsx("div", { className: "h-full w-full overflow-auto p-5", children: _jsx("pre", { className: "text-xs leading-tight text-red-500", children: queryResult.error?.message ?? 'Unknown error' }) }));
+    }
+    const numRows = countQueryResult.data
+        ? (countQueryResult.data.toArray()[0]?.count ?? 0)
+        : undefined;
+    return (_jsx(DataTablePaginated, { ...arrowTableData, className: className, fontSize: fontSize, numRows: numRows, isFetching: queryResult.isLoading, pagination: pagination, onPaginationChange: setPagination, sorting: sorting, onSortingChange: setSorting, footerActions: renderActions ? renderActions(sanitizedQuery) : null }));
 };
-export default QueryDataTableWithSuspense;
+export default QueryDataTable;
 //# sourceMappingURL=QueryDataTable.js.map

package/dist/QueryDataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryDataTable.js","sourceRoot":"","sources":["../src/QueryDataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {SpinnerPane} from '@sqlrooms/ui';\nimport {\n  escapeId,\n  useExportToCsv,\n  getColValAsNumber,\n  useDuckDb,\n} from '@sqlrooms/duckdb';\nimport {genRandomStr} from '@sqlrooms/utils';\nimport {PaginationState, SortingState} from '@tanstack/table-core';\nimport {FC, Suspense, useEffect, useMemo, useState} from 'react';\nimport DataTablePaginated from './DataTablePaginated';\nimport useArrowDataTable from './useArrowDataTable';\n\nexport type QueryDataTableProps = {\n  query: string;\n  queryKeyComponents?: unknown[];\n};\n\nconst QueryDataTable: FC<QueryDataTableProps> = ({query}) => {\n  const connector = useDuckDb();\n  const {exportToCsv} = useExportToCsv();\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 100,\n  });\n\n  const [count, setCount] = useState<number | undefined>(undefined);\n  const [data, setData] = useState<any>(null);\n  const [isFetching, setIsFetching] = useState(false);\n  const [isExporting, setIsExporting] = useState(false);\n\n  // Sanitize the query generated by LLM to remove trailing semicolons, comments, and extra spaces\n  const sanitizedQuery = useMemo(() => {\n    return query\n      .trim() // Remove leading/trailing whitespace\n      .replace(/;+$/, '') // Remove all trailing semicolons\n      .replace(/--.*$/gm, '') // Remove single-line comments\n      .replace(/\\/\\*[\\s\\S]*?\\*\\//g, '') // Remove multi-line comments\n      .replace(/\\s+/g, ' '); // Normalize whitespace to single spaces\n  }, [query]);\n\n  // Fetch row count\n  useEffect(() => {\n    const fetchCount = async () => {\n      try {\n        setIsFetching(true);\n        const countQuery = `SELECT COUNT(*)::int FROM (${sanitizedQuery})`;\n        const result = await connector.query(countQuery);\n        setCount(getColValAsNumber(result));\n      } catch (error) {\n        console.error('Error fetching count:', error);\n      } finally {\n        setIsFetching(false);\n      }\n    };\n\n    fetchCount();\n  }, [connector, sanitizedQuery]);\n\n  // Fetch data\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        setIsFetching(true);\n        const result = await connector.query(\n          `SELECT * FROM (\n            ${sanitizedQuery}\n          ) ${\n            sorting.length > 0\n              ? `ORDER BY ${sorting\n                  .map((d) => `${escapeId(d.id)}${d.desc ? ' DESC' : ''}`)\n                  .join(', ')}`\n              : ''\n          }\n          OFFSET ${pagination.pageIndex * pagination.pageSize}\n          LIMIT ${pagination.pageSize}`,\n        );\n        setData(result);\n      } catch (error) {\n        console.error('Error fetching data:', error);\n      } finally {\n        setIsFetching(false);\n      }\n    };\n\n    fetchData();\n  }, [pagination, sorting, connector, sanitizedQuery]);\n\n  const arrowTableData = useArrowDataTable(data);\n\n  const handleExport = async () => {\n    if (!query) return;\n    try {\n      setIsExporting(true);\n      await exportToCsv(query, `export-${genRandomStr(5)}.csv`);\n    } finally {\n      setIsExporting(false);\n    }\n  };\n\n  return (\n    <DataTablePaginated\n      {...arrowTableData}\n      pageCount={Math.ceil((count ?? 0) / pagination.pageSize)}\n      numRows={count}\n      isFetching={isFetching}\n      pagination={pagination}\n      onPaginationChange={setPagination}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      onExport={handleExport}\n      isExporting={isExporting}\n    />\n  );\n};\n\nconst QueryDataTableWithSuspense: FC<QueryDataTableProps> = (props) => {\n  return (\n    <Suspense fallback={<SpinnerPane className=\"h-full w-full\" />}>\n      <QueryDataTable\n        {...props}\n        key={props.query} // reset state when query changes\n      />\n    </Suspense>\n  );\n};\n\nexport default QueryDataTableWithSuspense;\n"]}
+{"version":3,"file":"QueryDataTable.js","sourceRoot":"","sources":["../src/QueryDataTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,aAAa,EAAE,MAAM,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAK,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,kBAEN,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAWvC,MAAM,cAAc,GAA4B,CAAC,EAC/C,SAAS,EACT,QAAQ,GAAG,WAAW,EACtB,KAAK,EACL,aAAa,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,yBAAyB,IAAC,KAAK,EAAE,KAAK,GAAI,GACvE,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAkB;QAC5D,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,GAAG;KACd,CAAC,CAAC;IAEH,gGAAgG;IAChG,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACpE,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IACvE,MAAM,WAAW,GAAG,MAAM,CAAC,EAAC,KAAK,EAAE,UAAU,EAAC,CAAC,CAAC;IAChD,MAAM,gBAAgB,GAAG,MAAM,CAAkB;QAC/C,KAAK,EAAE,uCAAuC,cAAc,GAAG;KAChE,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,iBAAiB,CAAC,WAAW,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAEvE,IAAI,WAAW,CAAC,KAAK,EAAE,CAAC;QACtB,OAAO,CACL,cAAK,SAAS,EAAC,iCAAiC,YAC9C,cAAK,SAAS,EAAC,oCAAoC,YAChD,WAAW,CAAC,KAAK,EAAE,OAAO,IAAI,eAAe,GAC1C,GACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI;QACnC,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC;QAClD,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,KAAC,kBAAkB,OACb,cAAc,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,WAAW,CAAC,SAAS,EACjC,UAAU,EAAE,UAAU,EACtB,kBAAkB,EAAE,aAAa,EACjC,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,UAAU,EAC3B,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,GACnE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {sanitizeQuery, useSql} from '@sqlrooms/duckdb';\nimport {PaginationState, SortingState} from '@tanstack/table-core';\nimport {FC, useMemo, useState} from 'react';\nimport DataTablePaginated, {\n  DataTablePaginatedProps,\n} from './DataTablePaginated';\nimport {QueryDataTableActionsMenu} from './QueryDataTableActionsMenu';\nimport useArrowDataTable from './useArrowDataTable';\nimport {makePagedQuery} from './utils';\n\nexport type QueryDataTableProps = {\n  className?: string;\n  /** Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base */\n  fontSize?: DataTablePaginatedProps<any>['fontSize'];\n  query: string;\n  queryKeyComponents?: unknown[];\n  renderActions?: (query: string) => React.ReactNode;\n};\n\nconst QueryDataTable: FC<QueryDataTableProps> = ({\n  className,\n  fontSize = 'text-base',\n  query,\n  renderActions = (query) => <QueryDataTableActionsMenu query={query} />,\n}) => {\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 100,\n  });\n\n  // Sanitize the query generated by LLM to remove trailing semicolons, comments, and extra spaces\n  const sanitizedQuery = useMemo(() => sanitizeQuery(query), [query]);\n  const pagedQuery = makePagedQuery(sanitizedQuery, sorting, pagination);\n  const queryResult = useSql({query: pagedQuery});\n  const countQueryResult = useSql<{count: number}>({\n    query: `SELECT COUNT(*)::int AS count FROM (${sanitizedQuery})`,\n  });\n  const arrowTableData = useArrowDataTable(queryResult.data?.arrowTable);\n\n  if (queryResult.error) {\n    return (\n      <div className=\"h-full w-full overflow-auto p-5\">\n        <pre className=\"text-xs leading-tight text-red-500\">\n          {queryResult.error?.message ?? 'Unknown error'}\n        </pre>\n      </div>\n    );\n  }\n\n  const numRows = countQueryResult.data\n    ? (countQueryResult.data.toArray()[0]?.count ?? 0)\n    : undefined;\n\n  return (\n    <DataTablePaginated\n      {...arrowTableData}\n      className={className}\n      fontSize={fontSize}\n      numRows={numRows}\n      isFetching={queryResult.isLoading}\n      pagination={pagination}\n      onPaginationChange={setPagination}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      footerActions={renderActions ? renderActions(sanitizedQuery) : null}\n    />\n  );\n};\n\nexport default QueryDataTable;\n"]}

package/dist/QueryDataTableActionsMenu.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export declare const QueryDataTableActionsMenu: FC<{
+    query: string;
+}>;
+//# sourceMappingURL=QueryDataTableActionsMenu.d.ts.map

package/dist/QueryDataTableActionsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryDataTableActionsMenu.d.ts","sourceRoot":"","sources":["../src/QueryDataTableActionsMenu.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAC,EAAE,EAAW,MAAM,OAAO,CAAC;AAMnC,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;CACf,CA4BA,CAAC"}

package/dist/QueryDataTableActionsMenu.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useExportToCsv } from '@sqlrooms/duckdb';
+import { DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuItem, } from '@sqlrooms/ui';
+import { formatTimestampForFilename } from '@sqlrooms/utils';
+import { DownloadIcon } from 'lucide-react';
+import { useState } from 'react';
+const makeExportFilename = (extension) => {
+    return `export-${formatTimestampForFilename()}.${extension}`;
+};
+export const QueryDataTableActionsMenu = ({ query }) => {
+    const { exportToCsv } = useExportToCsv();
+    const [isExporting, setIsExporting] = useState(false);
+    const handleExport = async () => {
+        if (!query)
+            return;
+        try {
+            setIsExporting(true);
+            await exportToCsv(query, makeExportFilename('csv'));
+        }
+        finally {
+            setIsExporting(false);
+        }
+    };
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "xs", disabled: isExporting, children: isExporting ? (_jsx("div", { className: "border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" })) : (_jsx(DownloadIcon, { className: "h-4 w-4" })) }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsx(DropdownMenuItem, { onClick: handleExport, children: "Export CSV" }) })] }));
+};
+//# sourceMappingURL=QueryDataTableActionsMenu.js.map

package/dist/QueryDataTableActionsMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryDataTableActionsMenu.js","sourceRoot":"","sources":["../src/QueryDataTableActionsMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,MAAM,EACN,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,0BAA0B,EAAC,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEnC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAC/C,OAAO,UAAU,0BAA0B,EAAE,IAAI,SAAS,EAAE,CAAC;AAC/D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAEjC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE;IACf,MAAM,EAAC,WAAW,EAAC,GAAG,cAAc,EAAE,CAAC;IACvC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,KAAK,IAAI,EAAE;QAC9B,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,IAAI,CAAC;YACH,cAAc,CAAC,IAAI,CAAC,CAAC;YACrB,MAAM,WAAW,CAAC,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC;QACtD,CAAC;gBAAS,CAAC;YACT,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IACF,OAAO,CACL,MAAC,YAAY,eACX,KAAC,mBAAmB,IAAC,OAAO,kBAC1B,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAE,WAAW,YACtD,WAAW,CAAC,CAAC,CAAC,CACb,cAAK,SAAS,EAAC,gFAAgF,GAAG,CACnG,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,IAAC,SAAS,EAAC,SAAS,GAAG,CACrC,GACM,GACW,EACtB,KAAC,mBAAmB,IAAC,KAAK,EAAC,KAAK,YAC9B,KAAC,gBAAgB,IAAC,OAAO,EAAE,YAAY,2BAA+B,GAClD,IACT,CAChB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {useExportToCsv} from '@sqlrooms/duckdb';\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  Button,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from '@sqlrooms/ui';\nimport {formatTimestampForFilename} from '@sqlrooms/utils';\nimport {DownloadIcon} from 'lucide-react';\nimport {FC, useState} from 'react';\n\nconst makeExportFilename = (extension: string) => {\n  return `export-${formatTimestampForFilename()}.${extension}`;\n};\n\nexport const QueryDataTableActionsMenu: FC<{\n  query: string;\n}> = ({query}) => {\n  const {exportToCsv} = useExportToCsv();\n  const [isExporting, setIsExporting] = useState(false);\n  const handleExport = async () => {\n    if (!query) return;\n    try {\n      setIsExporting(true);\n      await exportToCsv(query, makeExportFilename('csv'));\n    } finally {\n      setIsExporting(false);\n    }\n  };\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"xs\" disabled={isExporting}>\n          {isExporting ? (\n            <div className=\"border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n          ) : (\n            <DownloadIcon className=\"h-4 w-4\" />\n          )}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem onClick={handleExport}>Export CSV</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n"]}

package/dist/index.d.ts

@@ -8,4 +8,8 @@ export { default as DataTablePaginated } from './DataTablePaginated';
 export { default as DataTableVirtualized } from './DataTableVirtualized';
 export { default as QueryDataTable } from './QueryDataTable';
 export { default as useArrowDataTable } from './useArrowDataTable';
+export { ColumnTypeBadge } from './ColumnTypeBadge';
+export { DataTableArrowPaginated } from './DataTableArrowPaginated';
+export { QueryDataTableActionsMenu } from './QueryDataTableActionsMenu';
+export { makePagedQuery } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAC3D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,OAAO,IAAI,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAC,OAAO,IAAI,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAC3D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,OAAO,IAAI,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAC,OAAO,IAAI,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,uBAAuB,EAAC,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -8,4 +8,8 @@ export { default as DataTablePaginated } from './DataTablePaginated';
 export { default as DataTableVirtualized } from './DataTableVirtualized';
 export { default as QueryDataTable } from './QueryDataTable';
 export { default as useArrowDataTable } from './useArrowDataTable';
+export { ColumnTypeBadge } from './ColumnTypeBadge';
+export { DataTableArrowPaginated } from './DataTableArrowPaginated';
+export { QueryDataTableActionsMenu } from './QueryDataTableActionsMenu';
+export { makePagedQuery } from './utils';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAC3D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,OAAO,IAAI,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAC,OAAO,IAAI,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,MAAM,qBAAqB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport {default as DataTableModal} from './DataTableModal';\nexport * from './DataTablePaginated';\nexport {default as DataTablePaginated} from './DataTablePaginated';\nexport {default as DataTableVirtualized} from './DataTableVirtualized';\nexport {default as QueryDataTable} from './QueryDataTable';\nexport {default as useArrowDataTable} from './useArrowDataTable';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAC3D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,OAAO,IAAI,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAC,OAAO,IAAI,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,uBAAuB,EAAC,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport {default as DataTableModal} from './DataTableModal';\nexport * from './DataTablePaginated';\nexport {default as DataTablePaginated} from './DataTablePaginated';\nexport {default as DataTableVirtualized} from './DataTableVirtualized';\nexport {default as QueryDataTable} from './QueryDataTable';\nexport {default as useArrowDataTable} from './useArrowDataTable';\nexport {ColumnTypeBadge} from './ColumnTypeBadge';\nexport {DataTableArrowPaginated} from './DataTableArrowPaginated';\nexport {QueryDataTableActionsMenu} from './QueryDataTableActionsMenu';\nexport {makePagedQuery} from './utils';\n"]}

package/dist/useArrowDataTable.d.ts

@@ -8,6 +8,9 @@ export type ArrowColumnMeta = {
     type: arrow.DataType;
     isNumeric: boolean;
 };
-export default function useArrowDataTable(table: arrow.Table | undefined): UseArrowDataTableResult | undefined;
+export default function useArrowDataTable(table: arrow.Table | undefined, options?: {
+    /** Custom font size for the table e.g. xs, sm, md, lg, base */
+    fontSize?: string;
+}): UseArrowDataTableResult | undefined;
 export {};
 //# sourceMappingURL=useArrowDataTable.d.ts.map

package/dist/useArrowDataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useArrowDataTable.d.ts","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAOtC,KAAK,uBAAuB,GAAG;IAC7B,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACrB,OAAO,EAAE,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAkCF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,GAC7B,uBAAuB,GAAG,SAAS,CAuDrC"}
+{"version":3,"file":"useArrowDataTable.d.ts","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAOtC,KAAK,uBAAuB,GAAG;IAC7B,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACrB,OAAO,EAAE,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAkCF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,EAC9B,OAAO,GAAE;IACP,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACd,GACL,uBAAuB,GAAG,SAAS,CA4DrC"}

package/dist/useArrowDataTable.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Popover, PopoverContent, PopoverTrigger } from '@sqlrooms/ui';
-import { ClipboardIcon } from '@heroicons/react/24/outline';
+import { ClipboardIcon } from 'lucide-react';
 import { shorten } from '@sqlrooms/utils';
 import { createColumnHelper } from '@tanstack/react-table';
 import * as arrow from 'apache-arrow';
@@ -37,7 +37,8 @@ function valueToString(type, value) {
     return String(value);
 }
 // Only use for small tables or in combination with pagination
-export default function useArrowDataTable(table) {
+export default function useArrowDataTable(table, options = {}) {
+    const { fontSize = 'base' } = options ?? {};
     const data = useMemo(() => ({ length: table?.numRows ?? 0 }), [table]);
     const columns = useMemo(() => {
         if (!table)
@@ -48,7 +49,7 @@ export default function useArrowDataTable(table) {
                 cell: (info) => {
                     const value = info.getValue();
                     const valueStr = valueToString(field.type, value);
-                    return valueStr.length > MAX_VALUE_LENGTH ? (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("span", { className: "cursor-pointer", children: shorten(`${valueStr}`, MAX_VALUE_LENGTH) }) }), _jsx(PopoverContent, { className: "w-auto max-w-[500px] font-mono text-xs", children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "font-medium", children: `"${field.name}" (${field.type})` }), _jsxs("div", { className: "relative", children: [valueStr, _jsx(Button, { variant: "ghost", size: "icon", className: "absolute right-0 top-0 h-6 w-6", onClick: () => navigator.clipboard.writeText(valueStr), children: _jsx(ClipboardIcon, { className: "h-3 w-3" }) })] })] }) })] })) : (valueStr);
+                    return valueStr.length > MAX_VALUE_LENGTH ? (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("span", { className: "cursor-pointer", children: shorten(`${valueStr}`, MAX_VALUE_LENGTH) }) }), _jsx(PopoverContent, { className: `w-auto max-w-[500px] text-${fontSize}`, children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "font-medium", children: `"${field.name}" (${field.type})` }), _jsxs("div", { className: "relative", children: [_jsx("pre", { className: "whitespace-pre-wrap text-xs", children: valueStr }), _jsx(Button, { variant: "ghost", size: "icon", className: "absolute right-0 top-0 h-6 w-6", onClick: () => navigator.clipboard.writeText(valueStr), children: _jsx(ClipboardIcon, { className: "h-3 w-3" }) })] })] }) })] })) : (valueStr);
                 },
                 header: field.name,
                 meta: {
@@ -60,7 +61,7 @@ export default function useArrowDataTable(table) {
             }));
         }
         return columns;
-    }, [table]);
+    }, [table, fontSize]);
     return data && columns ? { data, columns } : undefined;
 }
 //# sourceMappingURL=useArrowDataTable.js.map

package/dist/useArrowDataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useArrowDataTable.js","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Button, Popover, PopoverContent, PopoverTrigger} from '@sqlrooms/ui';\nimport {ClipboardIcon} from '@heroicons/react/24/outline';\nimport {shorten} from '@sqlrooms/utils';\nimport {createColumnHelper} from '@tanstack/react-table';\nimport {ColumnDef} from '@tanstack/table-core';\nimport * as arrow from 'apache-arrow';\nimport {useMemo} from 'react';\n\nconst columnHelper = createColumnHelper();\n\n// TODO: support fetch the result chunks lazily https://github.com/duckdb/duckdb-wasm/tree/master/packages/duckdb-wasm#query-execution\n\ntype UseArrowDataTableResult = {\n  data: ArrayLike<any>;\n  columns: ColumnDef<any, any>[];\n};\n\nexport type ArrowColumnMeta = {\n  type: arrow.DataType;\n  isNumeric: boolean;\n};\n\nconst MAX_VALUE_LENGTH = 64;\n\nfunction valueToString(type: arrow.DataType, value: unknown): string {\n  if (value === null || value === undefined) {\n    return 'NULL';\n  }\n  if (arrow.DataType.isTimestamp(type)) {\n    switch (typeof value) {\n      case 'number':\n      case 'bigint':\n        return new Date(Number(value)).toISOString();\n      case 'string':\n        return new Date(value).toISOString();\n    }\n  }\n  if (arrow.DataType.isTime(type)) {\n    switch (typeof value) {\n      case 'number':\n      case 'bigint':\n        return new Date(Number(value) / 1000).toISOString().substring(11, 19);\n      case 'string':\n        return new Date(value).toISOString().substring(11, 19);\n    }\n  }\n  if (arrow.DataType.isDate(type)) {\n    if (value instanceof Date) {\n      return value.toISOString();\n    }\n  }\n  return String(value);\n}\n// Only use for small tables or in combination with pagination\nexport default function useArrowDataTable(\n  table: arrow.Table | undefined,\n): UseArrowDataTableResult | undefined {\n  const data = useMemo(() => ({length: table?.numRows ?? 0}), [table]);\n  const columns = useMemo(() => {\n    if (!table) return undefined;\n    const columns: ColumnDef<any, any>[] = [];\n    for (const field of table.schema.fields) {\n      columns.push(\n        columnHelper.accessor((_row, i) => table.getChild(field.name)?.get(i), {\n          cell: (info) => {\n            const value = info.getValue();\n            const valueStr = valueToString(field.type, value);\n\n            return valueStr.length > MAX_VALUE_LENGTH ? (\n              <Popover>\n                <PopoverTrigger asChild>\n                  <span className=\"cursor-pointer\">\n                    {shorten(`${valueStr}`, MAX_VALUE_LENGTH)}\n                  </span>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto max-w-[500px] font-mono text-xs\">\n                  <div className=\"space-y-2\">\n                    <div className=\"font-medium\">{`\"${field.name}\" (${field.type})`}</div>\n                    <div className=\"relative\">\n                      {valueStr}\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"absolute right-0 top-0 h-6 w-6\"\n                        onClick={() => navigator.clipboard.writeText(valueStr)}\n                      >\n                        <ClipboardIcon className=\"h-3 w-3\" />\n                      </Button>\n                    </div>\n                  </div>\n                </PopoverContent>\n              </Popover>\n            ) : (\n              valueStr\n            );\n          },\n          header: field.name,\n          meta: {\n            type: field.type,\n            isNumeric:\n              arrow.DataType.isFloat(field.type) ||\n              arrow.DataType.isDecimal(field.type) ||\n              arrow.DataType.isInt(field.type),\n          },\n        }),\n      );\n    }\n    return columns;\n  }, [table]);\n\n  return data && columns ? {data, columns} : undefined;\n}\n"]}
+{"version":3,"file":"useArrowDataTable.js","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Button, Popover, PopoverContent, PopoverTrigger} from '@sqlrooms/ui';\nimport {ClipboardIcon} from 'lucide-react';\nimport {shorten} from '@sqlrooms/utils';\nimport {createColumnHelper} from '@tanstack/react-table';\nimport {ColumnDef} from '@tanstack/table-core';\nimport * as arrow from 'apache-arrow';\nimport {useMemo} from 'react';\n\nconst columnHelper = createColumnHelper();\n\n// TODO: support fetch the result chunks lazily https://github.com/duckdb/duckdb-wasm/tree/master/packages/duckdb-wasm#query-execution\n\ntype UseArrowDataTableResult = {\n  data: ArrayLike<any>;\n  columns: ColumnDef<any, any>[];\n};\n\nexport type ArrowColumnMeta = {\n  type: arrow.DataType;\n  isNumeric: boolean;\n};\n\nconst MAX_VALUE_LENGTH = 64;\n\nfunction valueToString(type: arrow.DataType, value: unknown): string {\n  if (value === null || value === undefined) {\n    return 'NULL';\n  }\n  if (arrow.DataType.isTimestamp(type)) {\n    switch (typeof value) {\n      case 'number':\n      case 'bigint':\n        return new Date(Number(value)).toISOString();\n      case 'string':\n        return new Date(value).toISOString();\n    }\n  }\n  if (arrow.DataType.isTime(type)) {\n    switch (typeof value) {\n      case 'number':\n      case 'bigint':\n        return new Date(Number(value) / 1000).toISOString().substring(11, 19);\n      case 'string':\n        return new Date(value).toISOString().substring(11, 19);\n    }\n  }\n  if (arrow.DataType.isDate(type)) {\n    if (value instanceof Date) {\n      return value.toISOString();\n    }\n  }\n  return String(value);\n}\n// Only use for small tables or in combination with pagination\nexport default function useArrowDataTable(\n  table: arrow.Table | undefined,\n  options: {\n    /** Custom font size for the table e.g. xs, sm, md, lg, base */\n    fontSize?: string;\n  } = {},\n): UseArrowDataTableResult | undefined {\n  const {fontSize = 'base'} = options ?? {};\n  const data = useMemo(() => ({length: table?.numRows ?? 0}), [table]);\n  const columns = useMemo(() => {\n    if (!table) return undefined;\n    const columns: ColumnDef<any, any>[] = [];\n    for (const field of table.schema.fields) {\n      columns.push(\n        columnHelper.accessor((_row, i) => table.getChild(field.name)?.get(i), {\n          cell: (info) => {\n            const value = info.getValue();\n            const valueStr = valueToString(field.type, value);\n\n            return valueStr.length > MAX_VALUE_LENGTH ? (\n              <Popover>\n                <PopoverTrigger asChild>\n                  <span className=\"cursor-pointer\">\n                    {shorten(`${valueStr}`, MAX_VALUE_LENGTH)}\n                  </span>\n                </PopoverTrigger>\n                <PopoverContent\n                  className={`w-auto max-w-[500px] text-${fontSize}`}\n                >\n                  <div className=\"space-y-2\">\n                    <div className=\"font-medium\">{`\"${field.name}\" (${field.type})`}</div>\n                    <div className=\"relative\">\n                      <pre className=\"whitespace-pre-wrap text-xs\">\n                        {valueStr}\n                      </pre>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"absolute right-0 top-0 h-6 w-6\"\n                        onClick={() => navigator.clipboard.writeText(valueStr)}\n                      >\n                        <ClipboardIcon className=\"h-3 w-3\" />\n                      </Button>\n                    </div>\n                  </div>\n                </PopoverContent>\n              </Popover>\n            ) : (\n              valueStr\n            );\n          },\n          header: field.name,\n          meta: {\n            type: field.type,\n            isNumeric:\n              arrow.DataType.isFloat(field.type) ||\n              arrow.DataType.isDecimal(field.type) ||\n              arrow.DataType.isInt(field.type),\n          },\n        }),\n      );\n    }\n    return columns;\n  }, [table, fontSize]);\n\n  return data && columns ? {data, columns} : undefined;\n}\n"]}

package/dist/utils.d.ts

@@ -0,0 +1,10 @@
+import { PaginationState, SortingState } from '@tanstack/table-core';
+/**
+ * Make a paged query from a query and pagination/sorting state.
+ * @param query - The query to make paged.
+ * @param sorting - The sorting state.
+ * @param pagination - The pagination state.
+ * @returns The paged query.
+ */
+export declare function makePagedQuery(query: string, sorting: SortingState, pagination: PaginationState): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,eAAe,EAAE,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAEnE;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE,eAAe,UAa5B"}

package/dist/utils.js

@@ -0,0 +1,20 @@
+import { escapeId } from '@sqlrooms/duckdb';
+/**
+ * Make a paged query from a query and pagination/sorting state.
+ * @param query - The query to make paged.
+ * @param sorting - The sorting state.
+ * @param pagination - The pagination state.
+ * @returns The paged query.
+ */
+export function makePagedQuery(query, sorting, pagination) {
+    return `SELECT * FROM (
+    ${query}
+    ) ${sorting.length > 0
+        ? `ORDER BY ${sorting
+            .map((d) => `${escapeId(d.id)}${d.desc ? ' DESC' : ''}`)
+            .join(', ')}`
+        : ''}
+    OFFSET ${pagination.pageIndex * pagination.pageSize}
+    LIMIT ${pagination.pageSize}`;
+}
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAG1C;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAa,EACb,OAAqB,EACrB,UAA2B;IAE3B,OAAO;MACH,KAAK;QAEL,OAAO,CAAC,MAAM,GAAG,CAAC;QAChB,CAAC,CAAC,YAAY,OAAO;aAChB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;aACvD,IAAI,CAAC,IAAI,CAAC,EAAE;QACjB,CAAC,CAAC,EACN;aACS,UAAU,CAAC,SAAS,GAAG,UAAU,CAAC,QAAQ;YAC3C,UAAU,CAAC,QAAQ,EAAE,CAAC;AAClC,CAAC","sourcesContent":["import {escapeId} from '@sqlrooms/duckdb';\nimport {PaginationState, SortingState} from '@tanstack/table-core';\n\n/**\n * Make a paged query from a query and pagination/sorting state.\n * @param query - The query to make paged.\n * @param sorting - The sorting state.\n * @param pagination - The pagination state.\n * @returns The paged query.\n */\nexport function makePagedQuery(\n  query: string,\n  sorting: SortingState,\n  pagination: PaginationState,\n) {\n  return `SELECT * FROM (\n    ${query}\n    ) ${\n      sorting.length > 0\n        ? `ORDER BY ${sorting\n            .map((d) => `${escapeId(d.id)}${d.desc ? ' DESC' : ''}`)\n            .join(', ')}`\n        : ''\n    }\n    OFFSET ${pagination.pageIndex * pagination.pageSize}\n    LIMIT ${pagination.pageSize}`;\n}\n"]}

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@sqlrooms/data-table",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
   "type": "module",
-  "private": false,
   "author": "Ilya Boyandin <ilya@boyandin.me>",
   "license": "MIT",
   "repository": {
@@ -19,12 +18,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@heroicons/react": "*",
-    "@sqlrooms/duckdb": "0.15.0",
-    "@sqlrooms/ui": "0.15.0",
-    "@sqlrooms/utils": "0.15.0",
-    "@tanstack/react-table": "^8.10.7",
-    "@tanstack/table-core": "^8.10.7",
+    "@sqlrooms/duckdb": "0.16.0",
+    "@sqlrooms/ui": "0.16.0",
+    "@sqlrooms/utils": "0.16.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/table-core": "^8.21.3",
+    "lucide-react": "^0.503.0",
     "react-virtual": "2.10.4"
   },
   "peerDependencies": {
@@ -38,5 +37,5 @@
     "lint": "eslint .",
     "typedoc": "typedoc"
   },
-  "gitHead": "6eb76a841a2ccb40d190720d309db51f1e8a9088"
+  "gitHead": "94dfdc97417dd715b9d6886122a3944b789b0b13"
 }