@youp-grid/react 0.1.0 → 0.2.0

package/dist/YoupGrid.js

@@ -18,6 +18,7 @@ export function YoupGrid(props) {
     const viewportHeight = normalizeHeight(props.height) ?? 420;
     const loading = props.loading ?? controller.state.remoteRequest?.status === "loading";
     const infiniteScrollLoading = props.infiniteScrollLoading ?? loading;
+    const headerRef = useRef(null);
     const bodyRef = useRef(null);
     const lastRowsEndReachedKeyRef = useRef();
     const skipNextBlurCommitRef = useRef(false);
@@ -31,6 +32,7 @@ export function YoupGrid(props) {
     const [columnChooserOpen, setColumnChooserOpen] = useState(false);
     const [columnMenuOpenId, setColumnMenuOpenId] = useState();
     const showRowSelectionColumn = props.showRowSelectionColumn ?? false;
+    const gridEditable = (props.editable ?? true) && !props.readOnly;
     const displayRows = rowModel.displayRows;
     const virtualRange = useMemo(() => {
         return getVirtualRange({
@@ -108,6 +110,44 @@ export function YoupGrid(props) {
         return row ? { row, displayIndex: item.index } : undefined;
     })
         .filter((item) => Boolean(item));
+    const getCellEditContext = (row, rowIndex, column) => {
+        return {
+            row: row.original,
+            rowNode: row,
+            rowId: row.id,
+            rowIndex,
+            column,
+            columnId: column.id,
+            value: column.accessor(row.original),
+        };
+    };
+    const canEditGridCell = (row, rowIndex, column) => {
+        if (!gridEditable || column.editable === false) {
+            return false;
+        }
+        return props.canEditCell?.(getCellEditContext(row, rowIndex, column)) ?? true;
+    };
+    const getGridCellMeta = (row, rowIndex, column) => {
+        return (props.getCellMeta?.(getCellEditContext(row, rowIndex, column)) ??
+            props.cellMeta?.[`${row.id}:${column.id}`]);
+    };
+    const createGridCellValueChange = (cell, value) => {
+        if (!cell.editable) {
+            return undefined;
+        }
+        if (Object.is(value, cell.value)) {
+            return undefined;
+        }
+        return {
+            row: cell.row.original,
+            rowId: cell.row.id,
+            rowIndex: cell.rowIndex,
+            column: cell.column,
+            columnId: cell.column.id,
+            value,
+            previousValue: cell.value,
+        };
+    };
     useEffect(() => {
         if (focusedRowIndex >= rowModel.visibleRows.length) {
             setFocusedRowIndex(Math.max(0, rowModel.visibleRows.length - 1));
@@ -159,7 +199,7 @@ export function YoupGrid(props) {
         if (changes.length === 0) {
             return;
         }
-        if (source === "edit" || source === "paste" || source === "fill") {
+        if (source === "edit" || source === "paste" || source === "fill" || source === "delete") {
             valueHistoryRef.current = pushValueHistoryEntry(valueHistoryRef.current, {
                 changes: changes.map((change) => ({
                     rowId: change.rowId,
@@ -170,18 +210,33 @@ export function YoupGrid(props) {
                 })),
             }, { maxEntries: VALUE_HISTORY_LIMIT });
         }
-        for (const change of changes) {
-            props.onCellValueChange?.({
-                ...change,
-                source,
+        const emittedChanges = changes.map((change) => ({
+            ...change,
+            source,
+        }));
+        for (const change of emittedChanges) {
+            props.onCellValueChange?.(change);
+        }
+        if (source === "paste" || source === "fill") {
+            props.onCellsValueChange?.({
+                changes: emittedChanges,
+                source: source,
             });
         }
     };
+    const applyCellValue = (cell, value) => {
+        const change = createGridCellValueChange(cell, value);
+        if (!change) {
+            return;
+        }
+        applyCellValueChanges([change], "edit");
+    };
     const applyValueHistoryEntry = (entry, source) => {
         applyCellValueChanges(getHistoryEntryValueChanges({
             entry,
             rowModel,
             source,
+            canEditCell: canEditGridCell,
         }), source);
     };
     const undoCellValueChange = () => {
@@ -202,19 +257,28 @@ export function YoupGrid(props) {
         applyValueHistoryEntry(result.entry, "redo");
         return true;
     };
-    const commitEditingValue = (cell, source = "keyboard") => {
-        if (source === "blur" && skipNextBlurCommitRef.current) {
+    const commitEditingValue = (cell, reason = "enter") => {
+        if (reason === "blur" && skipNextBlurCommitRef.current) {
             skipNextBlurCommitRef.current = false;
             return;
         }
-        if (source === "keyboard") {
+        if (reason !== "blur") {
             skipNextBlurCommitRef.current = true;
         }
-        commitEditingCell({
+        const change = commitEditingCell({
             cell,
             rowModel,
-            applyCellValueChanges,
+            canEditCell: canEditGridCell,
         });
+        if (change) {
+            if (!Object.is(change.value, change.previousValue)) {
+                applyCellValueChanges([change], "edit");
+            }
+            props.onCellEditCommit?.({
+                ...change,
+                reason,
+            });
+        }
         setEditingCell(undefined);
     };
     const setFocusedCell = (cell, extendSelection = false, selectionAnchor) => {
@@ -245,7 +309,12 @@ export function YoupGrid(props) {
         controller.setSelectedRows(currentSelectedRowIds.filter((rowId) => !visibleRowIdSet.has(rowId)));
     };
     return createElement("div", {
-        className: ["youp-grid", `youp-grid--density-${density}`, props.className].filter(Boolean).join(" "),
+        className: [
+            "youp-grid",
+            `youp-grid--density-${density}`,
+            !gridEditable ? "youp-grid--read-only" : "",
+            props.className,
+        ].filter(Boolean).join(" "),
         style: gridStyle,
     }, renderColumnToolbar({
         showColumnChooser: props.showColumnChooser ?? true,
@@ -268,12 +337,16 @@ export function YoupGrid(props) {
                 }),
             });
         },
+    }), renderDisabledReason({
+        enabled: !gridEditable,
+        reason: props.disabledReason,
     }), createElement("div", {
         className: "youp-grid__viewport",
         role: "grid",
         "aria-rowcount": displayRows.length,
         "aria-colcount": rowModel.visibleColumns.length + (showRowSelectionColumn ? 1 : 0),
         "aria-busy": loading || undefined,
+        "aria-readonly": !gridEditable || undefined,
         onCopy: (event) => {
             if (editingCell) {
                 return;
@@ -287,7 +360,7 @@ export function YoupGrid(props) {
             });
         },
         onPaste: (event) => {
-            if (editingCell) {
+            if (editingCell || !gridEditable) {
                 return;
             }
             handleGridPaste({
@@ -296,10 +369,11 @@ export function YoupGrid(props) {
                 selectionRange,
                 rows: rowModel.visibleRows,
                 columns: visibleColumns,
+                canEditCell: canEditGridCell,
                 applyCellValueChanges,
             });
         },
-    }, createElement("div", { className: "youp-grid__header", role: "rowgroup" }, hasHeaderGroups
+    }, createElement("div", { className: "youp-grid__header", role: "rowgroup", ref: headerRef }, hasHeaderGroups
         ? createElement("div", { className: "youp-grid__row youp-grid__row--header-group", role: "row" }, showRowSelectionColumn
             ? renderSelectionHeaderGroupCell()
             : undefined, headerGroupLayouts.map((layout) => renderHeaderGroupCell(layout)))
@@ -345,6 +419,9 @@ export function YoupGrid(props) {
         ref: bodyRef,
         style: { height: viewportHeight },
         onScroll: (event) => {
+            if (headerRef.current) {
+                headerRef.current.style.setProperty("--youp-grid-header-scroll-left", `${event.currentTarget.scrollLeft}px`);
+            }
             setScrollTop(event.currentTarget.scrollTop);
         },
     }, rowModel.visibleRows.length === 0 && !props.loading && !props.error
@@ -383,10 +460,16 @@ export function YoupGrid(props) {
                     selectionRange,
                     fillRange,
                     editingCell,
-                    editable: props.editable ?? true,
+                    editable: gridEditable,
+                    disabledReason: props.disabledReason,
+                    canEditCell: canEditGridCell,
+                    getCellMeta: getGridCellMeta,
                     setRowSelected: (selected) => controller.setRowSelected(row.id, selected),
                     setFocusedCell,
                     startFillHandle: (event) => {
+                        if (!gridEditable) {
+                            return;
+                        }
                         const sourceRange = normalizeCellRange(selectionRange ?? {
                             anchor: focusedCell,
                             focus: focusedCell,
@@ -403,6 +486,7 @@ export function YoupGrid(props) {
                                     targetRange,
                                     rows: rowModel.visibleRows,
                                     columns: visibleColumns,
+                                    canEditCell: canEditGridCell,
                                     applyCellValueChanges,
                                 });
                                 const nextSelectionRange = getFillSelectionRange(sourceRange, targetRange);
@@ -412,6 +496,7 @@ export function YoupGrid(props) {
                             },
                         });
                     },
+                    applyCellValue,
                     startEditing: startEditingCell,
                     updateEditingDraft: (draftValue) => {
                         setEditingCell((current) => current ? { ...current, draftValue } : current);
@@ -434,6 +519,17 @@ export function YoupGrid(props) {
                             startEditing: startEditingCell,
                             commitEditing: commitEditingValue,
                             cancelEditing: cancelEditingCell,
+                            applyCellValue,
+                            deleteCellValues: () => {
+                                deleteGridCellValues({
+                                    focusedCell,
+                                    selectionRange,
+                                    rows: rowModel.visibleRows,
+                                    columns: visibleColumns,
+                                    canEditCell: canEditGridCell,
+                                    applyCellValueChanges,
+                                });
+                            },
                             undoCellValueChange,
                             redoCellValueChange,
                             toggleSelected: () => controller.toggleRowSelected(row.id),
@@ -473,6 +569,12 @@ function renderGridOverlay(context) {
     }
     return undefined;
 }
+function renderDisabledReason(context) {
+    if (!context.enabled || context.reason == null) {
+        return undefined;
+    }
+    return createElement("div", { className: "youp-grid__disabled-reason", role: "status" }, context.reason);
+}
 function renderAggregationFooter(context) {
     if (!context.enabled) {
         return undefined;
@@ -761,7 +863,10 @@ function renderRow(context) {
         const fillTargeted = context.fillRange
             ? isCellInNormalizedRange(context.rowIndex, columnIndex, context.fillRange)
             : false;
+        const editable = context.canEditCell(context.row, context.rowIndex, layout.column);
+        const meta = context.getCellMeta(context.row, context.rowIndex, layout.column);
         const showFillHandle = !context.editingCell &&
+            editable &&
             context.rowIndex === activeRange.endRowIndex &&
             columnIndex === activeRange.endColumnIndex;
         return renderCell({
@@ -776,9 +881,12 @@ function renderRow(context) {
             showFillHandle,
             editing,
             editingCell: context.editingCell,
-            editable: context.editable,
+            editable,
+            disabledReason: context.disabledReason,
+            meta,
             setFocusedCell: context.setFocusedCell,
             startFillHandle: context.startFillHandle,
+            applyCellValue: context.applyCellValue,
             startEditing: context.startEditing,
             updateEditingDraft: context.updateEditingDraft,
             cancelEditing: context.cancelEditing,
@@ -826,13 +934,15 @@ function shouldIgnoreRowMouseEvent(event) {
 function renderCell(context) {
     const column = context.layout.column;
     const value = column.accessor(context.row.original);
-    const editable = context.editable && column.editable !== false;
+    const editable = context.editable;
     const cellContext = {
         row: context.row,
         column,
         value,
         editing: context.editing,
         focused: context.focused,
+        editable,
+        meta: context.meta,
     };
     const cellState = {
         row: context.row,
@@ -841,10 +951,16 @@ function renderCell(context) {
         columnIndex: context.columnIndex,
         value,
         editable,
+        meta: context.meta,
     };
     const cellContent = context.renderCell
         ? context.renderCell(cellContext)
-        : formatCellValue(column, context.row.original, value);
+        : renderDefaultCellContent({
+            cell: cellState,
+            row: context.row.original,
+            disabledReason: context.disabledReason,
+            applyCellValue: context.applyCellValue,
+        });
     return createElement("div", {
         key: column.id,
         className: getCellClassName([
@@ -853,10 +969,14 @@ function renderCell(context) {
             context.selected ? "youp-grid__cell--range-selected" : "",
             context.fillTargeted ? "youp-grid__cell--fill-target" : "",
             context.editing ? "youp-grid__cell--editing" : "",
+            !editable ? "youp-grid__cell--disabled" : "",
+            context.meta ? `youp-grid__cell--status-${context.meta.status}` : "",
         ].filter(Boolean).join(" "), context.layout),
         role: "gridcell",
         tabIndex: context.focused && !context.editing ? 0 : -1,
+        title: getCellTitle(context.meta, context.disabledReason, editable),
         "aria-colindex": context.columnIndex + context.ariaColumnOffset + 1,
+        "aria-readonly": !editable || undefined,
         "data-youp-row-index": context.rowIndex,
         "data-youp-column-index": context.columnIndex,
         "data-youp-column-id": column.id,
@@ -867,34 +987,107 @@ function renderCell(context) {
         },
         onDoubleClick: () => {
             if (editable) {
-                context.startEditing(createEditingCell(cellState, value));
+                if (column.editor === "checkbox") {
+                    context.applyCellValue(cellState, !Boolean(value));
+                }
+                else {
+                    context.startEditing(createEditingCell(cellState, value));
+                }
             }
         },
         onKeyDown: (event) => context.onKeyDown(event, cellState),
     }, context.editing
-        ? createElement("input", {
-            className: "youp-grid__cell-editor",
+        ? renderCellEditor({
+            cell: cellState,
+            editingCell: context.editingCell,
+            updateEditingDraft: context.updateEditingDraft,
+            commitEditing: context.commitEditing,
+            onKeyDown: context.onKeyDown,
+        })
+        : cellContent, renderCellStatus(context.meta), !context.editing && context.showFillHandle
+        ? createElement("span", {
+            className: "youp-grid__fill-handle",
+            role: "button",
+            "aria-label": "Fill selection",
+            onMouseDown: context.startFillHandle,
+        })
+        : undefined);
+}
+function renderDefaultCellContent(context) {
+    if (context.cell.column.editor === "checkbox") {
+        return createElement("input", {
+            className: "youp-grid__cell-checkbox",
+            type: "checkbox",
+            checked: Boolean(context.cell.value),
+            disabled: !context.cell.editable,
+            title: getCellTitle(context.cell.meta, context.disabledReason, context.cell.editable),
+            "aria-label": context.cell.column.headerName,
+            onChange: (event) => {
+                context.applyCellValue(context.cell, event.currentTarget.checked);
+            },
+            onClick: (event) => {
+                event.stopPropagation();
+            },
+            onKeyDown: (event) => {
+                event.stopPropagation();
+            },
+        });
+    }
+    const text = formatCellValue(context.cell.column, context.row, context.cell.value);
+    const placeholder = context.cell.column.placeholder;
+    const hasPlaceholder = text.length === 0 && Boolean(placeholder);
+    return createElement("span", { className: hasPlaceholder ? "youp-grid__cell-placeholder" : undefined }, hasPlaceholder ? placeholder : text);
+}
+function renderCellEditor(context) {
+    if (context.cell.column.editor === "select") {
+        const options = normalizeEditorOptions(context.cell.column.options);
+        return createElement("select", {
+            className: "youp-grid__cell-editor youp-grid__cell-editor--select",
             value: context.editingCell?.draftValue ?? "",
             autoFocus: true,
+            disabled: !context.cell.editable,
             onChange: (event) => {
                 context.updateEditingDraft(event.currentTarget.value);
             },
             onBlur: (event) => {
-                context.commitEditing(createEditingCell(cellState, event.currentTarget.value), "blur");
+                context.commitEditing(createEditingCell(context.cell, event.currentTarget.value), "blur");
             },
             onKeyDown: (event) => {
                 event.stopPropagation();
-                context.onKeyDown(event, cellState);
+                context.onKeyDown(event, context.cell);
             },
-        })
-        : cellContent, !context.editing && context.showFillHandle
-        ? createElement("span", {
-            className: "youp-grid__fill-handle",
-            role: "button",
-            "aria-label": "Fill selection",
-            onMouseDown: context.startFillHandle,
-        })
-        : undefined);
+        }, context.cell.column.placeholder
+            ? createElement("option", { key: "__placeholder", value: "", disabled: true }, context.cell.column.placeholder)
+            : undefined, options.map((option) => createElement("option", { key: option.inputValue, value: option.inputValue }, option.label)));
+    }
+    return createElement("input", {
+        className: "youp-grid__cell-editor",
+        type: context.cell.column.editor === "number" ? "number" : "text",
+        value: context.editingCell?.draftValue ?? "",
+        placeholder: context.cell.column.placeholder,
+        autoFocus: true,
+        disabled: !context.cell.editable,
+        onChange: (event) => {
+            context.updateEditingDraft(event.currentTarget.value);
+        },
+        onBlur: (event) => {
+            context.commitEditing(createEditingCell(context.cell, event.currentTarget.value), "blur");
+        },
+        onKeyDown: (event) => {
+            event.stopPropagation();
+            context.onKeyDown(event, context.cell);
+        },
+    });
+}
+function renderCellStatus(meta) {
+    if (!meta) {
+        return undefined;
+    }
+    return createElement("span", {
+        className: `youp-grid__cell-status youp-grid__cell-status--${meta.status}`,
+        title: typeof meta.message === "string" ? meta.message : undefined,
+        "aria-hidden": true,
+    });
 }
 function renderColumnToolbar(context) {
     if (!context.showColumnChooser && !context.showCsvExport && !context.showDensityControl) {
@@ -1161,11 +1354,11 @@ function handleCellKeyDown(context) {
         }
         if (context.event.key === "Enter") {
             context.event.preventDefault();
-            context.commitEditing(editingCell);
+            context.commitEditing(editingCell, "enter");
             moveFocusedCell({
                 ...context,
                 nextCell: {
-                    rowIndex: clamp(context.cell.rowIndex + 1, 0, context.rowCount - 1),
+                    rowIndex: clamp(context.cell.rowIndex + (context.event.shiftKey ? -1 : 1), 0, context.rowCount - 1),
                     columnIndex: context.cell.columnIndex,
                 },
             });
@@ -1173,7 +1366,7 @@ function handleCellKeyDown(context) {
         }
         if (context.event.key === "Tab") {
             context.event.preventDefault();
-            context.commitEditing(editingCell);
+            context.commitEditing(editingCell, "tab");
             moveFocusedCell({
                 ...context,
                 nextCell: getNextTabCell(context.cell, context.rowCount, context.columnCount, context.event.shiftKey),
@@ -1184,23 +1377,41 @@ function handleCellKeyDown(context) {
     }
     if (isUndoShortcut(context.event)) {
         context.event.preventDefault();
-        context.undoCellValueChange();
+        if (context.cell.editable) {
+            context.undoCellValueChange();
+        }
         return;
     }
     if (isRedoShortcut(context.event)) {
         context.event.preventDefault();
-        context.redoCellValueChange();
+        if (context.cell.editable) {
+            context.redoCellValueChange();
+        }
+        return;
+    }
+    if (context.event.key === "Delete") {
+        context.event.preventDefault();
+        context.deleteCellValues();
         return;
     }
     if (context.event.key === "Enter" || context.event.key === "F2") {
         if (context.cell.editable) {
             context.event.preventDefault();
-            context.startEditing(createEditingCell(context.cell, context.cell.value));
+            if (context.cell.column.editor === "checkbox") {
+                context.applyCellValue(context.cell, !Boolean(context.cell.value));
+            }
+            else {
+                context.startEditing(createEditingCell(context.cell, context.cell.value));
+            }
         }
         return;
     }
     if (context.event.key === " ") {
         context.event.preventDefault();
+        if (context.cell.column.editor === "checkbox" && context.cell.editable) {
+            context.applyCellValue(context.cell, !Boolean(context.cell.value));
+            return;
+        }
         if (context.event.shiftKey) {
             context.setFocusedCell(context.cell, true);
         }
@@ -1210,7 +1421,7 @@ function handleCellKeyDown(context) {
         return;
     }
     if (isPrintableKey(context.event)) {
-        if (context.cell.editable) {
+        if (context.cell.editable && context.cell.column.editor !== "checkbox") {
             context.event.preventDefault();
             context.startEditing(createEditingCell(context.cell, context.event.key));
         }
@@ -1372,27 +1583,20 @@ function isEditingCell(editingCell, row, column) {
 function commitEditingCell(context) {
     const row = context.rowModel.visibleRows[context.cell.rowIndex];
     const column = context.rowModel.visibleColumns.find((item) => item.id === context.cell.columnId);
-    if (!row || !column) {
-        return;
+    if (!row || !column || !context.canEditCell(row, context.cell.rowIndex, column)) {
+        return undefined;
     }
     const previousValue = column.accessor(row.original);
-    const value = column.valueParser
-        ? column.valueParser(context.cell.draftValue, row.original)
-        : context.cell.draftValue;
-    if (Object.is(value, previousValue)) {
-        return;
-    }
-    context.applyCellValueChanges([
-        {
-            row: row.original,
-            rowId: row.id,
-            rowIndex: context.cell.rowIndex,
-            column,
-            columnId: column.id,
-            value,
-            previousValue,
-        },
-    ], "edit");
+    const value = parseDraftValue(column, row.original, context.cell.draftValue);
+    return {
+        row: row.original,
+        rowId: row.id,
+        rowIndex: context.cell.rowIndex,
+        column,
+        columnId: column.id,
+        value,
+        previousValue,
+    };
 }
 function handleGridCopy(context) {
     const range = context.selectionRange ?? {
@@ -1433,11 +1637,11 @@ function handleGridPaste(context) {
     })) {
         const row = context.rows[cell.rowIndex];
         const column = context.columns[cell.columnIndex];
-        if (!row || !column || column.editable === false) {
+        if (!row || !column || !context.canEditCell(row, cell.rowIndex, column)) {
             continue;
         }
         const previousValue = column.accessor(row.original);
-        const value = column.valueParser ? column.valueParser(cell.value, row.original) : cell.value;
+        const value = parseDraftValue(column, row.original, cell.value);
         if (Object.is(value, previousValue)) {
             continue;
         }
@@ -1453,6 +1657,37 @@ function handleGridPaste(context) {
     }
     context.applyCellValueChanges(changes, "paste");
 }
+function deleteGridCellValues(context) {
+    const range = normalizeCellRange(context.selectionRange ?? {
+        anchor: context.focusedCell,
+        focus: context.focusedCell,
+    });
+    const changes = [];
+    for (let rowIndex = range.startRowIndex; rowIndex <= range.endRowIndex; rowIndex += 1) {
+        for (let columnIndex = range.startColumnIndex; columnIndex <= range.endColumnIndex; columnIndex += 1) {
+            const row = context.rows[rowIndex];
+            const column = context.columns[columnIndex];
+            if (!row || !column || !context.canEditCell(row, rowIndex, column)) {
+                continue;
+            }
+            const previousValue = column.accessor(row.original);
+            const value = getEmptyCellValue(column, row.original);
+            if (Object.is(value, previousValue)) {
+                continue;
+            }
+            changes.push({
+                row: row.original,
+                rowId: row.id,
+                rowIndex,
+                column,
+                columnId: column.id,
+                value,
+                previousValue,
+            });
+        }
+    }
+    context.applyCellValueChanges(changes, "delete");
+}
 function startFillHandleDrag(context) {
     context.event.preventDefault();
     context.event.stopPropagation();
@@ -1499,7 +1734,7 @@ function applyFillHandleValues(context) {
     })) {
         const row = context.rows[cell.rowIndex];
         const column = context.columns[cell.columnIndex];
-        if (!row || !column || column.editable === false) {
+        if (!row || !column || !context.canEditCell(row, cell.rowIndex, column)) {
             continue;
         }
         const previousValue = column.accessor(row.original);
@@ -1569,16 +1804,20 @@ function getHistoryEntryValueChanges(context) {
         if (!row || !column) {
             continue;
         }
+        const visibleRowIndex = context.rowModel.visibleRows.findIndex((item) => item.id === row.id);
+        const rowIndex = visibleRowIndex >= 0 ? visibleRowIndex : row.index;
+        if (!context.canEditCell(row, rowIndex, column)) {
+            continue;
+        }
         const value = context.source === "undo" ? historyChange.previousValue : historyChange.value;
         const previousValue = column.accessor(row.original);
         if (Object.is(value, previousValue)) {
             continue;
         }
-        const visibleRowIndex = context.rowModel.visibleRows.findIndex((item) => item.id === row.id);
         changes.push({
             row: row.original,
             rowId: row.id,
-            rowIndex: visibleRowIndex >= 0 ? visibleRowIndex : row.index,
+            rowIndex,
             column,
             columnId: column.id,
             value,
@@ -1588,7 +1827,66 @@ function getHistoryEntryValueChanges(context) {
     return changes;
 }
 function formatCellValue(column, row, value) {
-    return column.valueFormatter ? column.valueFormatter(value, row) : String(value ?? "");
+    if (column.valueFormatter) {
+        return column.valueFormatter(value, row);
+    }
+    if (column.editor === "select") {
+        const option = normalizeEditorOptions(column.options).find((item) => Object.is(item.value, value));
+        if (option) {
+            return option.label;
+        }
+    }
+    return String(value ?? "");
+}
+function parseDraftValue(column, row, draftValue) {
+    if (column.valueParser) {
+        return column.valueParser(draftValue, row);
+    }
+    if (column.editor === "number") {
+        return draftValue === "" ? undefined : Number(draftValue);
+    }
+    if (column.editor === "checkbox") {
+        return draftValue === "true";
+    }
+    if (column.editor === "select") {
+        const option = normalizeEditorOptions(column.options).find((item) => item.inputValue === draftValue);
+        return option ? option.value : draftValue;
+    }
+    return draftValue;
+}
+function getEmptyCellValue(column, row) {
+    if (column.valueParser) {
+        return column.valueParser("", row);
+    }
+    if (column.editor === "checkbox") {
+        return false;
+    }
+    if (column.editor === "number") {
+        return undefined;
+    }
+    return "";
+}
+function normalizeEditorOptions(options) {
+    return (options ?? []).map((option) => {
+        const value = getEditorOptionValue(option);
+        return {
+            value,
+            label: typeof option === "object" ? option.label : String(option),
+            inputValue: String(value),
+        };
+    });
+}
+function getEditorOptionValue(option) {
+    return typeof option === "object" ? option.value : option;
+}
+function getCellTitle(meta, disabledReason, editable) {
+    if (typeof meta?.message === "string") {
+        return meta.message;
+    }
+    if (!editable && typeof disabledReason === "string") {
+        return disabledReason;
+    }
+    return undefined;
 }
 function isPrintableKey(event) {
     return event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey;

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { YoupGrid } from "./YoupGrid.ts";
 export { useYoupGrid } from "./useYoupGrid.ts";
-export type { YoupGridCellContext, YoupGridController, YoupGridDensity, YoupGridHeaderContext, YoupGridOptions, YoupGridProps, YoupGridRowEvent, YoupGridRowsEndReachedEvent, YoupGridStateChange, } from "./types.ts";
+export type { YoupGridCanEditCellContext, YoupGridCellEditCommit, YoupGridCellEditCommitReason, YoupGridCellContext, YoupGridCellMeta, YoupGridCellMetaStatus, YoupGridCellsValueChange, YoupGridCellsValueChangeSource, YoupGridController, YoupGridDensity, YoupGridHeaderContext, YoupGridOptions, YoupGridProps, YoupGridRowEvent, YoupGridRowsEndReachedEvent, YoupGridStateChange, } from "./types.ts";

package/dist/styles.css

@@ -64,6 +64,15 @@
   background: #fff;
 }
 
+.youp-grid__disabled-reason {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--youp-grid-border);
+  color: var(--youp-grid-muted);
+  background: #f8fafc;
+  font-size: 12px;
+  font-weight: 700;
+}
+
 .youp-grid__density-control {
   display: inline-flex;
   align-items: center;
@@ -151,6 +160,15 @@
   background: var(--youp-grid-row-hover);
 }
 
+.youp-grid__header {
+  --youp-grid-header-scroll-left: 0px;
+}
+
+.youp-grid__header .youp-grid__cell--header:not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right):not(.youp-grid__selection-cell),
+.youp-grid__header .youp-grid__cell--header-group:not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right):not(.youp-grid__selection-cell) {
+  transform: translateX(calc(-1 * var(--youp-grid-header-scroll-left)));
+}
+
 .youp-grid__row--header {
   background: var(--youp-grid-header);
 }
@@ -268,6 +286,10 @@
   white-space: nowrap;
 }
 
+.youp-grid--read-only .youp-grid__cell {
+  cursor: default;
+}
+
 .youp-grid__cell:focus {
   outline: none;
 }
@@ -289,6 +311,70 @@
   box-shadow: inset 0 0 0 1px #0ea5e9;
 }
 
+.youp-grid__cell--disabled {
+  color: var(--youp-grid-muted);
+  background: #f8fafc;
+}
+
+.youp-grid__cell--status-loading {
+  background: #eff6ff;
+}
+
+.youp-grid__cell--status-error {
+  background: #fef2f2;
+}
+
+.youp-grid__cell--status-warning {
+  background: #fffbeb;
+}
+
+.youp-grid__cell--status-success {
+  background: #f0fdf4;
+}
+
+.youp-grid__cell-placeholder {
+  color: #94a3b8;
+}
+
+.youp-grid__cell-checkbox {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: #2563eb;
+}
+
+.youp-grid__cell-checkbox:disabled {
+  cursor: not-allowed;
+}
+
+.youp-grid__cell-status {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 3;
+  width: 7px;
+  height: 7px;
+  border: 1px solid #fff;
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.youp-grid__cell-status--loading {
+  background: #2563eb;
+}
+
+.youp-grid__cell-status--error {
+  background: #dc2626;
+}
+
+.youp-grid__cell-status--warning {
+  background: #d97706;
+}
+
+.youp-grid__cell-status--success {
+  background: #16a34a;
+}
+
 .youp-grid__cell--focused.youp-grid__cell--fill-target {
   background: #bae6fd;
 }
@@ -322,6 +408,16 @@
   outline: none;
 }
 
+.youp-grid__cell-editor--select {
+  padding-right: 24px;
+}
+
+.youp-grid__cell-editor:disabled {
+  color: var(--youp-grid-muted);
+  cursor: not-allowed;
+  background: #f1f5f9;
+}
+
 .youp-grid__cell--pinned-left,
 .youp-grid__cell--pinned-right {
   position: sticky;
@@ -363,6 +459,31 @@
   background: #e0f2fe;
 }
 
+.youp-grid__cell--pinned-left.youp-grid__cell--disabled,
+.youp-grid__cell--pinned-right.youp-grid__cell--disabled {
+  background: #f8fafc;
+}
+
+.youp-grid__cell--pinned-left.youp-grid__cell--status-loading,
+.youp-grid__cell--pinned-right.youp-grid__cell--status-loading {
+  background: #eff6ff;
+}
+
+.youp-grid__cell--pinned-left.youp-grid__cell--status-error,
+.youp-grid__cell--pinned-right.youp-grid__cell--status-error {
+  background: #fef2f2;
+}
+
+.youp-grid__cell--pinned-left.youp-grid__cell--status-warning,
+.youp-grid__cell--pinned-right.youp-grid__cell--status-warning {
+  background: #fffbeb;
+}
+
+.youp-grid__cell--pinned-left.youp-grid__cell--status-success,
+.youp-grid__cell--pinned-right.youp-grid__cell--status-success {
+  background: #f0fdf4;
+}
+
 .youp-grid__cell--focused.youp-grid__cell--left-last {
   box-shadow:
     inset 0 0 0 2px #2563eb,

package/dist/types.d.ts

@@ -14,7 +14,30 @@ export type YoupGridCellValueChange<TRow> = {
     previousValue: unknown;
     source: YoupGridCellValueChangeSource;
 };
-export type YoupGridCellValueChangeSource = "edit" | "paste" | "fill" | "undo" | "redo";
+export type YoupGridCellValueChangeSource = "edit" | "paste" | "fill" | "delete" | "undo" | "redo";
+export type YoupGridCellEditCommitReason = "enter" | "tab" | "blur";
+export type YoupGridCellEditCommit<TRow> = Omit<YoupGridCellValueChange<TRow>, "source"> & {
+    reason: YoupGridCellEditCommitReason;
+};
+export type YoupGridCellsValueChangeSource = "paste" | "fill";
+export type YoupGridCellsValueChange<TRow> = {
+    changes: YoupGridCellValueChange<TRow>[];
+    source: YoupGridCellsValueChangeSource;
+};
+export type YoupGridCellMetaStatus = "loading" | "error" | "warning" | "success";
+export type YoupGridCellMeta = {
+    status: YoupGridCellMetaStatus;
+    message?: ReactNode;
+};
+export type YoupGridCanEditCellContext<TRow> = {
+    row: TRow;
+    rowNode: RowNode<TRow>;
+    rowId: GridRowId;
+    rowIndex: number;
+    column: ResolvedColumnDef<TRow>;
+    columnId: string;
+    value: unknown;
+};
 export type YoupGridDensity = "compact" | "standard" | "comfortable";
 export type YoupGridRowEvent<TRow> = {
     row: TRow;
@@ -84,6 +107,9 @@ export type YoupGridProps<TRow> = YoupGridOptions<TRow> & {
     style?: CSSProperties;
     height?: number | string;
     editable?: boolean;
+    readOnly?: boolean;
+    canEditCell?: (context: YoupGridCanEditCellContext<TRow>) => boolean;
+    disabledReason?: ReactNode;
     showColumnChooser?: boolean;
     showColumnMenu?: boolean;
     showCsvExport?: boolean;
@@ -100,9 +126,13 @@ export type YoupGridProps<TRow> = YoupGridOptions<TRow> & {
     loadingContent?: ReactNode;
     error?: boolean;
     errorContent?: ReactNode;
+    cellMeta?: Record<string, YoupGridCellMeta | undefined>;
+    getCellMeta?: (context: YoupGridCanEditCellContext<TRow>) => YoupGridCellMeta | undefined;
     renderCell?: (context: YoupGridCellContext<TRow>) => ReactNode;
     renderHeader?: (context: YoupGridHeaderContext<TRow>) => ReactNode;
     onCellValueChange?: (change: YoupGridCellValueChange<TRow>) => void;
+    onCellEditCommit?: (commit: YoupGridCellEditCommit<TRow>) => void;
+    onCellsValueChange?: (change: YoupGridCellsValueChange<TRow>) => void;
     onRowClick?: (event: YoupGridRowEvent<TRow>) => void;
     onRowDoubleClick?: (event: YoupGridRowEvent<TRow>) => void;
     onRowsEndReached?: (event: YoupGridRowsEndReachedEvent<TRow>) => void;
@@ -114,6 +144,8 @@ export type YoupGridCellContext<TRow> = {
     value: unknown;
     editing: boolean;
     focused: boolean;
+    editable: boolean;
+    meta?: YoupGridCellMeta;
 };
 export type YoupGridHeaderContext<TRow> = {
     column: ResolvedColumnDef<TRow>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youp-grid/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React adapter for Youp Grid.",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
     "build": "tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css"
   },
   "dependencies": {
-    "@youp-grid/core": "0.1.0"
+    "@youp-grid/core": "0.2.0"
   },
   "peerDependencies": {
     "react": ">=18.2.0"