@youp-grid/react 0.2.2 → 0.2.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Seungyoup Baek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -10,3 +10,18 @@ npm install @youp-grid/core @youp-grid/react
 import { YoupGrid } from "@youp-grid/react";
 import "@youp-grid/react/styles.css";
 ```
+
+## What It Provides
+
+- virtualized React grid UI
+- keyboard navigation and inline editing
+- built-in text, number, checkbox, and select editors
+- clipboard paste, fill handle, delete, undo, and redo write paths
+- column menus, resizing, pinning, visibility, density, and row selection UI
+- loading, empty, error, validation, pending, warning, and read-only states
+
+The adapter emits changes through callbacks. Applications keep ownership of row data.
+
+## License
+
+MIT. See the repository license.

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,8 +35,13 @@ 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;
     const virtualRange = useMemo(() => {
@@ -77,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]));
@@ -133,7 +142,7 @@ export function YoupGrid(props) {
     };
     const getGridCellMeta = (row, rowIndex, column) => {
         return (props.getCellMeta?.(getCellEditContext(row, rowIndex, column)) ??
-            props.cellMeta?.[`${row.id}:${column.id}`]);
+            props.cellMeta?.[getCellKey(row.id, column.id)]);
     };
     const createGridCellValueChange = (cell, value) => {
         if (!cell.editable) {
@@ -167,6 +176,44 @@ 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);
+            return;
+        }
+        const cellKey = props.cellTooltip?.autoOpenCellKey;
+        if (!cellKey) {
+            return;
+        }
+        setActiveTooltipCellKey(cellKey);
+        const duration = props.cellTooltip?.autoOpenDurationMs ?? 2000;
+        if (duration <= 0) {
+            return;
+        }
+        const timeout = window.setTimeout(() => {
+            setActiveTooltipCellKey((current) => current === cellKey ? undefined : current);
+        }, duration);
+        return () => window.clearTimeout(timeout);
+    }, [cellTooltipMode, props.cellTooltip?.autoOpenCellKey, props.cellTooltip?.autoOpenDurationMs]);
     useEffect(() => {
         if (!props.infiniteScroll || !props.onRowsEndReached || !infiniteScrollTrigger.shouldLoadMore) {
             return;
@@ -312,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(" "),
@@ -349,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) => {
@@ -379,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) => {
@@ -452,7 +700,9 @@ export function YoupGrid(props) {
                     return renderGroupRow({
                         row,
                         columns: columnLayouts,
+                        showRowNumberColumn,
                         showSelectionColumn: showRowSelectionColumn,
+                        selectionColumnOffset,
                         rowHeight,
                         toggleExpanded: controller.toggleRowGroupExpanded,
                     });
@@ -462,7 +712,9 @@ export function YoupGrid(props) {
                     row,
                     columns: columnLayouts,
                     selected: selectedRowIds.has(row.id),
+                    showRowNumberColumn,
                     showSelectionColumn: showRowSelectionColumn,
+                    selectionColumnOffset,
                     displayIndex,
                     rowIndex,
                     rowHeight,
@@ -475,10 +727,12 @@ export function YoupGrid(props) {
                     editingCell,
                     editable: gridEditable,
                     disabledReason: props.disabledReason,
+                    treeData: props.treeData ?? false,
                     canEditCell: canEditGridCell,
                     getCellMeta: getGridCellMeta,
                     setRowSelected: (selected) => controller.setRowSelected(row.id, selected),
                     setFocusedCell,
+                    toggleTreeRowExpanded: controller.toggleTreeRowExpanded,
                     startFillHandle: (event) => {
                         if (!gridEditable) {
                             return;
@@ -524,6 +778,13 @@ export function YoupGrid(props) {
                     },
                     cancelEditing: cancelEditingCell,
                     commitEditing: commitEditingValue,
+                    cellTooltipMode,
+                    activeTooltipCellKey,
+                    openCellTooltip: setActiveTooltipCellKey,
+                    closeCellTooltip: (cellKey) => {
+                        setActiveTooltipCellKey((current) => current === cellKey ? undefined : current);
+                    },
+                    openCellContextMenu: showCellContextMenu ? openCellContextMenu : undefined,
                     onRowClick: props.onRowClick,
                     onRowDoubleClick: props.onRowDoubleClick,
                     onCellKeyDown: (event, cell) => {
@@ -567,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,
@@ -601,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,
@@ -611,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,
     });
 }
@@ -650,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) {
@@ -664,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) {
@@ -811,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", {
@@ -819,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,
@@ -835,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,
     });
 }
@@ -867,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;
@@ -897,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,
@@ -906,8 +1284,10 @@ function renderRow(context) {
             editingCell: context.editingCell,
             editable,
             disabledReason: context.disabledReason,
+            treeData: context.treeData,
             meta,
             setFocusedCell: context.setFocusedCell,
+            toggleTreeRowExpanded: context.toggleTreeRowExpanded,
             startFillHandle: context.startFillHandle,
             autoSizeColumn: context.autoSizeColumn,
             applyCellValue: context.applyCellValue,
@@ -916,16 +1296,30 @@ function renderRow(context) {
             cancelEditing: context.cancelEditing,
             commitEditing: context.commitEditing,
             onKeyDown: context.onCellKeyDown,
+            openContextMenu: context.openCellContextMenu,
+            cellTooltipMode: context.cellTooltipMode,
+            activeTooltipCellKey: context.activeTooltipCellKey,
+            openCellTooltip: context.openCellTooltip,
+            closeCellTooltip: context.closeCellTooltip,
             renderCell: context.renderCell,
         });
     }));
 }
+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",
@@ -960,6 +1354,12 @@ function renderCell(context) {
     const value = column.accessor(context.row.original);
     const editable = context.editable;
     const cellAlign = getColumnAlign(column);
+    const cellKey = getCellKey(context.row.id, column.id);
+    const showTreePrefix = context.treeData && context.columnIndex === 0;
+    const hasRichTooltip = context.cellTooltipMode === "rich" && hasTooltipMessage(context.meta);
+    const tooltipId = hasRichTooltip && context.activeTooltipCellKey === cellKey
+        ? getCellTooltipId(cellKey)
+        : undefined;
     const cellContext = {
         row: context.row,
         column,
@@ -968,6 +1368,9 @@ function renderCell(context) {
         focused: context.focused,
         editable,
         meta: context.meta,
+        treeDepth: context.row.depth,
+        hasChildren: context.row.hasChildren,
+        expanded: context.row.expanded,
     };
     const cellState = {
         row: context.row,
@@ -984,8 +1387,16 @@ function renderCell(context) {
             cell: cellState,
             row: context.row.original,
             disabledReason: context.disabledReason,
+            cellTooltipMode: context.cellTooltipMode,
             applyCellValue: context.applyCellValue,
         });
+    const renderedContent = showTreePrefix && !context.editing
+        ? renderTreeCellContent({
+            row: context.row,
+            content: cellContent,
+            toggleExpanded: context.toggleTreeRowExpanded,
+        })
+        : cellContent;
     return createElement("div", {
         key: column.id,
         className: getCellClassName([
@@ -996,11 +1407,14 @@ function renderCell(context) {
             context.fillTargeted ? "youp-grid__cell--fill-target" : "",
             context.editing ? "youp-grid__cell--editing" : "",
             !editable ? "youp-grid__cell--disabled" : "",
+            showTreePrefix ? "youp-grid__cell--tree" : "",
+            tooltipId ? "youp-grid__cell--tooltip-open" : "",
             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),
+        title: getCellTitle(context.meta, context.disabledReason, editable, context.cellTooltipMode),
+        "aria-describedby": tooltipId,
         "aria-colindex": context.columnIndex + context.ariaColumnOffset + 1,
         "aria-readonly": !editable || undefined,
         "data-youp-row-index": context.rowIndex,
@@ -1026,6 +1440,34 @@ function renderCell(context) {
             }
         },
         onKeyDown: (event) => context.onKeyDown(event, cellState),
+        onContextMenu: context.openContextMenu
+            ? (event) => context.openContextMenu?.(event, cellState)
+            : undefined,
+        onMouseEnter: () => {
+            if (hasRichTooltip) {
+                context.openCellTooltip(cellKey);
+            }
+        },
+        onMouseLeave: () => {
+            if (hasRichTooltip) {
+                context.closeCellTooltip(cellKey);
+            }
+        },
+        onFocus: () => {
+            if (hasRichTooltip) {
+                context.openCellTooltip(cellKey);
+            }
+        },
+        onBlur: (event) => {
+            if (!hasRichTooltip) {
+                return;
+            }
+            const nextTarget = event.relatedTarget;
+            if (nextTarget && event.currentTarget.contains(nextTarget)) {
+                return;
+            }
+            context.closeCellTooltip(cellKey);
+        },
     }, context.editing
         ? renderCellEditor({
             cell: cellState,
@@ -1034,7 +1476,7 @@ function renderCell(context) {
             commitEditing: context.commitEditing,
             onKeyDown: context.onKeyDown,
         })
-        : cellContent, renderCellStatus(context.meta), !context.editing && context.showFillHandle
+        : renderedContent, renderCellStatus(context.meta, context.cellTooltipMode), renderCellTooltip(context.meta, tooltipId), !context.editing && context.showFillHandle
         ? createElement("span", {
             className: "youp-grid__fill-handle",
             role: "button",
@@ -1062,7 +1504,7 @@ function renderDefaultCellContent(context) {
             type: "checkbox",
             checked: Boolean(context.cell.value),
             disabled: !context.cell.editable,
-            title: getCellTitle(context.cell.meta, context.disabledReason, context.cell.editable),
+            title: getCellTitle(context.cell.meta, context.disabledReason, context.cell.editable, context.cellTooltipMode),
             "aria-label": context.cell.column.headerName,
             onChange: (event) => {
                 context.applyCellValue(context.cell, event.currentTarget.checked);
@@ -1078,7 +1520,37 @@ function renderDefaultCellContent(context) {
     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);
+    return createElement("span", {
+        className: [
+            "youp-grid__cell-text",
+            hasPlaceholder ? "youp-grid__cell-placeholder" : "",
+        ].filter(Boolean).join(" "),
+    }, hasPlaceholder ? placeholder : text);
+}
+function renderTreeCellContent(context) {
+    const depth = Math.max(0, context.row.depth ?? 0);
+    const toggle = context.row.hasChildren
+        ? createElement("button", {
+            className: "youp-grid__tree-toggle",
+            type: "button",
+            "aria-label": context.row.expanded ? "Collapse row" : "Expand row",
+            "aria-expanded": context.row.expanded,
+            onClick: (event) => {
+                event.stopPropagation();
+                context.toggleExpanded(context.row.id);
+            },
+            onDoubleClick: (event) => {
+                event.stopPropagation();
+            },
+            onKeyDown: (event) => {
+                event.stopPropagation();
+            },
+        }, createElement("span", { className: "youp-grid__tree-caret", "aria-hidden": true }, context.row.expanded ? "v" : ">"))
+        : createElement("span", { className: "youp-grid__tree-toggle-spacer", "aria-hidden": true });
+    return createElement("span", {
+        className: "youp-grid__cell-tree-content",
+        style: { paddingLeft: depth * 18 },
+    }, toggle, createElement("span", { className: "youp-grid__cell-tree-value" }, context.content));
 }
 function renderCellEditor(context) {
     if (context.cell.column.editor === "select") {
@@ -1121,16 +1593,26 @@ function renderCellEditor(context) {
         },
     });
 }
-function renderCellStatus(meta) {
+function renderCellStatus(meta, tooltipMode) {
     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,
+        title: tooltipMode === "native" && typeof meta.message === "string" ? meta.message : undefined,
         "aria-hidden": true,
     });
 }
+function renderCellTooltip(meta, tooltipId) {
+    if (!tooltipId || !meta?.message) {
+        return undefined;
+    }
+    return createElement("span", {
+        id: tooltipId,
+        className: "youp-grid__cell-tooltip",
+        role: "tooltip",
+    }, meta.message);
+}
 function renderColumnToolbar(context) {
     if (!context.showColumnChooser && !context.showCsvExport && !context.showDensityControl) {
         return undefined;
@@ -1300,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`,
     };
