Version 3.0.0
is a release that brings a long awaited feature: cell selection. This allows the user to perform fined-grained cell selection, either via the cellSelection prop or via the Cell Selection API.
Version 3.0.0 highlights 🎉
1️⃣ support for single and multiple cell selection
2️⃣ cell selection using wildcards
3️⃣ cell selection API
1️⃣ Support for single and multiple cell selection
It's been a long-requested feature to implement cell selection.
We knew we needed to implement it, but we wanted to do it right while keeping it easy to understand.
In fact, we prepared some things in advance - namely selectionMode was there, it just needed to accept a new value: "multi-cell"
.
<DataSource<Developer>
selectionMode="multi-cell" // <--- THIS
primaryKey="id"
data={[...]}
/>
The line above is all you need to do to enable cell selection. This allows the user to Click
or Cmd/Ctrl+Click
to select a specific cell and Shift+Click
to select a range of cells. It's exactly the behavior you'd expect from a spreadsheet application.
Try Cmd/Ctrl+Click
ing in the DataGrid cells below to see multiple cell selection in action.
Using a default selection
If you want to render the DataGrid with a default selection, you can use the defaultCellSelection prop.
const defaultCellSelection = {
defaultSelection: false,
selectedCells: [
[3, "hobby"],
[4, "firstName"],
[4, "hobby"],
[4, "preferredLanguage"],
[4, "salary"]
]
};
The format for the uncontrolled defaultCellSelection (and also for the controlled cellSelection) is an object with two properties:
-
defaultSelection
-boolean
- whether or not cells are selected by default. - and either
-
selectedCells
-[string|number, string][]
- only needed whendefaultSelection
isfalse
-
- or
-
deselectedCells
-[string|number, string][]
- only needed whendefaultSelection
istrue
-
The value for selectedCells
and deselectedCells
should be an array of [rowId, colId]
tuples.
The rowId
is the id
of the row (primaryKey), and the colId
is the id
of the column (the identifier of the column in the prop).
This object shape for the defaultCellSelection/cellSelection props allows you full flexibility in specifying the selection. You can specify a single cell, a range of cells, or even a non-contiguous selection. You can default to everything being selected, or everything being deselected and then enumerate your specific exceptions.
2️⃣ Cell Selection using wildcards
The above examples show how to select specific cells, but what if you want to select all cells in a column, or all cells in a row?
Well, that turns out to be straightforward as well. You can use the *
wildcard to select all cells in a column or all cells in a row.
// All cells in row with id rowId3
// and all cells in hobby column are selected
const defaultCellSelection = {
defaultSelection: false,
selectedCells: [
['*', 'hobby'],
['rowId3', '*'],
],
}
<DataSource
selectionMode="multi-cell"
defaultCellSelection={defaultCellSelection}
/>
Wildcard selection is really powerful and it allows you to select lots of cells without the need to enumerate them all.
For example, you can easily select all cells except a few.
Listening to selection changes
You can listen to selection changes by using the onCellSelectionChange prop.
If you're using controlled cell selection, you have to update the cellSelection prop yourself in response to user interaction - so onCellSelectionChange will be your way of listening to selection changes.
3️⃣ Cell Selection API
In addition to managing cell selection declaratively, which we encourage, you can also use the Cell Selection API to imperatively update the current selection.
We offer the following methods:
- selectCell - selects a single cell, while allowing you to keep or to clear previous selection
- deselectCell - deselects the specified cell
- selectColumn - selects a whole column in the DataGrid
- deselectColumn - deselects the specified column
- selectRange - selects a range of cells
- deselectRange - deselects the specified range of cells
- selectAll - selects all cells in the DataGrid
- clear - clears selection (deselects all cells in the DataGrid)
- isCellSelected - checks if the specified cell is selected or not
Conclusion
We'd love to hear your feedback - what do you think we've got right and what's missing. Please reach out to us via email at admin@infinite-table.com or follow us @get_infinite to keep up-to-date with news about the product.
Talk soon 🙌
Top comments (0)