95 lines
2.3 KiB
TypeScript
95 lines
2.3 KiB
TypeScript
|
// React Grid Logic
|
||
|
|
import { useEffect, useMemo, useState } from "react";
|
||
|
|
|
||
|
|
// Core CSS
|
||
|
|
import { AgGridReact } from "ag-grid-react";
|
||
|
|
|
||
|
|
// Theme
|
||
|
|
import type { ColDef, ValueFormatterParams } from "ag-grid-community";
|
||
|
|
import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
|
||
|
|
|
||
|
|
ModuleRegistry.registerModules([AllCommunityModule]);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 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,
|
||
|
|
},
|
||
|
|
{ field: "company" },
|
||
|
|
{ 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,
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// Container: Defines the grid's theme & dimensions.
|
||
|
|
return (
|
||
|
|
<div className='flex w-full flex-col justify-start gap-6'>
|
||
|
|
{/* The AG Grid component, with Row Data & Column Definition props */}
|
||
|
|
<AgGridReact
|
||
|
|
rowData={data}
|
||
|
|
loading={loading}
|
||
|
|
columnDefs={colDefs}
|
||
|
|
defaultColDef={defaultColDef}
|
||
|
|
pagination={true}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|