@@ -1740,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
@@ -1767,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,
@@ -1797,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 ?? {
@@ -2020,8 +2537,8 @@ function normalizeEditorOptions(options) {
 function getEditorOptionValue(option) {
     return typeof option === "object" ? option.value : option;
 }
-function getCellTitle(meta, disabledReason, editable) {
-    if (typeof meta?.message === "string") {
+function getCellTitle(meta, disabledReason, editable, tooltipMode) {
+    if (tooltipMode === "native" && typeof meta?.message === "string") {
         return meta.message;
     }
     if (!editable && typeof disabledReason === "string") {
@@ -2029,6 +2546,15 @@ function getCellTitle(meta, disabledReason, editable) {
     }
     return undefined;
 }
+function hasTooltipMessage(meta) {
+    return Boolean(meta?.message);
+}
+function getCellKey(rowId, columnId) {
+    return `${String(rowId)}:${columnId}`;
+}
+function getCellTooltipId(cellKey) {
+    return `youp-grid-cell-tooltip-${cellKey.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+}
 function isTextEditingKey(event) {
     if (event.metaKey || event.ctrlKey || event.altKey) {
         return false;

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, 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;
@@ -355,6 +412,89 @@
   color: #94a3b8;
 }
 
+.youp-grid__cell-text {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.youp-grid__cell--tree {
+  display: flex;
+  align-items: center;
+}
+
+.youp-grid__cell-tree-content {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.youp-grid__cell-tree-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.youp-grid__tree-toggle,
+.youp-grid__tree-toggle-spacer {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+}
+
+.youp-grid__tree-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--youp-grid-muted);
+  font: inherit;
+  cursor: pointer;
+  background: transparent;
+}
+
+.youp-grid__tree-toggle:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 1px;
+}
+
+.youp-grid__tree-caret {
+  width: 12px;
+  line-height: 1;
+  text-align: center;
+}
+
+.youp-grid__cell--tooltip-open {
+  z-index: 8;
+  overflow: visible;
+}
+
+.youp-grid__cell-tooltip {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: var(--youp-grid-cell-inline-padding);
+  z-index: 20;
+  width: max-content;
+  min-width: 120px;
+  max-width: 260px;
+  padding: 6px 8px;
+  border: 1px solid #0f172a;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: left;
+  white-space: normal;
+  pointer-events: none;
+  background: #0f172a;
+  box-shadow: 0 8px 24px rgb(15 23 42 / 18%);
+}
+
 .youp-grid__cell-checkbox {
   width: 16px;
   height: 16px;
@@ -573,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;
 }
@@ -585,6 +726,7 @@
   background: #f8fafc;
 }
 
+.youp-grid__row-number-cell--group,
 .youp-grid__selection-cell--group {
   background: #f8fafc;
 }
@@ -686,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,11 +24,51 @@ 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;
     message?: ReactNode;
 };
+export type YoupGridCellTooltipMode = "native" | "rich" | "none";
+export type YoupGridCellTooltipOptions = {
+    mode?: YoupGridCellTooltipMode;
+    autoOpenCellKey?: string | null;
+    autoOpenDurationMs?: number;
+};
 export type YoupGridCanEditCellContext<TRow> = {
     row: TRow;
     rowNode: RowNode<TRow>;
@@ -61,6 +101,8 @@ export type YoupGridOptions<TRow> = {
     defaultState?: GridState;
     onStateChange?: (change: YoupGridStateChange<TRow>) => void;
     getRowId?: (row: TRow, index: number) => GridRowId;
+    treeData?: boolean;
+    getParentRowId?: (row: TRow, index: number) => GridRowId | null | undefined;
     rowModelType?: GridRowModelType;
     serverRowCount?: number;
     serverFilteredRowCount?: number;
@@ -101,6 +143,8 @@ export type YoupGridController<TRow> = {
     setRowSelected: (rowId: GridRowId, selected: boolean) => void;
     setSelectedRows: (rowIds: readonly GridRowId[]) => void;
     toggleRowSelected: (rowId: GridRowId) => void;
+    setTreeExpandedRows: (rowIds: readonly GridRowId[]) => void;
+    toggleTreeRowExpanded: (rowId: GridRowId) => void;
 };
 export type YoupGridProps<TRow> = YoupGridOptions<TRow> & {
     className?: string;
@@ -117,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;
@@ -129,11 +175,14 @@ export type YoupGridProps<TRow> = YoupGridOptions<TRow> & {
     errorContent?: ReactNode;
     cellMeta?: Record<string, YoupGridCellMeta | undefined>;
     getCellMeta?: (context: YoupGridCanEditCellContext<TRow>) => YoupGridCellMeta | undefined;
+    cellTooltip?: YoupGridCellTooltipOptions;
     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;
+    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;
@@ -147,6 +196,9 @@ export type YoupGridCellContext<TRow> = {
     focused: boolean;
     editable: boolean;
     meta?: YoupGridCellMeta;
+    treeDepth?: number;
+    hasChildren?: boolean;
+    expanded?: boolean;
 };
 export type YoupGridHeaderContext<TRow> = {
     column: ResolvedColumnDef<TRow>;

package/dist/useYoupGrid.js

@@ -1,4 +1,4 @@
-import { acknowledgeRemoteCache as acknowledgeCoreRemoteCache, buildRowModel, cancelRemoteRequest as cancelCoreRemoteRequest, clearFilter as clearCoreFilter, clearSort as clearCoreSort, createGridState, failRemoteRequest as failCoreRemoteRequest, finishRemoteRequest as finishCoreRemoteRequest, invalidateRemoteCache as invalidateCoreRemoteCache, setColumnHidden as setCoreColumnHidden, setColumnPinned as setCoreColumnPinned, setColumnWidth as setCoreColumnWidth, setCursorPage as setCoreCursorPage, setCursorPageSize as setCoreCursorPageSize, setCursorPagination as setCoreCursorPagination, setAggregation as setCoreAggregation, setFilter as setCoreFilter, setPagination, setRemoteCache as setCoreRemoteCache, setRowGrouping as setCoreRowGrouping, setRowSelected as setCoreRowSelected, setSelectedRows as setCoreSelectedRows, setSort as setCoreSort, startRemoteRequest as startCoreRemoteRequest, toggleRowGroupExpanded as toggleCoreRowGroupExpanded, toggleRowSelected as toggleCoreRowSelected, toggleSort as toggleCoreSort, } from "@youp-grid/core";
+import { acknowledgeRemoteCache as acknowledgeCoreRemoteCache, buildRowModel, cancelRemoteRequest as cancelCoreRemoteRequest, clearFilter as clearCoreFilter, clearSort as clearCoreSort, createGridState, failRemoteRequest as failCoreRemoteRequest, finishRemoteRequest as finishCoreRemoteRequest, invalidateRemoteCache as invalidateCoreRemoteCache, setColumnHidden as setCoreColumnHidden, setColumnPinned as setCoreColumnPinned, setColumnWidth as setCoreColumnWidth, setCursorPage as setCoreCursorPage, setCursorPageSize as setCoreCursorPageSize, setCursorPagination as setCoreCursorPagination, setAggregation as setCoreAggregation, setFilter as setCoreFilter, setPagination, setRemoteCache as setCoreRemoteCache, setRowGrouping as setCoreRowGrouping, setRowSelected as setCoreRowSelected, setSelectedRows as setCoreSelectedRows, setSort as setCoreSort, setTreeExpandedRows as setCoreTreeExpandedRows, startRemoteRequest as startCoreRemoteRequest, toggleRowGroupExpanded as toggleCoreRowGroupExpanded, toggleRowSelected as toggleCoreRowSelected, toggleSort as toggleCoreSort, toggleTreeRowExpanded as toggleCoreTreeRowExpanded, } from "@youp-grid/core";
 import { useCallback, useMemo, useState } from "react";
 export function useYoupGrid(options) {
     const isControlled = options.state !== undefined;
@@ -12,6 +12,8 @@ export function useYoupGrid(options) {
             columns: options.columns,
             state,
             getRowId: options.getRowId,
+            treeData: options.treeData,
+            getParentRowId: options.getParentRowId,
             rowModelType: options.rowModelType,
             serverRowCount: options.serverRowCount,
             serverFilteredRowCount: options.serverFilteredRowCount,
@@ -20,6 +22,8 @@ export function useYoupGrid(options) {
         options.rows,
         options.columns,
         options.getRowId,
+        options.treeData,
+        options.getParentRowId,
         options.rowModelType,
         options.serverRowCount,
         options.serverFilteredRowCount,
@@ -31,6 +35,8 @@ export function useYoupGrid(options) {
             columns: options.columns,
             state: nextState,
             getRowId: options.getRowId,
+            treeData: options.treeData,
+            getParentRowId: options.getParentRowId,
             rowModelType: options.rowModelType,
             serverRowCount: options.serverRowCount,
             serverFilteredRowCount: options.serverFilteredRowCount,
@@ -93,5 +99,7 @@ export function useYoupGrid(options) {
         setRowSelected: (rowId, selected) => commitState(setCoreRowSelected(state, rowId, selected)),
         setSelectedRows: (rowIds) => commitState(setCoreSelectedRows(state, rowIds)),
         toggleRowSelected: (rowId) => commitState(toggleCoreRowSelected(state, rowId)),
+        setTreeExpandedRows: (rowIds) => commitState(setCoreTreeExpandedRows(state, rowIds)),
+        toggleTreeRowExpanded: (rowId) => commitState(toggleCoreTreeRowExpanded(state, rowId)),
     };
 }

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "@youp-grid/react",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "React adapter for Youp Grid.",
+  "license": "MIT",
+  "author": "SeungyoupBaek",
   "type": "module",
+  "keywords": [
+    "data-grid",
+    "grid",
+    "react",
+    "typescript",
+    "table"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -14,13 +23,18 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/SeungyoupBaek/youp-grid.git",
     "directory": "packages/react"
   },
+  "bugs": {
+    "url": "https://github.com/SeungyoupBaek/youp-grid/issues"
+  },
+  "homepage": "https://github.com/SeungyoupBaek/youp-grid/tree/main/packages/react#readme",
   "publishConfig": {
     "access": "public"
   },
@@ -28,7 +42,7 @@
     "build": "tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css"
   },
   "dependencies": {
-    "@youp-grid/core": "0.2.2"
+    "@youp-grid/core": "0.2.4"
   },
   "peerDependencies": {
     "react": ">=18.2.0"