@youp-grid/react 0.2.3 → 0.2.4

package/dist/YoupGrid.js

@@ -8,6 +8,7 @@ const DENSITY_ROW_HEIGHTS = {
     standard: 38,
     comfortable: 46,
 };
+const ROW_NUMBER_COLUMN_WIDTH = 44;
 const SELECTION_COLUMN_WIDTH = 44;
 const AUTOSIZE_CELL_EXTRA_WIDTH = 8;
 const AUTOSIZE_CELL_BORDER_THRESHOLD = 6;
@@ -34,9 +35,12 @@ export function YoupGrid(props) {
     const [editingCell, setEditingCell] = useState();
     const [columnChooserOpen, setColumnChooserOpen] = useState(false);
     const [columnMenuOpenId, setColumnMenuOpenId] = useState();
+    const [cellContextMenu, setCellContextMenu] = useState();
     const [activeTooltipCellKey, setActiveTooltipCellKey] = useState();
+    const showRowNumberColumn = props.showRowNumberColumn ?? false;
     const showRowSelectionColumn = props.showRowSelectionColumn ?? false;
     const pinRowSelectionColumn = props.pinRowSelectionColumn ?? false;
+    const showCellContextMenu = props.showCellContextMenu ?? false;
     const cellTooltipMode = props.cellTooltip?.mode ?? "native";
     const gridEditable = (props.editable ?? true) && !props.readOnly;
     const displayRows = rowModel.displayRows;
@@ -79,11 +83,14 @@ export function YoupGrid(props) {
     const selectedVisibleRowCount = visibleRowIds.filter((rowId) => selectedRowIds.has(rowId)).length;
     const allVisibleRowsSelected = visibleRowIds.length > 0 && selectedVisibleRowCount === visibleRowIds.length;
     const someVisibleRowsSelected = selectedVisibleRowCount > 0 && !allVisibleRowsSelected;
+    const rowNumberColumnOffset = showRowNumberColumn ? ROW_NUMBER_COLUMN_WIDTH : 0;
+    const selectionColumnOffset = showRowSelectionColumn && pinRowSelectionColumn ? rowNumberColumnOffset : 0;
+    const pinnedColumnOffset = rowNumberColumnOffset + (showRowSelectionColumn && pinRowSelectionColumn ? SELECTION_COLUMN_WIDTH : 0);
     const columnLayouts = useMemo(() => {
         return getColumnLayouts(rowModel.visibleColumns, {
-            leftOffset: showRowSelectionColumn && pinRowSelectionColumn ? SELECTION_COLUMN_WIDTH : 0,
+            leftOffset: pinnedColumnOffset,
         });
-    }, [pinRowSelectionColumn, rowModel.visibleColumns, showRowSelectionColumn]);
+    }, [pinnedColumnOffset, rowModel.visibleColumns]);
     const visibleColumns = useMemo(() => columnLayouts.map((layout) => layout.column), [columnLayouts]);
     const visibleRowIndexById = useMemo(() => {
         return new Map(rowModel.visibleRows.map((row, index) => [row.id, index]));
@@ -169,6 +176,25 @@ export function YoupGrid(props) {
             setColumnMenuOpenId(undefined);
         }
     }, [columnMenuOpenId, visibleColumns]);
