Reputation: 3
i'm using React with TypeScript and i'm trying to get a custom CellRenderer going in AGGrid. M code looks like this:
PriorityCellRenderer.tsx
import React from 'react';
function PriorityCellRenderer(props:any) {
const cellValue = props.valueFormatted ? props.valueFormatted : props.value;
const buttonClicked = () => {
alert(`${cellValue} medals won!`);
};
return (
<span>
<span>{cellValue}</span>
<button onClick={() => buttonClicked()}>Push For Total</button>
</span>
);
};
export default PriorityCellRenderer;
const frameworkComponents = {
'priorityCellRenderer': PriorityCellRenderer
};
<AgGridReact
frameworkComponents={frameworkComponents}
rowData={data}
pagination={true}
onRowClicked={onRowClicked}>
<AgGridColumn field="priority" sortable={true} filter={true} cellRenderer={priorityCellRenderer} ></AgGridColumn>
</AgGridReact>
When i hover over 'priorityCellRenderer' in my AgGridColumn it shows the following:
Cannot find name 'priorityCellRenderer'. Did you mean 'PriorityCellRenderer'?ts(2552) any
I know it is a TS casting type of thing but at this point in type i'm a little bit lost :D
Has someone a few Tips.
Thanks
Upvotes: 1
Views: 1715
Reputation: 2362
Change cellRenderer={priorityCellRenderer}
to cellRenderer="priorityCellRenderer"
:
<AgGridColumn field="priority" sortable={true} filter={true} cellRenderer="priorityCellRenderer" ></AgGridColumn>
Upvotes: 1