@adecore/database 0.0.1 → 0.16.0-beta.0

package/dist/explorer/tree.js

@@ -0,0 +1,295 @@
+import { qualifiedName } from '../sql.js';
+export const IDLE = { status: 'idle' };
+const SEPARATOR = '\u0000';
+export const connectionKey = (connectionId) => `c:${connectionId}`;
+export const schemaKey = (connectionId, schema) => `s:${connectionId}${SEPARATOR}${schema}`;
+export const folderKey = (connectionId, schema, group) => `f:${connectionId}${SEPARATOR}${schema}${SEPARATOR}${group}`;
+export const tableKey = (ref) => `t:${ref.connectionId}${SEPARATOR}${ref.schema}${SEPARATOR}${ref.table}`;
+export const isFolderKey = (key) => key.startsWith('f:');
+/* The connection a key of a connection, schema, folder or table belongs to. */
+export const connectionOfKey = (key) => {
+    const rest = key.slice(2);
+    const end = rest.indexOf(SEPARATOR);
+    return end === -1 ? rest : rest.slice(0, end);
+};
+export const columnKey = (ref, column) => `${tableKey(ref)}${SEPARATOR}${column}`;
+export const loadKey = (target) => {
+    if (target.schema === undefined) {
+        return connectionKey(target.connectionId);
+    }
+    return target.table === undefined
+        ? schemaKey(target.connectionId, target.schema)
+        : tableKey({ connectionId: target.connectionId, schema: target.schema, table: target.table });
+};
+/* The kinds of table a schema lists, in the order of its folders. */
+export const GROUPS = ['table', 'view'];
+export const isExpandable = (row) => row.kind === 'connection' || row.kind === 'schema' || row.kind === 'folder' || row.kind === 'table';
+/* The table a row stands for, when it stands for one. */
+export const tableOf = (row) => (row.kind === 'table' || row.kind === 'column' ? row.ref : null);
+/* What picking a row selects: its connection, its schema, or its table (a column stands for its table). Status rows select nothing. */
+export const selectionOf = (row) => {
+    switch (row.kind) {
+        case 'connection':
+            return { connectionId: row.connection.id };
+        case 'schema':
+        case 'folder':
+            return { connectionId: row.connection.id, schema: row.schema };
+        case 'table':
+        case 'column':
+            return { connectionId: row.ref.connectionId, schema: row.ref.schema, table: row.ref.table };
+        default:
+            return null;
+    }
+};
+/* The key of the row a selection points at: its table, else its schema, else its connection. */
+export const selectionKey = (selection) => {
+    if (selection.schema === undefined) {
+        return connectionKey(selection.connectionId);
+    }
+    return selection.table === undefined
+        ? schemaKey(selection.connectionId, selection.schema)
+        : tableKey({ connectionId: selection.connectionId, schema: selection.schema, table: selection.table });
+};
+/* Whether a row has a menu: the rows of a connection, a schema, a table or a column, and none of the rows that only report. */
+export const hasMenu = (row) => row.kind === 'connection' || row.kind === 'schema' || row.kind === 'folder' || row.kind === 'table' || row.kind === 'column';
+/* Only the rows a selection can point at are drawn selected; a folder or a column leaves that to the row above it. */
+export const isSelectable = (row) => row.kind === 'connection' || row.kind === 'schema' || row.kind === 'table';
+/* The statement behind New console here on a table: every row, as the engine quotes it. */
+export const selectAllSql = (engine, ref) => `SELECT * FROM ${qualifiedName({ engine, schema: ref.schema, table: ref.table })}`;
+/* The schemas a list shows. */
+export const visibleSchemas = (schemas, showSystemSchemas) => showSystemSchemas ? schemas : schemas.filter((schema) => !schema.system);
+/* One schema is no level worth a row: its folders hang straight under the connection. */
+const soleSchema = (visible) => (visible.length === 1 ? visible[0].name : null);
+/* Gives the drafts of one parent their place among each other, and lays them out depth first. */
+const settle = (drafts) => drafts.flatMap((draft, i) => [draft.make({ posInSet: i + 1, setSize: drafts.length }), ...draft.below]);
+const statusDraft = (row, level, parent, focusable) => ({
+    make: (place) => ({ ...row, key: `${row.kind}:${parent}`, level, parent, focusable, ...place }),
+    below: []
+});
+const matches = (name, query) => name.toLowerCase().includes(query);
+/*
+ * The rows a tree shows, top to bottom. With a filter only the loaded tables that match stay, under
+ * their folder, schema and connection, which then count as open whatever the person left them at.
+ */
+export const flattenTree = (input) => {
+    const query = input.filter.trim().toLowerCase();
+    const filtering = query !== '';
+    const columnDrafts = (ref, level, parent) => {
+        const load = input.structures(ref.connectionId, ref.schema, ref.table);
+        if (load.status !== 'ready') {
+            const row = load.status === 'error'
+                ? { kind: 'error', message: load.message, retry: { connectionId: ref.connectionId, schema: ref.schema, table: ref.table } }
+                : { kind: 'loading' };
+            return [statusDraft(row, level, parent, load.status === 'error')];
+        }
+        const { columns, primaryKey, foreignKeys } = load.value;
+        if (columns.length === 0) {
+            return [statusDraft({ kind: 'empty', of: 'columns' }, level, parent, true)];
+        }
+        const primary = new Set(primaryKey);
+        const foreign = new Set(foreignKeys.flatMap((foreignKey) => foreignKey.columns));
+        return columns.map((column) => ({
+            make: (place) => ({
+                kind: 'column',
+                key: columnKey(ref, column.name),
+                level,
+                parent,
+                focusable: true,
+                ref,
+                column,
+                primaryKey: primary.has(column.name),
+                foreignKey: foreign.has(column.name),
+                ...place
+            }),
+            below: []
+        }));
+    };
+    const tableDraft = (ref, table, level, parent) => {
+        const key = tableKey(ref);
+        const open = input.expanded.has(key);
+        return {
+            make: (place) => ({ kind: 'table', key, level, parent, focusable: true, ref, table, expanded: open, ...place }),
+            below: open ? settle(columnDrafts(ref, level + 1, key)) : []
+        };
+    };
+    /* The folders under a schema (or under a connection with only that schema), and how many tables they hold. */
+    const folderDrafts = (connection, schema, level, parent) => {
+        const load = input.tables(connection.id, schema);
+        if (load.status === 'ready') {
+            const shown = filtering ? load.value.filter((table) => matches(table.name, query)) : load.value;
+            if (shown.length === 0 && !filtering) {
+                return { drafts: [statusDraft({ kind: 'empty', of: 'tables' }, level, parent, true)], tables: 0 };
+            }
+            const drafts = GROUPS.flatMap((group) => {
+                const members = shown.filter((table) => table.kind === group);
+                if (members.length === 0) {
+                    return [];
+                }
+                const key = folderKey(connection.id, schema, group);
+                const open = filtering || !input.collapsed.has(key);
+                const tables = members.map((table) => tableDraft({ connectionId: connection.id, schema, table: table.name }, table, level + 1, key));
+                return [
+                    {
+                        make: (place) => ({
+                            kind: 'folder',
+                            key,
+                            level,
+                            parent,
+                            focusable: true,
+                            connection,
+                            schema,
+                            group,
+                            expanded: open,
+                            count: members.length,
+                            ...place
+                        }),
+                        below: open ? settle(tables) : []
+                    }
+                ];
+            });
+            return { drafts, tables: shown.length };
+        }
+        if (filtering) {
+            return { drafts: [], tables: 0 };
+        }
+        const row = load.status === 'error' ? { kind: 'error', message: load.message, retry: { connectionId: connection.id, schema } } : { kind: 'loading' };
+        return { drafts: [statusDraft(row, level, parent, load.status === 'error')], tables: 0 };
+    };
+    const schemaDraft = (connection, schema, parent) => {
+        const key = schemaKey(connection.id, schema);
+        const { drafts, tables } = folderDrafts(connection, schema, 3, key);
+        if (filtering && tables === 0) {
+            return null;
+        }
+        const open = filtering || input.expanded.has(key);
+        return {
+            make: (place) => ({ kind: 'schema', key, level: 2, parent, focusable: true, connection, schema, expanded: open, ...place }),
+            below: open ? settle(drafts) : []
+        };
+    };
+    const connectionDraft = (connection) => {
+        const key = connectionKey(connection.id);
+        const load = input.schemas(connection.id);
+        const open = filtering ? load.status === 'ready' : input.expanded.has(key);
+        let children = [];
+        let schemaCount = null;
+        if (load.status === 'ready') {
+            const visible = visibleSchemas(load.value, input.showSystemSchemas);
+            const sole = soleSchema(visible);
+            if (visible.length < load.value.length) {
+                schemaCount = { shown: visible.length, total: load.value.length };
+            }
+            if (sole !== null) {
+                children = open ? folderDrafts(connection, sole, 2, key).drafts : [];
+            }
+            else if (visible.length === 0) {
+                children = open && !filtering ? [statusDraft({ kind: 'empty', of: 'schemas' }, 2, key, true)] : [];
+            }
+            else {
+                children = visible.flatMap((entry) => schemaDraft(connection, entry.name, key) ?? []);
+            }
+        }
+        else if (open) {
+            const row = load.status === 'error' ? { kind: 'error', message: load.message, retry: { connectionId: connection.id } } : { kind: 'loading' };
+            children = [statusDraft(row, 2, key, load.status === 'error')];
+        }
+        if (filtering && children.length === 0) {
+            return null;
+        }
+        const version = input.versions(connection.id);
+        return {
+            make: (place) => ({ kind: 'connection', key, level: 1, parent: null, focusable: true, connection, expanded: open, version, schemaCount, ...place }),
+            below: open ? settle(children) : []
+        };
+    };
+    return settle(input.connections.flatMap((connection) => connectionDraft(connection) ?? []));
+};
+/* The loads an open node is waiting for and nobody has asked for yet. */
+export const neededLoads = (input) => {
+    const needed = [];
+    for (const connection of input.connections) {
+        if (!input.expanded.has(connectionKey(connection.id))) {
+            continue;
+        }
+        const load = input.schemas(connection.id);
+        if (load.status === 'idle') {
+            needed.push({ connectionId: connection.id });
+            continue;
+        }
+        if (load.status !== 'ready') {
+            continue;
+        }
+        const visible = visibleSchemas(load.value, input.showSystemSchemas);
+        const sole = soleSchema(visible);
+        const wanted = sole !== null ? [sole] : visible.map((schema) => schema.name).filter((name) => input.expanded.has(schemaKey(connection.id, name)));
+        for (const schema of wanted) {
+            const tables = input.tables(connection.id, schema);
+            if (tables.status === 'idle') {
+                needed.push({ connectionId: connection.id, schema });
+                continue;
+            }
+            if (tables.status !== 'ready') {
+                continue;
+            }
+            for (const table of tables.value) {
+                if (input.expanded.has(tableKey({ connectionId: connection.id, schema, table: table.name })) &&
+                    input.structures(connection.id, schema, table.name).status === 'idle') {
+                    needed.push({ connectionId: connection.id, schema, table: table.name });
+                }
+            }
+        }
+    }
+    return needed;
+};
+/* What a key does to the row that has the focus, or `null` when it does nothing there. */
+export const navigate = (rows, activeKey, pressed) => {
+    const stops = rows.filter((row) => row.focusable);
+    if (stops.length === 0) {
+        return null;
+    }
+    const at = stops.findIndex((row) => row.key === activeKey);
+    const row = at === -1 ? null : stops[at];
+    switch (pressed) {
+        case 'ArrowDown':
+            return { type: 'focus', key: stops[Math.min(at + 1, stops.length - 1)].key };
+        case 'ArrowUp':
+            return { type: 'focus', key: stops[Math.max(at - 1, 0)].key };
+        case 'Home':
+            return { type: 'focus', key: stops[0].key };
+        case 'End':
+            return { type: 'focus', key: stops[stops.length - 1].key };
+        case 'ArrowRight': {
+            if (row === null || !isExpandable(row)) {
+                return null;
+            }
+            if (!row.expanded) {
+                return { type: 'expand', key: row.key };
+            }
+            const child = stops.find((candidate) => candidate.parent === row.key);
+            return child === undefined ? null : { type: 'focus', key: child.key };
+        }
+        case 'ArrowLeft': {
+            if (row === null) {
+                return null;
+            }
+            if (isExpandable(row) && row.expanded) {
+                return { type: 'collapse', key: row.key };
+            }
+            return row.parent === null ? null : { type: 'focus', key: row.parent };
+        }
+        case 'Enter':
+        case ' ':
+            return row === null ? null : { type: 'activate', key: row.key };
+        default:
+            return null;
+    }
+};
+/* The row that takes the tab stop: the one with the focus, else the selected table, else the first. */
+export const tabStop = (rows, activeKey, selectedKey) => {
+    for (const key of [activeKey, selectedKey]) {
+        if (key !== null && rows.some((row) => row.key === key && row.focusable)) {
+            return key;
+        }
+    }
+    return rows.find((row) => row.focusable)?.key ?? null;
+};

