REACT-NATIVES
WIRED FOR SPEED
react-natives v2.1.2
Theme
Light
Dark
Get Started
Menu
Components
Data Display
DataGrid
A virtualized spreadsheet-style grid for lazy, editable, selectable, and customizable data sets.
Example
Preview
Code
Props
DataGrid Props
Prop
Type
Default
Description
columns
DataGridColumn[]
Column definitions, including id, title, kind, width, group, editing, resize, and drag configuration.
rowCount
number
Total logical row count. Rows are virtualized, so this can be very large.
getCellContent
(row: number, column: DataGridColumn) => DataGridCell | string | number | boolean | null | undefined
Lazy cell resolver called only for rendered rows and columns.
rowHeight
number | (row: number) => number
44
Fixed or per-row height for variable sized rows.
selectionMode
'none' | 'single' | 'multiple'
'none'
Controls whether users can select one or many rows, cells, and columns.
selectionScope
'row' | 'cell' | 'column' | 'mixed'
'cell'
Determines what a press selects. Mixed enables cells and column headers.
editable
boolean
false
Enables built-in long-press editing for editable columns and cells.
mergedCells
DataGridMergedCell[]
Cells that span multiple rows or columns.
renderCell
(info: DataGridRenderCellInfo) => React.ReactNode
Custom cell renderer. Return undefined to use the built-in renderer.
renderHeaderCell
(info: DataGridRenderHeaderInfo) => React.ReactNode
Custom column header renderer.
allowColumnResize
boolean
true
Enables drag resizing through the header resize handle.
allowColumnReorder
boolean
true
Enables horizontal drag reordering from column headers.
Usage Guidelines
When to use
Use DataGrid for large interactive data sets that need native scrolling, lazy cell rendering, editing, selection, column resizing, column reordering, merged cells, and custom typed cell rendering.
Best practices
Use getCellContent instead of pre-building large row arrays for million-row data sets.
Keep renderCell pure and fast; memoize expensive custom cell renderers.
Use fixed rowHeight when possible for the fastest getItemLayout path.
Use column ids that stay stable across sorting, filtering, and reordering.
Accessibility
DataGrid renders cells and headers as accessible pressable controls with row, column, and value labels. Provide accessibilityLabel on image or custom cells when the default value is not descriptive.
Related Components
Table
A compound table component for displaying structured tabular data.
List
A compound list component for displaying ordered or unordered items.
Pagination
Navigation controls for paging through content.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.