🖇️ Column Control

This example demonstrates advanced column configuration using the react-data-grid-lite component, with the first name and last name merged into a single Name field using concatColumns. It also includes fixed columns, selective visibility, and both action buttons.

✅ Key Features

• Combined Columns: firstname and lastname are joined into a Name column.
• Fixed Column: ID is pinned to the left.
• Resizable Column: UUID column can be resized.
• Selective Visibility: Most unused columns are hidden.
• Action Buttons: Edit and Delete actions are enabled.
• Custom Styling: Assigns a custom CSS class (customColumn) to the column for targeted styling via external stylesheets.
• Theming: Uses medi-glow theme.

🧩 Grid Component Code

import React from 'react';
import DataGrid from 'react-data-grid-lite';
import { useFetch } from '../data';

const options = {
  actionColumnAlign: 'right',
  editButton: { event: (e, row) => { alert('Edit Button clicked!'); console.log(row); }},
  deleteButton: { event: (e, row) => { alert('Delete Button clicked!'); console.log(row); }}
};

export default function Grid() {
  const users = useFetch("users");
  const columns = users?.length > 0 ? Object.keys(users[0])?.map((val) => {
    if (val.toLowerCase() === 'id')
      return { name: val, alias: 'ID', width: '100px', fixed: true };
    else if (val.toLowerCase() === 'uuid')
      return { name: val, alias: 'UUID', width: '400px', resizable: true };
    else if (['email', 'website', 'image'].includes(val.toLowerCase()))
      return { name: val, width: '200px', class:'customColumn' };
    else if (val.toLowerCase() === 'firstname')
      return { name: val, alias: 'Name', concatColumns: { columns: ['firstname', 'lastname'] }};
    else return { name: val, hidden: true };
  }) : [];

  return (
    <DataGrid columns={columns} data={users} pageSize={10} options={options} width="70vw"
        height="35vh" theme="medi-glow" />
  );
}