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. Supported in v1.1.1 and above.	`''` (empty string)	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
`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. Supported in version `1.1.5` and above.	`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. Supported in version `1.1.4` and above.	`false`	No
`enableColumnResize`	`boolean`	Enables column resizing across all columns. Column-level `resizable` settings override this option. Supported in version `1.1.0` and above.	`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
`globalSearchPlaceholder`	`string`	Sets the placeholder text for the global search input field in the toolbar. Useful for localization or customization. Supported in version `1.1.6` and above.	`"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%'`). Supported in version `1.1.6` and above.	-	No
`showFooter`	`boolean`	Controls the visibility of the grid footer, which includes summary rows and pagination. Supported in version `1.1.6` and above.	`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 a reset button in the toolbar, allowing users to clear all filters and search. Supported in version `1.1.6` and above.	`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. Supported in version `1.1.6` and above.	`true`	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: