npm - @sqlrooms/data-table - Versions diffs - 0.28.1-rc.0 → 0.29.0-rc.0 - Mend

@sqlrooms/data-table 0.28.1-rc.0 → 0.29.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/DataTablePaginated.d.ts.map +1 -1
package/dist/DataTablePaginated.js +12 -13
package/dist/DataTablePaginated.js.map +1 -1
package/dist/QueryDataTable.d.ts +3 -0
package/dist/QueryDataTable.d.ts.map +1 -1
package/dist/QueryDataTable.js +5 -4
package/dist/QueryDataTable.js.map +1 -1
package/dist/QueryDataTableActionsMenu.d.ts.map +1 -1
package/dist/QueryDataTableActionsMenu.js +1 -1
package/dist/QueryDataTableActionsMenu.js.map +1 -1
package/package.json +6 -6

package/dist/DataTablePaginated.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTablePaginated.d.ts","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"AAsBA,OAAO,EACL,SAAS,EAIT,eAAe,EACf,GAAG,EACH,iBAAiB,EACjB,YAAY,EAEb,MAAM,uBAAuB,CAAC;AAY/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;IAClD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAClB,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;QACf,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;KAC9C,KAAK,IAAI,CAAC;IACX;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QACxB,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;QACf,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;KAC9C,KAAK,IAAI,CAAC;IACX;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,IAAI,SAAS,MAAM,EAAE,EAC9D,SAAS,EACT,QAAoB,EACpB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,oBAAoB,GACrB,EAAE,uBAAuB,CAAC,IAAI,CAAC,~~2CA6T~~/B"}
1	+ {"version":3,"file":"DataTablePaginated.d.ts","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"AAsBA,OAAO,EACL,SAAS,EAIT,eAAe,EACf,GAAG,EACH,iBAAiB,EACjB,YAAY,EAEb,MAAM,uBAAuB,CAAC;AAY/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;IAClD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAClB,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;QACf,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;KAC9C,KAAK,IAAI,CAAC;IACX;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QACxB,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;QACf,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;KAC9C,KAAK,IAAI,CAAC;IACX;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,IAAI,SAAS,MAAM,EAAE,EAC9D,SAAS,EACT,QAAoB,EACpB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,oBAAoB,GACrB,EAAE,uBAAuB,CAAC,IAAI,CAAC,2CA+T/B"}

package/dist/DataTablePaginated.js CHANGED Viewed

@@ -64,8 +64,7 @@ export default function DataTablePaginated({ className, fontSize = 'text-xs', da
     useEffect(() => {
         setInternalPageIndex(pagination?.pageIndex ?? 0);
     }, [pagination?.pageIndex]);
-    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: _jsxs(ScrollArea, { 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 -top-px left-0 z-10 w-auto border-r py-2 text-center whitespace-nowrap`, children: isFetching ? (_jsx("div", { className: "border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" })) : enableRowSelection ? (_jsx(Checkbox, { checked: table.getIsAllPageRowsSelected() ||
-                                                        (table.getIsSomePageRowsSelected() && 'indeterminate'), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value), "aria-label": "Select all" })) : null }), headerGroup.headers.map((header) => {
+    return (_jsxs("div", { className: cn(`relative flex h-full w-full flex-col border`, className), children: [_jsx("div", { className: cn('flex-1 overflow-hidden font-mono', isFetching && 'pointer-events-none opacity-50'), children: _jsxs(ScrollArea, { 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 -top-px left-0 z-10 w-auto border-r py-2 text-center whitespace-nowrap`, 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: cn('bg-background hover:bg-muted sticky -top-px z-10 w-auto border-r py-2 whitespace-nowrap', pagination ? 'cursor-pointer' : '', meta?.isNumeric ? 'text-right' : 'text-left', fontSizeClass), 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));
@@ -82,16 +81,16 @@ export default function DataTablePaginated({ className, fontSize = 'text-xs', da
                                             : undefined, children: [_jsx(TableCell, { className: `bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSizeClass}`, children: enableRowSelection ? (_jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), onClick: (event) => event.stopPropagation(), "aria-label": "Select row" })) : pagination ? (`${pagination.pageIndex * pagination.pageSize + i + 1}`) : (`${i + 1}`) }), row.getVisibleCells().map((cell) => {
                                                 const meta = cell.column.columnDef.meta;
                                                 return (_jsx(TableCell, { className: cn('max-w-[500px] truncate overflow-hidden border-r px-7', fontSizeClass, 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))) })] }), _jsx(ScrollBar, { orientation: "vertical", className: "z-50" }), _jsx(ScrollBar, { orientation: "horizontal" })] }) }), 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 ${fontSizeClass}`, 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 ${fontSizeClass}`, children: `${formatCount(numRows)} rows` })) : null }), footerActions] })) : null, isFetching ? (_jsx("div", { className: "bg-background/80 absolute inset-0 animate-pulse" })) : null] }));
