📊 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.

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

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

Full Editor Object Format

✅ 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

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' }
        ]
      }
    ]
  }
}