@sqlrooms/data-table 0.27.0 → 0.28.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.
- package/dist/ColumnTypeBadge.js +1 -1
- package/dist/ColumnTypeBadge.js.map +1 -1
- package/dist/DataTablePaginated.d.ts.map +1 -1
- package/dist/DataTablePaginated.js +6 -4
- package/dist/DataTablePaginated.js.map +1 -1
- package/dist/DataTableVirtualized.d.ts.map +1 -1
- package/dist/DataTableVirtualized.js +5 -3
- package/dist/DataTableVirtualized.js.map +1 -1
- package/dist/useArrowDataTable.d.ts.map +1 -1
- package/dist/useArrowDataTable.js +2 -2
- package/dist/useArrowDataTable.js.map +1 -1
- package/package.json +6 -6
package/dist/ColumnTypeBadge.js
CHANGED
|
@@ -3,7 +3,7 @@ import { cn } from '@sqlrooms/ui';
|
|
|
3
3
|
/**∏
|
|
4
4
|
* A badge that displays the type of a database table column.
|
|
5
5
|
*/
|
|
6
|
-
export const ColumnTypeBadge = ({ className, columnType, typeCategory }) => (_jsx("div", { title: String(columnType), className: cn('flex h-5 items-center justify-center', '
|
|
6
|
+
export const ColumnTypeBadge = ({ className, columnType, typeCategory }) => (_jsx("div", { title: String(columnType), className: cn('flex h-5 items-center justify-center', 'w-[55px] shrink-0 overflow-hidden rounded-sm px-1 py-0.25 text-center text-[9px] text-ellipsis', 'cursor-default whitespace-nowrap lowercase', {
|
|
7
7
|
'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400': !typeCategory,
|
|
8
8
|
'bg-blue-100 text-blue-500 dark:bg-blue-900 dark:text-blue-400': typeCategory === 'string',
|
|
9
9
|
'bg-green-100 text-green-500 dark:bg-green-900 dark:text-green-400': typeCategory === 'number',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnTypeBadge.js","sourceRoot":"","sources":["../src/ColumnTypeBadge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAIvB,CAAC,EAAC,SAAS,EAAE,UAAU,EAAE,YAAY,EAAC,EAAE,EAAE,CAAC,CAC9C,cACE,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,EACzB,SAAS,EAAE,EAAE,CACX,sCAAsC,EACtC,
|
|
1
|
+
{"version":3,"file":"ColumnTypeBadge.js","sourceRoot":"","sources":["../src/ColumnTypeBadge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAGhC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAIvB,CAAC,EAAC,SAAS,EAAE,UAAU,EAAE,YAAY,EAAC,EAAE,EAAE,CAAC,CAC9C,cACE,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,EACzB,SAAS,EAAE,EAAE,CACX,sCAAsC,EACtC,gGAAgG,EAChG,4CAA4C,EAC5C;QACE,+DAA+D,EAC7D,CAAC,YAAY;QACf,+DAA+D,EAC7D,YAAY,KAAK,QAAQ;QAC3B,mEAAmE,EACjE,YAAY,KAAK,QAAQ;QAC3B,uEAAuE,EACrE,YAAY,KAAK,UAAU;QAC7B,2DAA2D,EACzD,YAAY,KAAK,SAAS;QAC5B,uEAAuE,EACrE,YAAY,KAAK,QAAQ,IAAI,YAAY,KAAK,UAAU;QAC1D,uEAAuE,EACrE,YAAY,KAAK,MAAM,IAAI,YAAY,KAAK,QAAQ;KACvD,EACD,SAAS,CACV,YAEA,MAAM,CAAC,UAAU,CAAC,GACf,CACP,CAAC","sourcesContent":["import {ColumnTypeCategory} from '@sqlrooms/duckdb';\nimport {cn} from '@sqlrooms/ui';\nimport {FC} from 'react';\n\n/**∏\n * A badge that displays the type of a database table column.\n */\nexport const ColumnTypeBadge: FC<{\n className?: string;\n columnType: unknown;\n typeCategory?: ColumnTypeCategory;\n}> = ({className, columnType, typeCategory}) => (\n <div\n title={String(columnType)}\n className={cn(\n 'flex h-5 items-center justify-center',\n 'w-[55px] shrink-0 overflow-hidden rounded-sm px-1 py-0.25 text-center text-[9px] text-ellipsis',\n 'cursor-default whitespace-nowrap lowercase',\n {\n 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400':\n !typeCategory,\n 'bg-blue-100 text-blue-500 dark:bg-blue-900 dark:text-blue-400':\n typeCategory === 'string',\n 'bg-green-100 text-green-500 dark:bg-green-900 dark:text-green-400':\n typeCategory === 'number',\n 'bg-yellow-100 text-yellow-500 dark:bg-yellow-900 dark:text-yellow-400':\n typeCategory === 'datetime',\n 'bg-red-100 text-red-500 dark:bg-red-900 dark:text-red-400':\n typeCategory === 'boolean',\n 'bg-orange-100 text-orange-400 dark:bg-orange-900 dark:text-orange-400':\n typeCategory === 'binary' || typeCategory === 'geometry',\n 'bg-purple-100 text-purple-500 dark:bg-purple-900 dark:text-purple-400':\n typeCategory === 'json' || typeCategory === 'struct',\n },\n className,\n )}\n >\n {String(columnType)}\n </div>\n);\n"]}
|
|
@@ -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,
|
|
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"}
|
|
@@ -31,6 +31,8 @@ export default function DataTablePaginated({ className, fontSize = 'text-xs', da
|
|
|
31
31
|
const pageCount = pagination && numRows !== undefined
|
|
32
32
|
? Math.ceil(numRows / pagination.pageSize)
|
|
33
33
|
: undefined;
|
|
34
|
+
// TanStack's table hook returns non-memoizable functions by design.
|
|
35
|
+
// eslint-disable-next-line react-hooks/incompatible-library
|
|
34
36
|
const table = useReactTable({
|
|
35
37
|
data: (data ?? defaultData),
|
|
36
38
|
columns: columns ?? [],
|
|
@@ -62,12 +64,12 @@ export default function DataTablePaginated({ className, fontSize = 'text-xs', da
|
|
|
62
64
|
useEffect(() => {
|
|
63
65
|
setInternalPageIndex(pagination?.pageIndex ?? 0);
|
|
64
66
|
}, [pagination?.pageIndex]);
|
|
65
|
-
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
|
|
67
|
+
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() ||
|
|
66
68
|
(table.getIsSomePageRowsSelected() && 'indeterminate'), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value), "aria-label": "Select all" })) : null }), headerGroup.headers.map((header) => {
|
|
67
69
|
const meta = header.column.columnDef
|
|
68
70
|
.meta;
|
|
69
|
-
return (_jsx(TableHead, { colSpan: header.colSpan, className: cn('bg-background hover:bg-muted sticky top-
|
|
70
|
-
}), _jsx(TableHead, { className: "bg-background sticky top-
|
|
71
|
+
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));
|
|
72
|
+
}), _jsx(TableHead, { className: "bg-background sticky -top-px w-full border-t border-r py-2 whitespace-nowrap" })] }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, i) => (_jsxs(TableRow, { "data-state": row.getIsSelected() ? 'selected' : undefined, className: cn('hover:bg-muted bg-background', row.getIsSelected() && 'bg-muted'), onClick: onRowClick
|
|
71
73
|
? (event) => {
|
|
72
74
|
event.preventDefault();
|
|
73
75
|
onRowClick({ row: row, event });
|
|
@@ -79,7 +81,7 @@ export default function DataTablePaginated({ className, fontSize = 'text-xs', da
|
|
|
79
81
|
}
|
|
80
82
|
: 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) => {
|
|
81
83
|
const meta = cell.column.columnDef.meta;
|
|
82
|
-
return (_jsx(TableCell, { className: cn('max-w-[500px] overflow-hidden
|
|
84
|
+
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));
|
|
83
85
|
}), _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) => {
|
|
84
86
|
const value = e.target.value;
|
|
85
87
|
if (value) {
|
|
@@ -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 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 left-0 top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2 text-center`}\n >\n {isFetching ? (\n <div className=\"border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n ) : 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-[-1px] z-10 w-auto whitespace-nowrap border-r py-2',\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-[-1px] 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\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] overflow-hidden truncate 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 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 +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;AAkIF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,IAAI,SAAS,MAAM,EAC7D,KAAK,EAAE,yBAAyB,CAAC,IAAI,CAAC,kDAevC"}
|
|
@@ -8,6 +8,8 @@ import * as React from 'react';
|
|
|
8
8
|
import { useVirtual } from 'react-virtual';
|
|
9
9
|
const DataTableVirtualized = React.memo(function DataTableVirtualized({ data, columns, isPreview }) {
|
|
10
10
|
const [sorting, setSorting] = React.useState([]);
|
|
11
|
+
// TanStack's table hook returns non-memoizable functions by design.
|
|
12
|
+
// eslint-disable-next-line react-hooks/incompatible-library
|
|
11
13
|
const table = useReactTable({
|
|
12
14
|
columns,
|
|
13
15
|
data: data,
|
|
@@ -30,16 +32,16 @@ const DataTableVirtualized = React.memo(function DataTableVirtualized({ data, co
|
|
|
30
32
|
const paddingBottom = virtualRows.length > 0
|
|
31
33
|
? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0)
|
|
32
34
|
: 0;
|
|
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
|
|
35
|
+
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 top-0 left-0 z-20 w-auto border-r py-2 text-center whitespace-nowrap` }), headerGroup.headers.map((header) => {
|
|
34
36
|
const meta = header.column.columnDef.meta;
|
|
35
|
-
return (_jsx(TableHead, { className: `bg-background hover:bg-muted/80 sticky top-0 z-10 cursor-pointer
|
|
37
|
+
return (_jsx(TableHead, { className: `bg-background hover:bg-muted/80 sticky top-0 z-10 cursor-pointer border-r px-7 py-2 font-mono whitespace-nowrap ${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));
|
|
36
38
|
})] }, headerGroup.id))) }), _jsxs(TableBody, { children: [paddingTop > 0 && (_jsx(TableRow, { children: _jsx(TableCell, { style: { height: `${paddingTop}px` } }) })), virtualRows.map((virtualRow) => {
|
|
37
39
|
const row = rows[virtualRow.index];
|
|
38
40
|
if (!row)
|
|
39
41
|
return null;
|
|
40
42
|
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) => {
|
|
41
43
|
const meta = cell.column.columnDef.meta;
|
|
42
|
-
return (_jsx(TableCell, { className: `max-w-[500px] overflow-hidden
|
|
44
|
+
return (_jsx(TableCell, { className: `max-w-[500px] truncate overflow-hidden border-r px-7 text-xs ${meta?.isNumeric ? 'text-right' : 'text-left'} `, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
43
45
|
})] }, row.id));
|
|
44
46
|
}), 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` })] }));
|
|
45
47
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableVirtualized.js","sourceRoot":"","sources":["../src/DataTableVirtualized.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ChevronDownIcon, ChevronUpIcon} from 'lucide-react';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n Badge,\n} from '@sqlrooms/ui';\nimport {ErrorPane, SpinnerPane} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n ColumnDef,\n SortingState,\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport * as React from 'react';\nimport {useVirtual} from 'react-virtual';\n\nexport type DataTableVirtualizedProps<Data extends object> = {\n data?: ArrayLike<Data>;\n columns?: ColumnDef<Data, any>[];\n isFetching?: boolean;\n error?: any;\n isPreview?: boolean;\n};\n\nexport type DataTableProps<Data extends object> = {\n data: ArrayLike<Data>;\n columns: ColumnDef<Data, any>[];\n isPreview?: boolean;\n};\n\nconst DataTableVirtualized = React.memo(function DataTableVirtualized<\n Data extends object,\n>({data, columns, isPreview}: DataTableProps<Data>) {\n const [sorting, setSorting] = React.useState<SortingState>([]);\n const table = useReactTable({\n columns,\n data: data as Data[],\n onSortingChange: setSorting,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n sorting,\n },\n });\n const tableContainerRef = React.useRef<HTMLDivElement>(null);\n\n const {rows} = table.getRowModel();\n const rowVirtualizer = useVirtual({\n parentRef: tableContainerRef,\n size: rows.length,\n overscan: 20,\n });\n const {virtualItems: virtualRows, totalSize} = rowVirtualizer;\n\n const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;\n const paddingBottom =\n virtualRows.length > 0\n ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0)\n : 0;\n\n return (\n <div className=\"flex flex-col overflow-hidden\">\n <div className=\"border-border overflow-hidden border\">\n <div ref={tableContainerRef} className=\"h-full overflow-auto\">\n <Table disableWrapper>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n <TableHead\n className={`bg-background sticky left-0 top-0 z-20 w-auto whitespace-nowrap border-r py-2 text-center`}\n />\n {headerGroup.headers.map((header) => {\n const meta = header.column.columnDef.meta as any;\n return (\n <TableHead\n key={header.id}\n className={`bg-background hover:bg-muted/80 sticky top-0 z-10 cursor-pointer whitespace-nowrap border-r px-7 py-2 font-mono ${meta?.isNumeric ? 'text-right' : 'text-left'} `}\n onClick={header.column.getToggleSortingHandler()}\n >\n <div\n className={`flex items-center gap-1 ${\n meta?.isNumeric ? 'justify-end' : 'justify-start'\n }`}\n >\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n {header.column.getIsSorted() ? (\n header.column.getIsSorted() === 'desc' ? (\n <ChevronDownIcon className=\"h-4 w-4\" />\n ) : (\n <ChevronUpIcon className=\"h-4 w-4\" />\n )\n ) : null}\n <div className=\"flex-1\" />\n <Badge\n variant=\"outline\"\n className=\"text-[9px] opacity-30\"\n >\n {String(meta?.type)}\n </Badge>\n </div>\n </TableHead>\n );\n })}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {paddingTop > 0 && (\n <TableRow>\n <TableCell style={{height: `${paddingTop}px`}} />\n </TableRow>\n )}\n {virtualRows.map((virtualRow) => {\n const row = rows[virtualRow.index];\n if (!row) return null;\n return (\n <TableRow key={row.id} className=\"hover:bg-muted/50\">\n <TableCell className=\"bg-muted text-muted-foreground sticky left-0 border-r text-center text-xs\">\n {virtualRow.index + 1}\n </TableCell>\n {row.getVisibleCells().map((cell) => {\n const meta = cell.column.columnDef.meta as any;\n return (\n <TableCell\n key={cell.id}\n className={`max-w-[500px] overflow-hidden truncate border-r px-7 text-xs ${meta?.isNumeric ? 'text-right' : 'text-left'} `}\n >\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n </TableCell>\n );\n })}\n </TableRow>\n );\n })}\n {paddingBottom > 0 && (\n <TableRow>\n <TableCell style={{height: `${paddingBottom}px`}} />\n </TableRow>\n )}\n </TableBody>\n </Table>\n </div>\n </div>\n <div className=\"bg-background sticky bottom-0 left-0 border border-t-0 px-4 py-2 font-mono text-xs\">\n {`${isPreview ? 'Preview of the first ' : ''}${formatCount(data.length)} rows`}\n </div>\n </div>\n );\n});\n\n/**\n * @deprecated Use `DataTablePaginated` instead.\n */\nexport default function DataTableWithLoader<Data extends object>(\n props: DataTableVirtualizedProps<Data>,\n) {\n const {isPreview, isFetching, error, ...rest} = props;\n const {data, columns} = rest;\n return error ? (\n <ErrorPane error={error} />\n ) : isFetching ? (\n <SpinnerPane h=\"100%\" />\n ) : data && columns ? (\n <DataTableVirtualized\n data={data}\n columns={columns as any}\n isPreview={isPreview}\n />\n ) : null;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"DataTableVirtualized.js","sourceRoot":"","sources":["../src/DataTableVirtualized.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAE,aAAa,EAAC,MAAM,cAAc,CAAC;AAC5D,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,KAAK,GACN,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,cAAc,CAAC;AACpD,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAGL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAgBzC,MAAM,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,oBAAoB,CAEnE,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAuB;IAChD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAe,EAAE,CAAC,CAAC;IAC/D,oEAAoE;IACpE,4DAA4D;IAC5D,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,OAAO;QACP,IAAI,EAAE,IAAc;QACpB,eAAe,EAAE,UAAU;QAC3B,eAAe,EAAE,eAAe,EAAE;QAClC,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,KAAK,EAAE;YACL,OAAO;SACR;KACF,CAAC,CAAC;IACH,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7D,MAAM,EAAC,IAAI,EAAC,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;IACnC,MAAM,cAAc,GAAG,UAAU,CAAC;QAChC,SAAS,EAAE,iBAAiB;QAC5B,IAAI,EAAE,IAAI,CAAC,MAAM;QACjB,QAAQ,EAAE,EAAE;KACb,CAAC,CAAC;IACH,MAAM,EAAC,YAAY,EAAE,WAAW,EAAE,SAAS,EAAC,GAAG,cAAc,CAAC;IAE9D,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7E,MAAM,aAAa,GACjB,WAAW,CAAC,MAAM,GAAG,CAAC;QACpB,CAAC,CAAC,SAAS,GAAG,CAAC,WAAW,EAAE,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC,CAAC;IAER,OAAO,CACL,eAAK,SAAS,EAAC,+BAA+B,aAC5C,cAAK,SAAS,EAAC,sCAAsC,YACnD,cAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAC,sBAAsB,YAC3D,MAAC,KAAK,IAAC,cAAc,mBACnB,KAAC,WAAW,cACT,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC5C,MAAC,QAAQ,eACP,KAAC,SAAS,IACR,SAAS,EAAE,2FAA2F,GACtG,EACD,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;4CAClC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAW,CAAC;4CACjD,OAAO,CACL,KAAC,SAAS,IAER,SAAS,EAAE,mHAAmH,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,GAAG,EAC7K,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE,YAEhD,eACE,SAAS,EAAE,2BACT,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eACpC,EAAE,aAED,UAAU,CACT,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAC9B,MAAM,CAAC,UAAU,EAAE,CACpB,EACA,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAC7B,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,CACvC,KAAC,eAAe,IAAC,SAAS,EAAC,SAAS,GAAG,CACxC,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAC,SAAS,EAAC,SAAS,GAAG,CACtC,CACF,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAC,QAAQ,GAAG,EAC1B,KAAC,KAAK,IACJ,OAAO,EAAC,SAAS,EACjB,SAAS,EAAC,uBAAuB,YAEhC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GACb,IACJ,IA3BD,MAAM,CAAC,EAAE,CA4BJ,CACb,CAAC;wCACJ,CAAC,CAAC,KAtCW,WAAW,CAAC,EAAE,CAuClB,CACZ,CAAC,GACU,EACd,MAAC,SAAS,eACP,UAAU,GAAG,CAAC,IAAI,CACjB,KAAC,QAAQ,cACP,KAAC,SAAS,IAAC,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,UAAU,IAAI,EAAC,GAAI,GACxC,CACZ,EACA,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;wCAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;wCACnC,IAAI,CAAC,GAAG;4CAAE,OAAO,IAAI,CAAC;wCACtB,OAAO,CACL,MAAC,QAAQ,IAAc,SAAS,EAAC,mBAAmB,aAClD,KAAC,SAAS,IAAC,SAAS,EAAC,2EAA2E,YAC7F,UAAU,CAAC,KAAK,GAAG,CAAC,GACX,EACX,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oDAClC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAW,CAAC;oDAC/C,OAAO,CACL,KAAC,SAAS,IAER,SAAS,EAAE,gEAAgE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,GAAG,YAEzH,UAAU,CACT,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAC1B,IAAI,CAAC,UAAU,EAAE,CAClB,IANI,IAAI,CAAC,EAAE,CAOF,CACb,CAAC;gDACJ,CAAC,CAAC,KAjBW,GAAG,CAAC,EAAE,CAkBV,CACZ,CAAC;oCACJ,CAAC,CAAC,EACD,aAAa,GAAG,CAAC,IAAI,CACpB,KAAC,QAAQ,cACP,KAAC,SAAS,IAAC,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,aAAa,IAAI,EAAC,GAAI,GAC3C,CACZ,IACS,IACN,GACJ,GACF,EACN,cAAK,SAAS,EAAC,oFAAoF,YAChG,GAAG,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,GAC1E,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,KAAsC;IAEtC,MAAM,EAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,GAAG,KAAK,CAAC;IACtD,MAAM,EAAC,IAAI,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC;IAC7B,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,CAC5B,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,KAAC,WAAW,IAAC,CAAC,EAAC,MAAM,GAAG,CACzB,CAAC,CAAC,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,CACpB,KAAC,oBAAoB,IACnB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAc,EACvB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC","sourcesContent":["import {ChevronDownIcon, ChevronUpIcon} from 'lucide-react';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n Badge,\n} from '@sqlrooms/ui';\nimport {ErrorPane, SpinnerPane} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n ColumnDef,\n SortingState,\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport * as React from 'react';\nimport {useVirtual} from 'react-virtual';\n\nexport type DataTableVirtualizedProps<Data extends object> = {\n data?: ArrayLike<Data>;\n columns?: ColumnDef<Data, any>[];\n isFetching?: boolean;\n error?: any;\n isPreview?: boolean;\n};\n\nexport type DataTableProps<Data extends object> = {\n data: ArrayLike<Data>;\n columns: ColumnDef<Data, any>[];\n isPreview?: boolean;\n};\n\nconst DataTableVirtualized = React.memo(function DataTableVirtualized<\n Data extends object,\n>({data, columns, isPreview}: DataTableProps<Data>) {\n const [sorting, setSorting] = React.useState<SortingState>([]);\n // TanStack's table hook returns non-memoizable functions by design.\n // eslint-disable-next-line react-hooks/incompatible-library\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 top-0 left-0 z-20 w-auto border-r py-2 text-center whitespace-nowrap`}\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 border-r px-7 py-2 font-mono whitespace-nowrap ${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] truncate overflow-hidden border-r px-7 text-xs ${meta?.isNumeric ? 'text-right' : 'text-left'} `}\n >\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n </TableCell>\n );\n })}\n </TableRow>\n );\n })}\n {paddingBottom > 0 && (\n <TableRow>\n <TableCell style={{height: `${paddingBottom}px`}} />\n </TableRow>\n )}\n </TableBody>\n </Table>\n </div>\n </div>\n <div className=\"bg-background sticky bottom-0 left-0 border border-t-0 px-4 py-2 font-mono text-xs\">\n {`${isPreview ? 'Preview of the first ' : ''}${formatCount(data.length)} rows`}\n </div>\n </div>\n );\n});\n\n/**\n * @deprecated Use `DataTablePaginated` instead.\n */\nexport default function DataTableWithLoader<Data extends object>(\n props: DataTableVirtualizedProps<Data>,\n) {\n const {isPreview, isFetching, error, ...rest} = props;\n const {data, columns} = rest;\n return error ? (\n <ErrorPane error={error} />\n ) : isFetching ? (\n <SpinnerPane h=\"100%\" />\n ) : data && columns ? (\n <DataTableVirtualized\n data={data}\n columns={columns as any}\n isPreview={isPreview}\n />\n ) : null;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useArrowDataTable.d.ts","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useArrowDataTable.d.ts","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAQtC,KAAK,uBAAuB,GAAG;IAC7B,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACrB,OAAO,EAAE,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAkFF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,4BAA4B,GAAG,CACzC,IAAI,EAAE,KAAK,CAAC,QAAQ,EACpB,KAAK,EAAE,OAAO,KACX,MAAM,GAAG,SAAS,CAAC;AAExB,MAAM,MAAM,wBAAwB,GAAG;IACrC,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,CAAC;AAGF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,EAC9B,OAAO,GAAE,wBAA6B,GACrC,uBAAuB,GAAG,SAAS,CAkGrC"}
|
|
@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { JsonMonacoEditor } from '@sqlrooms/monaco-editor';
|
|
3
3
|
import { Button, Popover, PopoverContent, PopoverTrigger, resolveFontSizeClass, } from '@sqlrooms/ui';
|
|
4
4
|
import { safeJsonParse, shorten, toDecimalString } from '@sqlrooms/utils';
|
|
5
|
-
import { ClipboardIcon } from 'lucide-react';
|
|
6
5
|
import { createColumnHelper } from '@tanstack/react-table';
|
|
7
6
|
import * as arrow from 'apache-arrow';
|
|
7
|
+
import { ClipboardIcon } from 'lucide-react';
|
|
8
8
|
import { useMemo } from 'react';
|
|
9
9
|
const columnHelper = createColumnHelper();
|
|
10
10
|
const MAX_VALUE_LENGTH = 64;
|
|
@@ -99,7 +99,7 @@ export default function useArrowDataTable(table, options = {}) {
|
|
|
99
99
|
minimap: { enabled: false },
|
|
100
100
|
scrollBeyondLastLine: false,
|
|
101
101
|
wordWrap: 'on',
|
|
102
|
-
} })) : (_jsx("div", { className: "
|
|
102
|
+
} })) : (_jsx("div", { className: "font-mono text-xs wrap-break-word whitespace-pre-wrap", children: valueStr })) }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsx(Button, { variant: "ghost", size: "xs", onClick: () => navigator.clipboard.writeText(valueStr), children: _jsx(ClipboardIcon, { className: "h-3 w-3" }) }) })] }) })] })) : (valueStr);
|
|
103
103
|
},
|
|
104
104
|
header: shorten(field.name, MAX_VALUE_LENGTH),
|
|
105
105
|
meta: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useArrowDataTable.js","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {JsonMonacoEditor} from '@sqlrooms/monaco-editor';\nimport {\n Button,\n Popover,\n PopoverContent,\n PopoverTrigger,\n resolveFontSizeClass,\n} from '@sqlrooms/ui';\nimport {safeJsonParse, shorten, toDecimalString} from '@sqlrooms/utils';\nimport {ClipboardIcon} from 'lucide-react';\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\n/**\n * Converts an Arrow value into a human-readable string.\n */\nfunction valueToString(type: arrow.DataType, value: unknown): string {\n if (value === null || value === undefined) return 'NULL';\n\n // --- DECIMAL ---\n if (arrow.DataType.isDecimal(type)) {\n const scale = (type as any).scale ?? 0;\n\n if (value instanceof Uint32Array) {\n // Use Apache Arrow–style helper to convert Decimal128 buffer to string\n return toDecimalString(value, scale);\n }\n\n // For non-Uint32Array values, fall back to default string rendering.\n return String(value);\n }\n\n // --- TIMESTAMP ---\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\n // --- TIME ---\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\n // --- DATE ---\n // Handle Arrow Date32/Date64 values coming from DuckDB-WASM.\n //\n // 1. If `value` is already a JS Date, format it directly.\n // 2. If store config`castTimestampToDate` is true, DuckDB may return a number or bigint:\n // 3. If `value` is a string, try to parse it as a date.\n //\n // This ensures DATE columns are displayed as \"YYYY-MM-DD\" regardless of underlying Arrow type.\n if (arrow.DataType.isDate(type)) {\n const dateType = type as arrow.Date_;\n\n // Already a JS Date\n if (value instanceof Date) return value.toISOString().slice(0, 10);\n\n if (typeof value === 'number' || typeof value === 'bigint') {\n const num = Number(value);\n if (!Number.isFinite(num)) return String(num);\n\n const d = new Date(num);\n if (!Number.isNaN(d.getTime())) return d.toISOString().slice(0, 10);\n\n return String(num);\n }\n\n // Fallback for strings\n if (typeof value === 'string') {\n const d = new Date(value);\n if (!Number.isNaN(d.getTime())) return d.toISOString().slice(0, 10);\n }\n\n return String(value);\n }\n\n // --- fallback ---\n return String(value);\n}\n\n/**\n * Formatter for rendering Arrow cell values in data tables.\n * Return a string to override the default formatting.\n * If you don't return anything (or return undefined), the default formatter is used.\n *\n * @param type - The Arrow DataType for the column\n * @param value - The raw cell value\n * @returns A formatted string, or undefined/nothing to fall back to the default\n *\n * @example\n * ```ts\n * formatValue: (type, value) => {\n * if (arrow.DataType.isDecimal(type)) {\n * return `$${value}`;\n * }\n * if (arrow.DataType.isBinary(type) && value instanceof Uint8Array) {\n * return `${value.byteLength} bytes`;\n * }\n * }\n * ```\n */\nexport type ArrowDataTableValueFormatter = (\n type: arrow.DataType,\n value: unknown,\n) => string | undefined;\n\nexport type UseArrowDataTableOptions = {\n /** Custom font size for the table e.g. xs, sm, md, lg, base */\n fontSize?: string;\n /**\n * Custom value formatter that overrides the default valueToString.\n * Return a string to use your custom formatting, or undefined to fall back to the default.\n */\n formatValue?: ArrowDataTableValueFormatter;\n};\n\n// Only use for small tables or in combination with pagination\nexport default function useArrowDataTable(\n table: arrow.Table | undefined,\n options: UseArrowDataTableOptions = {},\n): UseArrowDataTableResult | undefined {\n const {fontSize = 'base', formatValue} = options;\n const fontSizeClass = resolveFontSizeClass(fontSize);\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 =\n formatValue?.(field.type, value) ??\n valueToString(field.type, value);\n const parsedJson = safeJsonParse<unknown>(valueStr);\n const isJsonValue = parsedJson !== undefined;\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\n {/* Fixed PopoverContent width */}\n <PopoverContent\n sideOffset={4}\n align=\"center\"\n className={`w-[400px] max-w-[90vw] p-4 ${fontSizeClass} rounded-md shadow-md`}\n >\n <div className=\"space-y-2\">\n {/* Header row */}\n <div className=\"flex items-center gap-2 text-xs\">\n <span\n className=\"min-w-0 flex-1 font-medium\"\n title={field.name}\n >\n {shorten(field.name, MAX_VALUE_LENGTH)}\n </span>\n <span className=\"text-muted-foreground shrink-0\">\n {`(${field.type})`}\n </span>\n </div>\n\n {/* Scrollable content - JSON or raw text */}\n <div className=\"max-h-[300px] min-h-[100px] overflow-auto\">\n {isJsonValue && parsedJson ? (\n <JsonMonacoEditor\n value={parsedJson as any}\n readOnly={true}\n options={{\n lineNumbers: 'off',\n minimap: {enabled: false},\n scrollBeyondLastLine: false,\n wordWrap: 'on',\n }}\n />\n ) : (\n <div className=\"whitespace-pre-wrap break-words font-mono text-xs\">\n {valueStr}\n </div>\n )}\n </div>\n\n {/* Copy button */}\n <div className=\"mt-2 flex justify-end\">\n <Button\n variant=\"ghost\"\n size=\"xs\"\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: shorten(field.name, MAX_VALUE_LENGTH),\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, fontSizeClass, formatValue]);\n\n return data && columns ? {data, columns} : undefined;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"useArrowDataTable.js","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {JsonMonacoEditor} from '@sqlrooms/monaco-editor';\nimport {\n Button,\n Popover,\n PopoverContent,\n PopoverTrigger,\n resolveFontSizeClass,\n} from '@sqlrooms/ui';\nimport {safeJsonParse, shorten, toDecimalString} from '@sqlrooms/utils';\nimport {createColumnHelper} from '@tanstack/react-table';\nimport {ColumnDef} from '@tanstack/table-core';\nimport * as arrow from 'apache-arrow';\nimport {ClipboardIcon} from 'lucide-react';\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\n/**\n * Converts an Arrow value into a human-readable string.\n */\nfunction valueToString(type: arrow.DataType, value: unknown): string {\n if (value === null || value === undefined) return 'NULL';\n\n // --- DECIMAL ---\n if (arrow.DataType.isDecimal(type)) {\n const scale = (type as any).scale ?? 0;\n\n if (value instanceof Uint32Array) {\n // Use Apache Arrow–style helper to convert Decimal128 buffer to string\n return toDecimalString(value, scale);\n }\n\n // For non-Uint32Array values, fall back to default string rendering.\n return String(value);\n }\n\n // --- TIMESTAMP ---\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\n // --- TIME ---\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\n // --- DATE ---\n // Handle Arrow Date32/Date64 values coming from DuckDB-WASM.\n //\n // 1. If `value` is already a JS Date, format it directly.\n // 2. If store config`castTimestampToDate` is true, DuckDB may return a number or bigint:\n // 3. If `value` is a string, try to parse it as a date.\n //\n // This ensures DATE columns are displayed as \"YYYY-MM-DD\" regardless of underlying Arrow type.\n if (arrow.DataType.isDate(type)) {\n const dateType = type as arrow.Date_;\n\n // Already a JS Date\n if (value instanceof Date) return value.toISOString().slice(0, 10);\n\n if (typeof value === 'number' || typeof value === 'bigint') {\n const num = Number(value);\n if (!Number.isFinite(num)) return String(num);\n\n const d = new Date(num);\n if (!Number.isNaN(d.getTime())) return d.toISOString().slice(0, 10);\n\n return String(num);\n }\n\n // Fallback for strings\n if (typeof value === 'string') {\n const d = new Date(value);\n if (!Number.isNaN(d.getTime())) return d.toISOString().slice(0, 10);\n }\n\n return String(value);\n }\n\n // --- fallback ---\n return String(value);\n}\n\n/**\n * Formatter for rendering Arrow cell values in data tables.\n * Return a string to override the default formatting.\n * If you don't return anything (or return undefined), the default formatter is used.\n *\n * @param type - The Arrow DataType for the column\n * @param value - The raw cell value\n * @returns A formatted string, or undefined/nothing to fall back to the default\n *\n * @example\n * ```ts\n * formatValue: (type, value) => {\n * if (arrow.DataType.isDecimal(type)) {\n * return `$${value}`;\n * }\n * if (arrow.DataType.isBinary(type) && value instanceof Uint8Array) {\n * return `${value.byteLength} bytes`;\n * }\n * }\n * ```\n */\nexport type ArrowDataTableValueFormatter = (\n type: arrow.DataType,\n value: unknown,\n) => string | undefined;\n\nexport type UseArrowDataTableOptions = {\n /** Custom font size for the table e.g. xs, sm, md, lg, base */\n fontSize?: string;\n /**\n * Custom value formatter that overrides the default valueToString.\n * Return a string to use your custom formatting, or undefined to fall back to the default.\n */\n formatValue?: ArrowDataTableValueFormatter;\n};\n\n// Only use for small tables or in combination with pagination\nexport default function useArrowDataTable(\n table: arrow.Table | undefined,\n options: UseArrowDataTableOptions = {},\n): UseArrowDataTableResult | undefined {\n const {fontSize = 'base', formatValue} = options;\n const fontSizeClass = resolveFontSizeClass(fontSize);\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 =\n formatValue?.(field.type, value) ??\n valueToString(field.type, value);\n const parsedJson = safeJsonParse<unknown>(valueStr);\n const isJsonValue = parsedJson !== undefined;\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\n {/* Fixed PopoverContent width */}\n <PopoverContent\n sideOffset={4}\n align=\"center\"\n className={`w-[400px] max-w-[90vw] p-4 ${fontSizeClass} rounded-md shadow-md`}\n >\n <div className=\"space-y-2\">\n {/* Header row */}\n <div className=\"flex items-center gap-2 text-xs\">\n <span\n className=\"min-w-0 flex-1 font-medium\"\n title={field.name}\n >\n {shorten(field.name, MAX_VALUE_LENGTH)}\n </span>\n <span className=\"text-muted-foreground shrink-0\">\n {`(${field.type})`}\n </span>\n </div>\n\n {/* Scrollable content - JSON or raw text */}\n <div className=\"max-h-[300px] min-h-[100px] overflow-auto\">\n {isJsonValue && parsedJson ? (\n <JsonMonacoEditor\n value={parsedJson as any}\n readOnly={true}\n options={{\n lineNumbers: 'off',\n minimap: {enabled: false},\n scrollBeyondLastLine: false,\n wordWrap: 'on',\n }}\n />\n ) : (\n <div className=\"font-mono text-xs wrap-break-word whitespace-pre-wrap\">\n {valueStr}\n </div>\n )}\n </div>\n\n {/* Copy button */}\n <div className=\"mt-2 flex justify-end\">\n <Button\n variant=\"ghost\"\n size=\"xs\"\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: shorten(field.name, MAX_VALUE_LENGTH),\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, fontSizeClass, formatValue]);\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.
|
|
3
|
+
"version": "0.28.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
"access": "public"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@sqlrooms/duckdb": "0.
|
|
23
|
-
"@sqlrooms/monaco-editor": "0.
|
|
24
|
-
"@sqlrooms/ui": "0.
|
|
25
|
-
"@sqlrooms/utils": "0.
|
|
22
|
+
"@sqlrooms/duckdb": "0.28.0",
|
|
23
|
+
"@sqlrooms/monaco-editor": "0.28.0",
|
|
24
|
+
"@sqlrooms/ui": "0.28.0",
|
|
25
|
+
"@sqlrooms/utils": "0.28.0",
|
|
26
26
|
"@tanstack/react-table": "^8.21.3",
|
|
27
27
|
"@tanstack/table-core": "^8.21.3",
|
|
28
28
|
"lucide-react": "^0.556.0",
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"typecheck": "tsc --noEmit",
|
|
41
41
|
"typedoc": "typedoc"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "dcac54f8adf77240e293c93d224a0ce9fd8142a9"
|
|
44
44
|
}
|