Uecko_ERP/modules/invoices/src/web/components/invoices-grid.tsx

// React Grid Logic
import { useEffect, useMemo, useState } from "react";

// Theme
import type { ColDef, ValueFormatterParams } from "ag-grid-community";
import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";

ModuleRegistry.registerModules([AllCommunityModule]);

// Core CSS
import { AgGridReact } from "ag-grid-react";

/**
 * Fetch example Json data
 * Not recommended for production use!
 */
export const useFetchJson = <T,>(url: string, limit?: number) => {
  const [data, setData] = useState<T[]>();
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);

      // Note error handling is omitted here for brevity
      const response = await fetch(url);
      const json = await response.json();
      const data = limit ? json.slice(0, limit) : json;
      setData(data);
      setLoading(false);
    };
    fetchData();
  }, [url, limit]);
  return { data, loading };
};

// Row Data Interface
interface IRow {
  mission: string;
  company: string;
  location: string;
  date: string;
  time: string;
  rocket: string;
  price: number;
  successful: boolean;
}

// Create new GridExample component
export const InvoicesGrid = () => {
  // Row Data: The data to be displayed.
  const { data, loading } = useFetchJson<IRow>(
    "https://www.ag-grid.com/example-assets/space-mission-data.json"
  );

  // Column Definitions: Defines & controls grid columns.
  const [colDefs] = useState<ColDef[]>([
    {
      field: "mission",
      filter: true,
      minWidth: 200,
    },
    { field: "company", filter: false },
    { field: "location" },
    { field: "date" },
    {
      field: "price",
      valueFormatter: (params: ValueFormatterParams) => {
        return `£${params.value.toLocaleString()}`;
      },
    },
    { field: "successful" },
    { field: "rocket" },
  ]);

  // Apply settings across all columns
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      filter: true,
      sortable: false,
      resizable: false,
    };
  }, []);

  // Container: Defines the grid's theme & dimensions.
  return (
    <div
      style={{ height: 1500 }}
      className='*:data-[slot=card]:shadow-xs @xl/main:grid-cols-2 @5xl/main:grid-cols-4 grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card lg:px-6'
    >
      <AgGridReact
        rowData={data}
        loading={loading}
        columnDefs={colDefs}
        defaultColDef={defaultColDef}
        pagination={true}
      />
    </div>
  );
};