100 lines
2.6 KiB
TypeScript
100 lines
2.6 KiB
TypeScript
// 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>
|
|
);
|
|
};
|