I am using AG Grid React version 28.
I am trying to build a reusable AG Grid component so I want to pass dynamic columns and data into my reusable AG Grid component. Everything works fine if I put all my data inside the same component i.e. rowData and columnDefs live in the same component. However, when I abstract out my data, for both rowData and columnDefs, and pass it in as props into my ag grid, I get errors. How can I abstract out the data and columns and pass it in as props?
The error I get for rowData is: rowData.map is not a function react agrgrid
.
For columns I get: TS2322: Type '{ columns: ({ maxWidth: number; flex: number; cellRenderer: () => Element; field?: undefined; minWidth?: undefined; } | { field: string; minWidth: number; flex: number; maxWidth?: undefined; cellRenderer?: undefined; } | { ...; })[]; data: { ...; }[]; }' is not assignable to type 'IntrinsicAttributes & []'. Property 'columns' does not exist on type 'IntrinsicAttributes & []'.
function DataGridResults(columns: ColDef<any>[], data: any) {
const [gridApi, setGridApi] = useState<GridApi | null>(null)
const [gridColumnApi, setGridColumnApi] = useState<ColumnApi | null>(null)
const [colDefs, setColDefs] = useState<ColDef<any>[] | null>(null)
const [rowData, setRowData] = useState(null)
const onGridReady = (params: GridReadyEvent): void => {
setGridApi(params.api)
setGridColumnApi(params.columnApi)
setColDefs(columns)
setRowData(data)
}
return (
<AgGridReact
domLayout="autoHeight"
rowData={rowData}
columnDefs={colDefs}
onGridReady={onGridReady}
/>
)
}
export default DataGridResults
const data = () => [
{
fileName: 'Bus.pdf',
dateAdded: '07 Mar 24 09:31:28',
validated: '',
},
]
function PreExistingDocumentation() {
return (
<DataGridResults columns={colDefPreExistingDocuments} data={data} />
)
}
export default PreExistingDocumentation
export const colDefPreExistingDocuments = [
{ maxWidth: 25, flex: 1, cellRenderer: DownloadRenderer },
{ field: 'fileName', minWidth: 120, flex: 1 },
{ field: 'dateAdded', minWidth: 150, flex: 1 },
{
field: 'validated',
minWidth: 20,
flex: 1,
cellRenderer: ValidatedRenderer,
},
]