+                                            }), _jsx(TableCell, { children: "\u00A0" })] }, row.id))) })] }), _jsx(ScrollBar, { orientation: "vertical", className: "z-50" }), _jsx(ScrollBar, { orientation: "horizontal" })] }) }), _jsx("div", { className: "bg-background sticky bottom-0 left-0 flex h-[45px] items-center gap-2 border-t px-2", children: isFetching ? (_jsx("div", { className: "ml-2 text-xs", children: "Loading..." })) : (_jsxs(_Fragment, { children: [pagination ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-1 truncate", children: [_jsx(Button, { variant: "ghost", size: "xs", className: "h-7 w-7", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronDoubleLeftIcon, { size: 16 }) }), _jsx(Button, { variant: "ghost", size: "xs", className: "h-7 w-7", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, { size: 16 }) }), _jsxs("div", { className: `ml-1 flex items-center gap-1 ${fontSizeClass}`, children: [_jsx("div", { children: "Page" }), _jsx(Input, { type: "number", min: 1, max: table.getPageCount(), className: "h-7 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: "ghost", size: "xs", className: "h-7 w-7", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: _jsx(ChevronRightIcon, { size: 16 }) }), _jsx(Button, { variant: "ghost", size: "xs", className: "h-7 w-7", onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), children: _jsx(ChevronDoubleRightIcon, { size: 16 }) }), _jsxs(Select, { value: String(table.getState().pagination.pageSize), onValueChange: (value) => table.setPageSize(Number(value)), children: [_jsx(SelectTrigger, { className: "hidden h-7 w-[110px] lg:inline-flex", 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: "min-w-0 flex-1" })] })) : null, numRows !== undefined && isFinite(numRows) ? (_jsx("div", { className: `min-w-fit font-normal ${fontSizeClass}`, children: `${formatCount(numRows)} rows` })) : null, footerActions] })) })] }));
 }
 //# sourceMappingURL=DataTablePaginated.js.map