package/dist/explorer/use-explorer-loads.d.ts

@@ -0,0 +1,12 @@
+import type { Connection } from '../client/types.ts';
+import type { SchemaInfo, TableInfo, TableStructure } from '../protocol/index.ts';
+import { type Load, type LoadTarget } from './tree.ts';
+export interface ExplorerLoads {
+    schemas(connectionId: string): Load<readonly SchemaInfo[]>;
+    tables(connectionId: string, schema: string): Load<readonly TableInfo[]>;
+    structures(connectionId: string, schema: string, table: string): Load<TableStructure>;
+    versions(connectionId: string): string | null;
+    start(target: LoadTarget): void;
+    reset(target: LoadTarget): void;
+}
+export declare function useExplorerLoads(connections: readonly Connection[]): ExplorerLoads;

package/dist/explorer/use-explorer-loads.js

@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from 'react';
+import { messageOf } from '@adecore/ui';
+import { useDatabaseClient } from '../client-context.js';
+import { IDLE, loadKey } from './tree.js';
+const EMPTY = { entries: new Map(), versions: new Map() };
+/* Whether a load belongs to what a reset names: the same connection, and the same schema or table when the reset names one. */
+const within = (reset, target) => reset.connectionId === target.connectionId &&
+    (reset.schema === undefined || reset.schema === target.schema) &&
+    (reset.table === undefined || reset.table === target.table);
+/* A change to a schema also changes the schema list, and one without a schema changes every list of the connection. */
+const touches = (change, target) => change.connectionId === target.connectionId && (change.schema === undefined || target.schema === undefined || change.schema === target.schema);
+/* The schemas, tables and column lists the explorer has asked a session for, by connection, schema and table. */
+export function useExplorerLoads(connections) {
+    const client = useDatabaseClient();
+    const [loads, setLoads] = useState(EMPTY);
+    // Written before the state is, so a strict-mode second effect run does not fetch twice.
+    const started = useRef(new Map());
+    const configs = useRef(new Map());
+    const store = (target, load) => {
+        setLoads((current) => ({ ...current, entries: new Map(current.entries).set(loadKey(target), { target, load }) }));
+    };
+    const reset = (target) => {
+        for (const [key, began] of [...started.current]) {
+            if (within(target, began)) {
+                started.current.delete(key);
+            }
+        }
+        setLoads((current) => ({
+            entries: new Map([...current.entries].filter(([, entry]) => !within(target, entry.target))),
+            versions: target.schema === undefined ? new Map([...current.versions].filter(([id]) => id !== target.connectionId)) : current.versions
+        }));
+    };
+    /* A silent load keeps showing what it replaces, so a reload does not blink the tree. */
+    const run = (target, connection, silent) => {
+        if (!silent) {
+            store(target, { status: 'loading' });
+        }
+        const session = client.session(connection);
+        const request = target.schema === undefined
+            ? session.schemas()
+            : target.table === undefined
+                ? session.tables(target.schema)
+                : session.structure(target.schema, target.table);
+        request.then((value) => {
+            store(target, { status: 'ready', value });
+            if (target.schema === undefined) {
+                // Chained after the schemas so the version never opens a session by itself.
+                session.server().then((info) => setLoads((current) => ({ ...current, versions: new Map(current.versions).set(connection.id, info.version) })), () => undefined);
+            }
+        }, (e) => store(target, { status: 'error', message: messageOf(e) }));
+    };
+    const start = (target) => {
+        const key = loadKey(target);
+        if (started.current.has(key)) {
+            return;
+        }
+        const connection = connections.find((entry) => entry.id === target.connectionId);
+        if (connection === undefined) {
+            return;
+        }
+        started.current.set(key, target);
+        run(target, connection, false);
+    };
+    /* Lists load again in place and column lists are dropped, since the table they describe may be gone; an open table asks again by itself. */
+    const reload = (change) => {
+        const connection = connections.find((entry) => entry.id === change.connectionId);
+        const dropped = [];
+        for (const [key, began] of [...started.current]) {
+            if (!touches(change, began)) {
+                continue;
+            }
+            if (began.table !== undefined) {
+                started.current.delete(key);
+                dropped.push(began);
+            }
+            else if (connection !== undefined) {
+                run(began, connection, true);
+            }
+        }
+        if (dropped.length > 0) {
+            const gone = new Set(dropped.map(loadKey));
+            setLoads((current) => ({ ...current, entries: new Map([...current.entries].filter(([key]) => !gone.has(key))) }));
+        }
+    };
+    useEffect(() => client.onSchemaChange(reload));
+    // A connection that was edited or removed is a different session, so what it listed is stale.
+    useEffect(() => {
+        const known = configs.current;
+        for (const [id, config] of known) {
+            const now = connections.find((entry) => entry.id === id);
+            if (now === undefined || now.config !== config) {
+                known.delete(id);
+                reset({ connectionId: id });
+            }
+        }
+        for (const connection of connections) {
+            known.set(connection.id, connection.config);
+        }
+    });
+    const loadOf = (target) => loads.entries.get(loadKey(target))?.load ?? IDLE;
+    return {
+        schemas: (connectionId) => loadOf({ connectionId }),
+        tables: (connectionId, schema) => loadOf({ connectionId, schema }),
+        structures: (connectionId, schema, table) => loadOf({ connectionId, schema, table }),
+        versions: (connectionId) => loads.versions.get(connectionId) ?? null,
+        start,
+        reset
+    };
+}

