@sqlrooms/data-table 0.18.1 → 0.19.0

package/dist/DataTablePaginated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePaginated.d.ts","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"AA0BA,OAAO,EACL,SAAS,EACT,eAAe,EACf,YAAY,EAKb,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,uBAAuB,CAAC,IAAI,SAAS,MAAM,IAAI;IACzD,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;CACnD,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,IAAI,SAAS,MAAM,EAAE,EAC9D,SAAS,EACT,QAAsB,EACtB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,UAAU,GACX,EAAE,uBAAuB,CAAC,IAAI,CAAC,2CAwO/B"}
+{"version":3,"file":"DataTablePaginated.d.ts","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"AA4BA,OAAO,EACL,SAAS,EACT,eAAe,EACf,YAAY,EAKb,MAAM,uBAAuB,CAAC;AAI/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;CACnD,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,IAAI,SAAS,MAAM,EAAE,EAC9D,SAAS,EACT,QAAsB,EACtB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,UAAU,GACX,EAAE,uBAAuB,CAAC,IAAI,CAAC,2CA0O/B"}

package/dist/DataTablePaginated.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronUpIcon, ChevronsLeftIcon as ChevronDoubleLeftIcon, ChevronsRightIcon as ChevronDoubleRightIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react';
-import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge, cn, } from '@sqlrooms/ui';
+import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge, cn, ScrollArea, ScrollBar, } from '@sqlrooms/ui';
 import { formatCount } from '@sqlrooms/utils';
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
 import { useEffect, useMemo, useState } from 'react';
