I am using ag-grid-react librray. I have defined a hook as follows:
import { useCallback, useEffect, useRef, useState } from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-charts-enterprise";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { GridReadyEvent } from "ag-grid-charts-enterprise";
import { RhRichGridColumn, IOlympicData } from "../models";
export default function useAgGrid() {
const gridRef = useRef<AgGridReact<IOlympicData[]>>(null);
const columnShadowString = useRef<string>(null);
const [rowData, setRowData] = useState<IOlympicData[]>();
const [columnDefs, setColumnDefs] = useState<RhRichGridColumn[]>([
{ field: "athlete", minWidth: 200, fieldTitle: "athlete" },
{ field: "age", fieldTitle: "age" },
{ field: "country", minWidth: 200, fieldTitle: "country" },
{ field: "year", fieldTitle: "year" },
{ field: "date", minWidth: 180, fieldTitle: "date" },
{ field: "sport", minWidth: 200, fieldTitle: "sport" },
{ field: "gold", fieldTitle: "gold" },
{ field: "silver", fieldTitle: "silver" },
{ field: "bronze", fieldTitle: "bronze" },
{ field: "total", fieldTitle: "total" },
]);
const updateColumnDefs = (newCols: RhRichGridColumn[]) => {
setColumnDefs(newCols);
};
const getColumnShadow = () => {
const columnsShadow = JSON.parse(columnShadowString.current!);
if (!columnsShadow || !Array.isArray(columnsShadow)) return;
const currentColumns = columnDefs;
const result = columnsShadow.map((c) => {
const currentCol = currentColumns.find((cs) => cs.field === c.field);
if (!currentCol) return c;
return Object.assign(currentCol, c);
});
return result as RhRichGridColumn[];
};
const setColumnShadow = () => {
(columnShadowString.current as string) = JSON.stringify(
columnDefs.map((c) => {
return {
field: c.field,
suppressState: !!c.suppressState,
hide: !!c.hide,
width: c.width || null,
};
})
);
};
const clear = () => {
setColumnDefs(getColumnShadow()!);
};
const onGridReady = useCallback((params: GridReadyEvent) => {
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data: IOlympicData[]) => setRowData(data));
}, []);
useEffect(() => {
setColumnShadow();
}, []);
return {
clear,
onGridReady,
setColumnShadow,
getColumnShadow,
updateColumnDefs,
gridRef,
rowData,
columnDefs,
setRowData,
};
}
And my Model for component is defined as:
export interface IOlympicData {
athlete: string;
age: number;
country: string;
year: number;
date: string;
sport: string;
gold: number;
silver: number;
bronze: number;
total: number;
}
export interface RhRichGridColumnBase {
field: string;
}
export interface RhRichGridColumnState extends RhRichGridColumnBase {
hide?: boolean | null;
}
export interface RhRichGridColumn extends RhRichGridColumnState {
fieldTitle: string;
resizable?: boolean;
sortable?: boolean;
rowDragable?: boolean;
pinned?: string;
formatterName?: any;
width?: number;
minWidth?: number;
maxWidth?: number;
footerCalc?: any;
footerCalcParams?: unknown;
cellRenderer?: unknown;
cellRendererParams?: unknown;
headerClass?: string;
cellClass?: string;
sort?: "asc" | "desc" | null;
suppressState?: boolean;
sortedBy?: string;
fieldTitleTooltip?: string;
checkboxSelection?: boolean;
}
I have also defined my models as follows:
Now, when i use my hook in main component as follows:
import { AgGridReact } from "ag-grid-react";
import "ag-grid-charts-enterprise";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import GridColumnManager from "./GridColumnManager";
import { gridDefaultOptions } from "./config/constants";
import { AG_GRID_LOCALE_FA } from "./config/ag-grid-fa";
import useAgGrid from "./hooks/useAgGrid";
const GridExample = () => {
const { gridRef, rowData, columnDefs, onGridReady, updateColumnDefs, clear } =
useAgGrid();
return (
<div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
<div className={"ag-theme-alpine"}>
<AgGridReact
ref={gridRef}
localeText={AG_GRID_LOCALE_FA}
rowData={rowData}
columnDefs={columnDefs}
rowSelection={"multiple"}
reactiveCustomComponents
onGridReady={onGridReady}
gridOptions={gridDefaultOptions.gridOptions}
/>
</div>
</div>
);
};
export default GridExample;
The following error of typescript is displayed for AgGridReact
:
No overload matches this call.
Overload 2 of 2, ‘(props: AgGridReactProps | AgReactUiProps, context: any): AgGridReact’, gave the following error.
Type ‘RhRichGridColumn[]’ is not assignable to type ‘(ColDef<any, any> | ColGroupDef)[]’.
Overload 2 of 2, ‘(props: AgGridReactProps | AgReactUiProps, context: any): AgGridReact’, gave the following error.
Type ‘(params: GridReadyEvent) => void’ is not assignable to type ‘(event: GridReadyEvent<any, any>) => void’.ts(2769)
gridOptions.d.ts(169, 5): The expected type comes from property ‘columnDefs’ which is declared here on type ‘IntrinsicAttributes & (IntrinsicClassAttributes<AgGridReact> & Readonly<AgGridReactProps | AgReactUiProps<…>>)’
How can solve it?