@sqlrooms/data-table 0.0.0

package/dist/useArrowDataTable.d.ts

@@ -0,0 +1,13 @@
+import { ColumnDef } from '@tanstack/table-core';
+import * as arrow from 'apache-arrow';
+type UseArrowDataTableResult = {
+    data: ArrayLike<any>;
+    columns: ColumnDef<any, any>[];
+};
+export type ArrowColumnMeta = {
+    type: arrow.DataType;
+    isNumeric: boolean;
+};
+export default function useArrowDataTable(table: arrow.Table | undefined): UseArrowDataTableResult | undefined;
+export {};
+//# sourceMappingURL=useArrowDataTable.d.ts.map

package/dist/useArrowDataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useArrowDataTable.d.ts","sourceRoot":"","sources":["../src/useArrowDataTable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAOtC,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;AAkCF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,GAC7B,uBAAuB,GAAG,SAAS,CAuDrC"}

package/dist/useArrowDataTable.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Popover, PopoverContent, PopoverTrigger } from '@sqlrooms/ui';
+import { ClipboardIcon } from '@heroicons/react/24/outline';
+import { shorten } from '@sqlrooms/utils';
+import { createColumnHelper } from '@tanstack/react-table';
+import * as arrow from 'apache-arrow';
+import { useMemo } from 'react';
+const columnHelper = createColumnHelper();
+const MAX_VALUE_LENGTH = 64;
+function valueToString(type, value) {
+    if (value === null || value === undefined) {
+        return 'NULL';
+    }
+    if (arrow.DataType.isTimestamp(type)) {
+        switch (typeof value) {
+            case 'number':
+            case 'bigint':
+                return new Date(Number(value)).toISOString();
+            case 'string':
+                return new Date(value).toISOString();
+        }
+    }
+    if (arrow.DataType.isTime(type)) {
+        switch (typeof value) {
+            case 'number':
+            case 'bigint':
+                return new Date(Number(value) / 1000).toISOString().substring(11, 19);
+            case 'string':
+                return new Date(value).toISOString().substring(11, 19);
+        }
+    }
+    if (arrow.DataType.isDate(type)) {
+        if (value instanceof Date) {
+            return value.toISOString();
+        }
+    }
+    return String(value);
+}
+// Only use for small tables or in combination with pagination
+export default function useArrowDataTable(table) {
+    const data = useMemo(() => ({ length: table?.numRows ?? 0 }), [table]);
+    const columns = useMemo(() => {
+        if (!table)
+            return undefined;
+        const columns = [];
+        for (const field of table.schema.fields) {
+            columns.push(columnHelper.accessor((_row, i) => table.getChild(field.name)?.get(i), {
+                cell: (info) => {
+                    const value = info.getValue();
+                    const valueStr = valueToString(field.type, value);
+                    return valueStr.length > MAX_VALUE_LENGTH ? (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("span", { className: "cursor-pointer", children: shorten(`${valueStr}`, MAX_VALUE_LENGTH) }) }), _jsx(PopoverContent, { className: "font-mono text-xs w-auto max-w-[500px]", children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "font-medium", children: `"${field.name}" (${field.type})` }), _jsxs("div", { className: "relative", children: [valueStr, _jsx(Button, { variant: "ghost", size: "icon", className: "absolute top-0 right-0 h-6 w-6", onClick: () => navigator.clipboard.writeText(valueStr), children: _jsx(ClipboardIcon, { className: "h-3 w-3" }) })] })] }) })] })) : (valueStr);
+                },
+                header: field.name,
+                meta: {
+                    type: field.type,
+                    isNumeric: arrow.DataType.isFloat(field.type) ||
+                        arrow.DataType.isDecimal(field.type) ||
+                        arrow.DataType.isInt(field.type),
+                },
+            }));
+        }
+        return columns;
+    }, [table]);
+    return data && columns ? { data, columns } : undefined;
+}

package/docs/architecture.md

@@ -0,0 +1,18 @@
+## Package Structure
+
+SQLRooms is organized into several key packages:
+
+### Core Packages
+
+- `@sqlrooms/project-builder`: Core framework and UI components
+- `@sqlrooms/project-config`: Configuration and type definitions
+- `@sqlrooms/layout`: Layout system and panel management
+- `@sqlrooms/ui`: Shared UI components and styling
+
+### Feature Packages
+
+- `@sqlrooms/data-table`: Interactive data grid component for query results
+- `@sqlrooms/duckdb`: DuckDB-WASM integration and utilities
+- `@sqlrooms/dropzone`: File upload and drag-and-drop functionality
+- `@sqlrooms/s3-browser`: S3-compatible storage browser and file manager
+- `@sqlrooms/sql-editor`: SQL query editor with syntax highlighting and autocompletion

