I am new to both React and TypeScript and am trying to make a simple React Data Grid based on their simple example here: https://adazzle.github.io/react-data-grid/docs/quick-start
Here is what I have:
import React from 'react';
import ReactDataGrid from 'react-data-grid';
const columns = [
{ key: "id", name: "ID", editable: true },
{ key: "title", name: "Title", editable: true },
{ key: "complete", name: "Complete", editable: true }
];
const rows = [
{ id: 0, title: "Task 1", complete: 20 },
{ id: 1, title: "Task 2", complete: 40 },
{ id: 2, title: "Task 3", complete: 60 }
];
export const DataTable: React.FC = () => {
return (
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={rows.length}
/>
);
};
However I keep getting an error on the link where it sets the columns in the table. It says:
(JSX attribute) DataGridProps<{ [x: string]: {}; }, React.ReactText>.columns: (ColumnValue<{
[x: string]: {};
}, unknown, string> | ColumnValue<{
[x: string]: {};
}, unknown, number>)[]
Type '{ key: string; name: string; editable: boolean; }[]' is not assignable to type '(ColumnValue<{ id: number; title: string; complete: number; }, unknown, "id"> | ColumnValue<{ id: number; title: string; complete: number; }, unknown, "title"> | ColumnValue<{ id: number; title: string; complete: number; }, unknown, "complete">)[]'.
Type '{ key: string; name: string; editable: boolean; }' is not assignable to type 'ColumnValue<{ id: number; title: string; complete: number; }, unknown, "id"> | ColumnValue<{ id: number; title: string; complete: number; }, unknown, "title"> | ColumnValue<{ id: number; title: string; complete: number; }, unknown, "complete">'.
Type '{ key: string; name: string; editable: boolean; }' is not assignable to type 'ColumnValue<{ id: number; title: string; complete: number; }, unknown, "complete">'.
Types of property 'key' are incompatible.
Type 'string' is not assignable to type '"complete"'.ts(2322)
DataGrid.d.ts(6, 5): The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & DataGridProps<{ id: number; title: string; complete: number; }, "id" | "title" | "complete"> & { ref?: ((instance: DataGridHandle | null) => void) | RefObject<...> | null | undefined; }'
Can anyone help me parse this error? Do I need to explicitly set the type of the columns to the type that the react data grid is expecting?
I installed the react-data-grid types and the error went away:
npm install --save @types/react-data-grid