@mwater/visualization 5.4.1 → 5.4.3

package/lib/datagrids/DatagridViewComponent.js

@@ -5,318 +5,317 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
-const fixed_data_table_2_1 = require("fixed-data-table-2");
+const react_2 = require("react");
+const GridComponent_1 = require("@mwater/react-library/lib/GridComponent");
 const expressions_1 = require("@mwater/expressions");
 const ExprCellComponent_1 = __importDefault(require("./ExprCellComponent"));
-const EditExprCellComponent_1 = __importDefault(require("./EditExprCellComponent"));
 const immer_1 = __importDefault(require("immer"));
-/** Datagrid table itself without decorations such as edit button etc.
- * See README.md for description of datagrid format
- * Design should be cleaned already before being passed in (see DatagridUtils)
- */
-class DatagridViewComponent extends react_1.default.Component {
-    static defaultProps = { pageSize: 100 };
-    loadState;
-    editCellComp;
-    constructor(props) {
-        super(props);
-        this.state = {
-            rows: [],
-            entirelyLoaded: false,
-            editingCell: null, // set to { rowIndex: 0, 1, 2, columnIndex: 0, 1, 2... } if editing a cell
-            savingCell: false // True when saving a cell's contents
-        };
-    }
-    componentWillReceiveProps(nextProps) {
-        // If design or filters changed, delete all rows
-        // TODO won't this reload on column resize?
-        if (!lodash_1.default.isEqual(nextProps.design, this.props.design) || !lodash_1.default.isEqual(nextProps.filters, this.props.filters) || nextProps.refreshKey !== this.props.refreshKey) {
-            this.setState({ rows: [], entirelyLoaded: false });
+const CellEditor_1 = require("./CellEditor");
+const useStableCallback_1 = require("@mwater/react-library/lib/useStableCallback");
+const valueFormatter_1 = require("../valueFormatter");
+const valueFormatter_2 = require("../valueFormatter");
+/** Datagrid view component. It does not show any quick filters, but only the grid itself. */
+const DatagridViewComponent = (0, react_2.forwardRef)((props, ref) => {
+    const [rows, setRows] = (0, react_2.useState)([]);
+    const [entirelyLoaded, setEntirelyLoaded] = (0, react_2.useState)(false);
+    const loadStateRef = (0, react_2.useRef)(null);
+    // Get row header width based on selection and showRowNumbers
+    const rowHeaderWidth = props.selectedRows
+        ? (props.design.showRowNumbers ? 70 : 30) // With selection: 70 for both, 30 for just checkbox
+        : (props.design.showRowNumbers ? 50 : 20); // Without selection: 50 for numbers, 20 for neither
+    const handleRowSelect = (0, react_2.useCallback)((rowId) => {
+        if (props.onSelectedRowsChange) {
+            props.onSelectedRowsChange(props.selectedRows.toggle(rowId));
         }
-    }
-    // Loads more rows because the placeholder last row has been rendered
-    loadMoreRows() {
-        // Get the current load state (the values that determine what to load and if the loaded results can still be used or are stale)
+    }, [props.selectedRows, props.onSelectedRowsChange]);
+    const handleSelectAll = (0, react_2.useCallback)(() => {
+        if (props.onSelectedRowsChange) {
+            props.onSelectedRowsChange(props.selectedRows.all());
+        }
+    }, [props.selectedRows, props.onSelectedRowsChange]);
+    const handleSelectNone = (0, react_2.useCallback)(() => {
+        if (props.onSelectedRowsChange) {
+            props.onSelectedRowsChange(props.selectedRows.none());
+        }
+    }, [props.selectedRows, props.onSelectedRowsChange]);
+    const handleSelectInvert = (0, react_2.useCallback)(() => {
+        if (props.onSelectedRowsChange) {
+            props.onSelectedRowsChange(props.selectedRows.invert());
+        }
+    }, [props.selectedRows, props.onSelectedRowsChange]);
+    /** Render top left corner with optional selection dropdown */
+    const renderTopLeft = (0, react_2.useCallback)(() => {
+        if (!props.selectedRows) {
+            return null;
+        }
+        if (!props.onSelectedRowsChange) {
+            return (react_1.default.createElement("div", { style: { padding: 8, textAlign: "right" } },
+                react_1.default.createElement("input", { type: "checkbox", checked: false, readOnly: true })));
+        }
+        return (react_1.default.createElement("div", { className: "dropdown", style: { marginTop: 6 } },
+            react_1.default.createElement("div", { style: { textAlign: "center" }, className: "dropdown-toggle", "data-bs-toggle": "dropdown" },
+                react_1.default.createElement("input", { type: "checkbox", checked: false, readOnly: true, style: { marginTop: 7 } })),
+            react_1.default.createElement("ul", { className: "dropdown-menu" },
+                react_1.default.createElement("li", null,
+                    react_1.default.createElement("a", { className: "dropdown-item", onClick: handleSelectAll }, T `All`)),
+                react_1.default.createElement("li", null,
+                    react_1.default.createElement("a", { className: "dropdown-item", onClick: handleSelectNone }, T `None`)),
+                react_1.default.createElement("li", null,
+                    react_1.default.createElement("a", { className: "dropdown-item", onClick: handleSelectInvert }, T `Invert`)))));
+    }, [props.selectedRows, props.onSelectedRowsChange, handleSelectAll, handleSelectNone, handleSelectInvert]);
+    /** Render row headers with optional selection checkboxes */
+    const renderRowHeader = (0, react_2.useCallback)((options) => {
+        const rowHeaderStyle = {
+            width: options.width,
+            height: options.height,
+            display: "flex",
+            alignItems: "center",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            padding: "0 8px"
+        };
+        const rowId = options.row < rows.length ? rows[options.row].id : null;
+        const isSelected = rowId != null && props.selectedRows ? props.selectedRows.isSelected(rowId) : false;
+        const isSubtable = options.row < rows.length ? rows[options.row].subtable >= 0 : false;
+        return (react_1.default.createElement("div", { style: rowHeaderStyle },
+            props.selectedRows && !isSubtable && (react_1.default.createElement("input", { type: "checkbox", style: { marginRight: 4 }, checked: isSelected, onChange: rowId != null && props.onSelectedRowsChange ? () => handleRowSelect(rowId) : undefined, readOnly: !props.onSelectedRowsChange })),
+            props.design.showRowNumbers ? (react_1.default.createElement("div", { style: { flex: 1, textAlign: "right" } }, options.row + 1)) : null));
+    }, [rows, props.selectedRows, props.onSelectedRowsChange, props.design.showRowNumbers, handleRowSelect]);
+    const loadMoreRows = (0, useStableCallback_1.useStableCallback)((callback) => {
         const loadState = {
-            design: this.props.design,
-            offset: this.state.rows.length,
-            limit: this.props.pageSize,
-            filters: this.props.filters
+            design: props.design,
+            offset: rows.length,
+            limit: props.pageSize || 100,
+            filters: props.filters
         };
-        // If already loading what we want, return
-        if (lodash_1.default.isEqual(loadState, this.loadState)) {
+        if (lodash_1.default.isEqual(loadState, loadStateRef.current)) {
             return;
         }
-        // Record what we're loading
-        this.loadState = loadState;
-        // Perform the actual load
-        this.props.datagridDataSource.getRows(loadState.design, loadState.offset, loadState.limit, loadState.filters, (error, newRows) => {
+        loadStateRef.current = loadState;
+        props.datagridDataSource.getRows(loadState.design, loadState.offset, loadState.limit, loadState.filters, (error, newRows) => {
             if (error) {
                 console.error(error);
                 alert(T `Error loading data`);
                 return;
             }
-            // Check that the required load state has not changed
-            if (lodash_1.default.isEqual(loadState, this.loadState)) {
-                // Load is complete
-                this.loadState = null;
-                // Add rows, setting entirelyLoaded based on whether fewer than requested were returned
-                const rows = this.state.rows.concat(newRows);
-                return this.setState({ rows, entirelyLoaded: newRows.length < this.props.pageSize });
+            if (lodash_1.default.isEqual(loadState, loadStateRef.current)) {
+                loadStateRef.current = null;
+                setRows(prev => [...prev, ...newRows]);
+                setEntirelyLoaded(newRows.length < (props.pageSize || 100));
+                callback?.();
             }
         });
+    });
+    function reload() {
+        console.log("reload");
+        setRows([]);
+        setEntirelyLoaded(false);
     }
-    // Reloads all data
-    reload = () => {
-        return this.setState({ rows: [], entirelyLoaded: false });
-    };
-    deleteRow(rowIndex, callback) {
-        const newRows = this.state.rows.slice();
-        lodash_1.default.pullAt(newRows, rowIndex);
-        this.setState({ rows: newRows });
-        callback();
+    // Reset rows when design, filters or refreshKey changes
+    (0, react_2.useEffect)(() => {
+        reload();
+    }, [getDatagridReloadKey(props.design), JSON.stringify(props.filters), props.refreshKey]);
+    function getRows() {
+        return rows;
     }
-    /** Reload a single row by index and id. Note that the row might be in a different
-     * ordinal position within the datagrid, or might have vanished from view if the change
-     * caused the row to be excluded by the filter. Always replace
-     * it where it was, unless it has disappeared from view in which case the row
-     * is removed.
-     */
-    reloadRow(rowIndex, rowId, callback) {
-        // Create new filters that only include one row
-        const filters = (0, immer_1.default)(this.props.filters || [], draft => {
+    function reloadRow(rowIndex, rowId, callback) {
+        const filters = (0, immer_1.default)(props.filters || [], draft => {
             draft.push({
-                table: this.props.design.table,
+                table: props.design.table,
                 jsonql: {
                     type: "op",
                     op: "=",
                     exprs: [
-                        { type: "field", tableAlias: "{alias}", column: this.props.schema.getTable(this.props.design.table)?.primaryKey },
+                        { type: "field", tableAlias: "{alias}", column: props.schema.getTable(props.design.table)?.primaryKey },
                         { type: "literal", value: rowId }
                     ]
                 }
             });
         });
-        this.props.datagridDataSource.getRows(this.props.design, 0, 1, filters, (error, rows) => {
+        props.datagridDataSource.getRows(props.design, 0, 1, filters, (error, newRows) => {
             if (error) {
                 console.error(error);
                 alert(T `Error loading data`);
                 callback();
                 return;
             }
-            const newRows = (0, immer_1.default)(this.state.rows, draft => {
-                if (rows[0]) {
-                    draft[rowIndex] = rows[0];
+            setRows(currentRows => (0, immer_1.default)(currentRows, draft => {
+                if (newRows[0]) {
+                    draft[rowIndex] = newRows[0];
                 }
                 else {
-                    // If row missing, remove it from list
                     draft.splice(rowIndex, 1);
                 }
-            });
-            this.setState({ rows: newRows });
+            }));
             callback();
         });
     }
-    handleColumnResize = (newColumnWidth, columnKey) => {
-        // Find index of column
-        const columnIndex = lodash_1.default.findIndex(this.props.design.columns, { id: columnKey });
-        // Set new width
-        let column = this.props.design.columns[columnIndex];
-        column = lodash_1.default.extend({}, column, { width: newColumnWidth });
-        // Re-add to list
-        const columns = this.props.design.columns.slice();
-        columns[columnIndex] = column;
-        this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, { columns }));
-    };
-    handleCellClick = (rowIndex, columnIndex) => {
-        // Ignore if already editing
-        if (this.state.editingCell?.rowIndex === rowIndex && this.state.editingCell?.columnIndex === columnIndex) {
-            return;
+    function deleteRow(rowIndex, callback) {
+        const newRows = rows.slice();
+        newRows.splice(rowIndex, 1);
+        setRows(newRows);
+        callback();
+    }
+    // Expose methods via ref
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        getRows: getRows,
+        getEntirelyLoaded: () => entirelyLoaded,
+        reload: reload,
+        reloadRow: reloadRow,
+        deleteRow: deleteRow,
+        loadMoreRows: loadMoreRows
+    }), [rows, entirelyLoaded, reload, reloadRow, deleteRow, loadMoreRows]);
+    const handleColWidthsChange = (0, useStableCallback_1.useStableCallback)((colWidths) => {
+        const columns = props.design.columns.map((col, index) => ({
+            ...col,
+            width: colWidths[index]
+        }));
+        props.onDesignChange?.({ ...props.design, columns });
+    });
+    const updateCellValue = (0, useStableCallback_1.useStableCallback)(async (value, rowIndex, colIndex) => {
+        try {
+            const rowId = rows[rowIndex].id;
+            const { expr } = props.design.columns[colIndex];
+            await props.updateExprValues(props.design.table, [{ primaryKey: rowId, expr, value }]);
+            await new Promise(resolve => {
+                reloadRow(rowIndex, rowId, resolve);
+            });
+            return true;
         }
-        // Ignore if saving
-        if (this.state.savingCell) {
-            return;
+        catch (error) {
+            alert(T `Error saving data`);
+            console.error(error);
+            return false;
         }
-        // Save editing if editing and return
-        if (this.state.editingCell) {
-            this.handleSaveEdit();
-            return;
+    });
+    const handleRowDoubleClick = (0, useStableCallback_1.useStableCallback)((rowIndex) => {
+        if (props.onRowDoubleClick != null && rows[rowIndex]?.id) {
+            props.onRowDoubleClick(props.design.table, rows[rowIndex].id, rowIndex);
+            return true;
         }
-        // Check if can edit
-        if (!this.props.canEditExpr) {
-            return;
+        return false;
+    });
+    const handleRowClick = (0, useStableCallback_1.useStableCallback)((rowIndex) => {
+        if (props.onRowClick != null && rows[rowIndex]?.id) {
+            props.onRowClick(props.design.table, rows[rowIndex].id, rowIndex);
+            return true;
         }
-        // Get column
-        const column = this.props.design.columns[columnIndex];
-        // Get expression type
-        const exprType = new expressions_1.ExprUtils(this.props.schema).getExprType(column.expr);
-        // If cannot edit type, return
-        if (!["text", "number", "enum", "date", "datetime"].includes(exprType)) {
+        return false;
+    });
+    const handleCopy = (0, useStableCallback_1.useStableCallback)((rowIndex, colIndex) => {
+        const row = rows[rowIndex];
+        const col = props.design.columns[colIndex];
+        const value = row[`c${colIndex}`];
+        // Format value as text using ExprCellComponent logic
+        const exprUtils = new expressions_1.ExprUtils(props.schema);
+        const exprType = exprUtils.getExprType(col.expr);
+        if (!exprType) {
             return;
         }
-        // Get row id
-        const rowId = this.state.rows[rowIndex].id;
-        if (rowId == null) {
-            // No row id means aggregated table. Cannot edti
-            return;
+        let formattedValue = value;
+        // Parse JSON values
+        if (["image", "imagelist", "geometry", "text[]"].includes(exprType) && lodash_1.default.isString(value)) {
+            formattedValue = JSON.parse(value);
         }
-        this.props.canEditExpr(this.props.design.table, rowId, column.expr)
-            .then(canEdit => {
-            if (canEdit) {
-                // Start editing
-                this.setState({ editingCell: { rowIndex, columnIndex, rowId } });
-            }
-        }).catch(error => {
-            console.error(error);
-        });
-    };
-    // Called to save
-    handleSaveEdit = () => {
-        // Ignore if not changed
-        if (!this.editCellComp || !this.editCellComp.hasChanged()) {
-            this.setState({ editingCell: null, savingCell: false });
-            return;
+        // Format based on type
+        if ((0, valueFormatter_2.canFormatType)(exprType)) {
+            formattedValue = (0, valueFormatter_1.formatValue)(exprType, formattedValue, col.format);
         }
-        const rowId = this.state.editingCell.rowId;
-        const { expr } = this.props.design.columns[this.state.editingCell.columnIndex];
-        const value = this.editCellComp.getValue();
-        this.setState({ savingCell: true }, () => {
-            this.props.updateExprValues(this.props.design.table, [{ primaryKey: rowId, expr, value }])
-                .then(() => {
-                // Reload row
-                this.reloadRow(this.state.editingCell.rowIndex, rowId, () => {
-                    this.setState({ editingCell: null, savingCell: false });
-                });
-            }).catch(error => {
-                alert(T `Error saving data`);
-                console.error(error);
-            });
-        });
-    };
-    handleCancelEdit = () => {
-        this.setState({ editingCell: null, savingCell: false });
-    };
-    // Called with current ref edit. Save
-    refEditCell = (comp) => {
-        this.editCellComp = comp;
-    };
-    handleRowDoubleClick = (ev, rowIndex) => {
-        if (this.props.onRowDoubleClick != null && this.state.rows[rowIndex]?.id) {
-            this.props.onRowDoubleClick(this.props.design.table, this.state.rows[rowIndex].id, rowIndex);
+        else {
+            formattedValue = exprUtils.stringifyExprLiteral(col.expr, formattedValue, props.design.locale);
         }
-    };
-    handleRowClick = (ev, rowIndex) => {
-        if (this.props.onRowClick != null && this.state.rows[rowIndex].id) {
-            this.props.onRowClick(this.props.design.table, this.state.rows[rowIndex].id, rowIndex);
+        navigator.clipboard.writeText(formattedValue || "");
+    });
+    const renderCell = (0, useStableCallback_1.useStableCallback)((options) => {
+        if (options.row >= rows.length) {
+            lodash_1.default.defer(() => loadMoreRows());
+            return react_1.default.createElement("div", { style: { padding: 8 } },
+                react_1.default.createElement("i", { className: "fa fa-spinner fa-spin text-muted" }));
         }
-    };
-    // Render a single cell. exprType is passed in for performance purposes and is calculated once per column
-    renderCell = (column, columnIndex, exprType, cellProps) => {
-        // If rendering placeholder row
-        if (cellProps.rowIndex >= this.state.rows.length) {
-            // Load next tick as cannot update while rendering
-            lodash_1.default.defer(() => {
-                this.loadMoreRows();
-            });
-            return R(fixed_data_table_2_1.Cell, cellProps, R("i", { className: "fa fa-spinner fa-spin" }));
+        if (options.col === -1) {
+            return (react_1.default.createElement("div", { style: { padding: 8, textAlign: "right" } }, options.row + 1));
         }
-        // Special case for row number
-        if (columnIndex === -1) {
-            return R(fixed_data_table_2_1.Cell, {
-                width: cellProps.width,
-                height: cellProps.height,
-                style: {
-                    whiteSpace: "nowrap",
-                    textAlign: "right"
-                }
-            }, cellProps.rowIndex + 1);
+        const column = props.design.columns[options.col];
+        const exprUtils = new expressions_1.ExprUtils(props.schema);
+        const exprType = exprUtils.getExprType(column.expr);
+        const value = rows[options.row][`c${options.col}`];
+        if (column.type === "expr" && exprType) {
+            const muted = !column.subtable && rows[options.row].subtable >= 0;
+            return react_1.default.createElement("div", { style: { width: options.width, height: options.height } },
+                react_1.default.createElement(ExprCellComponent_1.default, { schema: props.schema, dataSource: props.dataSource, locale: props.design.locale, width: options.width, height: options.height, value: value, expr: column.expr, format: column.format, exprType: exprType, muted: muted }));
         }
-        // Get value (columns are c0, c1, c2, etc.)
-        const value = this.state.rows[cellProps.rowIndex][`c${columnIndex}`];
-        // Render special if editing
-        if (this.state.editingCell?.rowIndex === cellProps.rowIndex &&
-            this.state.editingCell?.columnIndex === columnIndex) {
-            // Special if saving
-            if (this.state.savingCell) {
-                return R(fixed_data_table_2_1.Cell, cellProps, R("i", { className: "fa fa-spinner fa-spin" }));
-            }
-            return R(EditExprCellComponent_1.default, {
-                ref: this.refEditCell,
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                locale: this.props.design.locale,
-                width: cellProps.width,
-                height: cellProps.height,
-                value,
-                expr: column.expr,
-                onSave: this.handleSaveEdit,
-                onCancel: this.handleCancelEdit
-            });
+        return null;
+    });
+    const renderColHeader = (0, useStableCallback_1.useStableCallback)((options) => {
+        if (options.col === -1) {
+            return (react_1.default.createElement("div", { style: {
+                    padding: 5,
+                    textAlign: "right",
+                    fontWeight: "bold",
+                    height: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "flex-end"
+                } }, "#"));
         }
-        if (column.type === "expr") {
-            // Muted if from main and are displaying subtable
-            const muted = !column.subtable && this.state.rows[cellProps.rowIndex].subtable >= 0;
-            return R(ExprCellComponent_1.default, {
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                locale: this.props.design.locale,
-                width: cellProps.width,
-                height: cellProps.height,
-                value,
-                expr: column.expr,
-                format: column.format,
-                exprType,
-                muted,
-                onClick: this.handleCellClick.bind(null, cellProps.rowIndex, columnIndex)
-            });
+        const column = props.design.columns[options.col];
+        const exprUtils = new expressions_1.ExprUtils(props.schema);
+        return (react_1.default.createElement("div", { style: {
+                padding: 5,
+                whiteSpace: "nowrap",
+                fontWeight: "bold",
+                height: "100%",
+                display: "flex",
+                alignItems: "center"
+            } }, column.label || exprUtils.summarizeExpr(column.expr, props.design.locale)));
+    });
+    const renderCellEditor = (0, useStableCallback_1.useStableCallback)((options) => {
+        if (options.row >= rows.length) {
+            return react_1.default.createElement("div", null);
         }
-        return null;
-    };
-    // Render a single column
-    renderColumn(column, columnIndex) {
-        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
-        // Get expression type
-        const exprType = exprUtils.getExprType(column.expr);
-        return R(fixed_data_table_2_1.Column, {
-            key: column.id,
-            header: R(fixed_data_table_2_1.Cell, { style: { whiteSpace: "nowrap" } }, column.label || exprUtils.summarizeExpr(column.expr, this.props.design.locale)),
-            width: column.width,
-            allowCellsRecycling: true,
-            cell: this.renderCell.bind(null, column, columnIndex, exprType),
-            columnKey: column.id,
-            isResizable: this.props.onDesignChange != null
-        });
-    }
-    // Render all columns
-    renderColumns() {
-        const columns = lodash_1.default.map(this.props.design.columns, (column, columnIndex) => this.renderColumn(column, columnIndex));
-        if (this.props.design.showRowNumbers) {
-            columns.unshift(this.renderColumn({
-                label: "#",
-                width: 50
-            }, -1));
+        const column = props.design.columns[options.col];
+        const value = rows[options.row][`c${options.col}`];
+        const expr = column.expr;
+        const exprUtils = new expressions_1.ExprUtils(props.schema);
+        const exprType = exprUtils.getExprType(expr);
+        const enumValues = exprUtils.getExprEnumValues(expr) ?? undefined;
+        const idTable = exprUtils.getExprIdTable(expr) ?? undefined;
+        return (react_1.default.createElement(CellEditor_1.CellEditor, { type: exprType, enumValues: enumValues, idTable: idTable, schema: props.schema, dataSource: props.dataSource, initialValue: value, updateCellValue: value => updateCellValue(value, options.row, options.col), editorOptions: options }));
+    });
+    const canEdit = (0, useStableCallback_1.useStableCallback)(async (options) => {
+        if (options.col === -1) {
+            return false;
         }
-        return columns;
-    }
-    render() {
-        let rowsCount = this.state.rows.length;
-        // Add loading row if not entirely loaded
-        if (!this.state.entirelyLoaded) {
-            rowsCount += 1;
+        const rowId = rows[options.row].id;
+        if (rowId == null) {
+            return false;
         }
-        return R(fixed_data_table_2_1.Table, {
-            rowsCount,
-            rowHeight: 40,
-            headerHeight: 40,
-            width: this.props.width,
-            height: this.props.height,
-            onRowDoubleClick: this.handleRowDoubleClick,
-            onRowClick: this.handleRowClick,
-            isColumnResizing: false,
-            onColumnResizeEndCallback: this.handleColumnResize,
-            touchScrollEnabled: true
-        }, this.renderColumns());
+        if (!props.canEditExpr) {
+            return false;
+        }
+        const column = props.design.columns[options.col];
+        const exprType = new expressions_1.ExprUtils(props.schema).getExprType(column.expr);
+        if (!(0, CellEditor_1.canEditType)(exprType)) {
+            return false;
+        }
+        return props.canEditExpr(props.design.table, rowId, column.expr);
+    });
+    let numRows = rows.length;
+    if (!entirelyLoaded) {
+        numRows += 1;
     }
-}
+    const colWidths = props.design.columns.map(col => col.width || 200);
+    return (react_1.default.createElement(GridComponent_1.GridComponent, { width: props.width, height: props.height, numRows: numRows, colWidths: colWidths, colHeaderHeight: 40, rowHeight: 40, renderCell: renderCell, renderColHeader: renderColHeader, renderCellEditor: renderCellEditor, canEdit: canEdit, onColWidthsChange: handleColWidthsChange, onRowDoubleClick: handleRowDoubleClick, onRowClick: handleRowClick, rowHeaderWidth: rowHeaderWidth, renderRowHeader: renderRowHeader, renderTopLeft: renderTopLeft, onCopy: handleCopy }));
+});
 exports.default = DatagridViewComponent;
+/** Get a unique key for a datagrid design, ignoring column widths which don't affect data */
+function getDatagridReloadKey(design) {
+    // Create copy without column widths
+    const designWithoutWidths = (0, immer_1.default)(design, draft => {
+        for (const column of draft.columns) {
+            column.width = 0;
+        }
+    });
+    return JSON.stringify(designWithoutWidths);
+}

package/lib/datagrids/DirectDatagridDataSource.js

@@ -48,7 +48,7 @@ class DirectDatagridDataSource {
             limit,
             extraFilters: filters
         });
-        return this.options.dataSource.performQuery(query, callback);
+        this.options.dataSource.performQuery(query, callback);
     }
     countRows(design, filters, callback) {
         const queryBuilder = new DatagridQueryBuilder_1.default(this.options.schema);
@@ -70,8 +70,7 @@ class DirectDatagridDataSource {
                 }
             ]
         };
-        console.log(countQuery);
-        return this.options.dataSource.performQuery(countQuery, (error, rows) => {
+        this.options.dataSource.performQuery(countQuery, (error, rows) => {
             callback(error, rows?.[0]?.cnt);
         });
     }

package/lib/datagrids/ExprCellComponent.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import { DataSource, LiteralType, Schema } from "@mwater/expressions";
-import { Cell } from "fixed-data-table-2";
+import { DataSource, Expr, LiteralType, Schema } from "@mwater/expressions";
 export interface ExprCellComponentProps {
     /** schema to use */
     schema: Schema;
@@ -14,21 +13,15 @@ export interface ExprCellComponentProps {
     width: number;
     height: number;
     value?: any;
-    expr?: any;
+    expr?: Expr;
     /** True to show muted */
     muted?: boolean;
-    onClick?: any;
+    /** Called when clicked */
+    onClick?: () => void;
+    /** Called when double clicked */
+    onDoubleClick?: () => void;
 }
 export default class ExprCellComponent extends React.Component<ExprCellComponentProps> {
-    handleClick: () => void;
-    renderImage(id: any): React.DetailedReactHTMLElement<{
-        href: string;
-        key: any;
-        target: string;
-        style: {
-            paddingLeft: number;
-            paddingRight: number;
-        };
-    }, HTMLElement>;
-    render(): React.CElement<import("fixed-data-table-2").CellProps, Cell>;
+    renderImage(id: string): React.JSX.Element;
+    render(): React.JSX.Element;
 }