Row Selection

Graphite Grid supports row selection out of the box. Row selection is driven by the rowSelectionMode property, which may take one of three values:

• "single": only a single row may be selected.
• "multiple": more than one row may be selected.
• "none": no rows may be selected (this is the default value).

There are a few ways the grid supports row selection:

• Rows may be selected via a pointer (mouse or touch), so a rowSelectionPointerActivator value should be set on the grid.
• Marker Column may be enabled, displaying a checkbox for row selection.
• The space key may be pressed while a cell in a given row has focus. Holding shift will perform a bulk select/deselect from the last selected row. If the last row was deselected, a bulk deselection will be performed when the shift key is held down.

By default, Graphite Grid allows rows to be deselected. However, this can be prevented by setting the rowSelectionDeselectEnabled property to false in the grid state.

It is possible to set the initially selected rows by providing a value for selectedRows, which is a set containing row IDs. See the client data source guide to learn more about row IDs in the grid.

The code snippet shows the initial properties being set on the grid state for row selection:

const grid = useGraphiteGrid({
  initial: {
    rowSelectionMode: "single",
    rowSelectionDeselectEnabled: false,
    rowSelectionPointerActivator: "double-click",
    selectedRows: new Set(["alpha-11", "alpha-21"]),
    // other grid properties
  },
});CopyCopied!

Single Row Selection

When rowSelectionMode is "single", Graphite Grid will only allow a single row to be selected. If rowSelectionDeselectEnabled is true (the default), then the single row may be deselected.

In the example below:

• rowSelectionMode is set to "single".
• rowSelectionPointerActivator is initially set to "none" but can be changed via the select dropdown, using the api.setRowSelectionMouseActivator method.
• useApiSlice is used to observe changes to the pointer activator reactively and to the deselection-enabled state.

With just this functionality, a wide range of selection scenarios can be supported.

export function RowSelectionSingle() {
  const grid = useGraphiteGrid({
    initial: {
      markerColumnEnabled: true,
      rowSelectionMode: "single",
      rowSelectionPointerActivator: "none",
      // other properties
    },
  });
 
  const canDeselect = grid.api.useApiSlice((s) => s.getRowSelectionDeselectEnabled());
  const pointerValue = grid.api.useApiSlice((s) => s.getRowSelectionMouseActivator());
 
  return (
    <div>
      <div>
        <label>
          Pointer Activator:
          <select
            className="border border-border h-full"
            value={pointerValue}
            onChange={(event) => {
              grid.api.setRowSelectionMouseActivator(
                event.target.value as RowSelectionPointerActivator,
              );
            }}
          >
            <option value="none">None</option>
            <option value="single-click">Single Click</option>
            <option value="double-click">Double Click</option>
            <option value="middle-click">Middle Click</option>
            <option value="right-click">Right Click</option>
          </select>
        </label>
        <button onClick={() => grid.api.setRowSelectionDeselectEnabled(!canDeselect)}>
          Deselection Allowed: {canDeselect ? "Yes" : "No"}
        </button>
      </div>
      <div style={{ height: 300 }}>
        <GraphiteGridDom state={grid} />
      </div>
    </WindowContainer>
  );
}CopyCopied!

Multiple Row Selection

Multiple row selection works the same way as single row selection, except that rowSelectMode: "multiple" is set. Additionally:

• The ctrl/cmd key may be pressed to add to the current selection.
• The shift key may be held down to perform a bulk selection (or deselection if the last action was to deselect a row).
• The space key will add to the selection (or toggle the selection if deselection is allowed).

export function RowSelectionMultiple() {
  const grid = useGraphiteGrid({
    initial: {
      markerColumnEnabled: true,
      rowSelectionMode: "multiple",
      rowSelectionPointerActivator: "none",
    },
  });
  // ... Same as single selection
}CopyCopied!

Only Allow Specific Rows To Be Selected

It is sometimes desirable to prevent the selection of specific rows in the grid while allowing the selection of others. The isRowSelectableHandler callback may be provided to the grid state for fine-grained control over which rows may be selected.

For example, if only odd-numbered rows should be selectable:

export function IsRowSelectableDemo() {
  const grid = useGraphiteGrid({
    initial: {
      isRowSelectableHandler: (param) => (param.row.rowIndex ?? 0) % 2 === 1,
    },
  });
  useEffect(() => {
    grid.api.autosizeColumns({ includeHeader: true });
  }, [grid.api]);
 
  return (
    <div style={{ height: 300 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!

Row Selection with Row Pivots

Row Pivots are a way of visually grouping related data in Graphite Grid. When row pivots are present, a parent-child relationship exists between rows. The rowSelectionPivotBehavior property on the grid determines whether selecting a parent row also selects its child rows. rowSelectionPivotBehavior may either be "individual" or "select-children".

export function RowPivotWithRowSelection() {
  const grid = useGraphiteGrid({
    initial: {
      rowSelectionPivotBehavior: "select-children",
    },
  });
 
  const selectChildren = grid.api.useApiSlice((s) => s.getRowSelectionPivotBehavior());
 
  return (
    <div>
      <div>
        <button
          onClick={() =>
            grid.api.setRowSelectionPivotBehavior(
              selectChildren === "select-children" ? "individual" : "select-children",
            )
          }
        >
          Select All Children: {selectChildren === "select-children" ? "Yes" : "No"}
        </button>
      </div>
      <div style={{ height: 300 }}>
        <GraphiteGridDom state={grid} />
      </div>
    </div>
  );
}CopyCopied!

Select All Callback

Selecting all rows is usually straightforward, but depending on the data set and row data source (particularly if the dataset is large), special handling may be required. The selectAllRowsHandler on the Graphite Grid state allows for custom handling when a "select all rows" action takes place.

const grid = useGraphiteGrid({
  initial: {
    selectAllRowsHandler: (params) => {
      // return a set of all selected rows (Set<string>)
    },
    // other props
  },
});CopyCopied!