@sqlrooms/data-table 0.8.0 → 0.8.1
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.
- package/dist/DataTablePaginated.d.ts.map +1 -1
- package/dist/DataTablePaginated.js +6 -16
- package/dist/DataTablePaginated.js.map +1 -1
- package/dist/DataTableVirtualized.d.ts.map +1 -1
- package/dist/DataTableVirtualized.js +5 -15
- package/dist/DataTableVirtualized.js.map +1 -1
- package/dist/QueryDataTable.js +1 -1
- package/dist/QueryDataTable.js.map +1 -1
- package/dist/useArrowDataTable.js +1 -1
- package/dist/useArrowDataTable.js.map +1 -1
- package/package.json +5 -5
|
@@ -1 +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,
|
|
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"}
|
|
@@ -32,26 +32,16 @@ export default function DataTablePaginated({ data, columns, pageCount, numRows,
|
|
|
32
32
|
useEffect(() => {
|
|
33
33
|
setInternalPageIndex(pagination?.pageIndex ?? 0);
|
|
34
34
|
}, [pagination?.pageIndex]);
|
|
35
|
-
return (_jsxs("div", { className: "relative
|
|
36
|
-
sticky top-[-1px] left-0 w-auto whitespace-nowrap py-2
|
|
37
|
-
bg-background border-r text-center z-20
|
|
38
|
-
`, 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) => {
|
|
35
|
+
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) => {
|
|
39
36
|
const meta = header.column.columnDef
|
|
40
37
|
.meta;
|
|
41
|
-
return (_jsx(TableHead, { colSpan: header.colSpan, className: `
|
|
42
|
-
|
|
43
|
-
bg-background border-r hover:bg-muted z-10
|
|
44
|
-
${meta?.isNumeric ? 'text-right' : 'text-left'}
|
|
45
|
-
`, 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-xs truncate max-w-[400px]", children: String(meta?.type) })] }) }, header.id));
|
|
46
|
-
}), _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 bg-background", children: [_jsx(TableCell, { className: "text-xs bg-background border-r text-center text-muted-foreground sticky left-0", children: pagination
|
|
38
|
+
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));
|
|
39
|
+
}), _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
|
|
47
40
|
? `${pagination.pageIndex * pagination.pageSize + i + 1}`
|
|
48
41
|
: '' }), row.getVisibleCells().map((cell) => {
|
|
49
42
|
const meta = cell.column.columnDef.meta;
|
|
50
|
-
return (_jsx(TableCell, { className: `
|
|
51
|
-
|
|
52
|
-
${meta?.isNumeric ? 'text-right' : 'text-left'}
|
|
53
|
-
`, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
54
|
-
}), _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) => {
|
|
43
|
+
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));
|
|
44
|
+
}), _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) => {
|
|
55
45
|
const value = e.target.value;
|
|
56
46
|
if (value) {
|
|
57
47
|
const page = Math.max(0, Math.min(table.getPageCount() - 1, Number(value) - 1));
|
|
@@ -61,6 +51,6 @@ export default function DataTablePaginated({ data, columns, pageCount, numRows,
|
|
|
61
51
|
if (internalPageIndex !== pagination?.pageIndex) {
|
|
62
52
|
table.setPageIndex(internalPageIndex);
|
|
63
53
|
}
|
|
64
|
-
} }), _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]
|
|
54
|
+
} }), _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] }));
|
|
65
55
|
}
|
|
66
56
|
//# sourceMappingURL=DataTablePaginated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTablePaginated.js","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EACf,aAAa,EACb,aAAa,EACb,qBAAqB,EACrB,sBAAsB,EACtB,eAAe,EACf,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,EACX,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,KAAK,GACN,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAIL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAiBnD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAsB,EAC9D,IAAI,EACJ,OAAO,EACP,SAAS,EACT,OAAO,EACP,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,QAAQ,EACR,WAAW,EACX,UAAU,GACoB;IAC9B,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,IAAI,EAAE,CAAC,IAAI,IAAI,WAAW,CAAU;QACpC,OAAO,EAAE,OAAO,IAAI,EAAE;QACtB,SAAS,EAAE,SAAS,IAAI,CAAC,CAAC;QAC1B,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,eAAe,EAAE,CAAC,MAAM,EAAE,EAAE;YAC1B,IAAI,eAAe,IAAI,OAAO,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE,CAAC;gBAC/D,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;YACnC,CAAC;QACH,CAAC;QACD,kBAAkB,EAAE,CAAC,MAAM,EAAE,EAAE;YAC7B,IAAI,kBAAkB,IAAI,UAAU,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE,CAAC;gBACrE,kBAAkB,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;QACD,eAAe,EAAE,eAAe,EAAE;QAClC,gBAAgB,EAAE,IAAI;QACtB,KAAK,EAAE;YACL,UAAU;YACV,OAAO;SACR;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CACxD,UAAU,EAAE,SAAS,IAAI,CAAC,CAC3B,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,oBAAoB,CAAC,UAAU,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,eAAK,SAAS,EAAC,sCAAsC,aACnD,cAAK,SAAS,EAAC,uDAAuD,YACpE,cAAK,SAAS,EAAC,sBAAsB,YACnC,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;;;qBAGV,YAEA,UAAU,CAAC,CAAC,CAAC,CACZ,cAAK,SAAS,EAAC,gFAAgF,GAAG,CACnG,CAAC,CAAC,CAAC,IAAI,GACE,EACX,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;4CAClC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS;iDACjC,IAAuB,CAAC;4CAC3B,OAAO,CACL,KAAC,SAAS,IAER,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,SAAS,EAAE;;;4BAGP,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW;yBAC/C,EACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE,YAEhD,eAAK,SAAS,EAAC,yBAAyB,aACrC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC7B,wBACG,UAAU,CACT,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAC9B,MAAM,CAAC,UAAU,EAAE,CACpB,GACG,CACP,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,2CAA2C,YAEpD,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GACb,IACJ,IAhCD,MAAM,CAAC,EAAE,CAiCJ,CACb,CAAC;wCACJ,CAAC,CAAC,EACF,KAAC,SAAS,IAAC,SAAS,EAAC,4EAA4E,GAAG,KApDvF,WAAW,CAAC,EAAE,CAqDlB,CACZ,CAAC,GACU,EACd,KAAC,SAAS,cACP,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACxC,MAAC,QAAQ,IAAc,SAAS,EAAC,8BAA8B,aAC7D,KAAC,SAAS,IAAC,SAAS,EAAC,gFAAgF,YAClG,UAAU;gDACT,CAAC,CAAC,GAAG,UAAU,CAAC,SAAS,GAAG,UAAU,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE;gDACzD,CAAC,CAAC,EAAE,GACI,EACX,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;4CAClC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAuB,CAAC;4CAC3D,OAAO,CACL,KAAC,SAAS,IAER,SAAS,EAAE;;4BAEP,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW;yBAC/C,YAEA,UAAU,CACT,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAC1B,IAAI,CAAC,UAAU,EAAE,CAClB,IATI,IAAI,CAAC,EAAE,CAUF,CACb,CAAC;wCACJ,CAAC,CAAC,EACF,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,uBAAmB,KAvBrC,GAAG,CAAC,EAAE,CAwBV,CACZ,CAAC,GACQ,IACN,GACJ,GACF,EACN,eAAK,SAAS,EAAC,8FAA8F,aAC3G,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,YAErC,KAAC,qBAAqB,IAAC,SAAS,EAAC,SAAS,GAAG,GACtC,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,EACnC,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,YAErC,KAAC,eAAe,IAAC,SAAS,EAAC,SAAS,GAAG,GAChC,EACT,eAAK,SAAS,EAAC,sCAAsC,aACnD,iCAAe,EACf,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,KAAK,CAAC,YAAY,EAAE,EACzB,SAAS,EAAC,UAAU,EACpB,KAAK,EAAE,iBAAiB,GAAG,CAAC,EAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oCACd,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;oCAC7B,IAAI,KAAK,EAAE,CAAC;wCACV,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CACnB,CAAC,EACD,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CACtD,CAAC;wCACF,oBAAoB,CAAC,IAAI,CAAC,CAAC;oCAC7B,CAAC;gCACH,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oCACX,IAAI,iBAAiB,KAAK,UAAU,EAAE,SAAS,EAAE,CAAC;wCAChD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;oCACxC,CAAC;gCACH,CAAC,GACD,EACF,wBAAM,MAAM,WAAW,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,EAAE,GAAO,IAClD,EACN,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,EAC/B,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,YAEjC,KAAC,gBAAgB,IAAC,SAAS,EAAC,SAAS,GAAG,GACjC,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,EAC3D,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,YAEjC,KAAC,sBAAsB,IAAC,SAAS,EAAC,SAAS,GAAG,GACvC,EACT,MAAC,MAAM,IACL,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EACnD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,aAE1D,KAAC,aAAa,IAAC,SAAS,EAAC,eAAe,YACtC,KAAC,WAAW,KAAG,GACD,EAChB,KAAC,aAAa,cACX,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC1C,KAAC,UAAU,IAAgB,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,YAC/C,GAAG,QAAQ,OAAO,IADJ,QAAQ,CAEZ,CACd,CAAC,GACY,IACT,EAET,cAAK,SAAS,EAAC,QAAQ,GAAG,EAEzB,OAAO,KAAK,SAAS,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAC5C,cAAK,SAAS,EAAC,qBAAqB,YACjC,GAAG,WAAW,CAAC,OAAO,CAAC,OAAO,GAC3B,CACP,CAAC,CAAC,CAAC,IAAI,EAEP,QAAQ,CAAC,CAAC,CAAC,CACV,MAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,WAAW,aAEpB,WAAW,CAAC,CAAC,CAAC,CACb,cAAK,SAAS,EAAC,qFAAqF,GAAG,CACxG,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAC,SAAS,EAAC,cAAc,GAAG,CAC3C,kBAEM,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,EACL,UAAU,CAAC,CAAC,CAAC,CACZ,cAAK,SAAS,EAAC,iDAAiD,GAAG,CACpE,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC","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 w-full h-full flex flex-col\">\n <div className=\"flex-1 overflow-hidden border border-border font-mono\">\n <div className=\"overflow-auto h-full\">\n <Table disableWrapper>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <TableHead\n className={`\n sticky top-[-1px] left-0 w-auto whitespace-nowrap py-2 \n bg-background border-r text-center z-20\n `}\n >\n {isFetching ? (\n <div className=\"animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full\" />\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={`\n sticky top-[-1px] w-auto whitespace-nowrap cursor-pointer py-2 \n bg-background border-r hover:bg-muted z-10\n ${meta?.isNumeric ? 'text-right' : 'text-left'}\n `}\n onClick={header.column.getToggleSortingHandler()}\n >\n <div className=\"flex gap-2 items-center\">\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=\"opacity-30 text-xs truncate max-w-[400px]\"\n >\n {String(meta?.type)}\n </Badge>\n </div>\n </TableHead>\n );\n })}\n <TableHead className=\"sticky top-0 w-full whitespace-nowrap py-2 bg-background border-r border-t\" />\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=\"text-xs bg-background border-r text-center text-muted-foreground sticky left-0\">\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={`\n text-xs border-r max-w-[500px] overflow-hidden truncate px-7\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 </div>\n </div>\n <div className=\"sticky bottom-0 left-0 bg-background p-2 flex gap-2 items-center flex-wrap border border-t-0\">\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=\"flex items-center text-sm ml-1 gap-1\">\n <div>Page</div>\n <Input\n type=\"number\"\n min={1}\n max={table.getPageCount()}\n className=\"w-16 h-8\"\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=\"w-[110px] h-8\">\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=\"animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full mr-2\" />\n ) : (\n <ArrowDownIcon className=\"h-4 w-4 mr-2\" />\n )}\n Export CSV\n </Button>\n ) : null}\n </div>\n {isFetching ? (\n <div className=\"absolute inset-0 bg-background/80 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 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\"> </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"]}
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -30,28 +30,18 @@ const DataTableVirtualized = React.memo(function DataTableVirtualized({ data, co
|
|
|
30
30
|
const paddingBottom = virtualRows.length > 0
|
|
31
31
|
? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0)
|
|
32
32
|
: 0;
|
|
33
|
-
return (_jsxs("div", { className: "flex flex-col overflow-hidden", children: [_jsx("div", { className: "overflow-hidden border
|
|
34
|
-
sticky top-0 left-0 w-auto whitespace-nowrap py-2
|
|
35
|
-
bg-background border-r text-center z-20
|
|
36
|
-
` }), headerGroup.headers.map((header) => {
|
|
33
|
+
return (_jsxs("div", { className: "flex flex-col overflow-hidden", children: [_jsx("div", { className: "border-border overflow-hidden border", children: _jsx("div", { ref: tableContainerRef, 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-0 z-20 w-auto whitespace-nowrap border-r py-2 text-center` }), headerGroup.headers.map((header) => {
|
|
37
34
|
const meta = header.column.columnDef.meta;
|
|
38
|
-
return (_jsx(TableHead, { className: `
|
|
39
|
-
sticky top-0 font-mono whitespace-nowrap cursor-pointer px-7 py-2
|
|
40
|
-
bg-background border-r hover:bg-muted/80 z-10
|
|
41
|
-
${meta?.isNumeric ? 'text-right' : 'text-left'}
|
|
42
|
-
`, 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));
|
|
35
|
+
return (_jsx(TableHead, { 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'} `, 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: "text-[9px] opacity-30", children: String(meta?.type) })] }) }, header.id));
|
|
43
36
|
})] }, headerGroup.id))) }), _jsxs(TableBody, { children: [paddingTop > 0 && (_jsx(TableRow, { children: _jsx(TableCell, { style: { height: `${paddingTop}px` } }) })), virtualRows.map((virtualRow) => {
|
|
44
37
|
const row = rows[virtualRow.index];
|
|
45
38
|
if (!row)
|
|
46
39
|
return null;
|
|
47
|
-
return (_jsxs(TableRow, { className: "hover:bg-muted/50", children: [_jsx(TableCell, { className: "
|
|
40
|
+
return (_jsxs(TableRow, { className: "hover:bg-muted/50", children: [_jsx(TableCell, { className: "bg-muted text-muted-foreground sticky left-0 border-r text-center text-xs", children: virtualRow.index + 1 }), row.getVisibleCells().map((cell) => {
|
|
48
41
|
const meta = cell.column.columnDef.meta;
|
|
49
|
-
return (_jsx(TableCell, { className: `
|
|
50
|
-
text-xs border-r max-w-[500px] overflow-hidden truncate px-7
|
|
51
|
-
${meta?.isNumeric ? 'text-right' : 'text-left'}
|
|
52
|
-
`, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
42
|
+
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));
|
|
53
43
|
})] }, row.id));
|
|
54
|
-
}), paddingBottom > 0 && (_jsx(TableRow, { children: _jsx(TableCell, { style: { height: `${paddingBottom}px` } }) }))] })] }) }) }), _jsx("div", { className: "sticky bottom-0 left-0
|
|
44
|
+
}), 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` })] }));
|
|
55
45
|
});
|
|
56
46
|
export default function DataTableWithLoader(props) {
|
|
57
47
|
const { isPreview, isFetching, error, ...rest } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableVirtualized.js","sourceRoot":"","sources":["../src/DataTableVirtualized.tsx"],"names":[],"mappings":"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","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=\"overflow-hidden border border-border\">\n <div ref={tableContainerRef} className=\"overflow-auto h-full\">\n <Table disableWrapper>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <TableHead\n className={`\n sticky top-0 left-0 w-auto whitespace-nowrap py-2 \n bg-background border-r text-center z-20\n `}\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={`\n sticky top-0 font-mono whitespace-nowrap cursor-pointer px-7 py-2\n bg-background border-r hover:bg-muted/80 z-10\n ${meta?.isNumeric ? 'text-right' : 'text-left'}\n `}\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=\"opacity-30 text-[9px]\"\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=\"text-xs border-r bg-muted text-center text-muted-foreground sticky left-0\">\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={`\n text-xs border-r max-w-[500px] overflow-hidden truncate px-7\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 </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=\"sticky bottom-0 left-0 py-2 px-4 text-xs font-mono bg-background border border-t-0\">\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"]}
|
|
1
|
+
{"version":3,"file":"DataTableVirtualized.js","sourceRoot":"","sources":["../src/DataTableVirtualized.tsx"],"names":[],"mappings":"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","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"]}
|
package/dist/QueryDataTable.js
CHANGED
|
@@ -84,7 +84,7 @@ const QueryDataTable = ({ query }) => {
|
|
|
84
84
|
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 }));
|
|
85
85
|
};
|
|
86
86
|
const QueryDataTableWithSuspense = (props) => {
|
|
87
|
-
return (_jsx(Suspense, { fallback: _jsx(SpinnerPane, { className: "
|
|
87
|
+
return (_jsx(Suspense, { fallback: _jsx(SpinnerPane, { className: "h-full w-full" }), children: _createElement(QueryDataTable, { ...props, key: props.query }) }));
|
|
88
88
|
};
|
|
89
89
|
export default QueryDataTableWithSuspense;
|
|
90
90
|
//# sourceMappingURL=QueryDataTable.js.map
|
|
@@ -1 +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 exportToCsv,\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 {conn} = useDuckDb();\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 conn.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 }, [conn, sanitizedQuery]);\n\n // Fetch data\n useEffect(() => {\n const fetchData = async () => {\n try {\n setIsFetching(true);\n const result = await conn.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, conn, 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=\"
|
|
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 exportToCsv,\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 {conn} = useDuckDb();\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 conn.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 }, [conn, sanitizedQuery]);\n\n // Fetch data\n useEffect(() => {\n const fetchData = async () => {\n try {\n setIsFetching(true);\n const result = await conn.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, conn, 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"]}
|
|
@@ -48,7 +48,7 @@ export default function useArrowDataTable(table) {
|
|
|
48
48
|
cell: (info) => {
|
|
49
49
|
const value = info.getValue();
|
|
50
50
|
const valueStr = valueToString(field.type, value);
|
|
51
|
-
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: "
|
|
51
|
+
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);
|
|
52
52
|
},
|
|
53
53
|
header: field.name,
|
|
54
54
|
meta: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useArrowDataTable.js","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAC,OAAO,EAAC,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAC;AAEzD,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAE9B,MAAM,YAAY,GAAG,kBAAkB,EAAE,CAAC;AAc1C,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,SAAS,aAAa,CAAC,IAAoB,EAAE,KAAc;IACzD,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QAC1C,OAAO,MAAM,CAAC;IAChB,CAAC;IACD,IAAI,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;QACrC,QAAQ,OAAO,KAAK,EAAE,CAAC;YACrB,KAAK,QAAQ,CAAC;YACd,KAAK,QAAQ;gBACX,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;YAC/C,KAAK,QAAQ;gBACX,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;QACzC,CAAC;IACH,CAAC;IACD,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;QAChC,QAAQ,OAAO,KAAK,EAAE,CAAC;YACrB,KAAK,QAAQ,CAAC;YACd,KAAK,QAAQ;gBACX,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;YACxE,KAAK,QAAQ;gBACX,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC;IACD,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;QAChC,IAAI,KAAK,YAAY,IAAI,EAAE,CAAC;YAC1B,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC;AACD,8DAA8D;AAC9D,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,KAA8B;IAE9B,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAC,MAAM,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC,EAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACrE,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,CAAC,KAAK;YAAE,OAAO,SAAS,CAAC;QAC7B,MAAM,OAAO,GAA0B,EAAE,CAAC;QAC1C,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;YACxC,OAAO,CAAC,IAAI,CACV,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;gBACrE,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;oBACb,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAC9B,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;oBAElD,OAAO,QAAQ,CAAC,MAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAC1C,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,eAAM,SAAS,EAAC,gBAAgB,YAC7B,OAAO,CAAC,GAAG,QAAQ,EAAE,EAAE,gBAAgB,CAAC,GACpC,GACQ,EACjB,KAAC,cAAc,IAAC,SAAS,EAAC,wCAAwC,YAChE,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,aAAa,YAAE,IAAI,KAAK,CAAC,IAAI,MAAM,KAAK,CAAC,IAAI,GAAG,GAAO,EACtE,eAAK,SAAS,EAAC,UAAU,aACtB,QAAQ,EACT,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,gCAAgC,EAC1C,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,YAEtD,KAAC,aAAa,IAAC,SAAS,EAAC,SAAS,GAAG,GAC9B,IACL,IACF,GACS,IACT,CACX,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;gBACJ,CAAC;gBACD,MAAM,EAAE,KAAK,CAAC,IAAI;gBAClB,IAAI,EAAE;oBACJ,IAAI,EAAE,KAAK,CAAC,IAAI;oBAChB,SAAS,EACP,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;wBAClC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;wBACpC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;iBACnC;aACF,CAAC,CACH,CAAC;QACJ,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AACvD,CAAC","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=\"
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/data-table",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@heroicons/react": "*",
|
|
23
|
-
"@sqlrooms/duckdb": "0.8.
|
|
24
|
-
"@sqlrooms/ui": "0.8.
|
|
25
|
-
"@sqlrooms/utils": "0.8.
|
|
23
|
+
"@sqlrooms/duckdb": "0.8.1",
|
|
24
|
+
"@sqlrooms/ui": "0.8.1",
|
|
25
|
+
"@sqlrooms/utils": "0.8.1",
|
|
26
26
|
"@tanstack/react-table": "^8.10.7",
|
|
27
27
|
"@tanstack/table-core": "^8.10.7",
|
|
28
28
|
"react-virtual": "2.10.4"
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"lint": "eslint .",
|
|
39
39
|
"typedoc": "typedoc"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "7b5e727b79d675c17b93412c109d1ba1b22699c8"
|
|
42
42
|
}
|