Row

comins-table@0.2.2

Playground paths below are local routes for the module repository’s development server. They are not live routes on this documentation site.

Rows support click, double click, keyboard payloads, context menus, selection, and drag movement.

<CominsTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  onClickRow={({ row }) => openDetails(row.id)}
  rowProps={{
    draggable: (row) => row.status !== "locked",
    className: (row) => ({ "row-locked": row.status === "locked" }),
  }}
/>

rowProps.draggable defaults to false as of 0.1.11. Set it to true (or return true per Row) to show a drag handle and enable movement. Disabled or unsupported Rows have no drag handle. Selection state is emitted through onChangeSelection.

Row Drag lifecycle

onBeforeRowDrag, onRowDrag, and onAfterDragRow expose the handle gesture without taking model ownership away from onChangeData or the Cross-Table Coordinator.

• onBeforeRowDrag(payload) runs before pointer listeners are registered. Return false to cancel the gesture; a cancelled-before-start gesture does not call the later lifecycle callbacks.
• onRowDrag(payload) runs only when CominsRowDragTarget identity or validity changes. It is not a raw pointer-move stream.
• onAfterDragRow(payload) runs once for every started gesture with CominsRowDragResult (moved, cancelled, or rejected) and a CominsRowDragReason such as drop, unchanged, invalid-target, duplicate-id, escape, or blur.

CominsBeforeRowDragPayload, CominsRowDragPayload, and CominsAfterDragRowPayload keep the typed source Row, optional source Group/Table identity, pointer event, and target identity. Returning false from the before callback never mutates Rows. Same-Table, cross-Group, and Cross-Table Row gestures use the same lifecycle contract; Cross-Table model updates still belong to the Coordinator.

With the default rowSelectionOnClick={true}, opening a Row or Cell context menu preserves the current single or multiple Row selection when the target Row is already selected. Opening it on an unselected Row switches to that Row exclusively; Cell context menus apply the same Row policy before updating Cell focus.

The Playground context menu enables View and Create with zero selected Rows, enables every action with one selected Row, and disables only Update when multiple Rows are selected. Delete is enabled whenever at least one Row is selected.

Playground context menu 0/1/N matrix

Selected Rows	View	Create	Update	Delete
0	Enabled	Enabled	Disabled	Disabled
1	Enabled	Enabled	Enabled	Enabled
N	Enabled	Enabled	Disabled	Enabled

Selecting a menu item shows its action in the Playground Alert. Create inserts a new Row; Delete removes selected Rows from the example data. View and Update report the selected action.

For ordinary array-backed Tables, setSelectedRow, setSelectedRows, and setMoveTargetRow use the visible row index after sorting and pagination. Viewport selection setters use absolute indexes and skip unloaded Rows; Row movement is unavailable. Set rowSelectionOnClick={false} to preserve Row selection during Cell interaction. Read Row data, Cell values, or the ID snapshot with getSelectedRows, getSelectedCells, or getSelection; see Selection.

The live /api/ref (/api/ref) example shows setMoveTargetRow(2, 0) clearing active sorting and committing the moved visible Row order through controlled onChangeData.

When columnFiltering is configured, Row Drag and setMoveTargetRow are disabled because movement through a potentially partial projection is ambiguous. Group Drag remains a separate Group-model operation in the supported Row Grouping combination.

Tree Row movement uses the separate treeRowDrag configuration and Tree lifecycle payload types; see Tree Grid.

Dragging a Row or Group near the visible top or bottom edge automatically scrolls the local Table. The drop target is recalculated as Rows enter the viewport, including virtualized Rows. Releasing or cancelling the drag stops scrolling. Use stable data-derived Row IDs. onChangeData is optional for local reordering: option-only rerenders preserve the internal order. Connect it when application state must follow the new order; a new data array replaces the internal Rows. Viewport Datasource does not support Row Drag.

---

Runnable example · Source guide for this version