@sqlrooms/data-table 0.0.0 → 0.0.1

package/eslint.config.js

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

package/src/DataTableModal.tsx

@@ -1,44 +0,0 @@
-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

@@ -1,296 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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;
-}

package/src/QueryDataTable.tsx

@@ -1,117 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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';