package/dist/DataTablePaginated.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTablePaginated.js","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Badge,\n Button,\n Checkbox,\n cn,\n Input,\n resolveFontSizeClass,\n ScrollArea,\n ScrollBar,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n ColumnDef,\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n PaginationState,\n Row,\n RowSelectionState,\n SortingState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {\n ChevronsLeftIcon as ChevronDoubleLeftIcon,\n ChevronsRightIcon as ChevronDoubleRightIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from 'lucide-react';\nimport {useCallback, useEffect, useMemo, useRef, 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 Called when a row is clicked.\n /\n onRowClick?: (args: {\n row: Row<Data>;\n event: React.MouseEvent<HTMLTableRowElement>;\n }) => void;\n /\n Called when a row is double-clicked.\n /\n onRowDoubleClick?: (args: {\n row: Row<Data>;\n event: React.MouseEvent<HTMLTableRowElement>;\n }) => void;\n /\n Enables row selection with checkboxes. When true, a checkbox column is added.\n /\n enableRowSelection?: boolean;\n /\n Controlled row selection state. Keys are row indices, values are selection status.\n /\n rowSelection?: RowSelectionState;\n /\n Called when row selection changes.\n /\n onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n};\n\n/\n Data table with pagination, sorting, row selection, and custom actions.\n /\nexport default function DataTablePaginated<Data extends object>({\n className,\n fontSize = 'text-xs',\n data,\n columns,\n numRows,\n pagination,\n sorting,\n onPaginationChange,\n onSortingChange,\n footerActions,\n isFetching,\n onRowClick,\n onRowDoubleClick,\n enableRowSelection,\n rowSelection,\n onRowSelectionChange,\n}: DataTablePaginatedProps<Data>) {\n const defaultData = useMemo(() => [], []);\n const [internalRowSelection, setInternalRowSelection] =\n useState<RowSelectionState>({});\n\n // Use controlled or uncontrolled row selection\n const currentRowSelection = rowSelection ?? internalRowSelection;\n const currentRowSelectionRef = useRef(currentRowSelection);\n\n useEffect(() => {\n currentRowSelectionRef.current = currentRowSelection;\n }, [currentRowSelection]);\n\n const handleRowSelectionChange = useCallback(\n (\n updaterOrValue:\n \| RowSelectionState\n \| ((old: RowSelectionState) => RowSelectionState),\n ) => {\n if (onRowSelectionChange) {\n const newValue =\n typeof updaterOrValue === 'function'\n ? updaterOrValue(currentRowSelectionRef.current)\n : updaterOrValue;\n onRowSelectionChange(newValue);\n } else {\n setInternalRowSelection(updaterOrValue);\n }\n },\n [onRowSelectionChange, setInternalRowSelection],\n );\n\n const fontSizeClass = resolveFontSizeClass(fontSize);\n const pageCount =\n pagination && numRows !== undefined\n ? Math.ceil(numRows / pagination.pageSize)\n : undefined;\n\n // TanStack's table hook returns non-memoizable functions by design.\n // eslint-disable-next-line react-hooks/incompatible-library\n const table = useReactTable({\n data: (data ?? defaultData) as any[],\n columns: columns ?? [],\n pageCount: pageCount ?? 0,\n getSortedRowModel: getSortedRowModel(),\n enableRowSelection: enableRowSelection ?? false,\n onRowSelectionChange: (update) => {\n handleRowSelectionChange(update);\n },\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 rowSelection: currentRowSelection,\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 <ScrollArea 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 -top-px left-0 z-10 w-auto border-r py-2 text-center whitespace-nowrap`}\n >\n {isFetching ? (\n <div className=\"border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n ) : enableRowSelection ? (\n <Checkbox\n checked={\n table.getIsAllPageRowsSelected() \|\|\n (table.getIsSomePageRowsSelected() && 'indeterminate')\n }\n onCheckedChange={(value) =>\n table.toggleAllPageRowsSelected(!!value)\n }\n aria-label=\"Select all\"\n />\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-px z-10 w-auto border-r py-2 whitespace-nowrap',\n pagination ? 'cursor-pointer' : '',\n meta?.isNumeric ? 'text-right' : 'text-left',\n fontSizeClass,\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-px w-full border-t border-r py-2 whitespace-nowrap\" />\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows.map((row, i) => (\n <TableRow\n key={row.id}\n data-state={row.getIsSelected() ? 'selected' : undefined}\n className={cn(\n 'hover:bg-muted bg-background',\n row.getIsSelected() && 'bg-muted',\n )}\n onClick={\n onRowClick\n ? (event) => {\n event.preventDefault();\n onRowClick({row: row as Row<Data>, event});\n }\n : undefined\n }\n onDoubleClick={\n onRowDoubleClick\n ? (event) => {\n event.preventDefault();\n onRowDoubleClick({row: row as Row<Data>, event});\n }\n : undefined\n }\n >\n <TableCell\n className={`bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSizeClass}`}\n >\n {enableRowSelection ? (\n <Checkbox\n checked={row.getIsSelected()}\n onCheckedChange={(value) => row.toggleSelected(!!value)}\n onClick={(event) => event.stopPropagation()}\n aria-label=\"Select row\"\n />\n ) : pagination ? (\n `${pagination.pageIndex pagination.pageSize + i + 1}`\n ) : (\n `${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={cn(\n 'max-w-[500px] truncate overflow-hidden border-r px-7',\n fontSizeClass,\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\"> </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n <ScrollBar orientation=\"vertical\" className=\"z-50\" />\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\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\n className={`ml-1 flex items-center gap-1 ${fontSizeClass}`}\n >\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 ${fontSizeClass}`}>\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"]}
1	+ {"version":3,"file":"DataTablePaginated.js","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Badge,\n Button,\n Checkbox,\n cn,\n Input,\n resolveFontSizeClass,\n ScrollArea,\n ScrollBar,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n ColumnDef,\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n PaginationState,\n Row,\n RowSelectionState,\n SortingState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {\n ChevronsLeftIcon as ChevronDoubleLeftIcon,\n ChevronsRightIcon as ChevronDoubleRightIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from 'lucide-react';\nimport {useCallback, useEffect, useMemo, useRef, 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 Called when a row is clicked.\n /\n onRowClick?: (args: {\n row: Row<Data>;\n event: React.MouseEvent<HTMLTableRowElement>;\n }) => void;\n /\n Called when a row is double-clicked.\n /\n onRowDoubleClick?: (args: {\n row: Row<Data>;\n event: React.MouseEvent<HTMLTableRowElement>;\n }) => void;\n /\n Enables row selection with checkboxes. When true, a checkbox column is added.\n /\n enableRowSelection?: boolean;\n /\n Controlled row selection state. Keys are row indices, values are selection status.\n /\n rowSelection?: RowSelectionState;\n /\n Called when row selection changes.\n /\n onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n};\n\n/\n Data table with pagination, sorting, row selection, and custom actions.\n /\nexport default function DataTablePaginated<Data extends object>({\n className,\n fontSize = 'text-xs',\n data,\n columns,\n numRows,\n pagination,\n sorting,\n onPaginationChange,\n onSortingChange,\n footerActions,\n isFetching,\n onRowClick,\n onRowDoubleClick,\n enableRowSelection,\n rowSelection,\n onRowSelectionChange,\n}: DataTablePaginatedProps<Data>) {\n const defaultData = useMemo(() => [], []);\n const [internalRowSelection, setInternalRowSelection] =\n useState<RowSelectionState>({});\n\n // Use controlled or uncontrolled row selection\n const currentRowSelection = rowSelection ?? internalRowSelection;\n const currentRowSelectionRef = useRef(currentRowSelection);\n\n useEffect(() => {\n currentRowSelectionRef.current = currentRowSelection;\n }, [currentRowSelection]);\n\n const handleRowSelectionChange = useCallback(\n (\n updaterOrValue:\n \| RowSelectionState\n \| ((old: RowSelectionState) => RowSelectionState),\n ) => {\n if (onRowSelectionChange) {\n const newValue =\n typeof updaterOrValue === 'function'\n ? updaterOrValue(currentRowSelectionRef.current)\n : updaterOrValue;\n onRowSelectionChange(newValue);\n } else {\n setInternalRowSelection(updaterOrValue);\n }\n },\n [onRowSelectionChange, setInternalRowSelection],\n );\n\n const fontSizeClass = resolveFontSizeClass(fontSize);\n const pageCount =\n pagination && numRows !== undefined\n ? Math.ceil(numRows / pagination.pageSize)\n : undefined;\n\n // TanStack's table hook returns non-memoizable functions by design.\n // eslint-disable-next-line react-hooks/incompatible-library\n const table = useReactTable({\n data: (data ?? defaultData) as any[],\n columns: columns ?? [],\n pageCount: pageCount ?? 0,\n getSortedRowModel: getSortedRowModel(),\n enableRowSelection: enableRowSelection ?? false,\n onRowSelectionChange: (update) => {\n handleRowSelectionChange(update);\n },\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 rowSelection: currentRowSelection,\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\n className={cn(`relative flex h-full w-full flex-col border`, className)}\n >\n <div\n className={cn(\n 'flex-1 overflow-hidden font-mono',\n isFetching && 'pointer-events-none opacity-50',\n )}\n >\n <ScrollArea 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 -top-px left-0 z-10 w-auto border-r py-2 text-center whitespace-nowrap`}\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-px z-10 w-auto border-r py-2 whitespace-nowrap',\n pagination ? 'cursor-pointer' : '',\n meta?.isNumeric ? 'text-right' : 'text-left',\n fontSizeClass,\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-px w-full border-t border-r py-2 whitespace-nowrap\" />\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows.map((row, i) => (\n <TableRow\n key={row.id}\n data-state={row.getIsSelected() ? 'selected' : undefined}\n className={cn(\n 'hover:bg-muted bg-background',\n row.getIsSelected() && 'bg-muted',\n )}\n onClick={\n onRowClick\n ? (event) => {\n event.preventDefault();\n onRowClick({row: row as Row<Data>, event});\n }\n : undefined\n }\n onDoubleClick={\n onRowDoubleClick\n ? (event) => {\n event.preventDefault();\n onRowDoubleClick({row: row as Row<Data>, event});\n }\n : undefined\n }\n >\n <TableCell\n className={`bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSizeClass}`}\n >\n {enableRowSelection ? (\n <Checkbox\n checked={row.getIsSelected()}\n onCheckedChange={(value) => row.toggleSelected(!!value)}\n onClick={(event) => event.stopPropagation()}\n aria-label=\"Select row\"\n />\n ) : pagination ? (\n `${pagination.pageIndex pagination.pageSize + i + 1}`\n ) : (\n `${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={cn(\n 'max-w-[500px] truncate overflow-hidden border-r px-7',\n fontSizeClass,\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> </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n <ScrollBar orientation=\"vertical\" className=\"z-50\" />\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n </div>\n\n <div className=\"bg-background sticky bottom-0 left-0 flex h-[45px] items-center gap-2 border-t px-2\">\n {isFetching ? (\n <div className=\"ml-2 text-xs\">Loading...</div>\n ) : (\n <>\n {pagination ? (\n <>\n <div className=\"flex items-center gap-1 truncate\">\n <Button\n variant=\"ghost\"\n size=\"xs\"\n className=\"h-7 w-7\"\n onClick={() => table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronDoubleLeftIcon size={16} />\n </Button>\n <Button\n variant=\"ghost\"\n size=\"xs\"\n className=\"h-7 w-7\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronLeftIcon size={16} />\n </Button>\n <div\n className={`ml-1 flex items-center gap-1 ${fontSizeClass}`}\n >\n <div>Page</div>\n <Input\n type=\"number\"\n min={1}\n max={table.getPageCount()}\n className=\"h-7 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(\n table.getPageCount() - 1,\n Number(value) - 1,\n ),\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=\"ghost\"\n size=\"xs\"\n className=\"h-7 w-7\"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n <ChevronRightIcon size={16} />\n </Button>\n <Button\n variant=\"ghost\"\n size=\"xs\"\n className=\"h-7 w-7\"\n onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n <ChevronDoubleRightIcon size={16} />\n </Button>\n <Select\n value={String(table.getState().pagination.pageSize)}\n onValueChange={(value) => table.setPageSize(Number(value))}\n >\n <SelectTrigger className=\"hidden h-7 w-[110px] lg:inline-flex\">\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=\"min-w-0 flex-1\" />\n </>\n ) : null}\n\n {numRows !== undefined && isFinite(numRows) ? (\n <div className={`min-w-fit font-normal ${fontSizeClass}`}>\n {`${formatCount(numRows)} rows`}\n </div>\n ) : null}\n {footerActions}\n </>\n )}\n </div>\n </div>\n );\n}\n"]}

package/dist/QueryDataTable.d.ts CHANGED Viewed

@@ -6,6 +6,9 @@ export type QueryDataTableProps = {
     /** Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base */
     fontSize?: DataTablePaginatedProps<any>['fontSize'];
     query: string;
+    lastRunTime?: number;
+    isLoading?: boolean;
+    pageSize?: number;
     queryKeyComponents?: unknown[];
     renderActions?: (query: string) => React.ReactNode;
     /** Custom value formatter for arrow data */

package/dist/QueryDataTable.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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;AAE9B,OAA0B,EACxB,4BAA4B,EAC7B,MAAM,qBAAqB,CAAC;AAG7B,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;IACnD,4CAA4C;IAC5C,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,~~CAoD3C~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"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;AAE9B,OAA0B,EACxB,4BAA4B,EAC7B,MAAM,qBAAqB,CAAC;AAG7B,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD,4CAA4C;IAC5C,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAwD3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/QueryDataTable.js CHANGED Viewed

@@ -5,18 +5,19 @@ import DataTablePaginated from './DataTablePaginated';
 import { QueryDataTableActionsMenu } from './QueryDataTableActionsMenu';
 import useArrowDataTable from './useArrowDataTable';
 import { makePagedQuery } from './utils';
-const QueryDataTable = ({ className, fontSize = 'text-xs', query, renderActions = (query) => _jsx(QueryDataTableActionsMenu, { query: query }), formatValue, }) => {
+const QueryDataTable = ({ className, fontSize = 'text-xs', query, lastRunTime, isLoading, renderActions = (query) => _jsx(QueryDataTableActionsMenu, { query: query }), pageSize = 100, formatValue, }) => {
     const [sorting, setSorting] = useState([]);
     const [pagination, setPagination] = useState({
         pageIndex: 0,
-        pageSize: 100,
+        pageSize,
     });
     // Sanitize the query generated by LLM to remove trailing semicolons, comments, and extra spaces
     const sanitizedQuery = useMemo(() => sanitizeQuery(query), [query]);
     const pagedQuery = makePagedQuery(sanitizedQuery, sorting, pagination);
-    const queryResult = useSql({ query: pagedQuery });
+    const queryResult = useSql({ query: pagedQuery, version: lastRunTime });
     const countQueryResult = useSql({
         query: `SELECT COUNT(*)::int AS count FROM (${sanitizedQuery})`,
+        version: lastRunTime,
     });
     const arrowTableData = useArrowDataTable(queryResult.data?.arrowTable, {
         formatValue,
@@ -27,7 +28,7 @@ const QueryDataTable = ({ className, fontSize = 'text-xs', query, renderActions
     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 }));
+    return (_jsx(DataTablePaginated, { ...arrowTableData, className: className, fontSize: fontSize, numRows: numRows, isFetching: isLoading || queryResult.isLoading, pagination: pagination, onPaginationChange: setPagination, sorting: sorting, onSortingChange: setSorting, footerActions: renderActions ? renderActions(sanitizedQuery) : null }));
 };
 export default QueryDataTable;
 //# sourceMappingURL=QueryDataTable.js.map

package/dist/QueryDataTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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,iBAEN,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;~~AAavC~~,MAAM,cAAc,GAA4B,CAAC,EAC/C,SAAS,EACT,QAAQ,GAAG,SAAS,EACpB,KAAK,EACL,aAAa,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,yBAAyB,IAAC,KAAK,EAAE,KAAK,GAAI,EACtE,WAAW,GACZ,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,EAAE;QACrE,WAAW;KACZ,CAAC,CAAC;IAEH,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, {\n ArrowDataTableValueFormatter,\n} 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 /* Custom value formatter for arrow data /\n formatValue?: ArrowDataTableValueFormatter;\n};\n\nconst QueryDataTable: FC<QueryDataTableProps> = ({\n className,\n fontSize = 'text-xs',\n query,\n renderActions = (query) => <QueryDataTableActionsMenu query={query} />,\n formatValue,\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 formatValue,\n });\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"]}
1	+ {"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,iBAEN,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAgBvC,MAAM,cAAc,GAA4B,CAAC,EAC/C,SAAS,EACT,QAAQ,GAAG,SAAS,EACpB,KAAK,EACL,WAAW,EACX,SAAS,EACT,aAAa,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,yBAAyB,IAAC,KAAK,EAAE,KAAK,GAAI,EACtE,QAAQ,GAAG,GAAG,EACd,WAAW,GACZ,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;KACT,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,EAAE,OAAO,EAAE,WAAW,EAAC,CAAC,CAAC;IACtE,MAAM,gBAAgB,GAAG,MAAM,CAAkB;QAC/C,KAAK,EAAE,uCAAuC,cAAc,GAAG;QAC/D,OAAO,EAAE,WAAW;KACrB,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,iBAAiB,CAAC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE;QACrE,WAAW;KACZ,CAAC,CAAC;IAEH,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,SAAS,IAAI,WAAW,CAAC,SAAS,EAC9C,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, {\n ArrowDataTableValueFormatter,\n} 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 lastRunTime?: number;\n isLoading?: boolean;\n pageSize?: number;\n queryKeyComponents?: unknown[];\n renderActions?: (query: string) => React.ReactNode;\n /* Custom value formatter for arrow data /\n formatValue?: ArrowDataTableValueFormatter;\n};\n\nconst QueryDataTable: FC<QueryDataTableProps> = ({\n className,\n fontSize = 'text-xs',\n query,\n lastRunTime,\n isLoading,\n renderActions = (query) => <QueryDataTableActionsMenu query={query} />,\n pageSize = 100,\n formatValue,\n}) => {\n const [sorting, setSorting] = useState<SortingState>([]);\n const [pagination, setPagination] = useState<PaginationState>({\n pageIndex: 0,\n pageSize,\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, version: lastRunTime});\n const countQueryResult = useSql<{count: number}>({\n query: `SELECT COUNT()::int AS count FROM (${sanitizedQuery})`,\n version: lastRunTime,\n });\n const arrowTableData = useArrowDataTable(queryResult.data?.arrowTable, {\n formatValue,\n });\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={isLoading \|\| 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.map CHANGED Viewed

	@@ -1 +1 @@
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"}
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,CAiCA,CAAC"}

package/dist/QueryDataTableActionsMenu.js CHANGED Viewed

@@ -21,6 +21,6 @@ export const QueryDataTableActionsMenu = ({ query }) => {
             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" }) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "xs", disabled: isExporting, className: "h-7 w-7", children: isExporting ? (_jsx("div", { className: "border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" })) : (_jsx(DownloadIcon, { size: 16 })) }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsx(DropdownMenuItem, { onClick: handleExport, children: "Export CSV" }) })] }));
 };
 //# sourceMappingURL=QueryDataTableActionsMenu.js.map

package/dist/QueryDataTableActionsMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
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"]}
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,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAC,SAAS,YAElB,WAAW,CAAC,CAAC,CAAC,CACb,cAAK,SAAS,EAAC,gFAAgF,GAAG,CACnG,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,GAAI,CAC3B,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\n variant=\"ghost\"\n size=\"xs\"\n disabled={isExporting}\n className=\"h-7 w-7\"\n >\n {isExporting ? (\n <div className=\"border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n ) : (\n <DownloadIcon size={16} />\n )}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={handleExport}>Export CSV</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n );\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/data-table",
-  "version": "0.28.1-rc.0",
+  "version": "0.29.0-rc.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -19,10 +19,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sqlrooms/duckdb": "0.28.1-rc.0",
-    "@sqlrooms/monaco-editor": "0.28.1-rc.0",
-    "@sqlrooms/ui": "0.28.1-rc.0",
-    "@sqlrooms/utils": "0.28.1-rc.0",
+    "@sqlrooms/duckdb": "0.29.0-rc.0",
+    "@sqlrooms/monaco-editor": "0.29.0-rc.0",
+    "@sqlrooms/ui": "0.29.0-rc.0",
+    "@sqlrooms/utils": "0.29.0-rc.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/table-core": "^8.21.3",
     "lucide-react": "^0.556.0",
@@ -40,5 +40,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "1e0dcae95d1ccdbcd1b32df1d647d0f794b94e5e"
+  "gitHead": "afdb949c9601b4cdeaae966157a25a54aea2ae54"
 }