package/dist/explorer/use-stored-expansion.d.ts

@@ -0,0 +1,9 @@
+import type { Connection } from '../client/types.ts';
+import { type Expansion } from './expansion.ts';
+type Update = (current: ReadonlySet<string>) => ReadonlySet<string>;
+export interface StoredExpansion extends Expansion {
+    setExpanded(update: Update): void;
+    setCollapsed(update: Update): void;
+}
+export declare function useStoredExpansion(connections: readonly Connection[]): StoredExpansion;
+export {};

package/dist/explorer/use-stored-expansion.js

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react';
+import { useDatabaseStorage } from '../client-context.js';
+import { expansionKey, parseExpansion, serializeExpansion } from './expansion.js';
+const restore = (storage, connections, from) => {
+    const expanded = new Set(from.expanded);
+    const collapsed = new Set(from.collapsed);
+    const loaded = new Set(from.loaded);
+    for (const { id } of connections) {
+        if (loaded.has(id)) {
+            continue;
+        }
+        loaded.add(id);
+        const stored = parseExpansion(storage?.get(expansionKey(id)) ?? null, id);
+        stored.expanded.forEach((key) => expanded.add(key));
+        stored.collapsed.forEach((key) => collapsed.add(key));
+    }
+    return { expanded, collapsed, loaded };
+};
+/*
+ * Which nodes of the tree are open, kept per connection in the app's storage when it has one. A
+ * connection that shows up later is restored when it does.
+ */
+export function useStoredExpansion(connections) {
+    const storage = useDatabaseStorage();
+    const [state, setState] = useState(() => restore(storage, connections, { expanded: new Set(), collapsed: new Set(), loaded: new Set() }));
+    // What the storage holds per connection, so only a change is written back.
+    const written = useRef(new Map());
+    if (connections.some((connection) => !state.loaded.has(connection.id))) {
+        setState((current) => restore(storage, connections, current));
+    }
+    useEffect(() => {
+        for (const id of state.loaded) {
+            const next = serializeExpansion(id, state);
+            const last = written.current.get(id);
+            written.current.set(id, next);
+            if (last !== undefined && last !== next) {
+                storage?.set(expansionKey(id), next);
+            }
+        }
+    }, [storage, state]);
+    return {
+        expanded: state.expanded,
+        collapsed: state.collapsed,
+        setExpanded: (update) => setState((current) => ({ ...current, expanded: update(current.expanded) })),
+        setCollapsed: (update) => setState((current) => ({ ...current, collapsed: update(current.collapsed) }))
+    };
+}

