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
1
2
3
4
5
6
rows