@sqlrooms/data-table 0.28.0-rc.0 → 0.28.1-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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 ?? [],
|
|
@@ -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 -top-px left-0 z-10 w-auto border-r py-2 text-center whitespace-nowrap`}\n >\n {isFetching ? (\n <div className=\"border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent\" />\n ) : enableRowSelection ? (\n <Checkbox\n checked={\n table.getIsAllPageRowsSelected() ||\n (table.getIsSomePageRowsSelected() && 'indeterminate')\n }\n onCheckedChange={(value) =>\n table.toggleAllPageRowsSelected(!!value)\n }\n aria-label=\"Select all\"\n />\n ) : null}\n </TableHead>\n {headerGroup.headers.map((header) => {\n const meta = header.column.columnDef\n .meta as ArrowColumnMeta;\n return (\n <TableHead\n key={header.id}\n colSpan={header.colSpan}\n className={cn(\n 'bg-background hover:bg-muted sticky -top-px z-10 w-auto border-r py-2 whitespace-nowrap',\n pagination ? 'cursor-pointer' : '',\n meta?.isNumeric ? 'text-right' : 'text-left',\n fontSizeClass,\n )}\n onClick={header.column.getToggleSortingHandler()}\n >\n <div className=\"flex items-center gap-2\">\n {header.isPlaceholder ? null : (\n <div>\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n </div>\n )}\n {header.column.getIsSorted() ? (\n header.column.getIsSorted() === 'desc' ? (\n <ChevronDownIcon className=\"h-4 w-4\" />\n ) : (\n <ChevronUpIcon className=\"h-4 w-4\" />\n )\n ) : null}\n <div className=\"flex-1\" />\n <Badge\n variant=\"outline\"\n className={`max-w-[400px] truncate text-xs opacity-30`}\n >\n {String(meta?.type)}\n </Badge>\n </div>\n </TableHead>\n );\n })}\n <TableHead className=\"bg-background sticky -top-px w-full border-t border-r py-2 whitespace-nowrap\" />\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows.map((row, i) => (\n <TableRow\n key={row.id}\n data-state={row.getIsSelected() ? 'selected' : undefined}\n className={cn(\n 'hover:bg-muted bg-background',\n row.getIsSelected() && 'bg-muted',\n )}\n onClick={\n onRowClick\n ? (event) => {\n event.preventDefault();\n onRowClick({row: row as Row<Data>, event});\n }\n : undefined\n }\n onDoubleClick={\n onRowDoubleClick\n ? (event) => {\n event.preventDefault();\n onRowDoubleClick({row: row as Row<Data>, event});\n }\n : undefined\n }\n >\n <TableCell\n className={`bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSizeClass}`}\n >\n {enableRowSelection ? (\n <Checkbox\n checked={row.getIsSelected()}\n onCheckedChange={(value) => row.toggleSelected(!!value)}\n onClick={(event) => event.stopPropagation()}\n aria-label=\"Select row\"\n />\n ) : pagination ? (\n `${pagination.pageIndex * pagination.pageSize + i + 1}`\n ) : (\n `${i + 1}`\n )}\n </TableCell>\n {row.getVisibleCells().map((cell) => {\n const meta = cell.column.columnDef.meta as ArrowColumnMeta;\n return (\n <TableCell\n key={cell.id}\n className={cn(\n 'max-w-[500px] truncate overflow-hidden border-r px-7',\n fontSizeClass,\n meta?.isNumeric ? 'text-right' : 'text-left',\n )}\n >\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n </TableCell>\n );\n })}\n <TableCell className=\"border-r\"> </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n <ScrollBar orientation=\"vertical\" className=\"z-50\" />\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n </div>\n {pagination || footerActions ? (\n <div className=\"bg-background sticky bottom-0 left-0 flex flex-wrap items-center gap-2 border border-t-0 p-2\">\n {pagination ? (\n <>\n <div className=\"flex flex-wrap items-center gap-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronDoubleLeftIcon className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronLeftIcon className=\"h-4 w-4\" />\n </Button>\n <div\n className={`ml-1 flex items-center gap-1 ${fontSizeClass}`}\n >\n <div>Page</div>\n <Input\n type=\"number\"\n min={1}\n max={table.getPageCount()}\n className=\"h-8 w-16\"\n value={internalPageIndex + 1}\n onChange={(e) => {\n const value = e.target.value;\n if (value) {\n const page = Math.max(\n 0,\n Math.min(table.getPageCount() - 1, Number(value) - 1),\n );\n setInternalPageIndex(page);\n }\n }}\n onBlur={() => {\n if (internalPageIndex !== pagination?.pageIndex) {\n table.setPageIndex(internalPageIndex);\n }\n }}\n />\n <div>{`of ${formatCount(table.getPageCount())}`}</div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n <ChevronRightIcon className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n <ChevronDoubleRightIcon className=\"h-4 w-4\" />\n </Button>\n <Select\n value={String(table.getState().pagination.pageSize)}\n onValueChange={(value) => table.setPageSize(Number(value))}\n >\n <SelectTrigger className=\"h-8 w-[110px]\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {[10, 50, 100, 500, 1000].map((pageSize) => (\n <SelectItem key={pageSize} value={String(pageSize)}>\n {`${pageSize} rows`}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex-1\" />\n </>\n ) : null}\n\n <>\n {numRows !== undefined && isFinite(numRows) ? (\n <div className={`font-normal ${fontSizeClass}`}>\n {`${formatCount(numRows)} rows`}\n </div>\n ) : null}\n </>\n {footerActions}\n </div>\n ) : null}\n\n {isFetching ? (\n <div className=\"bg-background/80 absolute inset-0 animate-pulse\" />\n ) : null}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"DataTablePaginated.js","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Badge,\n Button,\n Checkbox,\n cn,\n Input,\n resolveFontSizeClass,\n ScrollArea,\n ScrollBar,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n ColumnDef,\n flexRender,\n getCoreRowModel,\n getSortedRowModel,\n PaginationState,\n Row,\n RowSelectionState,\n SortingState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {\n ChevronsLeftIcon as ChevronDoubleLeftIcon,\n ChevronsRightIcon as ChevronDoubleRightIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from 'lucide-react';\nimport {useCallback, useEffect, useMemo, useRef, useState} from 'react';\nimport {ArrowColumnMeta} from './useArrowDataTable';\n\nexport type DataTablePaginatedProps<Data extends object> = {\n className?: string;\n /** Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base */\n fontSize?: string;\n data?: ArrayLike<Data> | undefined;\n columns?: ColumnDef<Data, any>[] | undefined;\n pageCount?: number | undefined;\n numRows?: number | undefined;\n isFetching?: boolean;\n pagination?: PaginationState | undefined;\n sorting?: SortingState;\n footerActions?: React.ReactNode;\n onPaginationChange?: (pagination: PaginationState) => void;\n onSortingChange?: (sorting: SortingState) => void;\n /**\n * Called when a row is clicked.\n */\n onRowClick?: (args: {\n row: Row<Data>;\n event: React.MouseEvent<HTMLTableRowElement>;\n }) => void;\n /**\n * Called when a row is double-clicked.\n */\n onRowDoubleClick?: (args: {\n row: Row<Data>;\n event: React.MouseEvent<HTMLTableRowElement>;\n }) => void;\n /**\n * Enables row selection with checkboxes. When true, a checkbox column is added.\n */\n enableRowSelection?: boolean;\n /**\n * Controlled row selection state. Keys are row indices, values are selection status.\n */\n rowSelection?: RowSelectionState;\n /**\n * Called when row selection changes.\n */\n onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n};\n\n/**\n * Data table with pagination, sorting, row selection, and custom actions.\n */\nexport default function DataTablePaginated<Data extends object>({\n className,\n fontSize = 'text-xs',\n data,\n columns,\n numRows,\n pagination,\n sorting,\n onPaginationChange,\n onSortingChange,\n footerActions,\n isFetching,\n onRowClick,\n onRowDoubleClick,\n enableRowSelection,\n rowSelection,\n onRowSelectionChange,\n}: DataTablePaginatedProps<Data>) {\n const defaultData = useMemo(() => [], []);\n const [internalRowSelection, setInternalRowSelection] =\n useState<RowSelectionState>({});\n\n // Use controlled or uncontrolled row selection\n const currentRowSelection = rowSelection ?? internalRowSelection;\n const currentRowSelectionRef = useRef(currentRowSelection);\n\n useEffect(() => {\n currentRowSelectionRef.current = currentRowSelection;\n }, [currentRowSelection]);\n\n const handleRowSelectionChange = useCallback(\n (\n updaterOrValue:\n | RowSelectionState\n | ((old: RowSelectionState) => RowSelectionState),\n ) => {\n if (onRowSelectionChange) {\n const newValue =\n typeof updaterOrValue === 'function'\n ? updaterOrValue(currentRowSelectionRef.current)\n : updaterOrValue;\n onRowSelectionChange(newValue);\n } else {\n setInternalRowSelection(updaterOrValue);\n }\n },\n [onRowSelectionChange, setInternalRowSelection],\n );\n\n const fontSizeClass = resolveFontSizeClass(fontSize);\n const pageCount =\n pagination && numRows !== undefined\n ? Math.ceil(numRows / pagination.pageSize)\n : undefined;\n\n // TanStack's table hook returns non-memoizable functions by design.\n // eslint-disable-next-line react-hooks/incompatible-library\n const table = useReactTable({\n data: (data ?? defaultData) as any[],\n columns: columns ?? [],\n pageCount: pageCount ?? 0,\n getSortedRowModel: getSortedRowModel(),\n enableRowSelection: enableRowSelection ?? false,\n onRowSelectionChange: (update) => {\n handleRowSelectionChange(update);\n },\n onSortingChange: (update) => {\n if (onSortingChange && sorting && typeof update === 'function') {\n onSortingChange(update(sorting));\n }\n },\n onPaginationChange: (update) => {\n if (pagination && onPaginationChange && typeof update === 'function') {\n onPaginationChange(update(pagination));\n }\n },\n getCoreRowModel: getCoreRowModel(),\n manualPagination: true,\n state: {\n pagination,\n sorting,\n rowSelection: currentRowSelection,\n },\n });\n\n const [internalPageIndex, setInternalPageIndex] = useState(\n pagination?.pageIndex ?? 0,\n );\n useEffect(() => {\n setInternalPageIndex(pagination?.pageIndex ?? 0);\n }, [pagination?.pageIndex]);\n\n return (\n <div 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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/data-table",
|
|
3
|
-
"version": "0.28.
|
|
3
|
+
"version": "0.28.1-rc.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.28.
|
|
23
|
-
"@sqlrooms/monaco-editor": "0.28.
|
|
24
|
-
"@sqlrooms/ui": "0.28.
|
|
25
|
-
"@sqlrooms/utils": "0.28.
|
|
22
|
+
"@sqlrooms/duckdb": "0.28.1-rc.0",
|
|
23
|
+
"@sqlrooms/monaco-editor": "0.28.1-rc.0",
|
|
24
|
+
"@sqlrooms/ui": "0.28.1-rc.0",
|
|
25
|
+
"@sqlrooms/utils": "0.28.1-rc.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": "1e0dcae95d1ccdbcd1b32df1d647d0f794b94e5e"
|
|
44
44
|
}
|