package/dist/grid/CellEditor.d.ts

@@ -0,0 +1,9 @@
+export type EditMove = 'next' | 'previous';
+export interface CellEditorProps {
+    value: string;
+    label: string;
+    onValueChange(value: string): void;
+    onCommit(move?: EditMove): void;
+    onCancel(): void;
+}
+export declare function CellEditor({ value, label, onValueChange, onCommit, onCancel }: CellEditorProps): import("react").JSX.Element;

package/dist/grid/CellEditor.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Input } from '@adecore/ui';
+/* The input a cell turns into while it is edited. It takes the focus and selects its text when it appears. */
+export function CellEditor({ value, label, onValueChange, onCommit, onCancel }) {
+    const input = useRef(null);
+    useEffect(() => {
+        input.current?.focus();
+        input.current?.select();
+    }, []);
+    const handleKeyDown = (event) => {
+        if (event.nativeEvent.isComposing) {
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            onCommit();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            onCancel();
+        }
+        else if (event.key === 'Tab') {
+            event.preventDefault();
+            onCommit(event.shiftKey ? 'previous' : 'next');
+        }
+    };
+    return (_jsx(Input, { ref: input, mono: true, size: "sm", "aria-label": label, value: value, className: "absolute inset-0 z-10 h-full min-w-0 rounded-none px-3", onChange: (event) => onValueChange(event.target.value), onKeyDown: handleKeyDown, onBlur: () => onCommit() }));
+}

