Focus
Individual cells in the react-bootstrap-data-grid grid can be focused by either clicking on the cell or using keyboard navigation.
Currently, the only feature that focusing on cells enables is copying the text contents of a cell. In the future, as more features such as cell selection and editing are implemented, focusing will be integral to the use of those features.
Style
The grid component attempts to mimic Bootstrap's focus ring helper to visually indicate focused cells.
Color variants
are also supported. To customize the color variant of the grid on a per-cell basis, pass functions to the
headerCellFocusVariant and bodyCellFocusVariant props to customize header cell and body cells, respectively. See the
code sample below for more details on how to use this feature.
Additionally, the grid component obeys customizations to the Bootstrap Sass variables related to focus rings.
Keyboard Navigation
The grid component uses the roving tabindex for the sake of accessibility. This means that when using the Tab and Shift + Tab keys to navigate a web page containing the grid component, only a single cell in the grid can be reached. Pressing Tab or Shift + Tab when focused on a cell in the grid will cause focus to leave the grid.
To focus on different cells within a grid, instead one should use the following keys to navigate between cells. These keys only work when focus is one of the cells inside a grid.
- Right Arrow: Moves focus one cell to the right. If already at the furthest-right cell, nothing happens.
- Left Arrow: Moves focus one cell to the left. If already at the furthest-left cell, nothing happens.
- Down Arrow: Moves focus one cell down. If already at the bottom-most cell, nothing happens.
- Up Arrow: Moves focus one cell up. If already at the top-most cell, nothing happens.
- Home: Moves focus to the first cell in the current row.
- End: Moves focus to the last cell in the current row.
- Control + Home: Moves focus to the first cell in the first row.
- Control + End: Moves focus to the last cell in the last row.
For Apple computers, use the Command key instead of the Control key.
Copy Cell Contents
When focused on a cell, the user can copy the text contents of the cell by invoking the clipboard copy function of the browser.
This feature is commonly invoked using the Control + C (Command + C on an Apple computer) keyboard combination.
Note that the text is copied as displayed, after formatters are applied.
There is currently no way to have the user copy pre-formatted values.
Example
Live Demo
Code
"use client";
import { UnitStats } from "./types";
import unitData from "./sc1_unit_stats.json";
import Grid, {
RowDef,
ColDef,
BodyCellVariantFn,
HeaderCellVariantFn,
} from "@absreim/react-bootstrap-data-grid/grid";
import { FC } from "react";
// Data source: Liquipedia
const rows: RowDef<UnitStats>[] = (unitData as UnitStats[]).map(
(unit, index) => ({
id: index,
data: {
...unit,
},
}),
);
const cols: ColDef[] = [
{
type: "string",
name: "unit",
label: "Unit",
width: 150,
},
{
type: "string",
name: "race",
label: "Race",
},
{
type: "number",
name: "pop",
label: "Pop",
},
{
type: "string",
name: "size",
label: "Size",
},
{
type: "string",
name: "minerals",
label: "Minerals",
},
{
type: "string",
name: "gas",
label: "Gas",
},
{
type: "string",
name: "armor",
label: "Armor",
},
{
type: "number",
name: "hp",
label: "HP",
},
{
type: "number",
name: "shield",
label: "Shield",
},
{
type: "string",
name: "groundAttack",
label: "Ground Attack",
width: 150,
},
{
type: "string",
name: "airAttack",
label: "Air Attack",
},
{
type: "string",
name: "cooldown",
label: "Cooldown",
},
{
type: "string",
name: "range",
label: "Range",
},
{
type: "string",
name: "attackMod",
label: "Attack Mod",
width: 150,
},
{
type: "string",
name: "sight",
label: "Sight",
},
{
type: "string",
name: "notes",
label: "Notes",
},
{
type: "string",
name: "buildTime",
label: "Build Time",
},
];
const getHeaderCellVariant: HeaderCellVariantFn = () => "primary";
const getBodyCellVariant: BodyCellVariantFn = (_, row) => {
switch (row.contents[1].value) {
case "Protoss": {
return "info";
}
case "Zerg": {
return "warning";
}
default: {
return "success";
}
}
};
const FocusDemoGrid: FC = () => (
<Grid
rows={rows}
cols={cols}
width="parent"
headerCellVariant={getHeaderCellVariant}
headerCellFocusVariant={getHeaderCellVariant}
bodyCellVariant={getBodyCellVariant}
bodyCellFocusVariant={getBodyCellVariant}
/>
);
export default FocusDemoGrid;