Material-table: Enable deep field selectors in typescript

[MichalKalita]

Describe the bug
Column filed is have typescript error, definition not enable deep selections.

To Reproduce
Use this code with typescript

<MaterialTable
    columns={[{ title: "Text", field: "a.b" }]}
    data={[{ a: { b: "hello" } }]}
  />

It shows error

Error:(14, 34) TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Readonly<MaterialTableProps<{ a: { b: string; }; }>>): MaterialTable<{ a: { b: string; }; }>', gave the following error.
    Type 'string' is not assignable to type '"a" | undefined'.
  Overload 2 of 2, '(props: MaterialTableProps<{ a: { b: string; }; }>, context?: any): MaterialTable<{ a: { b: string; }; }>', gave the following error.
    Type 'string' is not assignable to type '"a" | undefined'.

Expected behavior
It should just works.

Versions

• typescript 3.6.3
• material-table 1.50.0

[MichalKalita]

Definition is

export interface Column<RowData extends object> {
  // ...
  field?: keyof RowData;
  // ...
}

It can be fixed with field?: keyof RowData | string

[jayarjo]

@MichalKalita could you submit a PR perhaps?

[patelnav]

What! This has worked this whole time?! I was halfway through writing an implementation for getting nested values and allowing filter/sorting.

For anyone attempting to use this in typescript today. The hack is to use "as any" in the column, for example:
{ title: "Name", field: "info.name" as any },

[MichalKalita]

@jayarjo I created very simple Pull request #1138, can you make a review ?

[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.

[heinhoang]

a hacking way:

const columns = [{ title: "Text", field: "a.b" }];
<MaterialTable
        columns={columns as any}
        ...
/>