5

After quite a bit of googling I still can't find examples of using ag-grid-react with typescript, though the ag-grid-react project appears to have typescript typing.

In my react app, I've installed ag-grid-react: npm i --save ag-grid ag-grid-react react-dom-factories

This code looks fine as a jsx file, but if I try to use it as a typescript tsx file I get compiler errors:

const columnDefs =  [
    {headerName: 'Make', field: 'make'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price'}
];
const rowData = [
    {make: 'Toyota', model: 'Celica', price: 35000},
    {make: 'Ford', model: 'Mondeo', price: 32000},
    {make: 'Porsche', model: 'Boxter', price: 72000}
]

class App extends Component {
    constructor(props: any) {
        super(props);
    }

    render() {
        return (
            <div
                className="ag-theme-balham"
                style={{ height: '200px', width: '600px' }}
            >
                <AgGridReact
                    columnDefs={columnDefs}
                    rowData={rowData}>
                </AgGridReact>
            </div>
        );
    }
}

export default App;

Compile error on the AgGridReact tag 

Type '{ children: never[]; columnDefs: { headerName: string; field:
string; }[]; rowData: { make: string; model: string; price: number;
}[]; }' is not assignable to type 'IntrinsicAttributes &
IntrinsicClassAttributes<AgGridReact> & Readonly<AgGridReactProps> &
Readonly<{ children?: ReactNode; }>'.   Property 'columnDefs' does not
exist on type 'IntrinsicAttributes &
IntrinsicClassAttributes<AgGridReact> & Readonly<AgGridReactProps> &
Readonly<{ children?: ReactNode; }>'.ts(2322)

Any guidance anyone can offer?

Michal
  • 2,078
  • 23
  • 36
Mike Cantor
  • 155
  • 1
  • 10
  • idk, what's causing this issue for you. But i just created a dummy project with typescript and ag-grid and it's working. Refer to this: https://stackblitz.com/edit/react-ts-n1znfd and see if you can identify any difference or issue. – remelkabir Mar 20 '19 at 05:00
  • Thanks @remelkabir! That helped - it turns out I just had ag-grid installed but needed ag-grid-community – Mike Cantor Mar 20 '19 at 16:49

1 Answers1

3

False alarm: I just needed to npm install ag-grid-community, not ag-grid

Mike Cantor
  • 155
  • 1
  • 10