React Data Grid Lite
v1.2.4

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
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
cellStyle object Applies custom styles to the <td> cell. Useful for matching headerStyle-defined widths or aligning text consistently. Use with caution: this affects only row cells. Setting layout-affecting properties (e.g. width) differently from headers may cause misalignment. Supported in version 1.1.10 and above. - No
class string Custom CSS class applied to each data cell in the column. - 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
draggable boolean Enables or disables dragging for an individual column. Overrides the global enableColumnDrag setting. Fixed columns can be reordered among themselves, and non-fixed columns among their own group. - No
editable boolean Enables or disables cell editing for a specific column. Overrides the enableCellEdit setting. 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. - No
editor string / object / Array Enables inline editing for the column. Can be a shorthand string ('text', 'number') or an object ('select') with detailed configuration. When used with concatColumns, this can be an array matching the column parts.

💡 Default behavior: If editor is not provided but editable: true is set (or enableCellEdit is enabled globally), the field defaults to a 'text' input editor.		 'text' (if editable is true) No
enableSearch boolean Enables or disables the search textbox for a specific column. Overrides the enableColumnSearch setting. - 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. false 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
headerStyle object Applies custom styles to the <th> (header) cell. Useful for matching cellStyle-defined widths or aligning text consistently. Supported in version 1.1.10 and above. - No
hidden boolean Whether the column should be hidden. false No
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
order number Specifies the display order of the column (integer value), starting from 1. - 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. - No
resizable boolean Enables or disables resizing for a specific column. This setting overrides the enableColumnResize option. - No
searchPlaceholder string Sets the placeholder text for individual column search input fields. Useful for customization or localization. "Search column…" No
sortable boolean Enables or disables sorting for an individual column. Overrides the global enableSorting setting. Supported in version 1.2.2 and above. - 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

Example of columns Array:

const columns = [
  {
    name: 'ID',
    formatting: { type: 'number', format: '0,0' },
    cellStyle: { textAlign: 'center', width: '70px' },
    headerStyle: { width: '70px' }
  },
  {
    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>
  )
}

Editor Shorthand Values

Value Description
'text' Basic text input (default)
'number' Numeric input

Full Editor Object Format

Property Type Description
type 'text' | 'number' | 'select' Input type
values Array<string> | Array<{ label: string, value: any }> Required for 'select' type

✅ Example: Simple Column with a Select Editor

{
  name: 'Role',
  editable: true,
  editor: {
    type: 'select',
    values: [
      { label: 'Admin', value: 'admin' },
      { label: 'Editor', value: 'editor' },
      { label: 'Viewer', value: 'viewer' }
    ]
  }
}

📝 Alternate (shorthand) version

{
  name: 'firstName',
  editable: true,
  editor: 'text'
}

Usage with concatColumns

Field Type Description
editor Array<string | object> Should match the order and count of fields in the columns array of concatColumns. Each item can be a string shorthand or full config.

Example:

{
  alias: 'Department-Title',
  name: 'Department',
  editable: true,
  concatColumns: {
    columns: ['Department', 'Title'],
    separator: ' - ',
    editor: [
      {
        type: 'select',
        values: [
          { label: 'Engineering', value: 'engineering' },
          { label: 'Marketing', value: 'marketing' },
          { label: 'HR', value: 'hr' }
        ]
      },
      {
        type: 'select',
        values: [
          { label: 'Manager', value: 'manager' },
          { label: 'Lead', value: 'lead' },
          { label: 'Intern', value: 'intern' }
        ]
      }
    ]
  }
}

Have questions?

Contact on GitHub.

Previous
🧮 DataGrid
Next
⚙️ Options
NPM Badge