@iyulab/flex-table 0.55.2 → 0.56.1

package/dist/flex-table.d.ts

@@ -28,15 +28,22 @@ export declare class FlexTable extends LitElement {
     /**
      * When true, replacing `data` externally automatically clears row selection
      * (checkbox selection) and re-dispatches `selection-change` with an empty selection.
-     * Default: false, for consistency with `clearUndoOnDataChange`. Internal undo/redo
-     * operations are never affected.
-     *
-     * Row selection is index-based (no row-key concept), so a full `data` replacement can
-     * leave selection pointing at different underlying rows at the same indices —
-     * recommended for any `selectable` grid whose selection drives bulk actions
-     * (e.g. server-mode grids refreshed via `useODataSource`).
+     * Default: false — keyed rows stay selected across a replacement (see `rowKey`), so a
+     * selection can span server pages. Set it when a new `data` should start a new selection
+     * (a new search). Internal undo/redo operations are never affected.
      */
     clearSelectionOnDataChange: boolean;
+    /**
+     * What names a row: the field whose value identifies it (default `'_id'`, as in `u-rich-table`),
+     * or a function of the row. Row selection is kept by this id (`getRowId`), so checkmarks stay on
+     * their rows through sorting, filtering, inserts and deletes — and, for rows that have a key,
+     * across a `data` replacement: another server page keeps the rows selected on the last one.
+     *
+     * A row whose key is missing (`undefined`, `null` or `''`) is named by the row object itself —
+     * a session-local id `#n`. It follows the row while the same object is in `data`, and leaves the
+     * selection when `data` no longer holds that object (a replacement with new objects).
+     */
+    rowKey: string | ((row: DataRow) => unknown);
     /**
      * 행 높이(px).
      *
@@ -135,8 +142,12 @@ export declare class FlexTable extends LitElement {
     private _sortedIndices;
     private _openFilterKey;
     private _rowSelectionVersion;
-    /** Anchor row for shift-click range selection on the row checkbox column. */
-    private _lastCheckboxRowIndex;
+    /** Anchor row (its id) for shift-click range selection on the row checkbox column. */
+    private _lastCheckboxRowId;
+    /** Session-local ids of rows that have no key — by object, so they follow the row and leave with it. */
+    private _unkeyedIds;
+    private _unkeyedSeq;
+    private _visibleIdsCache;
     /** Set by the checkbox's own click (which carries shiftKey) just before its change event fires. */
     private _checkboxShiftPending;
     private _autocompleteState;
@@ -164,6 +175,7 @@ export declare class FlexTable extends LitElement {
     private _columnWidths;
     private _hostResizeObserver;
     /** Keyed by dataIndex → colKey → comment text */
+    /** Cell comments by row id (`getRowId`) and column key — they stay on their rows when rows move. */
     private _comments;
     private _isDragOver;
     get visibleColumns(): ColumnDefinition[];
@@ -179,14 +191,29 @@ export declare class FlexTable extends LitElement {
     get sortCriteria(): SortCriteria[];
     /** Number of rows after filtering (before pagination). */
     get filteredRowCount(): number;
-    /** Get data indices of currently selected rows. */
+    /**
+     * The row selection. `selectedIds` is every selected row — on every page, including rows not in
+     * `data` now. `selectedRows` and `selectedIndices` are the selected rows that `data` holds (in
+     * `data` order, filtered-out rows included) and their positions in it.
+     */
     getSelectedRows(): {
+        selectedIds: string[];
         selectedIndices: number[];
         selectedRows: DataRow[];
     };
-    /** Select all visible rows (multi mode only). */
+    /** The id row selection keeps for `row` — its `rowKey` value as a string, or `#n` for a row without one. */
+    getRowId(row: DataRow): string;
+    /** Ids of the selected rows — every page, including rows not in `data` now. A copy. */
+    get selectedRowIds(): ReadonlySet<string>;
+    /**
+     * Replaces the row selection with `ids` (single mode keeps the last). Does nothing — and fires
+     * nothing — when the selection already is `ids`, so a host can set it from its own state on
+     * every render.
+     */
+    setSelection(ids: Iterable<string>): void;
+    /** Selects every row in view — after filtering (multi mode only). Rows on other pages stay as they are. */
     selectAll(): void;
-    /** Deselect all rows. */
+    /** Deselects every row — on every page. */
     deselectAll(): void;
     /**
      * Selects every currently-loaded row for which `predicate` returns true, in addition to
@@ -200,6 +227,12 @@ export declare class FlexTable extends LitElement {
      */
     selectWhere(predicate: (row: DataRow, dataIndex: number) => boolean): void;
     private _dispatchRowSelectionEvent;
+    /** Ids of the rows in view, top to bottom (after filter and sort). Cached per view and `rowKey`. */
+    private _visibleRowIds;
+    /** Drops comments on `#n` rows `data` no longer holds — such a row cannot come back. */
+    private _pruneGoneUnkeyedComments;
+    /** Drops selected `#n` ids whose rows `data` no longer holds. Returns whether anything was dropped. */
+    private _pruneGoneUnkeyedRows;
     /**
      * Set a filter for a column. Replaces any existing filter on the same key.
      */
@@ -263,8 +296,9 @@ export declare class FlexTable extends LitElement {
      */
     addRow(row?: DataRow, index?: number): DataRow | null;
     /**
-     * Delete rows at the specified data indices.
-     * If no indices provided, deletes the currently selected rows.
+     * Delete rows at the specified data indices. Without indices it deletes the selected rows: the
+     * checked rows when the grid is `selectable` (none checked — nothing is deleted), otherwise the
+     * rows of the cell selection.
      */
     deleteRows(indices?: number[]): void;
     /**
@@ -310,10 +344,11 @@ export declare class FlexTable extends LitElement {
      */
     getComment(dataIndex: number, colKey: string): string | null;
     /**
-     * Get all comments as a flat array.
+     * Every comment on a row `data` holds, in `data` order — with the row's current index and its id.
      */
     getAllComments(): Array<{
         dataIndex: number;
+        id: string;
         colKey: string;
         text: string;
     }>;
@@ -375,8 +410,20 @@ export declare class FlexTable extends LitElement {
     protected updated(changedProps: PropertyValues): void;
     /** Recompute filter → sort pipeline. */
     private _recomputeView;
+    /**
+     * Keeps an open editor on the row it was started on after the view changed under it (a refresh put
+     * rows above it, a sort moved it). A row that left `data`, or that a filter hid, ends the edit.
+     */
+    private _followEditingRow;
     /** Map visual row index to data row index */
     private _toDataIndex;
+    /** Set while the edited row's editor is drawn again in the row's new place (cleared after that update). */
+    private _editorMoving;
+    /**
+     * Blur commits the edit — except the blur of the editor the update is replacing because its row
+     * moved (Chromium fires it while removing the element) or of one already gone.
+     */
+    private _onEditorBlur;
     private _focusEditor;
     private _measureViewport;
     private _warnedUnconstrained;
@@ -570,6 +617,7 @@ export declare class FlexTable extends LitElement {
     private _renderNumberFilter;
     /** 셀 오류 표시 — 우리 문장은 «그릴 때 찾는» 함수로(로캘 전환에 따라오게), 소비자 `validator` 문장은 그대로. */
     private _invalidCells;
+    /** A cell named by its row's id and its column's key — so the mark stays on the cell when the view reorders. */
     private _cellKey;
     private _markCellInvalid;
     private _isCellInvalid;

package/dist/flex-table.js

@@ -1,3 +1,3 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./flex-table-D3E9npd9.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./flex-table-DKBcfNA4.js";
 import { t as o } from "./locale-Cfm-vJji.js";
 export { a as FlexTable, e as RowSelectionState, t as UndoStack, n as effectiveAlign, i as exportData, o as flexTableLocale, r as renderCell };

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-D3E9npd9.js";
+import { t as e } from "./flex-table-DKBcfNA4.js";
 import { i as t } from "./query-Dw4iO0ir.js";
 import { t as n } from "./source--q5s2Oti.js";
 import { t as r } from "./view-DiLr-TdY.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.55.2",
+  "version": "0.56.1",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",

package/skills/iyulab-flex-table/SKILL.md

@@ -78,9 +78,12 @@ Use `updateRows([{ row, key, value }])` for programmatic edits (undoable, fires
 `table.editable = false` (a property, since a boolean attribute cannot express `false`) — Enter on a non-editable cell then fires
 `row-activate`, the grid's "open this row" contract.
 
-**Row selection is index-based.** Enable with `selectable` (`selection-mode="single|multi"`).
-There is no row key, so set `clear-selection-on-data-change` when selection drives bulk actions and
-`data` can be replaced. `selectWhere(predicate)` selects rows by content.
+**Row selection is kept by row id.** Enable with `selectable` (`selection-mode="single|multi"`).
+The id is the row's `row-key` field (`_id` by default, as in `u-rich-table`) or a `rowKey` function, so
+checkmarks follow their rows through sort, filter, insert and delete, and keyed rows stay selected
+across server pages (`selectedIds`). A row without a key is named by its object and leaves the selection
+when `data` drops it. `clear-selection-on-data-change` starts a new selection on every `data`.
+`selectWhere(predicate)` selects rows by content; `setSelection(ids)` sets it from host state.
 
 **Client vs server mode.** `data-mode="client"` (default) sorts and filters locally.
 `data-mode="server"` only emits `sort-change` / `filter-change`; you supply already-processed rows.

package/skills/iyulab-flex-table/references/api.md

@@ -27,7 +27,8 @@ All names below are members of the `FlexTable` class (`<flex-table>`).
 | `loading` | `loading` | `boolean` | `false` | Loading overlay + `aria-busy` |
 | `importEnabled` | `import-enabled` | `boolean` | `false` | Drag-and-drop `.xlsx` / `.csv` import |
 | `clearUndoOnDataChange` | `clear-undo-on-data-change` | `boolean` | `false` | Replacing `data` clears undo history |
-| `clearSelectionOnDataChange` | `clear-selection-on-data-change` | `boolean` | `false` | Replacing `data` clears row selection |
+| `clearSelectionOnDataChange` | `clear-selection-on-data-change` | `boolean` | `false` | Replacing `data` clears row selection (otherwise keyed rows stay selected across pages) |
+| `rowKey` | `row-key` | `string \| (row) => unknown` | `'_id'` | Names a row; selection is kept by this id. A row without a key gets a session-local `#n` |
 | `stylesheets` | — | `CSSStyleSheet[]` | `[]` | Adopted into the shadow root; styles `render` output |
 
 Replacing `data` with the same array reference does not trigger the clear-on-change behaviors.
@@ -95,7 +96,7 @@ Enter/Escape and blur-to-commit behavior.
 | Method | Returns | Notes |
 |---|---|---|
 | `addRow(row?, index?)` | `DataRow \| null` | `null` when `maxRows` reached |
-| `deleteRows(indices?)` | `void` | Data indices; default = selected rows |
+| `deleteRows(indices?)` | `void` | Data indices; default = the checked rows when `selectable`, else the cell selection's rows |
 | `updateRows(changes)` | `void` | `Array<{ row, key, value }>`, one undo step |
 | `refreshData()` | `void` | Re-render after in-place mutation |
 
@@ -115,9 +116,11 @@ Enter/Escape and blur-to-commit behavior.
 
 | Method | Notes |
 |---|---|
-| `selectAll()` / `deselectAll()` | `selectAll` is multi mode only |
+| `selectAll()` / `deselectAll()` | `selectAll`: the rows in view (multi mode only) · `deselectAll`: every page |
 | `selectWhere(predicate)` | `(row, dataIndex) => boolean` over the visible rows |
-| `getSelectedRows()` | `{ selectedIndices, selectedRows }` |
+| `setSelection(ids)` | Replace with these row ids; the same set again fires nothing |
+| `getSelectedRows()` | `{ selectedIds, selectedIndices, selectedRows }` — ids: all pages · rows: the ones `data` holds |
+| `getRowId(row)` · `selectedRowIds` | A row's id · the selected ids (all pages) |
 
 ### Filtering, undo, comments, import/export
 
@@ -143,11 +146,11 @@ cast, and the React `on*` props carry the same types.
 | `cell-select` | `{ row, col }` (or `null`) |
 | `cell-edit-start` | `{ row, col, key, value }` |
 | `cell-edit-commit` | `{ row, col, key, oldValue, newValue }` |
-| `cell-edit-cancel` | `{ row, col }` |
+| `cell-edit-cancel` | `{ row, col }` — `row`: data index (`-1` once the row left `data`) |
 | `validation-error` | `{ row, col, key, value, error }` |
 | `row-add` | `{ row, index }` |
 | `row-delete` | `{ indices, rows }` |
-| `row-activate` | `{ row, index, col, key }` — Enter on a non-editable cell |
+| `row-activate` | `{ row, id, index, col, key }` — Enter on a non-editable cell |
 | `row-reorder` | `{ from, to }` |
 | `batch-update` | `{ changes }` |
 | `column-add` | `{ column, index }` |
@@ -159,13 +162,13 @@ cast, and the React `on*` props carry the same types.
 | `sort-change` | `{ criteria }` |
 | `filter-change` | `{ keys, filteredCount }` |
 | `filter-error` | `{ error, row, filterKey }` |
-| `selection-change` | `{ selectedIndices, selectedRows }` |
+| `selection-change` | `{ selectedIds, selectedIndices, selectedRows }` |
 | `clipboard-copy` / `clipboard-cut` | `{ range, text }` (TSV) |
 | `clipboard-paste` | `{ changes, addedRows }` |
 | `clipboard-error` | `{ action: 'copy' \| 'paste', error }` — copy could not put the text on the clipboard (no `clipboard-copy`/`clipboard-cut` follows; a cut clears nothing), or paste could not read it |
 | `fill-handle-apply` | `{ sourceRange, targetRange, cells }` |
 | `find-replace` | `{ type: 'replace' \| 'replace-all', cells }` |
-| `comment-change` | `{ dataIndex, colKey, text }` |
+| `comment-change` | `{ dataIndex, id, colKey, text }` |
 | `data-import` | `{ count }` |
 | `undo-state-change` | `{ canUndo, canRedo }` |
 | `context-menu` | `{ x, y, row, col, key, value, rowData }` — cancelable; `preventDefault()` suppresses the built-in menu |

package/skills/iyulab-flex-table/references/react.md

@@ -78,7 +78,6 @@ function Orders() {
         loading={source.loading}
         error={source.error}
         onSortChange={source.onSortChange}
-        clearSelectionOnDataChange
       />
       <button disabled={source.page === 0} onClick={() => source.setPage(source.page - 1)}>Prev</button>
       <span>{source.page + 1} / {Math.max(1, Math.ceil(source.totalCount / 20))}</span>