React Data Grid Lite - 🧮 DataGrid

A lightweight, high-performance, and customizable data grid component for React, ideal for rendering large data sets with support for sorting, searching, pagination, theming, and responsive layouts.

Prop	Type	Description	Default Value	Required
`columns`	`Array`	Array of column definitions. Each column can have properties like `name`, `width`, 'alias', 'enableSearch', 'hidden' etc.	-	Yes
`currentPage`	`string` / `number`	Loads the data grid with the specified page number. Useful with query string params for deep linking or bookmarking.	-	No
`data`	`Array`	Array of objects representing the rows of data to display.	-	Yes
`height`	`string` / `number`	The height of the grid. Can be a pixel value (e.g., `'300px'`) or a percentage (e.g., `'100%'`). Recommended for optimal display of the column.	`'60vh'`	No
`id`	`string`	Unique ID for the DataGrid component. Defaults to a random ID in the format `id-<randomNumber>` if not provided.	-	No
`maxHeight`	`string` / `number`	The maximum height of the grid.	`'100vh'`	No
`maxWidth`	`string` / `number`	The maximum width of the grid.	`'100vw'`	No
`onCellUpdate`	`function`	Callback triggered when a cell edit is saved (e.g., on Enter key press or on cell blur). Receives an object containing details of the updated row and changed cells.	-	No
`onColumnDragEnd`	`function`	Callback function triggered after a column is dragged and dropped.	-	No
`onColumnResized`	`function`	Callback function triggered after a column is resized.	-	No
`onPageChange`	`function`	Callback function triggered when the user navigates to a different page.	-	No
`onRowClick`	`function`	Callback function triggered when a row is clicked. The clicked row data is passed as an argument.	-	No
`onRowHover`	`function`	Callback function triggered when a row is hovered over.	-	No
`onRowOut`	`function`	Callback function triggered when the mouse leaves a hovered row.	-	No
`onRowSelect`	`function`	Callback function triggered when a row is selected using the selection column. Available in version `1.2.2` and above.	-	No
`onSearchComplete`	`function`	Callback function triggered after a search operation.	-	No
`onSelectAll`	`function`	Callback function triggered when all rows on the current page are selected by clicking the selection column header. Available in version `1.2.2` and above.	-	No
`onSortComplete`	`function`	Callback function triggered after sorting finishes.	-	No
`options`	`object`	An object for additional customization. Contains options like `gridClass`, `enableGlobalSearch`, etc.	-	No
`pageSize`	`string` / `number`	Number of rows per page for pagination. If `null` or not provided, pagination is disabled.	-	No
`theme`	`string` (`'blue-core'` \| `'dark-stack'` \| `'medi-glow'` \| `''`)	Applies a predefined visual theme to the grid. Affects header background, grid body background, borders, and control colors. Use an empty string to apply the default neutral style.	`''` (empty string)	No
`width`	`string` / `number`	The width of the grid. Can be a pixel value (e.g., `'500px'`) or a percentage (e.g., `'100%'`). Recommended for optimal display of the column. The width can be set to `'inherit'` to match the width of the containing element.	`'90vw'`	No

🧱 Columns Configuration Example

const columns = [
  {
    name: 'username',
    alias: 'User Name',
    width: '200px',
    enableSearch: true
  },
  {
    name: 'status',
    alias: 'Account Status',
    hidden: false
  }
];

🎛 Props in Action

`pageSize` + `onPageChange`

<DataGrid
  columns={columns}
  data={largeDataset}
  pageSize={10}
  onPageChange={(e, newPage) => console.log(`Page changed to: ${newPage}`)}
/>

Row Interaction Events

<DataGrid
  columns={columns}
  data={data}
  onRowClick={(e, row) => alert(`You clicked on ${row.name}`)}
  onRowHover={(e, row) => console.log('Hovered:', row.id)}
  onRowOut={() => console.log('Mouse left row')}
/>

Global Search & Sort Events

<DataGrid
  columns={columns}
  data={data}
  options={ enableGlobalSearch: true }
  onSearchComplete={(e, query, columns, result, matchCount) => console.log('Search Results:', result)}
  onSortComplete={(e, sortColumns, sortedData, sortOrder) => console.log('Sorted Data:', sortedData)}
/>

Custom Grid Dimensions

<DataGrid
  columns={columns}
  data={data}
  width="100%"
  height="400px"
  maxWidth="1200px"
  maxHeight="80vh"
/>

Resizable Columns (v1.1.0+)

<DataGrid
  columns={columns}
  data={data}
  onColumnResized={(e, newWidth, columnName) =>
    console.log(`${columnName} resized to ${newWidth}px`)
  }
/>

🎨 Themes

Available themes:

'blue-core'
'dark-stack'
'medi-glow'
'' (default/neutral)

Example:

<DataGrid
  columns={columns}
  data={data}
  theme="blue-core"
/>