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)

rows

Reference
Example