Typescript/react/material-table - No errors and blank page

Question

i'm trying to implement the "material-table" library with typescript and react but the result is a blank page and no compiling errors.

Env config:

npm: 6.11.3
nodejs: 10.17.0
typescript: 3.7.2

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "typeRoots": ["node_modules/@types"],
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext", "esnext.intl", "es2017.intl", "es2018.intl"],
    "allowJs": false,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": true,
    "preserveConstEnums": true,
    "noImplicitAny": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

JSX

  return (
    <MaterialTable<RowInterface>
      title={intl.formatMessage({ id: 'table-title' })}
      columns={columns}
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      data={query =>
        getData().then(data => ({
          data,
          page: 1,
          totalCount: data.length
        }))
      }
    />
  );

Why did i specify <MaterialTable<RowInterface>? The library wants to know the row interface when i try to set the 'data' attribute as a function that gets the data from remote (https://material-table.com/#/docs/features/remote-data): export default class MaterialTable<RowData extends object> extends React.Component<MaterialTableProps<RowData>> {}

Current behaviour: No compiling errors, blank page!

Expected behaviour The app should be rendered and the table should get the data from remote properly.

Thank you all

put a debugger or breakpoint in your component and see if it stops in render method — Rikin, Dec 11 '19 at 16:15

score 0 · Answer 1 · answered Dec 27 '19 at 16:07

You are not returning the data in the promise, that is why it is blank. As seen the the example, the data is returned with the resolve, which you are not doing.

You have to wrap in in an additional promise and resolve with the correct data:

 data={query =>
      new Promise((resolve, reject) => {
        getData()
         .then(data => resolve(
            {
              data: result.data,
              page: result.page - 1,
              totalCount: result.total,
            })
      })
    }

Typescript/react/material-table - No errors and blank page

1 Answers1