📝 Global & Column Search

This example demonstrates a basic setup of the react-data-grid-lite component with the following features:

• Global and column-specific search
• Row action buttons (Edit & Delete) with event handlers
• Column formatting (e.g. date formatting)
• Responsive grid size

The data is fetched from a public API using a custom React hook.

✅ Key Features

• Action Column: Edit and Delete buttons are aligned to the left side of the grid for better layout control.
• Date Formatting: The published field is formatted using dd-MMMM-yyyy.
• Theming: Uses blue-core theme.

🧩 Grid Component Example

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

const options = {
  enableColumnSearch: true,
  actionColumnAlign: 'left',
  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();
  const columns = users?.length > 0
    ? Object.keys(users[0])?.map((val) => {
        if (val.toLowerCase() === 'id')
          return { name: val, alias: 'ID', width: '100px' };
        else if (val.toLowerCase() === 'description')
          return { name: val, hidden: true };
        else if (val.toLowerCase() === 'published')
          return { name: val, formatting: { type: 'Date', format: 'dd-MMMM-yyyy' },
            width: '200px'
          };
        else if (val.toLowerCase() === 'genre')
          return { name: val, width: '150px' };
        else
          return { name: val, width: '200px' };
      })
    : [];

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

📡 useFetch() – Data Fetching Hook

This hook fetches 100 records from the fakerapi.it API. You can optionally pass an endpoint (books, users, etc.):

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;
};

📌 Notes

• You can switch the API endpoint (e.g. books, users, companies, etc.) as supported by fakerapi.it.
• The trackPromise utility is built into react-data-grid-lite.
  • It helps manage loading states during asynchronous operations like data fetching.
  • It integrates well with custom loading components or libraries like react-promise-tracker for showing spinners or loaders.