Mui-datatables: It doesn't work with react typescript

[normanaranez]

I tried to import the mui-datables in react that typescript

Expected Behavior

the file should be imported in the react project

Current Behavior

cant find the file event the import syntax was right

Steps to Reproduce (for bugs)

1.
2.
3.
4.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | |
| MUI-datatables | 2.0.0-beta-38 |
| React | |
| browser | |
| etc | |

[ideoclickVanessa]

I'm currently using 2.0.0-beta-38 in my Typescript app using the following import:
import MUIDataTable, { MUIDataTableColumn, MUIDataTableOptions } from "mui-datatables";

That said, there does seem to be a console.log() statement left in the source code:

}, {
    key: "isRowSelected",
    value: function value(e) {
      var t = this.props.selectedRows;
      return !(!t.lookup || !t.lookup[e]);
    }
  }, {
    key: "render",
    value: function value() {
      var n = this,
          e = this.props,
          t = e.classes,
          r = e.columns,
          l = e.options,
          a = this.buildRows();
      return console.log(l), React.createElement(TableBody, null, a ? a.map(function (e, a) {
        var t = e.data,
            o = e.dataIndex;
        return React.createElement(MUIDataTableBodyRow$1, {
          options: l,
          rowSelected: !!l.selectableRows && n.isRowSelected(o),
          onClick: l.onRowClick ? l.onRowClick.bind(null, t, {
            rowIndex: a,
            dataIndex: o
          }) : null,
          id: "MUIDataTableBodyRow-" + o,
          key: a
        }, !!l.selectableRows && React.createElement(MUIDataTableSelectCell$1, {
          onChange: n.handleRowSelect.bind(null, {
            index: n.getRowIndex(a),
            dataIndex: o
          }),
          fixedHeader: l.fixedHeader,
          checked: n.isRowSelected(o)
        }), t.map(function (e, t) {
          return "true" === r[t].display && React.createElement(MUIDataTableBodyCell$1, {
            dataIndex: o,

[saidattax]

Yes, there is a console.log in the source code. I noticed it too!

I am currently using this library with Typescript. I guess you missed to define your typings file.

[gregnb]

It was removed in -39

[ideoclickVanessa]

Oh yes, I forgot to mention that I'm also using the typings from this gist: https://gist.github.com/nidheeshdas/ebdb07d147d7ff89e09bb44fe822ba31

Maybe they could be included with the project by default?

[Favna]

@ideoclickVanessa If you can confirm that those types from the gist work properly could you submit them to DefinitelyTyped in lieu of them being added to the project by default?

I'd do it myself but I have no React in TypeScript environment set up as of yet as the application I work on will be transferring only in the coming future.

Edit: scratch all that, I'm writing the definitions right now and providing the necessary typing tests for the library. I'll throw a new comment in here once the PR to DefinitelyTyped has been made

[Favna]

Update: Type definitions have been submitted to DefinitelyTyped.

Hopefully they will be merged there soon, after which we can use npm install @types/mui-datatables

PR: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/32591

[Favna]

Another update: the aforementioned PR has been merged. Typings should soon be available through npm install @types/mui-datatables. I'd say this issue can be closed.

Writing at 07:00 (AM) UTC January 30th - I just checked NPM and the types have not yet been auto published. Not sure how quick DefinitelyTyped's publishing turnover is.

[deskoh]

The import for mui-datatables does not work for [email protected] and [email protected]. It returned undefined. Works well if file is renamed from .tsx to .js.

import * as React from 'react';
import MUIDataTable from 'mui-datatables';

const columns = ['Name', 'Company', 'City', 'State'];

const data = [
 ['Joe James', 'Test Corp', 'Yonkers', 'NY'],
 ['John Walsh', 'Test Corp', 'Hartford', 'CT'],
 ['Bob Herm', 'Test Corp', 'Tampa', 'FL'],
 ['James Houston', 'Test Corp', 'Dallas', 'TX'],
];

// undefined for .tsx
console.log(MUIDataTable);

const TestTable = () => (
  <MUIDataTable
    title={'Employee List'}
    data={data}
    columns={columns}
  />

);

export default TestTable;

[Favna]

@deskoh please be sure to add @types/mui-datatables (yarn add -D @types/mui-datatables)

Furthermore if you want actual support also provide the following:

• your tsconfig.json
• your package.json (specifically the dependencies and devDependencies fields)

Lastly, there is no real point in console logging the import. While I do not know how exactly this lib in structured in terms of when it works and when it doesn't, you should rather judge it by the proper usage. That is all to say, when you import your TestTable component elsewhere, does it work or not?

[deskoh]

Same issue. Reproduced problem at repo here: https://github.com/deskoh/mui-datatables-ts

[Favna]

Send a new PR to DefinitelyTyped to update for 2.0.0-beta-54: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/32998

---

@deskoh I can't make any promises because I run a busy schedule but if I get some time I'll check your code and see if I can figure it out.

[deskoh]

@Favna Found the fix. tsconfig.json requires esModuleInterop to be set to true for import of mui-datatables to work.

{
  "compilerOptions": {
    ...
    "esModuleInterop": true
  },
  ...
}

More details on the esModuleInterop flag can be found here.

[kieranbop]

Even with esModuleInterop set to true and both packages
"@types/mui-datatables": "^2.1.2" && "mui-datatables": "^2.4.0" I cannot utilise any of the options as they are not assignable.

[Favna]

@kieranbop please share code snippets and exact errors, or publish the code on github / gist and share links. We can’t help otherwise.

[kieranbop]

I cleared my cache and did a full re-install and it is compiling again. I'd recommend this is now closed.