@@ -40,16 +40,16 @@ export default function DataTablePaginated({ className, fontSize = 'text-base',
     useEffect(() => {
         setInternalPageIndex(pagination?.pageIndex ?? 0);
     }, [pagination?.pageIndex]);
-    return (_jsxs("div", { className: cn(`relative flex h-full w-full flex-col`, className), children: [_jsx("div", { className: "border-border flex-1 overflow-hidden border font-mono", children: _jsx("div", { className: "h-full overflow-auto", children: _jsxs(Table, { disableWrapper: true, children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsxs(TableRow, { children: [_jsx(TableHead, { className: `bg-background sticky left-0 top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2 text-center`, children: isFetching ? (_jsx("div", { className: "border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" })) : null }), headerGroup.headers.map((header) => {
-                                            const meta = header.column.columnDef
-                                                .meta;
-                                            return (_jsx(TableHead, { colSpan: header.colSpan, className: cn('bg-background hover:bg-muted sticky top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2', pagination ? 'cursor-pointer' : '', meta?.isNumeric ? 'text-right' : 'text-left', fontSize), 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));
-                                        }), _jsx(TableHead, { className: "bg-background sticky top-0 w-full whitespace-nowrap border-r border-t py-2" })] }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, i) => (_jsxs(TableRow, { className: "hover:bg-muted bg-background", children: [_jsx(TableCell, { className: `bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSize}`, children: pagination
-                                                ? `${pagination.pageIndex * pagination.pageSize + i + 1}`
-                                                : `${i + 1}` }), row.getVisibleCells().map((cell) => {
-                                            const meta = cell.column.columnDef.meta;
-                                            return (_jsx(TableCell, { className: cn('max-w-[500px] overflow-hidden truncate border-r px-7', fontSize, meta?.isNumeric ? 'text-right' : 'text-left'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                                        }), _jsx(TableCell, { className: "border-r", children: "\u00A0" })] }, row.id))) })] }) }) }), 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 ${fontSize}`, children: [_jsx("div", { children: "Page" }), _jsx(Input, { type: "number", min: 1, max: table.getPageCount(), className: "h-8 w-16", value: internalPageIndex + 1, onChange: (e) => {
+    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 left-0 top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2 text-center`, children: isFetching ? (_jsx("div", { className: "border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" })) : null }), headerGroup.headers.map((header) => {
+                                                const meta = header.column.columnDef
+                                                    .meta;
+                                                return (_jsx(TableHead, { colSpan: header.colSpan, className: cn('bg-background hover:bg-muted sticky top-[-1px] z-10 w-auto whitespace-nowrap border-r py-2', pagination ? 'cursor-pointer' : '', meta?.isNumeric ? 'text-right' : 'text-left', fontSize), 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));
+                                            }), _jsx(TableHead, { className: "bg-background sticky top-0 w-full whitespace-nowrap border-r border-t py-2" })] }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, i) => (_jsxs(TableRow, { className: "hover:bg-muted bg-background", children: [_jsx(TableCell, { className: `bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSize}`, children: pagination
+                                                    ? `${pagination.pageIndex * pagination.pageSize + i + 1}`
+                                                    : `${i + 1}` }), row.getVisibleCells().map((cell) => {
+                                                const meta = cell.column.columnDef.meta;
+                                                return (_jsx(TableCell, { className: cn('max-w-[500px] overflow-hidden truncate border-r px-7', fontSize, meta?.isNumeric ? 'text-right' : 'text-left'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                            }), _jsx(TableCell, { className: "border-r", children: "\u00A0" })] }, row.id))) })] }), _jsx(ScrollBar, { orientation: "vertical", className: "z-50" }), _jsx(ScrollBar, { orientation: "horizontal" })] }) }), pagination || footerActions ? (_jsxs("div", { className: "bg-background sticky bottom-0 left-0 flex flex-wrap items-center gap-2 border border-t-0 p-2", children: [pagination ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronDoubleLeftIcon, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsxs("div", { className: `ml-1 flex items-center gap-1 ${fontSize}`, children: [_jsx("div", { children: "Page" }), _jsx(Input, { type: "number", min: 1, max: table.getPageCount(), className: "h-8 w-16", value: internalPageIndex + 1, onChange: (e) => {
                                                     const value = e.target.value;
                                                     if (value) {
                                                         const page = Math.max(0, Math.min(table.getPageCount() - 1, Number(value) - 1));

package/dist/DataTablePaginated.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePaginated.js","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ChevronsLeftIcon as ChevronDoubleLeftIcon,\n  ChevronsRightIcon as ChevronDoubleRightIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from 'lucide-react';\nimport {\n  Button,\n  Input,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  Badge,\n  cn,\n} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n  ColumnDef,\n  PaginationState,\n  SortingState,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport {useEffect, useMemo, useState} from 'react';\nimport {ArrowColumnMeta} from './useArrowDataTable';\n\nexport type DataTablePaginatedProps<Data extends object> = {\n  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\n/**\n * Data table with pagination, sorting, and custom actions.\n * @param props\n * @returns\n */\nexport default function DataTablePaginated<Data extends object>({\n  className,\n  fontSize = 'text-base',\n  data,\n  columns,\n  numRows,\n  pagination,\n  sorting,\n  onPaginationChange,\n  onSortingChange,\n  footerActions,\n  isFetching,\n}: DataTablePaginatedProps<Data>) {\n  const defaultData = useMemo(() => [], []);\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    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    },\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        <div className=\"h-full overflow-auto\">\n          <Table disableWrapper>\n            <TableHeader>\n              {table.getHeaderGroups().map((headerGroup) => (\n                <TableRow key={headerGroup.id}>\n                  <TableHead\n                    className={`bg-background sticky left-0 top-[-1px] z-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                    ) : 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                          fontSize,\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-0 w-full whitespace-nowrap border-r border-t py-2\" />\n                </TableRow>\n              ))}\n            </TableHeader>\n            <TableBody>\n              {table.getRowModel().rows.map((row, i) => (\n                <TableRow key={row.id} className=\"hover:bg-muted bg-background\">\n                  <TableCell\n                    className={`bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSize}`}\n                  >\n                    {pagination\n                      ? `${pagination.pageIndex * pagination.pageSize + i + 1}`\n                      : `${i + 1}`}\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                          fontSize,\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\">&nbsp;</TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\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 className={`ml-1 flex items-center gap-1 ${fontSize}`}>\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 ${fontSize}`}>\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"]}
+{"version":3,"file":"DataTablePaginated.js","sourceRoot":"","sources":["../src/DataTablePaginated.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ChevronsLeftIcon as ChevronDoubleLeftIcon,\n  ChevronsRightIcon as ChevronDoubleRightIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from 'lucide-react';\nimport {\n  Button,\n  Input,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  Badge,\n  cn,\n  ScrollArea,\n  ScrollBar,\n} from '@sqlrooms/ui';\nimport {formatCount} from '@sqlrooms/utils';\nimport {\n  ColumnDef,\n  PaginationState,\n  SortingState,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport {useEffect, useMemo, useState} from 'react';\nimport {ArrowColumnMeta} from './useArrowDataTable';\n\nexport type DataTablePaginatedProps<Data extends object> = {\n  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\n/**\n * Data table with pagination, sorting, and custom actions.\n * @param props\n * @returns\n */\nexport default function DataTablePaginated<Data extends object>({\n  className,\n  fontSize = 'text-base',\n  data,\n  columns,\n  numRows,\n  pagination,\n  sorting,\n  onPaginationChange,\n  onSortingChange,\n  footerActions,\n  isFetching,\n}: DataTablePaginatedProps<Data>) {\n  const defaultData = useMemo(() => [], []);\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    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    },\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                    ) : 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                          fontSize,\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-0 w-full whitespace-nowrap border-r border-t py-2\" />\n                </TableRow>\n              ))}\n            </TableHeader>\n            <TableBody>\n              {table.getRowModel().rows.map((row, i) => (\n                <TableRow key={row.id} className=\"hover:bg-muted bg-background\">\n                  <TableCell\n                    className={`bg-background text-muted-foreground sticky left-0 border-r text-center ${fontSize}`}\n                  >\n                    {pagination\n                      ? `${pagination.pageIndex * pagination.pageSize + i + 1}`\n                      : `${i + 1}`}\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                          fontSize,\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\">&nbsp;</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 className={`ml-1 flex items-center gap-1 ${fontSize}`}>\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 ${fontSize}`}>\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/data-table",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -18,9 +18,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sqlrooms/duckdb": "0.18.1",
-    "@sqlrooms/ui": "0.18.1",
-    "@sqlrooms/utils": "0.18.1",
+    "@sqlrooms/duckdb": "0.19.0",
+    "@sqlrooms/ui": "0.19.0",
+    "@sqlrooms/utils": "0.19.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/table-core": "^8.21.3",
     "lucide-react": "^0.503.0",
@@ -38,5 +38,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "387c16b1b9dc45c9304454d92f8cf77b9b383a22"
+  "gitHead": "ba6000f1e06d3ab01e309d805b5d187b32c9ff06"
 }