@sqlrooms/data-table 0.0.1 → 0.0.2

package/dist/DataTableModal.d.ts

@@ -1,12 +1,41 @@
 import { FC } from 'react';
-type Props = {
+/**
+ * A modal component for displaying a table with data from a SQL query.
+ *
+ * @component
+ * @param props - Component props
+ * @param props.title - The title of the table
+ * @param props.query - The SQL query to execute and display in the table
+ * @param props.tableModal - An object containing the modal's open state and close function
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react';
+ * import { DataTableModal } from '@sqlrooms/data-table';
+ *
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <DataTableModal
+ *       title="Users"
+ *       query="SELECT * FROM users LIMIT 10"
+ *       tableModal={{
+ *         isOpen,
+ *         onClose: () => setIsOpen(false)
+ *       }}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+declare const DataTableModal: FC<{
     title: string | undefined;
     query: string | undefined;
     tableModal: {
         isOpen: boolean;
         onClose: () => void;
     };
-};
-declare const DataTableModal: FC<Props>;
+}>;
 export default DataTableModal;
 //# sourceMappingURL=DataTableModal.d.ts.map

package/dist/DataTableModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableModal.d.ts","sourceRoot":"","sources":["../src/DataTableModal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAGzB,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE,OAAO,CAAC;QAChB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAqB7B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DataTableModal.d.ts","sourceRoot":"","sources":["../src/DataTableModal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAGzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE,OAAO,CAAC;QAChB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH,CAwBA,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/DataTableModal.js

@@ -1,7 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '@sqlrooms/ui';
 import QueryDataTable from './QueryDataTable';
+/**
+ * A modal component for displaying a table with data from a SQL query.
+ *
+ * @component
+ * @param props - Component props
+ * @param props.title - The title of the table
+ * @param props.query - The SQL query to execute and display in the table
+ * @param props.tableModal - An object containing the modal's open state and close function
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react';
+ * import { DataTableModal } from '@sqlrooms/data-table';
+ *
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <DataTableModal
+ *       title="Users"
+ *       query="SELECT * FROM users LIMIT 10"
+ *       tableModal={{
+ *         isOpen,
+ *         onClose: () => setIsOpen(false)
+ *       }}
+ *     />
+ *   );
+ * };
+ * ```
+ */
 const DataTableModal = ({ title, query, tableModal }) => {
-    return (_jsx(Dialog, { open: tableModal.isOpen, onOpenChange: (isOpen) => !isOpen && tableModal.onClose(), children: _jsxs(DialogContent, { className: "h-[80vh] max-w-[75vw]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: title ? `Table "${title}"` : '' }) }), _jsx("div", { className: "flex-1 bg-muted overflow-hidden", children: tableModal.isOpen && query ? _jsx(QueryDataTable, { query: query }) : null }), _jsx(DialogFooter, { children: _jsx(Button, { variant: "outline", onClick: tableModal.onClose, children: "Close" }) })] }) }));
+    return (_jsx(Dialog, { open: tableModal.isOpen, onOpenChange: (isOpen) => !isOpen && tableModal.onClose(), children: _jsxs(DialogContent, { className: "h-[80vh] max-w-[75vw]", "aria-describedby": "data-table-modal", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: title ? `Table "${title}"` : '' }) }), _jsx("div", { className: "flex-1 bg-muted overflow-hidden", children: tableModal.isOpen && query ? _jsx(QueryDataTable, { query: query }) : null }), _jsx(DialogFooter, { children: _jsx(Button, { variant: "outline", onClick: tableModal.onClose, children: "Close" }) })] }) }));
 };
 export default DataTableModal;

package/dist/DataTablePaginated.js

@@ -40,15 +40,15 @@ export default function DataTablePaginated({ data, columns, pageCount, numRows,
                                                 .meta;
                                             return (_jsx(TableHead, { 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
+                          bg-background border-r hover:bg-muted z-10
                           ${meta?.isNumeric ? 'text-right' : 'text-left'}
-                        `, onClick: header.column.getToggleSortingHandler(), children: _jsxs("div", { className: "flex gap-2 items-center", 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: "opacity-30 text-[9px] max-w-[70px] truncate", children: String(meta?.type) })] }) }, header.id));
-                                        }), _jsx(TableHead, { className: "sticky top-0 w-full whitespace-nowrap py-2 bg-background border-r border-t" })] }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, i) => (_jsxs(TableRow, { className: "hover:bg-muted/50", children: [_jsx(TableCell, { className: "text-xs border-r bg-muted text-center text-muted-foreground sticky left-0", children: pagination
+                        `, onClick: header.column.getToggleSortingHandler(), children: _jsxs("div", { className: "flex gap-2 items-center", 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: "opacity-30 text-xs truncate max-w-[400px]", children: String(meta?.type) })] }) }, header.id));
+                                        }), _jsx(TableHead, { className: "sticky top-0 w-full whitespace-nowrap py-2 bg-background border-r border-t" })] }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, i) => (_jsxs(TableRow, { className: "hover:bg-muted bg-background", children: [_jsx(TableCell, { className: "text-xs border-r text-center text-muted-foreground sticky left-0", children: pagination
                                                 ? `${pagination.pageIndex * pagination.pageSize + i + 1}`
                                                 : '' }), row.getVisibleCells().map((cell) => {
                                             const meta = cell.column.columnDef.meta;
                                             return (_jsx(TableCell, { className: `
-                          text-[11px] border-r max-w-[500px] overflow-hidden truncate px-7
+                          text-xs border-r max-w-[500px] overflow-hidden truncate px-7
                           ${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))) })] }) }) }), _jsxs("div", { className: "sticky bottom-0 left-0 bg-background p-2 flex gap-2 items-center flex-wrap border border-t-0", 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: "flex items-center text-sm ml-1 gap-1", children: [_jsx("div", { children: "Page" }), _jsx(Input, { type: "number", min: 1, max: table.getPageCount(), className: "w-16 h-8", value: internalPageIndex + 1, onChange: (e) => {

package/dist/DataTableVirtualized.d.ts

@@ -1,5 +1,5 @@
 import { ColumnDef } from '@tanstack/react-table';
-export type Props<Data extends object> = {
+export type DataTableVirtualizedProps<Data extends object> = {
     data?: ArrayLike<Data>;
     columns?: ColumnDef<Data, any>[];
     isFetching?: boolean;
@@ -11,5 +11,5 @@ export type DataTableProps<Data extends object> = {
     columns: ColumnDef<Data, any>[];
     isPreview?: boolean;
 };
-export default function DataTableWithLoader<Data extends object>(props: Props<Data>): import("react/jsx-runtime").JSX.Element | null;
+export default function DataTableWithLoader<Data extends object>(props: DataTableVirtualizedProps<Data>): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=DataTableVirtualized.d.ts.map

package/dist/DataTableVirtualized.d.ts.map

@@ -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,KAAK,CAAC,IAAI,SAAS,MAAM,IAAI;IACvC,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;AA0IF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,IAAI,SAAS,MAAM,EAC7D,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,kDAenB"}
+{"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;AA0IF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,IAAI,SAAS,MAAM,EAC7D,KAAK,EAAE,yBAAyB,CAAC,IAAI,CAAC,kDAevC"}

package/dist/QueryDataTable.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-type Props = {
+export type QueryDataTableProps = {
     query: string;
-    queryKeyComponents?: any[];
+    queryKeyComponents?: unknown[];
 };
-declare const QueryDataTableWithSuspense: FC<Props>;
+declare const QueryDataTableWithSuspense: FC<QueryDataTableProps>;
 export default QueryDataTableWithSuspense;
 //# sourceMappingURL=QueryDataTable.d.ts.map

package/dist/QueryDataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryDataTable.d.ts","sourceRoot":"","sources":["../src/QueryDataTable.tsx"],"names":[],"mappings":"AASA,OAAO,EAAC,EAAE,EAAgC,MAAM,OAAO,CAAC;AAIxD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,GAAG,EAAE,CAAC;CAC5B,CAAC;AAyFF,QAAA,MAAM,0BAA0B,EAAE,EAAE,CAAC,KAAK,CASzC,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"QueryDataTable.d.ts","sourceRoot":"","sources":["../src/QueryDataTable.tsx"],"names":[],"mappings":"AASA,OAAO,EAAC,EAAE,EAAgC,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,EAAE,CAAC;CAChC,CAAC;AAyFF,QAAA,MAAM,0BAA0B,EAAE,EAAE,CAAC,mBAAmB,CASvD,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "@sqlrooms/data-table",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
   "type": "module",
   "private": false,
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@heroicons/react": "*",
-    "@sqlrooms/duckdb": "0.0.1",
-    "@sqlrooms/ui": "0.0.1",
-    "@sqlrooms/utils": "0.0.1",
+    "@sqlrooms/duckdb": "0.0.2",
+    "@sqlrooms/ui": "0.0.2",
+    "@sqlrooms/utils": "0.0.2",
     "@tanstack/react-table": "^8.10.7",
     "@tanstack/table-core": "^8.10.7",
     "react-virtual": "2.10.4"
@@ -26,7 +29,8 @@
   "scripts": {
     "dev": "tsc -w",
     "build": "tsc",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "typedoc": "typedoc"
   },
-  "gitHead": "5d8893a604a91d109dc5b5f80b4a3e937b4cf520"
+  "gitHead": "32da0b35fe906bdcef42274624d069cc49425a74"
 }

package/CHANGELOG.md

@@ -1,14 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [0.0.1](https://github.com/ilyabo/sqlrooms/compare/v0.0.1-alpha.0...v0.0.1) (2025-01-30)
-
-**Note:** Version bump only for package @sqlrooms/data-table
-
-## 0.0.1-alpha.0 (2025-01-30)
-
-**Note:** Version bump only for package @sqlrooms/data-table
-
-**Note:** Version bump only for package @sqlrooms/data-table

package/docs/architecture.md

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