React Data Grid Lite - ⚙️ Options

The options prop is an object that provides additional configuration settings to further customize the behavior of the DataGrid component. These settings control various aspects of the grid, such as styling, button visibility, search options, and download functionality. The options object can also be defined as a global configuration object and reused across multiple grids with little or no modification. This approach helps keep the code clean and uncluttered, promotes consistency, and supports better separation of concerns by centralizing grid-related settings.

Field	Type	Description	Default Value	Required
`actionColumnAlign`	`string` (`'left'` \| `'right'` \| `''`)	Controls alignment of the Actions column. Set to `'left'` or `'right'` to fix its position. Leave empty to allow the column to scroll with the rest of the table.	`'right'`	No
`aiSearch`	`object`	Configuration object to enable AI search functionality in the data grid. Supported in version `1.2.0` and above. For more details, refer to the AI Search document.	-	No
`csvExportUI`	`string` (`'button'` \| `'menu'`)	Controls the UI placement of the CSV export option — either as a button in the toolbar (`'button'`) or as a menu item in the toolbar menu (`'menu'`). If set to any value other than `'button'`, it defaults to `'menu'`. To disable this functionality entirely, set the `enableDownload` option to `false`. Available in version `1.2.3` and above.	`menu`	No
`debug`	`boolean`	Enables debug logging for development. When set to `true`, the grid will output console `error`, `warn`, and `info` logs — useful for debugging features like AI search. Should be disabled in production to avoid unnecessary console output. Available in version `1.2.1` and above.	`false`	No
`deleteButton`	`object`	Configuration for enabling a delete button on each row. Includes an `event` field which is the function triggered when the button is clicked.	-	No
`downloadFilename`	`string`	The filename used when downloading grid data in CSV format. The default value is `'export-{yyyy-MM-dd HH:mm:ss}'`	-	No
`editButton`	`object`	Configuration for enabling an edit button on each row. Includes an `event` field which is the function triggered when the button is clicked.	-	No
`enableCellEdit`	`boolean`	Enables cell editing for all columns. Column-level `editable` settings override this option. Cell editing is fully accessible via keyboard, touch, and mouse. A `<td>` cell enters edit mode when double-clicked with a mouse, by pressing Enter on the keyboard, or with a firm tap on mobile devices. To save changes, press Enter on the keyboard, click outside the cell (mouse), or tap outside (touch). Press Esc to cancel. When a change is saved, the `onCellUpdate` callback is fired.	`false`	No
`enableColumnDrag`	`boolean`	Enables column dragging for all columns. Column-level `draggable` settings override this option. Fixed columns can be reordered among themselves, and non-fixed columns among their own group.	`false`	No
`enableColumnResize`	`boolean`	Enables column resizing across all columns. Column-level `resizable` settings override this option.	`false`	No
`enableColumnSearch`	`boolean`	Whether to enable column-wise search functionality (search per individual column). Column-level search settings override this option.	`true`	No
`enableDownload`	`boolean`	Whether to enable the download functionality (export data as CSV).	`true`	No
`enableGlobalSearch`	`boolean`	Enables global search across all columns.	`true`	No
`enableRowSelection`	`boolean`	Enables the row selection column. Available in version `1.2.2` and above.	`true`	No
`enableRtl`	`boolean`	Renders the grid from right to left. Available in version `1.2.4` and above.	`false`	No
`enableSorting`	`boolean`	Enables sorting for all columns by default. Can be overridden by individual column-level `sortable` settings. Supported in version `1.2.2` and above.	`true`	No
`globalSearchPlaceholder`	`string`	Sets the placeholder text for the global search input field in the toolbar. Useful for localization or customization.	`"Search all columns…"`	No
`gridBgColor`	`string`	Sets a custom background color for the grid container. Supported in version `1.1.11` and above.	-	No
`gridClass`	`string`	Custom CSS class for the grid container.	-	No
`headerBgColor`	`string`	Sets a custom background color for the header row. Supported in version `1.1.11` and above.	-	No
`headerClass`	`string`	Custom CSS class for the header row.	-	No
`onDownloadComplete`	`function`	Callback function that enables post-download handling such as logging, notifications, or emailing downloaded files.	-	No
`rowClass`	`string`	Custom CSS class for each row in the grid.	-	No
`rowHeight`	`string` / `number`	Sets the height of each data row. Accepts a pixel value (e.g., `'200px'`) or a percentage of the table body height (e.g., `'25%'`).	-	No
`rowSelectColumnAlign`	`string` (`'left'` \| `'right'` \| `''`)	Controls the alignment of the selection column. Set to `'left'` or `'right'` to fix its position. Leave empty (`''`) to allow the column to scroll with the rest of the table. Available in version `1.2.2` and above.	`'left'`	No
`showColumnMenu`	`boolean`	Controls the visibility of the column menu, which includes actions like toggling column visibility and enabling or disabling column editing. Available from version `1.2.3`.	`true`	No
`showFooter`	`boolean`	Controls the visibility of the grid footer, which includes summary rows and pagination.	`true`	No
`showNumberPagination`	`boolean`	Controls visibility of number-based pagination in the grid footer. Supported from version `1.2.1`.	`true`	No
`showPageInfo`	`boolean`	Controls visibility of page information (e.g. "1–10 of 50") in the grid footer. Supported from version `1.2.1`.	`true`	No
`showPageSizeSelector`	`boolean`	Controls visibility of the page size selector ("Rows per page") in the grid footer. Supported from version `1.2.1`.	`true`	No
`showResetButton`	`boolean`	Controls the visibility of the reset button in the toolbar, allowing users to clear all filters, sorting and search.	`false`	No
`showResetMenuItem`	`boolean`	Controls the visibility of the reset menu item in the toolbar menu, allowing users to clear all filters, sorting, and search. Available from version `1.2.3`.	`true`	No
`showSelectPagination`	`boolean`	Controls visibility of the page selection dropdown in the grid footer. Supported from version `1.2.1`.	`true`	No
`showToolbar`	`boolean`	Controls the visibility of the react data grid lite toolbar, which includes actions like search and reset.	`true`	No
`showToolbarMenu`	`boolean`	Controls the visibility of the toolbar menu, which includes actions like toggling column visibility and resetting the grid. Available from version `1.2.3`.	`true`	No
`virtualization`	`boolean`	Enables or disables virtualization. Overrides the automatic virtualization, which kicks in when rows > 25 or columns > 25. Available since version `1.2.4`.	No value set (automatic virtualization)	No

Example of `options` Object:

const options = {
  gridClass: 'custom-grid-class',
  headerClass: 'custom-header-class',
  rowClass: 'custom-row-class',
  enableColumnSearch: false,
  enableGlobalSearch: true,
  globalSearchPlaceholder:'try search...',
  showResetButton: false,
  enableCellEdit: true,
  rowHeight: '100px',
  enableColumnDrag: true,
  enableColumnResize: true,
  actionColumnAlign:'right',
  editButton: {
    event: (e, row) => { console.log('Edit row:', row); }
  },
  deleteButton: {
    event: (e, row) => { console.log('Delete row:', row); }
  },
  enableDownload: true,
  downloadFilename: 'data-grid-export.csv'
};

Example of options Object:

Have questions?

Example of `options` Object: