Documentation – 📦 API Reference
⚙️ 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.
| Field | Type | Description | Default Value | Required |
|---|---|---|---|---|
gridClass |
String |
Custom CSS class for the grid container. | - | No |
headerClass |
String |
Custom CSS class for the header row. | - | No |
rowClass |
String |
Custom CSS class for each row in the grid. | - | No |
enableColumnSearch |
Boolean |
Whether to enable column-wise search functionality (search per individual column). | true | No |
enableGlobalSearch |
Boolean |
Enables global search across all columns. Column-level search settings override this option. | true | 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 |
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 |
enableDownload |
Boolean |
Whether to enable the download functionality (export data as CSV). | true | 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 |
onDownloadComplete |
Function |
Callback function that enables post-download handling such as logging, notifications, or emailing downloaded files. | - | 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 |
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 |
Example of options Object:
const options = {
gridClass: 'custom-grid-class',
headerClass: 'custom-header-class',
rowClass: 'custom-row-class',
enableColumnSearch: true,
enableGlobalSearch: true,
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'
};