Material-table: Column typing for editable

Created on 21 Feb 2020  路  3Comments  路  Source: mbrn/material-table

Describe the bug
If I add in editable field to my column

const dataColumn = [
  {
    title: 'Unique ID',
    field: 'unique_id',
    editable: 'never',
  },
  {
    title: 'Type',
    field: 'row_type',
  },
]

and pass it to

<MaterialTable
        title="List"
        columns={dataColumn}
        data={records}
        // commented off
/>

It will throw this error..

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<MaterialTableProps<{ [x: string]: {}; } & { [x: string]: {}; }>>): MaterialTable<{ [x: string]: {}; } & { [x: string]: {}; }>', gave the following error.
    Type '({ title: string; field: string; editable: string; type: "string"; } | { title: string; field: string; editable: string; type?: undefined; })[]' is not assignable to type 'Column<{ [x: string]: {}; } & { [x: string]: {}; }>[]'.
      Type '{ title: string; field: string; editable: string; type: "string"; } | { title: string; field: string; editable: string; type?: undefined; }' is not assignable to type 'Column<{ [x: string]: {}; } & { [x: string]: {}; }>'.
        Type '{ title: string; field: string; editable: string; type: "string"; }' is not assignable to type 'Column<{ [x: string]: {}; } & { [x: string]: {}; }>'.
          Types of property 'editable' are incompatible.
            Type 'string' is not assignable to type '"never" | "always" | "onUpdate" | "onAdd" | ((columnDef: Column<{ [x: string]: {}; } & { [x: string]: {}; }>, rowData: { [x: string]: {}; } & { [x: string]: {}; }) => boolean) | undefined'.
  Overload 2 of 2, '(props: MaterialTableProps<{ [x: string]: {}; } & { [x: string]: {}; }>, context?: any): MaterialTable<{ [x: string]: {}; } & { [x: string]: {}; }>', gave the following error.     
    Type '({ title: string; field: string; editable: string; type: "string"; } | { title: string; field: string; editable: string; type?: undefined; })[]' is not assignable to type 'Column<{ [x: string]: {}; } & { [x: string]: {}; }>[]'.
      Type '{ title: string; field: string; editable: string; type: "string"; } | { title: string; field: string; editable: string; type?: undefined; }' is not assignable to type 'Column<{ [x: string]: {}; } & { [x: string]: {}; }>'.
        Type '{ title: string; field: string; editable: string; type: "string"; }' is not assignable to type 'Column<{ [x: string]: {}; } & { [x: string]: {}; }>'.
          Types of property 'editable' are incompatible.
            Type 'string' is not assignable to type '"never" | "always" | "onUpdate" | "onAdd" | ((columnDef: Column<{ [x: string]: {}; } & { [x: string]: {}; }>, rowData: { [x: string]: {}; } & { [x: string]: {}; }) => boolean) | undefined'.  TS2769

How can I use the type to pass into the editable field?

Using typescript 3.7.5

Thanks

Most helpful comment

@josephstgh Using primitive string never will be interpreted as string which is not the correct type.
To solve that cast it to const.

const dataColumn = [
  {
    title: 'Unique ID',
    field: 'unique_id',
    editable: 'never' as const,
  },
]

All 3 comments

@josephstgh Using primitive string never will be interpreted as string which is not the correct type.
To solve that cast it to const.

const dataColumn = [
  {
    title: 'Unique ID',
    field: 'unique_id',
    editable: 'never' as const,
  },
]

Alright, thanks! It works.

Thanks @Ebram-Tharwat that worked.

Was this page helpful?
0 / 5 - 0 ratings