Documentation – 📦 API Reference
📊 Columns
The columns prop defines the layout and behavior of each column in the DataGrid. It is an array of column objects, where each object represents a column's configuration.
| Field | Type | Description | Default Value | Required |
|---|---|---|---|---|
name |
String |
The display name of the column header. It also serves as the key or identifier for accessing the corresponding data in each row. This value must be unique. | - | Yes |
alias |
String |
Provides an alternative name or alias for the column key. This alias can be used in column headers and other UI elements to make the grid more intuitive. | - | No |
width |
Number / String |
The width of the column. Can be a fixed pixel value (e.g., 100px) or a percentage (e.g., '20%'). Default value is calculated dynamically. |
- | No |
formatting |
Object |
Formatting settings for the column. Includes the type (e.g., currency, date) and format (the format string, such as $0,0.00). |
- | No |
enableSearch |
Boolean |
Enables or disables the search textbox for a specific column. Overrides the enableGlobalSearch setting. Renamed from searchEnable in v1.1.2 and above. |
undefined |
No |
hidden |
Boolean |
Whether the column should be hidden. | false | No |
concatColumns |
Object |
Specifies columns to concatenate into this column. It includes: columns (array of column keys to concatenate) and separator (the separator string). |
- | No |
fixed |
Boolean |
Specifies whether the column should be fixed. When enabled, the column will remain aligned to the left side of the grid based on its position in the column configuration. Supported in version 1.1.0 and above. |
false | No |
class |
String |
Custom CSS class applied to each data cell in the column. Supported in version 1.1.0 and above. |
- | No |
resizable |
Boolean |
Enables or disables resizing for a specific column. This setting overrides the enableColumnResize option. Supported in version 1.1.0 and above. |
undefined |
No |
render |
function(formattedRow, baseRow) => React.ReactNode |
Custom render function for the column. Receives formattedRow (the transformed row data after formatting and concatenation) and baseRow (the original, unformatted row data). Should return a React node to be rendered in the cell. Available in version 1.1.3 and above. |
- | No |
Example of columns Array:
const columns = [
{
name: 'ID',
width: 50,
formatting: { type: 'number', format: '0,0' },
},
{
name: 'Name',
alias: 'Full Name',
width: '30%',
},
{
name: 'DOB',
alias: 'Birth Date',
formatting: { type: 'Date', format: 'dd MMM yyyy'}
},
{
name: 'status',
alias: 'Status',
render: (formattedRow, baseRow) =>
<span className={`status-${formattedRow.status}`}>{formattedRow.status}</span>
},
{
name: 'row-identifier',
hidden: true
}
];
🔍 Render Function Signature
render: (formattedRow: object, baseRow: object) => React.ReactNode
| Parameter | Type | Description |
|---|---|---|
formattedRow |
object |
the transformed row data after formatting and concatenation |
baseRow |
object |
the original, unformatted row data |
Use Case Examples for Render Function
✅ Custom Cell Rendering
const columns = [
{
name: 'name',
alias: 'Full Name',
render: (row) => <strong>{row.name}</strong>
},
{
name: 'email',
alias: 'Email',
render: (formattedRow) => (
<a href={`mailto:${formattedRow.email}`} style={{ color: blue }}>
{formattedRow.email}
</a>
)
},
{
name: 'status',
alias: 'Active',
formatting: { type: 'boolean' },
render: (formattedRow, baseRow) => (
<span
style={{
padding: '4px 8px',
borderRadius: '12px',
backgroundColor: baseRow.status === 'true' ? `#d4edda` : `#f8d7da`,
color: baseRow.status === 'true' ? `#155724` : `#721c24`
}}
>
{formattedRow.status}
</span>
)
}
];
const data = [
{ name: 'Alice Johnson', email: 'alice@example.com', status: 'true' },
{ name: 'Bob Smith', email: 'bob@example.com', status: 'false' }
];
const App = () => (
<DataGrid
columns={columns}
data={data}
pageSize={10}
/>
);
✅ Add Action Buttons in Column Cells
{
name: 'actions',
alias: 'Actions',
render: (row) => (
<button onClick={() => alert(`Edit ${row.name}`)}>Edit</button>
)
}