Can't set columns for react data grid. Gives non assignable type error

Question

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?

@HamedNavabian can you explain the why? What if I want this to be a wrapper component for the grid? — Seephor
That's a test. I read the document and saw a simple example with js. And also try different modes but I didn't get the error !!! — Hamed Navabian
@HamedNavabian i'm sorry, but that is not helpful. My understanding is that a functional component doesn't manage state. In the example above it is not managing state at all, so why doesn't it work? Could it be that ReactDataGrid itself manages state and can't be within a FunctionalComponent? — Seephor

Seephor Seephor · Accepted Answer · 2020-02-28T03:41:11

I installed the react-data-grid types and the error went away:

npm install --save @types/react-data-grid

Can't set columns for react data grid. Gives non assignable type error

1 Answers