package/dist/grid/CopyAsMenu.d.ts

@@ -0,0 +1,7 @@
+import type { CopyFormat } from './copy-formats.ts';
+export interface CopyAsMenuProps {
+    disabled: boolean;
+    formats: readonly CopyFormat[];
+    onCopy(format: CopyFormat): void;
+}
+export declare function CopyAsMenu({ disabled, formats, onCopy }: CopyAsMenuProps): import("react").JSX.Element;

package/dist/grid/CopyAsMenu.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Braces, Copy, Database, FileSpreadsheet, Table2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ContextMenu, Icon } from '@adecore/ui';
+const ICONS = { tsv: Table2, csv: FileSpreadsheet, json: Braces, sql: Database };
+/* The "Copy as" submenu of the grid's context menu. */
+export function CopyAsMenu({ disabled, formats, onCopy }) {
+    const { t } = useTranslation('database');
+    return (_jsxs(ContextMenu.SubmenuRoot, { children: [_jsxs(ContextMenu.SubmenuTrigger, { disabled: disabled, children: [_jsx(Icon, { icon: Copy, size: 14 }), t('grid.copyAs.label')] }), _jsx(ContextMenu.Popup, { children: formats.map((format) => (_jsxs(ContextMenu.Item, { onClick: () => onCopy(format), children: [_jsx(Icon, { icon: ICONS[format], size: 14 }), t(`grid.copyAs.${format}`)] }, format))) })] }));
+}

