@sqlrooms/data-table 0.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @sqlrooms/data-table@0.0.0 build /Users/ilya/Workspace/sqlrooms/packages/data-table
+> tsc
+

package/.turbo/turbo-dev.log

@@ -0,0 +1,7 @@
+
+
+> @sqlrooms/data-table@1.0.0 dev /Users/ilya/Workspace/sqlrooms/packages/data-table
+> tsc -w
+
+[7:31:02 PM] Starting compilation in watch mode...
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,31 @@
+
+> @sqlrooms/data-table@0.0.0 lint /Users/ilya/Workspace/sqlrooms/packages/data-table
+> eslint .
+
+
+/Users/ilya/Workspace/sqlrooms/packages/data-table/src/DataTablePaginated.tsx
+  41:29  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  68:36  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Users/ilya/Workspace/sqlrooms/packages/data-table/src/DataTableVirtualized.tsx
+   26:29  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+   28:11  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+   34:28  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+   83:66  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  139:66  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  186:27  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Users/ilya/Workspace/sqlrooms/packages/data-table/src/QueryDataTable.tsx
+  16:24  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  28:36  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Users/ilya/Workspace/sqlrooms/packages/data-table/src/useArrowDataTable.tsx
+  14:19  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  15:22  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  15:27  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  25:53  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  61:30  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  61:35  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+✖ 16 problems (0 errors, 16 warnings)
+

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+
+
+**Note:** Version bump only for package @sqlrooms/data-table

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright 2025 Ilya Boyandin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/DataTableModal.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+type Props = {
+    title: string | undefined;
+    query: string | undefined;
+    tableModal: {
+        isOpen: boolean;
+        onClose: () => void;
+    };
+};
+declare const DataTableModal: FC<Props>;
+export default DataTableModal;
+//# sourceMappingURL=DataTableModal.d.ts.map

