Controlling the grid from parent

You can control the grid from a parent component using a ref:

import {
  DataSheetGrid,
  DataSheetGridRef,
} from 'react-datasheet-grid'

function App() {
  const ref = useRef<DataSheetGridRef>(null)

  return <DataSheetGrid ref={ref} />
}

You can then use that ref to control the grid from any callback.

function App() {
  const ref = useRef<DataSheetGridRef>(null)

  useEffect(() => {
    ref.current?.setSelection({
      min: { col: 'firstName', row: 0 },
      max: { col: 2, row: 3 },
    })
  }, [])

  return (
    <>
      <DataSheetGrid ref={ref} />
      <button onClick={() => ref.current?.setActiveCell({ col: 1, row: 0 })} />
    </>
  )
}

Reference

See the exhaustive list of properties available.

Example

Hover an element to trigger it:

ref.current?.setActiveCell({ col: 1, row: 3 })ref.current?.setActiveCell({ col: 'lastName', row: 1 })ref.current?.setSelection({ min: { col: 'active', row: 1 }, max: { col: 1, row: 4 }})ref.current?.setSelection(null)

Active

First name

Last name

Number

1

2

3

4

5

6

7

8

9

10

rows