Overview
DataGridDefaultRenderersContext is a React context that allows you to provide default renderers to all DataGrid components in your application without prop-drilling.
Usage
import {
DataGridDefaultRenderersContext,
renderCheckbox,
renderSortIcon,
renderSortPriority,
type Renderers
} from 'react-data-grid';
// Custom implementations of renderers
const defaultGridRenderers: Renderers<unknown, unknown> = {
renderCheckbox,
renderSortStatus(props) {
return (
<>
{renderSortIcon(props)}
{renderSortPriority(props)}
</>
);
}
};
function AppProvider({ children }) {
return (
<DataGridDefaultRenderersContext value={defaultGridRenderers}>
{children}
</DataGridDefaultRenderersContext>
);
}
All DataGrid components within the context provider will inherit these default renderers unless overridden by the renderers prop.
Type Definition
const DataGridDefaultRenderersContext: React.Context<Maybe<Renderers<any, any>>>;
Renderers<TRow, TSummaryRow> object with the following optional properties:
renderCell - Custom cell rendererrenderCheckbox - Custom checkbox rendererrenderRow - Custom row rendererrenderSortStatus - Custom sort status indicatornoRowsFallback - Custom empty state
useDefaultRenderers Hook
The context also exports a useDefaultRenderers<R, SR>() hook for accessing the context value:
import { useDefaultRenderers } from 'react-data-grid';
function CustomComponent() {
const defaultRenderers = useDefaultRenderers();
// Use defaultRenderers...
}
Benefits
- Consistency - Define renderers once and reuse across all grids
- No Prop-Drilling - Avoid passing renderer props through component trees
- Easy Customization - Override defaults on a per-grid basis when needed
- Type Safety - Fully typed with TypeScript generics
Example: Custom Checkbox
import {
DataGridDefaultRenderersContext,
type RenderCheckboxProps,
type Renderers
} from 'react-data-grid';
function CustomCheckbox({ checked, disabled, onChange, tabIndex }: RenderCheckboxProps) {
return (
<input
type="checkbox"
className="my-custom-checkbox"
checked={checked}
disabled={disabled}
onChange={(e) => onChange(e.target.checked, e.nativeEvent.shiftKey)}
tabIndex={tabIndex}
/>
);
}
const renderers: Renderers<unknown, unknown> = {
renderCheckbox: (props) => <CustomCheckbox {...props} />
};
function App() {
return (
<DataGridDefaultRenderersContext value={renderers}>
{/* All grids will use CustomCheckbox */}
<DataGrid columns={columns} rows={rows} />
</DataGridDefaultRenderersContext>
);
}