Skip to main content

Cell References

Enable Excel-style cell references with a single prop. Column letter headers (A, B, C...) appear above the header row, row numbers show in the left gutter, and a name box in the toolbar displays the active cell reference (e.g. "A1", "C15").

Live Demo​

Click cells to see the name box update with the cell reference (e.g. A1, B3)
Live
UI styling

The live demo above shows Radix UI styling (lightweight default). The same feature renders through the Fluent UI package with its native components.

Quick Example​

import { OGrid } from '@alaarab/ogrid-react-radix';

const columns = [
  { columnId: 'name', name: 'Name' },
  { columnId: 'age', name: 'Age', type: 'numeric' as const },
  { columnId: 'email', name: 'Email' },
  { columnId: 'department', name: 'Department' },
  { columnId: 'salary', name: 'Salary', type: 'numeric' as const,
    valueFormatter: (v) => `$${Number(v).toLocaleString()}` },
];

function App() {
  return (
    <OGrid
      columns={columns}
      data={people}
      getRowId={(item) => item.id}
      cellReferences
      defaultPageSize={25}
      entityLabelPlural="people"
    />
  );
}
Switching UI libraries

The OGrid component has the same props across all React UI packages. To switch, just change the import:

  • Radix (lightweight, default): from '@alaarab/ogrid-react-radix'
  • Fluent UI (Microsoft 365 / SPFx): from '@alaarab/ogrid-react-fluent' -- wrap in <FluentProvider>

How It Works​

Setting cellReferences on the OGrid component enables three visual features together:

1. Column Letter Headers​

A row of Excel-style column letters (A, B, C, ..., Z, AA, AB, ...) appears above the normal header row. These letters use base-26 encoding, matching the Excel convention:

ColumnsLetters
1--26A--Z
27--52AA--AZ
53--78BA--BZ
703+AAA, AAB, ...

2. Row Numbers​

A numbered gutter column appears on the left side of the grid showing the absolute row number (1, 2, 3, ...). Row numbers are consistent across pages -- page 2 with a page size of 25 starts at row 26, not row 1.

Row numbers without cell references

You can show row numbers independently without the full cell references feature by using the showRowNumbers prop:

<OGrid
  columns={columns}
  data={people}
  getRowId={(item) => item.id}
  showRowNumbers
/>

This gives you the numbered gutter column without column letters or the name box.

3. Name Box​

A small read-only text field appears in the toolbar showing the currently active cell reference (e.g. "A1", "C15", "G3"). It updates automatically when you click a cell or navigate with the keyboard.

The name box uses the column letter and absolute row number, so clicking the third column on row 5 of page 2 (with a page size of 10) shows "C15", not "C5".

Props​

PropTypeDefaultDescription
cellReferencesbooleanfalseEnable Excel-style cell references: column letter headers, row number gutter, and name box. Implies showRowNumbers.
showRowNumbersbooleanfalseShow only the row number gutter column (no column letters or name box). Automatically enabled when cellReferences is true.