CODEWITHSUNDEEP
reactjstypescriptag-grid-react
Mike Cantor
Mike Cantor

Reputation: 185

Errors using ag-grid-react with typescript

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?

Upvotes: 6

Views: 4782

Answers (1)

Mike Cantor
Mike Cantor

Reputation: 185

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

Upvotes: 3

Related Questions