↔️ Pinned & Resizable Columns

This example showcases the react-data-grid-lite component with pinned columns, resizable columns, and column search disabled.

It builds on dynamic column mapping and highlights how to fix important columns (like ID and Title) to the left for usability.

✅ Key Features

• Pinned Columns: ID and Title stay visible during horizontal scroll.
• Column Resize: Columns can be resized using drag handles.
• Column Search Disabled: All column-specific search fields are hidden.
• Date Formatting: Applies dd-MMM-yyyy format to the published field.
• Hidden Columns: description is excluded from display.
• Dark Theme: Uses the dark-stack theme.

🧩 Grid Component Code

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

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

export default function Grid() {
  const users = useFetch();
  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() === 'title')
      return { name: val, fixed: true, width: '180px' };
    else if (val.toLowerCase() === 'description')
      return { name: val, hidden: true };
    else if (val.toLowerCase() === 'published')
      return { formatting: { type: 'Date', format: 'dd-MMM-yyyy' }, name: val };
    else return { name: val, width: '250px' };
  }) : [];

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

📡 Data Fetching: useFetch() Hook

import { useEffect, useState } from 'react';
import { trackPromise } from 'react-data-grid-lite';

export const useFetch = (api = 'books') => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const promise = fetch(`https://fakerapi.it/api/v2/${api}?_quantity=100`)
      .then(response => response.json())
      .then(response => { setData(response.data); });

    trackPromise(promise);
  }, []);

  return data;
};