Props Getters
Lower-level functions for generating props. These are used internally by the hooks but can be called directly for advanced use cases.
Overview
Props getters generate the attributes needed for accessibility and event handling:
tsx
import { getGridProps, getCellProps } from "@ts-zen/react-datagrid";
// These are typically called internally by hooks
const gridProps = getGridProps(state, handlers);
const cellProps = getCellProps(state, cellRef, handlers);getGridProps
Generates props for the grid container element.
tsx
const props = getGridProps(state, { onKeyDown, onFocus, onBlur });Returns
typescript
{
role: 'grid',
'aria-multiselectable': boolean,
'aria-rowcount': number,
'aria-colcount': number,
tabIndex: 0,
onKeyDown: (e) => void,
onFocus: (e) => void,
onBlur: (e) => void,
}getCellProps
Generates props for a cell element.
tsx
const props = getCellProps(state, { rowId, colId }, { onClick, onDoubleClick });Returns
typescript
{
role: 'gridcell',
'aria-selected': boolean,
'aria-readonly': boolean,
'aria-colindex': number,
'aria-rowindex': number,
tabIndex: 0 | -1, // 0 if focused, -1 otherwise
onClick: (e) => void,
onDoubleClick: (e) => void,
onKeyDown: (e) => void,
}getHeaderProps
Generates props for a header cell element.
tsx
const props = getHeaderProps(state, colId, { onClick });Returns
typescript
{
role: 'columnheader',
'aria-colindex': number,
'aria-sort': 'ascending' | 'descending' | 'none' | undefined,
tabIndex: 0 | -1,
onClick: (e) => void,
onKeyDown: (e) => void,
}getRowProps
Generates props for a row element.
tsx
const props = getRowProps(state, rowId);Returns
typescript
{
role: 'row',
'aria-rowindex': number,
'aria-selected': boolean, // if any cell in row is selected
}Usage with Hooks
The hooks (useCellBehavior, etc.) call these props getters internally. Direct usage is only needed when:
- Building a custom abstraction layer
- Optimizing for specific render patterns
- Integrating with non-standard component libraries
tsx
// Typical usage (recommended)
const cell = useCellBehavior(grid, rowId, colId);
return <div {...cell.props}>{children}</div>;
// Direct props getter usage (advanced)
const state = useStore(grid.store);
const props = getCellProps(state, { rowId, colId }, handlers);
return <div {...props}>{children}</div>;