selection.md

✅ Row Selection

OpenGridX provides various ways for users to select one or multiple rows.

---

🔘 Selection Modes

Mode	Description
Checkbox Selection	Adds a column with checkboxes for bulk selection.
Row Click Selection	Select a row by clicking anywhere on the row body.
Single Selection	Limit the user to picking only one row at a time.

---

🛠️ Implementation

Enable Checkbox Selection

<DataGrid
  checkboxSelection
  pinCheckboxColumn // Optional: keeps checkbox on the left during horizontal scroll
/>

Controlled Selection

Use the rowSelectionModel to control the selection state from your parent component.

const [selection, setSelection] = useState<GridRowId[]>([]);

<DataGrid
  rowSelectionModel={selection}
  onRowSelectionModelChange={(newSelection) => setSelection(newSelection)}
/>

Disable Click-to-Select

Use disableRowSelectionOnClick to prevent clicking a row from changing the selection (useful when rows have their own click actions like navigation). Selection via checkboxes still works.

<DataGrid
  checkboxSelection
  disableRowSelectionOnClick
/>

Single-Row Selection Only

Use disableMultipleRowSelection to cap selection to one row at a time. Clicking a second row deselects the first; clicking an already-selected row deselects it.

<DataGrid
  disableMultipleRowSelection
  onRowSelectionModelChange={(model) => console.log('selected:', model)}
/>

---

⚙️ API Reference

Props

Prop	Type	Default	Description
checkboxSelection	boolean	false	Enable the checkbox column.
disableRowSelectionOnClick	boolean	false	If true, clicking a cell won't select the row.
disableMultipleRowSelection	boolean	false	Restricts selection to a single row.
rowSelectionModel	GridRowId[]	[]	Controlled array of selected IDs.
onRowSelectionModelChange	(model: GridRowSelectionModel) => void	—	Fired when the selection changes.
pinCheckboxColumn	boolean	true	Keep the checkbox column visible during horizontal scroll.

---

🖱️ Interaction Callbacks

onRowClick

Fired when a row is clicked (even if selection is disabled on click).

onRowClick: (params: GridRowParams) => {
  console.log('Row clicked:', params.id, params.row);
}

onCellClick

Fired when a specific cell is clicked.

onCellClick: (params: GridCellParams) => {
  console.log('Cell clicked:', params.field, params.value);
}