CODEWITHSUNDEEP
reactjstypescriptag-gridag-grid-react
me.Me
me.Me

Reputation: 3

AGGrid custom CellRenderer with TypeScript in React

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>&nbsp;
      <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

Answers (1)

Shuheb
Shuheb

Reputation: 2362

Change cellRenderer={priorityCellRenderer} to cellRenderer="priorityCellRenderer":

<AgGridColumn field="priority" sortable={true} filter={true} cellRenderer="priorityCellRenderer" ></AgGridColumn>

Upvotes: 1

Related Questions