+    useEffect(() => {
+        if (!cellContextMenu) {
+            return;
+        }
+        const closeMenu = () => setCellContextMenu(undefined);
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                closeMenu();
+            }
+        };
+        document.addEventListener("click", closeMenu);
+        document.addEventListener("contextmenu", closeMenu);
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("click", closeMenu);
+            document.removeEventListener("contextmenu", closeMenu);
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [cellContextMenu]);
     useEffect(() => {
         if (cellTooltipMode !== "rich") {
             setActiveTooltipCellKey(undefined);
@@ -333,11 +359,207 @@ export function YoupGrid(props) {
         const visibleRowIdSet = new Set(visibleRowIds);
         controller.setSelectedRows(currentSelectedRowIds.filter((rowId) => !visibleRowIdSet.has(rowId)));
     };
+    const openCellContextMenu = (event, cell) => {
+        if (!showCellContextMenu || editingCell) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const insideSelection = selectionRange
+            ? isCellInRange(cell.rowIndex, cell.columnIndex, selectionRange)
+            : false;
+        if (!insideSelection) {
+            setSelectionRange(undefined);
+        }
+        setFocusedRowIndex(cell.rowIndex);
+        setFocusedColumnIndex(cell.columnIndex);
+        setCellContextMenu({
+            rowIndex: cell.rowIndex,
+            columnIndex: cell.columnIndex,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            anchor: event.currentTarget,
+        });
+    };
+    const getCellContextMenuRange = () => {
+        if (!cellContextMenu || !selectionRange) {
+            return undefined;
+        }
+        return isCellInRange(cellContextMenu.rowIndex, cellContextMenu.columnIndex, selectionRange)
+            ? selectionRange
+            : undefined;
+    };
+    const copyCellContextMenuSelection = () => {
+        if (!cellContextMenu) {
+            return;
+        }
+        void writeClipboardText(getGridClipboardText({
+            focusedCell: {
+                rowIndex: cellContextMenu.rowIndex,
+                columnIndex: cellContextMenu.columnIndex,
+            },
+            selectionRange: getCellContextMenuRange(),
+            rows: rowModel.visibleRows,
+            columns: visibleColumns,
+        })).catch(() => undefined);
+    };
+    const pasteCellContextMenuSelection = () => {
+        if (!cellContextMenu || !gridEditable) {
+            return;
+        }
+        void readClipboardText()
+            .then((text) => {
+            applyGridClipboardText({
+                text,
+                focusedCell: {
+                    rowIndex: cellContextMenu.rowIndex,
+                    columnIndex: cellContextMenu.columnIndex,
+                },
+                selectionRange: getCellContextMenuRange(),
+                rows: rowModel.visibleRows,
+                columns: visibleColumns,
+                canEditCell: canEditGridCell,
+                applyCellValueChanges,
+            });
+        })
+            .catch(() => undefined);
+    };
+    const clearCellContextMenuSelection = () => {
+        if (!cellContextMenu || !gridEditable) {
+            return;
+        }
+        deleteGridCellValues({
+            focusedCell: {
+                rowIndex: cellContextMenu.rowIndex,
+                columnIndex: cellContextMenu.columnIndex,
+            },
+            selectionRange: getCellContextMenuRange(),
+            rows: rowModel.visibleRows,
+            columns: visibleColumns,
+            canEditCell: canEditGridCell,
+            applyCellValueChanges,
+        });
+    };
+    const selectCellContextMenuRow = () => {
+        if (!cellContextMenu) {
+            return;
+        }
+        const row = rowModel.visibleRows[cellContextMenu.rowIndex];
+        if (row) {
+            controller.setRowSelected(row.id, true);
+        }
+    };
+    const getCellContextMenuTargetRows = () => {
+        if (!cellContextMenu) {
+            return [];
+        }
+        const row = rowModel.visibleRows[cellContextMenu.rowIndex];
+        if (!row || isRowGroupNode(row)) {
+            return [];
+        }
+        if (selectedRowIds.has(row.id)) {
+            return rowModel.visibleRows.filter((visibleRow) => {
+                return !isRowGroupNode(visibleRow) && selectedRowIds.has(visibleRow.id);
+            });
+        }
+        return [row];
+    };
+    const getCellContextMenuDeleteRowCount = () => getCellContextMenuTargetRows().length;
+    const insertCellContextMenuRow = (position) => {
+        if (!cellContextMenu || !gridEditable || !props.createRow || !props.onRowsChange) {
+            return;
+        }
+        const anchorRow = rowModel.visibleRows[cellContextMenu.rowIndex];
+        if (!anchorRow || isRowGroupNode(anchorRow)) {
+            return;
+        }
+        const rowIndex = anchorRow.index + (position === "below" ? 1 : 0);
+        const visibleRowIndex = cellContextMenu.rowIndex + (position === "below" ? 1 : 0);
+        const row = props.createRow({
+            rows: props.rows,
+            rowIndex,
+            visibleRowIndex,
+            position,
+            anchorRow: anchorRow.original,
+            anchorRowId: anchorRow.id,
+            anchorRowIndex: anchorRow.index,
+        });
+        const rows = [
+            ...props.rows.slice(0, rowIndex),
+            row,
+            ...props.rows.slice(rowIndex),
+        ];
+        props.onRowsChange({
+            rows,
+            changes: [{
+                    type: "insert",
+                    row,
+                    rowIndex,
+                    visibleRowIndex,
+                    position,
+                    anchorRow: anchorRow.original,
+                    anchorRowId: anchorRow.id,
+                    anchorRowIndex: anchorRow.index,
+                }],
+            source: "context-menu",
+        });
+        setSelectionRange(undefined);
+        setFocusedRowIndex(visibleRowIndex);
+    };
+    const deleteCellContextMenuRows = () => {
+        if (!gridEditable || !props.onRowsChange) {
+            return;
+        }
+        const targetRows = getCellContextMenuTargetRows();
+        if (targetRows.length === 0) {
+            return;
+        }
+        const visibleRowIndexByRowId = new Map();
+        rowModel.visibleRows.forEach((row, index) => {
+            if (!isRowGroupNode(row)) {
+                visibleRowIndexByRowId.set(row.id, index);
+            }
+        });
+        const deleteRowIds = new Set(targetRows.map((row) => row.id));
+        const deleteRowIndexes = new Set(targetRows.map((row) => row.index));
+        const rows = props.rows.filter((_, index) => !deleteRowIndexes.has(index));
+        props.onRowsChange({
+            rows,
+            changes: targetRows
+                .slice()
+                .sort((left, right) => left.index - right.index)
+                .map((row) => ({
+                type: "delete",
+                row: row.original,
+                rowId: row.id,
+                rowIndex: row.index,
+                visibleRowIndex: visibleRowIndexByRowId.get(row.id) ?? row.index,
+            })),
+            source: "context-menu",
+        });
+        controller.setSelectedRows(currentSelectedRowIds.filter((rowId) => !deleteRowIds.has(rowId)));
+        setSelectionRange(undefined);
+        setFocusedRowIndex(Math.min(cellContextMenu?.rowIndex ?? 0, Math.max(0, rowModel.visibleRows.length - targetRows.length - 1)));
+    };
+    const autoSizeCellContextMenuColumn = () => {
+        if (!cellContextMenu) {
+            return;
+        }
+        const column = visibleColumns[cellContextMenu.columnIndex];
+        if (column) {
+            controller.setColumnWidth(column.id, getAutoSizeColumnWidth({
+                anchor: cellContextMenu.anchor,
+                column,
+                rows: rowModel.visibleRows,
+            }));
+        }
+    };
     return createElement("div", {
         className: [
             "youp-grid",
             `youp-grid--density-${density}`,
             !gridEditable ? "youp-grid--read-only" : "",
+            showRowNumberColumn ? "youp-grid--row-number-column" : "",
             pinRowSelectionColumn ? "youp-grid--selection-column-pinned" : "",
             props.className,
         ].filter(Boolean).join(" "),
@@ -370,7 +592,7 @@ export function YoupGrid(props) {
         className: "youp-grid__viewport",
         role: "grid",
         "aria-rowcount": displayRows.length,
-        "aria-colcount": rowModel.visibleColumns.length + (showRowSelectionColumn ? 1 : 0),
+        "aria-colcount": rowModel.visibleColumns.length + (showRowNumberColumn ? 1 : 0) + (showRowSelectionColumn ? 1 : 0),
         "aria-busy": loading || undefined,
         "aria-readonly": !gridEditable || undefined,
         onCopy: (event) => {
@@ -400,14 +622,19 @@ export function YoupGrid(props) {
             });
         },
     }, 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()
+        ? createElement("div", { className: "youp-grid__row youp-grid__row--header-group", role: "row" }, showRowNumberColumn
+            ? renderRowNumberHeaderGroupCell()
+            : undefined, showRowSelectionColumn
+            ? renderSelectionHeaderGroupCell(selectionColumnOffset)
             : undefined, headerGroupLayouts.map((layout) => renderHeaderGroupCell(layout)))
-        : undefined, createElement("div", { className: "youp-grid__row youp-grid__row--header", role: "row" }, showRowSelectionColumn
+        : undefined, createElement("div", { className: "youp-grid__row youp-grid__row--header", role: "row" }, showRowNumberColumn
+        ? renderRowNumberHeaderCell()
+        : undefined, showRowSelectionColumn
         ? renderSelectionHeaderCell({
             checked: allVisibleRowsSelected,
             indeterminate: someVisibleRowsSelected,
             disabled: visibleRowIds.length === 0,
+            leftOffset: selectionColumnOffset,
             toggleSelected: setVisibleRowsSelected,
         })
         : undefined, columnLayouts.map((layout) => {
@@ -473,7 +700,9 @@ export function YoupGrid(props) {
                     return renderGroupRow({
                         row,
                         columns: columnLayouts,
+                        showRowNumberColumn,
                         showSelectionColumn: showRowSelectionColumn,
+                        selectionColumnOffset,
                         rowHeight,
                         toggleExpanded: controller.toggleRowGroupExpanded,
                     });
@@ -483,7 +712,9 @@ export function YoupGrid(props) {
                     row,
                     columns: columnLayouts,
                     selected: selectedRowIds.has(row.id),
+                    showRowNumberColumn,
                     showSelectionColumn: showRowSelectionColumn,
+                    selectionColumnOffset,
                     displayIndex,
                     rowIndex,
                     rowHeight,
@@ -553,6 +784,7 @@ export function YoupGrid(props) {
                     closeCellTooltip: (cellKey) => {
                         setActiveTooltipCellKey((current) => current === cellKey ? undefined : current);
                     },
+                    openCellContextMenu: showCellContextMenu ? openCellContextMenu : undefined,
                     onRowClick: props.onRowClick,
                     onRowDoubleClick: props.onRowDoubleClick,
                     onCellKeyDown: (event, cell) => {
@@ -596,8 +828,27 @@ export function YoupGrid(props) {
         enabled: showAggregationFooter,
         aggregation: rowModel.aggregation,
         columns: columnLayouts,
+        showRowNumberColumn,
         showSelectionColumn: showRowSelectionColumn,
-    })), renderPagination({
+        selectionColumnOffset,
+    })), renderCellContextMenu({
+        state: cellContextMenu,
+        editable: gridEditable,
+        hasSelectedRows: selectedRowIds.size > 0,
+        canInsertRows: gridEditable && Boolean(props.createRow && props.onRowsChange),
+        canDeleteRows: gridEditable && Boolean(props.onRowsChange && getCellContextMenuDeleteRowCount() > 0),
+        deleteRowLabel: getCellContextMenuDeleteRowCount() > 1 ? "Delete selected rows" : "Delete row",
+        copy: copyCellContextMenuSelection,
+        paste: pasteCellContextMenuSelection,
+        clearContents: clearCellContextMenuSelection,
+        selectRow: selectCellContextMenuRow,
+        clearRowSelection: () => controller.setSelectedRows([]),
+        insertRowAbove: () => insertCellContextMenuRow("above"),
+        insertRowBelow: () => insertCellContextMenuRow("below"),
+        deleteRows: deleteCellContextMenuRows,
+        autoSizeColumn: autoSizeCellContextMenuColumn,
+        closeMenu: () => setCellContextMenu(undefined),
+    }), renderPagination({
         enabled: props.showPagination ?? true,
         cursorPagination: controller.state.cursorPagination,
         pageCount: rowModel.pageCount,
@@ -630,7 +881,7 @@ function renderAggregationFooter(context) {
         return undefined;
     }
     const aggregationByColumn = groupAggregationByColumn(context.aggregation);
-    return createElement("div", { className: "youp-grid__aggregation", role: "rowgroup" }, createElement("div", { className: "youp-grid__row youp-grid__row--aggregation", role: "row" }, context.showSelectionColumn ? renderSelectionAggregationCell() : undefined, context.columns.map((layout) => {
+    return createElement("div", { className: "youp-grid__aggregation", role: "rowgroup" }, createElement("div", { className: "youp-grid__row youp-grid__row--aggregation", role: "row" }, context.showRowNumberColumn ? renderRowNumberAggregationCell() : undefined, context.showSelectionColumn ? renderSelectionAggregationCell(context.selectionColumnOffset) : undefined, context.columns.map((layout) => {
         const results = aggregationByColumn.get(layout.column.id) ?? [];
         return createElement("div", {
             key: layout.column.id,
@@ -640,11 +891,19 @@ function renderAggregationFooter(context) {
         }, results.map(formatAggregationResult).join(" · "));
     })));
 }
-function renderSelectionAggregationCell() {
+function renderRowNumberAggregationCell() {
+    return createElement("div", {
+        className: "youp-grid__cell youp-grid__row-number-cell youp-grid__row-number-cell--aggregation",
+        role: "gridcell",
+        style: getRowNumberCellStyle(),
+        "aria-hidden": true,
+    });
+}
+function renderSelectionAggregationCell(leftOffset) {
     return createElement("div", {
         className: "youp-grid__selection-cell youp-grid__selection-cell--aggregation",
         role: "gridcell",
-        style: getSelectionCellStyle(),
+        style: getSelectionCellStyle(leftOffset),
         "aria-hidden": true,
     });
 }
@@ -679,13 +938,31 @@ function renderHeaderGroupCell(layout) {
         style: getHeaderGroupStyle(layout),
     }, layout.headerGroup ?? "");
 }
-function renderSelectionHeaderGroupCell() {
+function renderRowNumberHeaderGroupCell() {
+    return createElement("div", {
+        key: "__row-number-group",
+        className: "youp-grid__cell youp-grid__cell--header-group youp-grid__row-number-cell youp-grid__row-number-cell--header-group",
+        role: "columnheader",
+        "aria-hidden": true,
+        style: getRowNumberCellStyle(),
+    });
+}
+function renderRowNumberHeaderCell() {
+    return createElement("div", {
+        key: "__row-number",
+        className: "youp-grid__cell youp-grid__cell--header youp-grid__row-number-cell youp-grid__row-number-cell--header",
+        role: "columnheader",
+        "aria-label": "Row number",
+        style: getRowNumberCellStyle(),
+    }, "#");
+}
+function renderSelectionHeaderGroupCell(leftOffset) {
     return createElement("div", {
         key: "__selection-group",
         className: "youp-grid__cell youp-grid__cell--header-group youp-grid__selection-cell youp-grid__selection-cell--header-group",
         role: "columnheader",
         "aria-hidden": true,
-        style: getSelectionCellStyle(),
+        style: getSelectionCellStyle(leftOffset),
     });
 }
 function renderSelectionHeaderCell(context) {
@@ -693,7 +970,7 @@ function renderSelectionHeaderCell(context) {
         key: "__selection",
         className: "youp-grid__cell youp-grid__cell--header youp-grid__selection-cell youp-grid__selection-cell--header",
         role: "columnheader",
-        style: getSelectionCellStyle(),
+        style: getSelectionCellStyle(context.leftOffset),
     }, createElement(SelectionHeaderCheckbox, context));
 }
 function SelectionHeaderCheckbox(context) {
@@ -840,6 +1117,63 @@ function renderColumnMenuButton(context) {
         },
     }, context.label);
 }
+function renderCellContextMenu(context) {
+    if (!context.state) {
+        return undefined;
+    }
+    const runAction = (action) => {
+        action();
+        context.closeMenu();
+    };
+    return createElement("div", {
+        className: "youp-grid__cell-context-menu",
+        role: "menu",
+        style: {
+            left: context.state.clientX,
+            top: context.state.clientY,
+        },
+        onClick: (event) => {
+            event.stopPropagation();
+        },
+        onContextMenu: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        },
+    }, renderColumnMenuButton({
+        label: "Copy",
+        onClick: () => runAction(context.copy),
+    }), renderColumnMenuButton({
+        label: "Paste",
+        disabled: !context.editable,
+        onClick: () => runAction(context.paste),
+    }), renderColumnMenuButton({
+        label: "Clear contents",
+        disabled: !context.editable,
+        onClick: () => runAction(context.clearContents),
+    }), createElement("div", { className: "youp-grid__column-menu-separator", role: "separator" }), renderColumnMenuButton({
+        label: "Select row",
+        onClick: () => runAction(context.selectRow),
+    }), renderColumnMenuButton({
+        label: "Clear row selection",
+        disabled: !context.hasSelectedRows,
+        onClick: () => runAction(context.clearRowSelection),
+    }), createElement("div", { className: "youp-grid__column-menu-separator", role: "separator" }), renderColumnMenuButton({
+        label: "Insert row above",
+        disabled: !context.canInsertRows,
+        onClick: () => runAction(context.insertRowAbove),
+    }), renderColumnMenuButton({
+        label: "Insert row below",
+        disabled: !context.canInsertRows,
+        onClick: () => runAction(context.insertRowBelow),
+    }), renderColumnMenuButton({
+        label: context.deleteRowLabel,
+        disabled: !context.canDeleteRows,
+        onClick: () => runAction(context.deleteRows),
+    }), createElement("div", { className: "youp-grid__column-menu-separator", role: "separator" }), renderColumnMenuButton({
+        label: "Auto-size column",
+        onClick: () => runAction(context.autoSizeColumn),
+    }));
+}
 function renderGroupRow(context) {
     const width = getColumnsWidth(context.columns);
     return createElement("div", {
@@ -848,7 +1182,7 @@ function renderGroupRow(context) {
         role: "row",
         "aria-rowindex": context.row.index + 1,
         style: { height: context.rowHeight },
-    }, context.showSelectionColumn ? renderSelectionGroupCell() : undefined, createElement("div", {
+    }, context.showRowNumberColumn ? renderRowNumberGroupCell() : undefined, context.showSelectionColumn ? renderSelectionGroupCell(context.selectionColumnOffset) : undefined, createElement("div", {
         className: "youp-grid__cell youp-grid__cell--group",
         role: "gridcell",
         "aria-colspan": context.columns.length,
@@ -864,11 +1198,19 @@ function renderGroupRow(context) {
         onClick: () => context.toggleExpanded(context.row.groupId),
     }, createElement("span", { className: "youp-grid__group-caret", "aria-hidden": true }, context.row.expanded ? "v" : ">"), createElement("span", { className: "youp-grid__group-label" }, context.row.label), createElement("span", { className: "youp-grid__group-count" }, `${context.row.rowCount} rows`))));
 }
-function renderSelectionGroupCell() {
+function renderRowNumberGroupCell() {
+    return createElement("div", {
+        className: "youp-grid__cell youp-grid__row-number-cell youp-grid__row-number-cell--group",
+        role: "gridcell",
+        style: getRowNumberCellStyle(),
+        "aria-hidden": true,
+    });
+}
+function renderSelectionGroupCell(leftOffset) {
     return createElement("div", {
         className: "youp-grid__selection-cell youp-grid__selection-cell--group",
         role: "gridcell",
-        style: getSelectionCellStyle(),
+        style: getSelectionCellStyle(leftOffset),
         "aria-hidden": true,
     });
 }
@@ -896,11 +1238,18 @@ function renderRow(context) {
                 context.onRowDoubleClick?.(createRowEvent(context, event));
             }
         },
-    }, context.showSelectionColumn
+    }, context.showRowNumberColumn
+        ? renderRowNumberCell({
+            rowIndex: context.rowIndex,
+            displayIndex: context.displayIndex,
+        })
+        : undefined, context.showSelectionColumn
         ? renderSelectionCell({
             rowIndex: context.rowIndex,
             selected: context.selected,
             setSelected: context.setRowSelected,
+            leftOffset: context.selectionColumnOffset,
+            ariaColIndex: context.showRowNumberColumn ? 2 : 1,
         })
         : undefined, context.columns.map((layout, columnIndex) => {
         const focused = context.focusedCell.rowIndex === context.rowIndex && context.focusedCell.columnIndex === columnIndex;
@@ -926,7 +1275,7 @@ function renderRow(context) {
             layout,
             rowIndex: context.rowIndex,
             columnIndex,
-            ariaColumnOffset: context.showSelectionColumn ? 1 : 0,
+            ariaColumnOffset: (context.showRowNumberColumn ? 1 : 0) + (context.showSelectionColumn ? 1 : 0),
             focused,
             selected,
             fillTargeted,
@@ -947,6 +1296,7 @@ function renderRow(context) {
             cancelEditing: context.cancelEditing,
             commitEditing: context.commitEditing,
             onKeyDown: context.onCellKeyDown,
+            openContextMenu: context.openCellContextMenu,
             cellTooltipMode: context.cellTooltipMode,
             activeTooltipCellKey: context.activeTooltipCellKey,
             openCellTooltip: context.openCellTooltip,
@@ -955,12 +1305,21 @@ function renderRow(context) {
         });
     }));
 }
+function renderRowNumberCell(context) {
+    return createElement("div", {
+        className: "youp-grid__cell youp-grid__row-number-cell",
+        role: "gridcell",
+        "aria-colindex": 1,
+        "aria-label": `Row ${context.rowIndex + 1}`,
+        style: getRowNumberCellStyle(),
+    }, context.displayIndex + 1);
+}
 function renderSelectionCell(context) {
     return createElement("div", {
         className: "youp-grid__cell youp-grid__selection-cell",
         role: "gridcell",
-        "aria-colindex": 1,
-        style: getSelectionCellStyle(),
+        "aria-colindex": context.ariaColIndex,
+        style: getSelectionCellStyle(context.leftOffset),
     }, createElement("input", {
         className: "youp-grid__selection-checkbox",
         type: "checkbox",
@@ -1081,6 +1440,9 @@ function renderCell(context) {
             }
         },
         onKeyDown: (event) => context.onKeyDown(event, cellState),
+        onContextMenu: context.openContextMenu
+            ? (event) => context.openContextMenu?.(event, cellState)
+            : undefined,
         onMouseEnter: () => {
             if (hasRichTooltip) {
                 context.openCellTooltip(cellKey);
@@ -1420,9 +1782,16 @@ function getHeaderGroupStyle(layout) {
     }
     return style;
 }
-function getSelectionCellStyle() {
+function getRowNumberCellStyle() {
     return {
         left: 0,
+        width: ROW_NUMBER_COLUMN_WIDTH,
+        flex: `0 0 ${ROW_NUMBER_COLUMN_WIDTH}px`,
+    };
+}
+function getSelectionCellStyle(leftOffset = 0) {
+    return {
+        left: leftOffset,
         width: SELECTION_COLUMN_WIDTH,
         flex: `0 0 ${SELECTION_COLUMN_WIDTH}px`,
     };
@@ -1860,22 +2229,38 @@ function commitEditingCell(context) {
     };
 }
 function handleGridCopy(context) {
+    context.event.preventDefault();
+    context.event.clipboardData.setData("text/plain", getGridClipboardText(context));
+}
+function getGridClipboardText(context) {
     const range = context.selectionRange ?? {
         anchor: context.focusedCell,
         focus: context.focusedCell,
     };
-    const text = serializeGridRange({
+    return serializeGridRange({
         rows: context.rows,
         columns: context.columns,
         range,
     });
-    context.event.preventDefault();
-    context.event.clipboardData.setData("text/plain", text);
 }
 function handleGridPaste(context) {
-    const values = parseClipboardText(context.event.clipboardData.getData("text/plain"));
+    const applied = applyGridClipboardText({
+        text: context.event.clipboardData.getData("text/plain"),
+        focusedCell: context.focusedCell,
+        selectionRange: context.selectionRange,
+        rows: context.rows,
+        columns: context.columns,
+        applyCellValueChanges: context.applyCellValueChanges,
+        canEditCell: context.canEditCell,
+    });
+    if (applied) {
+        context.event.preventDefault();
+    }
+}
+function applyGridClipboardText(context) {
+    const values = parseClipboardText(context.text);
     if (values.length === 0) {
-        return;
+        return false;
     }
     const normalizedRange = context.selectionRange ? normalizeCellRange(context.selectionRange) : undefined;
     const startCell = normalizedRange
@@ -1887,7 +2272,6 @@ function handleGridPaste(context) {
     const fillRange = normalizedRange && values.length === 1 && values[0]?.length === 1
         ? normalizedRange
         : undefined;
-    context.event.preventDefault();
     const changes = [];
     for (const cell of getClipboardPasteCells({
         values,
@@ -1917,6 +2301,19 @@ function handleGridPaste(context) {
         });
     }
     context.applyCellValueChanges(changes, "paste");
+    return true;
+}
+function writeClipboardText(text) {
+    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+        return Promise.resolve();
+    }
+    return navigator.clipboard.writeText(text);
+}
+function readClipboardText() {
+    if (typeof navigator === "undefined" || !navigator.clipboard?.readText) {
+        return Promise.resolve("");
+    }
+    return navigator.clipboard.readText();
 }
 function deleteGridCellValues(context) {
     const range = normalizeCellRange(context.selectionRange ?? {

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { YoupGrid } from "./YoupGrid.ts";
 export { useYoupGrid } from "./useYoupGrid.ts";
-export type { YoupGridCanEditCellContext, YoupGridCellEditCommit, YoupGridCellEditCommitReason, YoupGridCellContext, YoupGridCellMeta, YoupGridCellMetaStatus, YoupGridCellTooltipMode, YoupGridCellTooltipOptions, YoupGridCellsValueChange, YoupGridCellsValueChangeSource, YoupGridController, YoupGridDensity, YoupGridHeaderContext, YoupGridOptions, YoupGridProps, YoupGridRowEvent, YoupGridRowsEndReachedEvent, YoupGridStateChange, } from "./types.ts";
+export type { YoupGridCanEditCellContext, YoupGridCellEditCommit, YoupGridCellEditCommitReason, YoupGridCellContext, YoupGridCellMeta, YoupGridCellMetaStatus, YoupGridCellTooltipMode, YoupGridCellTooltipOptions, YoupGridCellsValueChange, YoupGridCellsValueChangeSource, YoupGridController, YoupGridCreateRowContext, YoupGridDensity, YoupGridHeaderContext, YoupGridOptions, YoupGridProps, YoupGridRowChange, YoupGridRowDeleteChange, YoupGridRowEvent, YoupGridRowInsertChange, YoupGridRowInsertPosition, YoupGridRowsChange, YoupGridRowsEndReachedEvent, YoupGridRowsChangeSource, YoupGridStateChange, } from "./types.ts";

package/dist/styles.css

@@ -164,8 +164,8 @@
   --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),
-.youp-grid__header .youp-grid__cell--header-group:not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right) {
+.youp-grid__header .youp-grid__cell--header:not(.youp-grid__row-number-cell):not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right),
+.youp-grid__header .youp-grid__cell--header-group:not(.youp-grid__row-number-cell):not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right) {
   transform: translateX(calc(-1 * var(--youp-grid-header-scroll-left)));
 }
 
@@ -215,6 +215,63 @@
   background: var(--youp-grid-row-selected);
 }
 
+.youp-grid__row-number-cell {
+  display: grid;
+  place-items: center;
+  min-width: 44px;
+  padding: 0;
+  color: var(--youp-grid-muted);
+  font-weight: 800;
+  text-align: center;
+  user-select: none;
+  background: #fff;
+  position: sticky;
+  left: 0;
+  z-index: 3;
+}
+
+.youp-grid__cell.youp-grid__row-number-cell {
+  min-width: 44px;
+}
+
+.youp-grid__row-number-cell--header,
+.youp-grid__row-number-cell--header-group {
+  z-index: 4;
+  background: var(--youp-grid-header);
+}
+
+.youp-grid__row-number-cell--header {
+  align-content: center;
+  overflow: hidden;
+}
+
+.youp-grid__row-number-cell--header-group {
+  display: grid;
+  padding: 0;
+}
+
+.youp-grid__row--selected .youp-grid__row-number-cell {
+  background: var(--youp-grid-row-selected);
+}
+
+.youp-grid__row:hover .youp-grid__row-number-cell {
+  background: var(--youp-grid-row-hover);
+}
+
+.youp-grid__row--selected:hover .youp-grid__row-number-cell {
+  background: var(--youp-grid-row-selected);
+}
+
+.youp-grid__row--header:hover .youp-grid__row-number-cell,
+.youp-grid__row--header-group:hover .youp-grid__row-number-cell {
+  background: var(--youp-grid-header);
+}
+
+.youp-grid__row--aggregation:hover .youp-grid__row-number-cell,
+.youp-grid__row--group:hover .youp-grid__row-number-cell {
+  background: #f8fafc;
+}
+
 .youp-grid__selection-cell {
   display: grid;
   place-items: center;
@@ -656,6 +713,7 @@
 
 .youp-grid__cell--aggregation.youp-grid__cell--pinned-left,
 .youp-grid__cell--aggregation.youp-grid__cell--pinned-right,
+.youp-grid__row-number-cell--aggregation,
 .youp-grid__selection-cell--aggregation {
   background: #f8fafc;
 }
@@ -668,6 +726,7 @@
   background: #f8fafc;
 }
 
+.youp-grid__row-number-cell--group,
 .youp-grid__selection-cell--group {
   background: #f8fafc;
 }
@@ -769,6 +828,18 @@
   box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
 }
 
+.youp-grid__cell-context-menu {
+  position: fixed;
+  z-index: 40;
+  display: grid;
+  min-width: 180px;
+  padding: 6px;
+  border: 1px solid var(--youp-grid-border);
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
+}
+
 .youp-grid__column-menu-item {
   min-height: 28px;
   padding: 5px 8px;

package/dist/types.d.ts

@@ -24,6 +24,40 @@ export type YoupGridCellsValueChange<TRow> = {
     changes: YoupGridCellValueChange<TRow>[];
     source: YoupGridCellsValueChangeSource;
 };
+export type YoupGridRowsChangeSource = "context-menu";
+export type YoupGridRowInsertPosition = "above" | "below";
+export type YoupGridCreateRowContext<TRow> = {
+    rows: readonly TRow[];
+    rowIndex: number;
+    visibleRowIndex: number;
+    position: YoupGridRowInsertPosition;
+    anchorRow: TRow;
+    anchorRowId: GridRowId;
+    anchorRowIndex: number;
+};
+export type YoupGridRowInsertChange<TRow> = {
+    type: "insert";
+    row: TRow;
+    rowIndex: number;
+    visibleRowIndex: number;
+    position: YoupGridRowInsertPosition;
+    anchorRow: TRow;
+    anchorRowId: GridRowId;
+    anchorRowIndex: number;
+};
+export type YoupGridRowDeleteChange<TRow> = {
+    type: "delete";
+    row: TRow;
+    rowId: GridRowId;
+    rowIndex: number;
+    visibleRowIndex: number;
+};
+export type YoupGridRowChange<TRow> = YoupGridRowInsertChange<TRow> | YoupGridRowDeleteChange<TRow>;
+export type YoupGridRowsChange<TRow> = {
+    rows: TRow[];
+    changes: YoupGridRowChange<TRow>[];
+    source: YoupGridRowsChangeSource;
+};
 export type YoupGridCellMetaStatus = "loading" | "error" | "warning" | "success";
 export type YoupGridCellMeta = {
     status: YoupGridCellMetaStatus;
@@ -127,8 +161,10 @@ export type YoupGridProps<TRow> = YoupGridOptions<TRow> & {
     showFilters?: boolean;
     showAggregationFooter?: boolean;
     showPagination?: boolean;
+    showRowNumberColumn?: boolean;
     showRowSelectionColumn?: boolean;
     pinRowSelectionColumn?: boolean;
+    showCellContextMenu?: boolean;
     csvFileName?: string;
     density?: YoupGridDensity;
     defaultDensity?: YoupGridDensity;
@@ -145,6 +181,8 @@ export type YoupGridProps<TRow> = YoupGridOptions<TRow> & {
     onCellValueChange?: (change: YoupGridCellValueChange<TRow>) => void;
     onCellEditCommit?: (commit: YoupGridCellEditCommit<TRow>) => void;
     onCellsValueChange?: (change: YoupGridCellsValueChange<TRow>) => void;
+    createRow?: (context: YoupGridCreateRowContext<TRow>) => TRow;
+    onRowsChange?: (change: YoupGridRowsChange<TRow>) => void;
     onRowClick?: (event: YoupGridRowEvent<TRow>) => void;
     onRowDoubleClick?: (event: YoupGridRowEvent<TRow>) => void;
     onRowsEndReached?: (event: YoupGridRowsEndReachedEvent<TRow>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youp-grid/react",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "React adapter for Youp Grid.",
   "license": "MIT",
   "author": "SeungyoupBaek",
@@ -42,7 +42,7 @@
     "build": "tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css"
   },
   "dependencies": {
-    "@youp-grid/core": "0.2.3"
+    "@youp-grid/core": "0.2.4"
   },
   "peerDependencies": {
     "react": ">=18.2.0"