@sqlrooms/data-table 0.0.0

package/src/QueryDataTable.tsx

@@ -0,0 +1,117 @@
+import {SpinnerPane} from '@sqlrooms/ui';
+import {
+  escapeId,
+  exportToCsv,
+  getColValAsNumber,
+  useDuckDb,
+} from '@sqlrooms/duckdb';
+import {genRandomStr} from '@sqlrooms/utils';
+import {PaginationState, SortingState} from '@tanstack/table-core';
+import {FC, Suspense, useEffect, useState} from 'react';
+import DataTablePaginated from './DataTablePaginated';
+import useArrowDataTable from './useArrowDataTable';
+
+type Props = {
+  query: string;
+  queryKeyComponents?: any[];
+};
+
+const QueryDataTable: FC<Props> = ({query}) => {
+  const {conn} = useDuckDb();
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 100,
+  });
+
+  const [count, setCount] = useState<number | undefined>(undefined);
+  const [data, setData] = useState<any>(null);
+  const [isFetching, setIsFetching] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+
+  // Fetch row count
+  useEffect(() => {
+    const fetchCount = async () => {
+      try {
+        setIsFetching(true);
+        const result = await conn.query(`SELECT COUNT(*)::int FROM (${query})`);
+        setCount(getColValAsNumber(result));
+      } catch (error) {
+        console.error('Error fetching count:', error);
+      } finally {
+        setIsFetching(false);
+      }
+    };
+
+    fetchCount();
+  }, [query, conn]);
+
+  // Fetch data
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setIsFetching(true);
+        const result = await conn.query(
+          `SELECT * FROM (
+            ${query}
+          ) ${
+            sorting.length > 0
+              ? `ORDER BY ${sorting
+                  .map((d) => `${escapeId(d.id)}${d.desc ? ' DESC' : ''}`)
+                  .join(', ')}`
+              : ''
+          }
+          OFFSET ${pagination.pageIndex * pagination.pageSize}
+          LIMIT ${pagination.pageSize}`,
+        );
+        setData(result);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      } finally {
+        setIsFetching(false);
+      }
+    };
+
+    fetchData();
+  }, [query, pagination, sorting, conn]);
+
+  const arrowTableData = useArrowDataTable(data);
+
+  const handleExport = async () => {
+    if (!query) return;
+    try {
+      setIsExporting(true);
+      await exportToCsv(query, `export-${genRandomStr(5)}.csv`);
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <DataTablePaginated
+      {...arrowTableData}
+      pageCount={Math.ceil((count ?? 0) / pagination.pageSize)}
+      numRows={count}
+      isFetching={isFetching}
+      pagination={pagination}
+      onPaginationChange={setPagination}
+      sorting={sorting}
+      onSortingChange={setSorting}
+      onExport={handleExport}
+      isExporting={isExporting}
+    />
+  );
+};
+
+const QueryDataTableWithSuspense: FC<Props> = (props) => {
+  return (
+    <Suspense fallback={<SpinnerPane className="w-full h-full" />}>
+      <QueryDataTable
+        {...props}
+        key={props.query} // reset state when query changes
+      />
+    </Suspense>
+  );
+};
+
+export default QueryDataTableWithSuspense;

package/src/index.ts

@@ -0,0 +1,6 @@
+export {default as DataTableModal} from './DataTableModal';
+export * from './DataTablePaginated';
+export {default as DataTablePaginated} from './DataTablePaginated';
+export {default as DataTableVirtualized} from './DataTableVirtualized';
+export {default as QueryDataTable} from './QueryDataTable';
+export {default as useArrowDataTable} from './useArrowDataTable';

package/src/useArrowDataTable.tsx

@@ -0,0 +1,112 @@
+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 {ColumnDef} from '@tanstack/table-core';
+import * as arrow from 'apache-arrow';
+import {useMemo} from 'react';
+
+const columnHelper = createColumnHelper();
+
+// TODO: support fetch the result chunks lazily https://github.com/duckdb/duckdb-wasm/tree/master/packages/duckdb-wasm#query-execution
+
+type UseArrowDataTableResult = {
+  data: ArrayLike<any>;
+  columns: ColumnDef<any, any>[];
+};
+
+export type ArrowColumnMeta = {
+  type: arrow.DataType;
+  isNumeric: boolean;
+};
+
+const MAX_VALUE_LENGTH = 64;
+
+function valueToString(type: arrow.DataType, value: any): string {
+  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: arrow.Table | undefined,
+): UseArrowDataTableResult | undefined {
+  const data = useMemo(() => ({length: table?.numRows ?? 0}), [table]);
+  const columns = useMemo(() => {
+    if (!table) return undefined;
+    const columns: ColumnDef<any, any>[] = [];
+    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 ? (
+              <Popover>
+                <PopoverTrigger asChild>
+                  <span className="cursor-pointer">
+                    {shorten(`${valueStr}`, MAX_VALUE_LENGTH)}
+                  </span>
+                </PopoverTrigger>
+                <PopoverContent className="font-mono text-xs w-auto max-w-[500px]">
+                  <div className="space-y-2">
+                    <div className="font-medium">{`"${field.name}" (${field.type})`}</div>
+                    <div className="relative">
+                      {valueStr}
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="absolute top-0 right-0 h-6 w-6"
+                        onClick={() => navigator.clipboard.writeText(valueStr)}
+                      >
+                        <ClipboardIcon className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            ) : (
+              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/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@sqlrooms/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}