package/dist/DataTableModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableModal.d.ts","sourceRoot":"","sources":["../src/DataTableModal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAGzB,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE,OAAO,CAAC;QAChB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAqB7B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/DataTableModal.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '@sqlrooms/ui';
+import QueryDataTable from './QueryDataTable';
+const DataTableModal = ({ title, query, tableModal }) => {
+    return (_jsx(Dialog, { open: tableModal.isOpen, onOpenChange: (isOpen) => !isOpen && tableModal.onClose(), children: _jsxs(DialogContent, { className: "h-[80vh] max-w-[75vw]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: title ? `Table "${title}"` : '' }) }), _jsx("div", { className: "flex-1 bg-muted overflow-hidden", children: tableModal.isOpen && query ? _jsx(QueryDataTable, { query: query }) : null }), _jsx(DialogFooter, { children: _jsx(Button, { variant: "outline", onClick: tableModal.onClose, children: "Close" }) })] }) }));
+};
+export default DataTableModal;

package/dist/DataTablePaginated.d.ts

@@ -0,0 +1,16 @@
+import { ColumnDef, PaginationState, SortingState } from '@tanstack/react-table';
+export type DataTablePaginatedProps<Data extends object> = {
+    data?: ArrayLike<Data> | undefined;
+    columns?: ColumnDef<Data, any>[] | undefined;
+    pageCount?: number | undefined;
+    numRows?: number | undefined;
+    isFetching?: boolean;
+    isExporting?: boolean;
+    pagination?: PaginationState;
+    sorting?: SortingState;
+    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;
+//# sourceMappingURL=DataTablePaginated.d.ts.map

package/dist/DataTablePaginated.d.ts.map

@@ -0,0 +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,2CAuO/B"}

package/dist/DataTablePaginated.js

@@ -0,0 +1,65 @@
+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 { 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, }) {
+    const defaultData = useMemo(() => [], []);
+    const table = useReactTable({
+        data: (data ?? defaultData),
+        columns: columns ?? [],
+        pageCount: pageCount ?? -1,
+        getSortedRowModel: getSortedRowModel(),
+        onSortingChange: (update) => {
+            if (onSortingChange && sorting && typeof update === 'function') {
+                onSortingChange(update(sorting));
+            }
+        },
+        onPaginationChange: (update) => {
+            if (onPaginationChange && pagination && typeof update === 'function') {
+                onPaginationChange(update(pagination));
+            }
+        },
+        getCoreRowModel: getCoreRowModel(),
+        manualPagination: true,
+        state: {
+            pagination,
+            sorting,
+        },
+    });
+    const [internalPageIndex, setInternalPageIndex] = useState(pagination?.pageIndex ?? 0);
+    useEffect(() => {
+        setInternalPageIndex(pagination?.pageIndex ?? 0);
+    }, [pagination?.pageIndex]);
+    return (_jsxs("div", { className: "relative w-full h-full flex flex-col", children: [_jsx("div", { className: "flex-1 overflow-hidden border border-border font-mono", children: _jsx("div", { className: "overflow-auto h-full", children: _jsxs(Table, { disableWrapper: true, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsxs(TableRow, { children: [_jsx(TableHead, { className: `
+                      sticky top-0 left-0 w-auto whitespace-nowrap py-2 
+                      bg-background border-r text-center z-20
+                    `, children: isFetching ? (_jsx("div", { className: "animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full" })) : null }), headerGroup.headers.map((header) => {
+                                            const meta = header.column.columnDef
+                                                .meta;
+                                            return (_jsx(TableHead, { colSpan: header.colSpan, className: `
+                          sticky top-0 w-auto whitespace-nowrap cursor-pointer py-2 
+                          bg-background border-r hover:bg-muted/80 z-10
+                          ${meta?.isNumeric ? 'text-right' : 'text-left'}
+                        `, onClick: header.column.getToggleSortingHandler(), children: _jsxs("div", { className: "flex gap-2 items-center", 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: "opacity-30 text-[9px] max-w-[70px] truncate", children: String(meta?.type) })] }) }, header.id));
+                                        }), _jsx(TableHead, { className: "sticky top-0 w-full whitespace-nowrap py-2 bg-background border-r border-t" })] }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, i) => (_jsxs(TableRow, { className: "hover:bg-muted/50", children: [_jsx(TableCell, { className: "text-xs border-r bg-muted text-center text-muted-foreground sticky left-0", children: pagination
+                                                ? `${pagination.pageIndex * pagination.pageSize + i + 1}`
+                                                : '' }), row.getVisibleCells().map((cell) => {
+                                            const meta = cell.column.columnDef.meta;
+                                            return (_jsx(TableCell, { className: `
+                          text-[11px] border-r max-w-[500px] overflow-hidden truncate px-7
+                          ${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: "sticky bottom-0 left-0 bg-background p-2 flex gap-2 items-center flex-wrap border border-t-0", 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: "flex items-center text-sm ml-1 gap-1", children: [_jsx("div", { children: "Page" }), _jsx(Input, { type: "number", min: 1, max: table.getPageCount(), className: "w-16 h-8", 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: "w-[110px] h-8", 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: "animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full mr-2" })) : (_jsx(ArrowDownIcon, { className: "h-4 w-4 mr-2" })), "Export CSV"] })) : null] }), isFetching ? (_jsx("div", { className: "absolute inset-0 bg-background/80 animate-pulse" })) : null] }));
+}

package/dist/DataTableVirtualized.d.ts

@@ -0,0 +1,15 @@
+import { ColumnDef } from '@tanstack/react-table';
+export type Props<Data extends object> = {
+    data?: ArrayLike<Data>;
+    columns?: ColumnDef<Data, any>[];
+    isFetching?: boolean;
+    error?: any;
+    isPreview?: boolean;
+};
+export type DataTableProps<Data extends object> = {
+    data: ArrayLike<Data>;
+    columns: ColumnDef<Data, any>[];
+    isPreview?: boolean;
+};
+export default function DataTableWithLoader<Data extends object>(props: Props<Data>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=DataTableVirtualized.d.ts.map

package/dist/DataTableVirtualized.d.ts.map

@@ -0,0 +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,KAAK,CAAC,IAAI,SAAS,MAAM,IAAI;IACvC,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;AA0IF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,IAAI,SAAS,MAAM,EAC7D,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,kDAenB"}

package/dist/DataTableVirtualized.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge, } from '@sqlrooms/ui';
+import { ErrorPane, SpinnerPane } from '@sqlrooms/ui';
+import { formatCount } from '@sqlrooms/utils';
+import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import * as React from 'react';
+import { useVirtual } from 'react-virtual';
+const DataTableVirtualized = React.memo(function DataTableVirtualized({ data, columns, isPreview }) {
+    const [sorting, setSorting] = React.useState([]);
+    const table = useReactTable({
+        columns,
+        data: data,
+        onSortingChange: setSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        state: {
+            sorting,
+        },
+    });
+    const tableContainerRef = React.useRef(null);
+    const { rows } = table.getRowModel();
+    const rowVirtualizer = useVirtual({
+        parentRef: tableContainerRef,
+        size: rows.length,
+        overscan: 20,
+    });
+    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+    const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
+    const paddingBottom = virtualRows.length > 0
+        ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0)
+        : 0;
+    return (_jsxs("div", { className: "flex flex-col overflow-hidden", children: [_jsx("div", { className: "overflow-hidden border border-border", children: _jsx("div", { ref: tableContainerRef, className: "overflow-auto h-full", children: _jsxs(Table, { disableWrapper: true, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsxs(TableRow, { children: [_jsx(TableHead, { className: `
+                      sticky top-0 left-0 w-auto whitespace-nowrap py-2 
+                      bg-background border-r text-center z-20
+                    ` }), headerGroup.headers.map((header) => {
+                                            const meta = header.column.columnDef.meta;
+                                            return (_jsx(TableHead, { className: `
+                          sticky top-0 font-mono whitespace-nowrap cursor-pointer px-7 py-2
+                          bg-background border-r hover:bg-muted/80 z-10
+                          ${meta?.isNumeric ? 'text-right' : 'text-left'}
+                        `, onClick: header.column.getToggleSortingHandler(), children: _jsxs("div", { className: `flex items-center gap-1 ${meta?.isNumeric ? 'justify-end' : 'justify-start'}`, 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: "opacity-30 text-[9px]", children: String(meta?.type) })] }) }, header.id));
+                                        })] }, headerGroup.id))) }), _jsxs(TableBody, { children: [paddingTop > 0 && (_jsx(TableRow, { children: _jsx(TableCell, { style: { height: `${paddingTop}px` } }) })), virtualRows.map((virtualRow) => {
+                                        const row = rows[virtualRow.index];
+                                        if (!row)
+                                            return null;
+                                        return (_jsxs(TableRow, { className: "hover:bg-muted/50", children: [_jsx(TableCell, { className: "text-xs border-r bg-muted text-center text-muted-foreground sticky left-0", children: virtualRow.index + 1 }), row.getVisibleCells().map((cell) => {
+                                                    const meta = cell.column.columnDef.meta;
+                                                    return (_jsx(TableCell, { className: `
+                            text-xs border-r max-w-[500px] overflow-hidden truncate px-7
+                            ${meta?.isNumeric ? 'text-right' : 'text-left'}
+                          `, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                                })] }, row.id));
+                                    }), paddingBottom > 0 && (_jsx(TableRow, { children: _jsx(TableCell, { style: { height: `${paddingBottom}px` } }) }))] })] }) }) }), _jsx("div", { className: "sticky bottom-0 left-0 py-2 px-4 text-xs font-mono bg-background border border-t-0", children: `${isPreview ? 'Preview of the first ' : ''}${formatCount(data.length)} rows` })] }));
+});
+export default function DataTableWithLoader(props) {
+    const { isPreview, isFetching, error, ...rest } = props;
+    const { data, columns } = rest;
+    return error ? (_jsx(ErrorPane, { error: error })) : isFetching ? (_jsx(SpinnerPane, { h: "100%" })) : data && columns ? (_jsx(DataTableVirtualized, { data: data, columns: columns, isPreview: isPreview })) : null;
+}

package/dist/QueryDataTable.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type Props = {
+    query: string;
+    queryKeyComponents?: any[];
+};
+declare const QueryDataTableWithSuspense: FC<Props>;
+export default QueryDataTableWithSuspense;
+//# sourceMappingURL=QueryDataTable.d.ts.map

package/dist/QueryDataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryDataTable.d.ts","sourceRoot":"","sources":["../src/QueryDataTable.tsx"],"names":[],"mappings":"AASA,OAAO,EAAC,EAAE,EAAgC,MAAM,OAAO,CAAC;AAIxD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,GAAG,EAAE,CAAC;CAC5B,CAAC;AAyFF,QAAA,MAAM,0BAA0B,EAAE,EAAE,CAAC,KAAK,CASzC,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/dist/QueryDataTable.js

@@ -0,0 +1,79 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpinnerPane } from '@sqlrooms/ui';
+import { escapeId, exportToCsv, getColValAsNumber, useDuckDb, } from '@sqlrooms/duckdb';
+import { genRandomStr } from '@sqlrooms/utils';
+import { Suspense, useEffect, useState } from 'react';
+import DataTablePaginated from './DataTablePaginated';
+import useArrowDataTable from './useArrowDataTable';
+const QueryDataTable = ({ query }) => {
+    const { conn } = useDuckDb();
+    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);
+    // Fetch row count
+    useEffect(() => {
+        const fetchCount = async () => {
+            try {
+                setIsFetching(true);
+                const result = await conn.query(`SELECT COUNT(*)::int FROM (${query})`);
+                setCount(getColValAsNumber(result));
+            }
+            catch (error) {
+                console.error('Error fetching count:', error);
+            }
+            finally {
+                setIsFetching(false);
+            }
+        };
+        fetchCount();
+    }, [query, conn]);
+    // Fetch data
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setIsFetching(true);
+                const result = await conn.query(`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}`);
+                setData(result);
+            }
+            catch (error) {
+                console.error('Error fetching data:', error);
+            }
+            finally {
+                setIsFetching(false);
+            }
+        };
+        fetchData();
+    }, [query, pagination, sorting, conn]);
+    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: "w-full h-full" }), children: _createElement(QueryDataTable, { ...props, key: props.query }) }));
+};
+export default QueryDataTableWithSuspense;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { default as DataTableModal } from './DataTableModal';
+export * from './DataTablePaginated';
+export { default as DataTablePaginated } from './DataTablePaginated';
+export { default as DataTableVirtualized } from './DataTableVirtualized';
+export { default as QueryDataTable } from './QueryDataTable';
+export { default as useArrowDataTable } from './useArrowDataTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,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"}

package/dist/index.js

@@ -0,0 +1,6 @@
+export { default as DataTableModal } from './DataTableModal';
+export * from './DataTablePaginated';
+export { default as DataTablePaginated } from './DataTablePaginated';
+export { default as DataTableVirtualized } from './DataTableVirtualized';
+export { default as QueryDataTable } from './QueryDataTable';
+export { default as useArrowDataTable } from './useArrowDataTable';