package/eslint.config.js

@@ -0,0 +1,4 @@
+import {config} from '@sqlrooms/eslint-config/react-internal';
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@sqlrooms/data-table",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "types": "src/index.ts",
+  "module": "dist/index.js",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@heroicons/react": "*",
+    "@sqlrooms/duckdb": "0.0.0",
+    "@sqlrooms/ui": "0.0.0",
+    "@sqlrooms/utils": "0.0.0",
+    "@tanstack/react-table": "^8.10.7",
+    "@tanstack/table-core": "^8.10.7",
+    "react-virtual": "2.10.4"
+  },
+  "peerDependencies": {
+    "apache-arrow": "*",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "scripts": {
+    "dev": "tsc -w",
+    "build": "tsc",
+    "lint": "eslint ."
+  },
+  "gitHead": "4b0c709542475e4f95db0b2a8405ecadcf2ec186"
+}

package/src/DataTableModal.tsx

@@ -0,0 +1,44 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@sqlrooms/ui';
+import {FC} from 'react';
+import QueryDataTable from './QueryDataTable';
+
+type Props = {
+  title: string | undefined;
+  query: string | undefined;
+  tableModal: {
+    isOpen: boolean;
+    onClose: () => void;
+  };
+};
+
+const DataTableModal: FC<Props> = ({title, query, tableModal}) => {
+  return (
+    <Dialog
+      open={tableModal.isOpen}
+      onOpenChange={(isOpen: boolean) => !isOpen && tableModal.onClose()}
+    >
+      <DialogContent className="h-[80vh] max-w-[75vw]">
+        <DialogHeader>
+          <DialogTitle>{title ? `Table "${title}"` : ''}</DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 bg-muted overflow-hidden">
+          {tableModal.isOpen && query ? <QueryDataTable query={query} /> : null}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={tableModal.onClose}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DataTableModal;

package/src/DataTablePaginated.tsx

@@ -0,0 +1,296 @@
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ArrowDownIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from '@heroicons/react/24/solid';
+import {
+  Button,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Badge,
+} from '@sqlrooms/ui';
+import {formatCount} from '@sqlrooms/utils';
+import {
+  ColumnDef,
+  PaginationState,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import {useEffect, useMemo, useState} from 'react';
+import {ArrowColumnMeta} from './useArrowDataTable';
+
+export type DataTablePaginatedProps<Data extends object> = {
+  data?: ArrayLike<Data> | undefined;
+  columns?: ColumnDef<Data, any>[] | undefined;
+  pageCount?: number | undefined;
+  numRows?: number | undefined;
+  isFetching?: boolean;
+  isExporting?: boolean;
+  pagination?: PaginationState;
+  sorting?: SortingState;
+  onPaginationChange?: (pagination: PaginationState) => void;
+  onSortingChange?: (sorting: SortingState) => void;
+  onExport?: () => void;
+};
+
+export default function DataTablePaginated<Data extends object>({
+  data,
+  columns,
+  pageCount,
+  numRows,
+  pagination,
+  sorting,
+  onPaginationChange,
+  onSortingChange,
+  onExport,
+  isExporting,
+  isFetching,
+}: DataTablePaginatedProps<Data>) {
+  const defaultData = useMemo(() => [], []);
+  const table = useReactTable({
+    data: (data ?? defaultData) as any[],
+    columns: columns ?? [],
+    pageCount: pageCount ?? -1,
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: (update) => {
+      if (onSortingChange && sorting && typeof update === 'function') {
+        onSortingChange(update(sorting));
+      }
+    },
+    onPaginationChange: (update) => {
+      if (onPaginationChange && pagination && typeof update === 'function') {
+        onPaginationChange(update(pagination));
+      }
+    },
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    state: {
+      pagination,
+      sorting,
+    },
+  });
+
+  const [internalPageIndex, setInternalPageIndex] = useState(
+    pagination?.pageIndex ?? 0,
+  );
+  useEffect(() => {
+    setInternalPageIndex(pagination?.pageIndex ?? 0);
+  }, [pagination?.pageIndex]);
+
+  return (
+    <div className="relative w-full h-full flex flex-col">
+      <div className="flex-1 overflow-hidden border border-border font-mono">
+        <div className="overflow-auto h-full">
+          <Table disableWrapper>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  <TableHead
+                    className={`
+                      sticky top-0 left-0 w-auto whitespace-nowrap py-2 
+                      bg-background border-r text-center z-20
+                    `}
+                  >
+                    {isFetching ? (
+                      <div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full" />
+                    ) : null}
+                  </TableHead>
+                  {headerGroup.headers.map((header) => {
+                    const meta = header.column.columnDef
+                      .meta as ArrowColumnMeta;
+                    return (
+                      <TableHead
+                        key={header.id}
+                        colSpan={header.colSpan}
+                        className={`
+                          sticky top-0 w-auto whitespace-nowrap cursor-pointer py-2 
+                          bg-background border-r hover:bg-muted/80 z-10
+                          ${meta?.isNumeric ? 'text-right' : 'text-left'}
+                        `}
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        <div className="flex gap-2 items-center">
+                          {header.isPlaceholder ? null : (
+                            <div>
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                            </div>
+                          )}
+                          {header.column.getIsSorted() ? (
+                            header.column.getIsSorted() === 'desc' ? (
+                              <ChevronDownIcon className="h-4 w-4" />
+                            ) : (
+                              <ChevronUpIcon className="h-4 w-4" />
+                            )
+                          ) : null}
+                          <div className="flex-1" />
+                          <Badge
+                            variant="outline"
+                            className="opacity-30 text-[9px] max-w-[70px] truncate"
+                          >
+                            {String(meta?.type)}
+                          </Badge>
+                        </div>
+                      </TableHead>
+                    );
+                  })}
+                  <TableHead className="sticky top-0 w-full whitespace-nowrap py-2 bg-background border-r border-t" />
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows.map((row, i) => (
+                <TableRow key={row.id} className="hover:bg-muted/50">
+                  <TableCell className="text-xs border-r bg-muted text-center text-muted-foreground sticky left-0">
+                    {pagination
+                      ? `${pagination.pageIndex * pagination.pageSize + i + 1}`
+                      : ''}
+                  </TableCell>
+                  {row.getVisibleCells().map((cell) => {
+                    const meta = cell.column.columnDef.meta as ArrowColumnMeta;
+                    return (
+                      <TableCell
+                        key={cell.id}
+                        className={`
+                          text-[11px] border-r max-w-[500px] overflow-hidden truncate px-7
+                          ${meta?.isNumeric ? 'text-right' : 'text-left'}
+                        `}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </TableCell>
+                    );
+                  })}
+                  <TableCell className="border-r">&nbsp;</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+      <div className="sticky bottom-0 left-0 bg-background p-2 flex gap-2 items-center flex-wrap border border-t-0">
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => table.setPageIndex(0)}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <ChevronDoubleLeftIcon className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <ChevronLeftIcon className="h-4 w-4" />
+        </Button>
+        <div className="flex items-center text-sm ml-1 gap-1">
+          <div>Page</div>
+          <Input
+            type="number"
+            min={1}
+            max={table.getPageCount()}
+            className="w-16 h-8"
+            value={internalPageIndex + 1}
+            onChange={(e) => {
+              const value = e.target.value;
+              if (value) {
+                const page = Math.max(
+                  0,
+                  Math.min(table.getPageCount() - 1, Number(value) - 1),
+                );
+                setInternalPageIndex(page);
+              }
+            }}
+            onBlur={() => {
+              if (internalPageIndex !== pagination?.pageIndex) {
+                table.setPageIndex(internalPageIndex);
+              }
+            }}
+          />
+          <div>{`of ${formatCount(table.getPageCount())}`}</div>
+        </div>
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          <ChevronRightIcon className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          disabled={!table.getCanNextPage()}
+        >
+          <ChevronDoubleRightIcon className="h-4 w-4" />
+        </Button>
+        <Select
+          value={String(table.getState().pagination.pageSize)}
+          onValueChange={(value) => table.setPageSize(Number(value))}
+        >
+          <SelectTrigger className="w-[110px] h-8">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {[10, 50, 100, 500, 1000].map((pageSize) => (
+              <SelectItem key={pageSize} value={String(pageSize)}>
+                {`${pageSize} rows`}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <div className="flex-1" />
+
+        {numRows !== undefined && isFinite(numRows) ? (
+          <div className="text-sm font-normal">
+            {`${formatCount(numRows)} rows`}
+          </div>
+        ) : null}
+
+        {onExport ? (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onExport}
+            disabled={isExporting}
+          >
+            {isExporting ? (
+              <div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full mr-2" />
+            ) : (
+              <ArrowDownIcon className="h-4 w-4 mr-2" />
+            )}
+            Export CSV
+          </Button>
+        ) : null}
+      </div>
+      {isFetching ? (
+        <div className="absolute inset-0 bg-background/80 animate-pulse" />
+      ) : null}
+    </div>
+  );
+}

package/src/DataTableVirtualized.tsx

@@ -0,0 +1,190 @@
+import {ChevronDownIcon, ChevronUpIcon} from '@heroicons/react/24/solid';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Badge,
+} from '@sqlrooms/ui';
+import {ErrorPane, SpinnerPane} from '@sqlrooms/ui';
+import {formatCount} from '@sqlrooms/utils';
+import {
+  ColumnDef,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import * as React from 'react';
+import {useVirtual} from 'react-virtual';
+
+export type Props<Data extends object> = {
+  data?: ArrayLike<Data>;
+  columns?: ColumnDef<Data, any>[];
+  isFetching?: boolean;
+  error?: any;
+  isPreview?: boolean;
+};
+
+export type DataTableProps<Data extends object> = {
+  data: ArrayLike<Data>;
+  columns: ColumnDef<Data, any>[];
+  isPreview?: boolean;
+};
+
+const DataTableVirtualized = React.memo(function DataTableVirtualized<
+  Data extends object,
+>({data, columns, isPreview}: DataTableProps<Data>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const table = useReactTable({
+    columns,
+    data: data as Data[],
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
+  });
+  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
+  const {rows} = table.getRowModel();
+  const rowVirtualizer = useVirtual({
+    parentRef: tableContainerRef,
+    size: rows.length,
+    overscan: 20,
+  });
+  const {virtualItems: virtualRows, totalSize} = rowVirtualizer;
+
+  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
+  const paddingBottom =
+    virtualRows.length > 0
+      ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0)
+      : 0;
+
+  return (
+    <div className="flex flex-col overflow-hidden">
+      <div className="overflow-hidden border border-border">
+        <div ref={tableContainerRef} className="overflow-auto h-full">
+          <Table disableWrapper>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  <TableHead
+                    className={`
+                      sticky top-0 left-0 w-auto whitespace-nowrap py-2 
+                      bg-background border-r text-center z-20
+                    `}
+                  />
+                  {headerGroup.headers.map((header) => {
+                    const meta = header.column.columnDef.meta as any;
+                    return (
+                      <TableHead
+                        key={header.id}
+                        className={`
+                          sticky top-0 font-mono whitespace-nowrap cursor-pointer px-7 py-2
+                          bg-background border-r hover:bg-muted/80 z-10
+                          ${meta?.isNumeric ? 'text-right' : 'text-left'}
+                        `}
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        <div
+                          className={`flex items-center gap-1 ${
+                            meta?.isNumeric ? 'justify-end' : 'justify-start'
+                          }`}
+                        >
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                          {header.column.getIsSorted() ? (
+                            header.column.getIsSorted() === 'desc' ? (
+                              <ChevronDownIcon className="h-4 w-4" />
+                            ) : (
+                              <ChevronUpIcon className="h-4 w-4" />
+                            )
+                          ) : null}
+                          <div className="flex-1" />
+                          <Badge
+                            variant="outline"
+                            className="opacity-30 text-[9px]"
+                          >
+                            {String(meta?.type)}
+                          </Badge>
+                        </div>
+                      </TableHead>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {paddingTop > 0 && (
+                <TableRow>
+                  <TableCell style={{height: `${paddingTop}px`}} />
+                </TableRow>
+              )}
+              {virtualRows.map((virtualRow) => {
+                const row = rows[virtualRow.index];
+                if (!row) return null;
+                return (
+                  <TableRow key={row.id} className="hover:bg-muted/50">
+                    <TableCell className="text-xs border-r bg-muted text-center text-muted-foreground sticky left-0">
+                      {virtualRow.index + 1}
+                    </TableCell>
+                    {row.getVisibleCells().map((cell) => {
+                      const meta = cell.column.columnDef.meta as any;
+                      return (
+                        <TableCell
+                          key={cell.id}
+                          className={`
+                            text-xs border-r max-w-[500px] overflow-hidden truncate px-7
+                            ${meta?.isNumeric ? 'text-right' : 'text-left'}
+                          `}
+                        >
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                );
+              })}
+              {paddingBottom > 0 && (
+                <TableRow>
+                  <TableCell style={{height: `${paddingBottom}px`}} />
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+      <div className="sticky bottom-0 left-0 py-2 px-4 text-xs font-mono bg-background border border-t-0">
+        {`${isPreview ? 'Preview of the first ' : ''}${formatCount(data.length)} rows`}
+      </div>
+    </div>
+  );
+});
+
+export default function DataTableWithLoader<Data extends object>(
+  props: Props<Data>,
+) {
+  const {isPreview, isFetching, error, ...rest} = props;
+  const {data, columns} = rest;
+  return error ? (
+    <ErrorPane error={error} />
+  ) : isFetching ? (
+    <SpinnerPane h="100%" />
+  ) : data && columns ? (
+    <DataTableVirtualized
+      data={data}
+      columns={columns as any}
+      isPreview={isPreview}
+    />
+  ) : null;
+}