Errors using ag-grid-react with typescript

Question

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?

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: stackblitz.com/edit/react-ts-n1znfd and see if you can identify any difference or issue. — remelkabir
– remelkabir, Commented Mar 20, 2019 at 5:00
Thanks @remelkabir! That helped - it turns out I just had ag-grid installed but needed ag-grid-community — Mike Cantor
– Mike Cantor, Commented Mar 20, 2019 at 16:49

Mike Cantor · Accepted Answer · 2019-03-20 16:50:57Z

3

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

answered Mar 20, 2019 at 16:50

Mike Cantor

1952 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Errors using ag-grid-react with typescript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related