Skip to main content

​
Overview

The renderCheckbox function renders a checkbox input with proper styling, accessibility attributes, and support for indeterminate state. It’s used by the SelectColumn for row selection.

​
Signature

function renderCheckbox(props: RenderCheckboxProps): React.ReactElement

​
Parameters

​
props
RenderCheckboxProps
required
The checkbox renderer props.

​
RenderCheckboxProps

​
checked
boolean
required
Whether the checkbox is checked.
​
indeterminate
boolean
Whether the checkbox is in an indeterminate state (partially checked).
​
disabled
boolean
Whether the checkbox is disabled.
​
onChange
(checked: boolean, shift: boolean) => void
required
Callback when the checkbox state changes. Receives the new checked state and whether shift was pressed.
​
tabIndex
number
required
The tab index for keyboard navigation.
​
aria-label
string
Accessible label for the checkbox.
​
aria-labelledby
string
ID of the element that labels the checkbox.

​
Return Value

​
return
React.ReactElement
A styled checkbox input element with proper accessibility attributes.

​
Usage

You can customize the default checkbox renderer globally: 
import { DataGrid, renderCheckbox } from 'react-data-grid';

<DataGrid
  renderers={{
    renderCheckbox: (props) => renderCheckbox({ ...props, 'aria-label': 'Select row' })
  }}
/>;

​
Features

  • Indeterminate state: Supports the indeterminate state for “select all” checkboxes
  • Shift-click support: Detects shift key for range selection
  • Accessibility: Includes focus styles and ARIA attributes
  • Styling: Centered in cell with proper sizing (20×20px)
  • Disabled state: Shows disabled cursor when checkbox is disabled

​
Example

Custom checkbox with additional styling: 
import { DataGrid, renderCheckbox, type RenderCheckboxProps } from 'react-data-grid';

function CustomCheckbox(props: RenderCheckboxProps) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      {renderCheckbox(props)}
      {props.checked && <span>✓</span>}
    </div>
  );
}

function App() {
  return (
    <DataGrid
      columns={columns}
      rows={rows}
      renderers={{
        renderCheckbox: CustomCheckbox
      }}
    />
  );
}

​
Default Styling

The checkbox includes these default styles:
  • Centered in the cell with margin: auto
  • Fixed size: 20×20 pixels
  • Focus outline: 2px solid with focus color
  • Cursor: pointer when enabled

Build docs developers (and LLMs) love

Get started for freeTalk to us