package/dist/grid/DataGrid.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode, type Ref } from 'react';
+import type { EditValue, Value } from '../protocol/index.ts';
+import type { SqlTarget } from '../sql.ts';
+import type { RangeBlock } from './aggregates.ts';
+import { type GridLayout } from './column-layout.ts';
+import { type GridSort } from './sort.ts';
+import type { ColumnRequest, FocusedCell, GridColumn, GridMenuContext, GridRow } from './types.ts';
+export interface DataGridProps {
+    columns: readonly GridColumn[];
+    rows: readonly GridRow[];
+    label: string;
+    editable?: boolean;
+    selectedKeys?: ReadonlySet<string>;
+    onSelectedKeysChange?(keys: ReadonlySet<string>): void;
+    onCommit?(rowKey: string, column: number, value: EditValue): void;
+    loadValue?(rowKey: string, column: number): Promise<Value | undefined>;
+    sorts?: readonly GridSort[];
+    onSortsChange?(sorts: readonly GridSort[]): void;
+    onFocusedCellChange?(cell: FocusedCell | null): void;
+    onDeleteSelected?(): void;
+    sqlTarget?: SqlTarget;
+    queryMenu?(context: GridMenuContext): ReactNode;
+    menu?(context: GridMenuContext): ReactNode;
+    onDuplicateRows?(rowKeys: readonly string[]): void;
+    onFollow?(cell: FocusedCell): void;
+    canFollow?(cell: FocusedCell): boolean;
+    onRangeChange?(block: RangeBlock | null): void;
+    initialLayout?: GridLayout;
+    onLayoutChange?(layout: GridLayout): void;
+    focusRequest?: FocusedCell | null;
+    columnRequest?: ColumnRequest | null;
+    empty?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function DataGrid({ columns, rows, label, editable, selectedKeys, onSelectedKeysChange, onCommit, loadValue, sorts, onSortsChange, onFocusedCellChange, onDeleteSelected, sqlTarget, queryMenu, menu, onDuplicateRows, onFollow, canFollow, onRangeChange, initialLayout, onLayoutChange, focusRequest, columnRequest, empty, className, ref }: DataGridProps): import("react").JSX.Element;