Material-table: typescript error in intrinsic types for columns

[tafelito]

setting columns field from a state variable throws a type error if is not declared in line

const [state, setState] = React.useState({
    columns: [
      { title: 'Name', field: 'name' },
      { title: 'Surname', field: 'surname' },
      { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
      {
        title: 'Birth Place',
        field: 'birthCity',
        lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
      },
    ],
    data: [
      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
      {
        name: 'Zerya Betül',
        surname: 'Baran',
        birthYear: 2017,
        birthCity: 34,
      },
    ],
  });

  return (
    <MaterialTable
      title="Disable Field Editable Preview"
      columns={state.columns}
      data={state.data}
      ....
   )

this throws this error

The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<MaterialTable<{ name: string; surname: string; birthYear: number; birthCity: number; }>> & Readonly<MaterialTableProps<{ name: string; surname: string; birthYear: number; birthCity: number; }>> & Readonly<...>'

If instead I do this

 <MaterialTable
      title="Disable Field Editable Preview"
      columns={[
        { title: 'Adı', field: 'name' },
        { title: 'Soyadı', field: 'surname' },
        { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
        {
          title: 'Doğum Yeri',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
      ]}
     />

this will not throw any error, and the types are correct

[baomastr]

also having ts error about IntrinsicAttributes in custom Cell component:

TS2322: Type '{ children: Element; value: string; rowData: Task; onChange: (newValue: any) => void; columnDef: EditCellColumnDef; }' is not assignable to type 'IntrinsicAttributes'.   Property 'children' does not exist on type 'IntrinsicAttributes'.

import React, {useState} from 'react';
import {ButtonBase, Tooltip} from '@material-ui/core';
import {EditComponentProps, MTableCell} from 'material-table';
import {Task} from '../../types/task';

export const TableCell: React.FC<EditComponentProps<Task>> = props => {
//...
  return (
    <>
      {isGroup ? (
// getting error here:
        <MTableCell {...props} />
      ) : (
        <>
// and here:
          <MTableCell {...props} value={''}>
            <ButtonBase>
              {}
              {value}
            </ButtonBase>
          </MTableCell>
        </>
      )}
    </>
  );

}

[jayarjo]

PRs are welcome and very much encouraged!

[DustinRobison]

I tested the above issue and it should be closed because it seems to work now without any errors. I updated the dev files to use hooks and see no issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[wes-r]

Just ran into the same problem, had to be explicit with my types:

import MaterialTable, { Column } from 'material-table'

type RowData = {foo: string; bar: number}

const data = [
  {foo: 'hello', bar: 5},
  {foo: 'world', bar: 33}
] as RowData[]

const columns = [
  {title: 'Foo', field: 'foo'},
  {title: 'bar', field: 'bar', type: 'numeric'}
] as Column<RowData>[]

return (
  <MaterialTable
    columns={columns}
    data={data}
    ....
)