4

I created SPA using react with these compnents: BrowserRouter, Route, Link, AppBar, Toolbar, Tabs, Tab, MaterialTable.

Everything works fine except, when I switch between the tabs (clicking on PAGE1, PAGE2 links) rapidly the browser hangs. This happens in both Chrome and Firefox. I am not using any state or hooks.

The codesandbox link: https://codesandbox.io/s/winter-pond-1zsn3?file=/public/index.html

App.js:

import React from "react";
import "./styles.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Header from "./Header";

export default function App() {
  return (
    <BrowserRouter>
      <Header />
      <Switch>
        <Route exact path="/Page1" component={Page1}></Route>
        <Route exact path="/Page2" component={Page2}></Route>
      </Switch>
    </BrowserRouter>
  );
}

Header.jsx

import React from "react";
import { Link } from "react-router-dom";
import { AppBar, Toolbar, Tabs, Tab } from "@material-ui/core";

const Header = () => {
  return (
    <AppBar position="static">
      <Toolbar>
        <Tabs>
          <Tab label="Page1" to="/Page1" component={Link} />
          <Tab label="Page2" to="/Page2" component={Link} />
        </Tabs>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

Page1.jsx

import React from "react";

const Page1 = () => {
  return <div>Page1</div>;
};

export default Page1;

Page2.jsx

import React from "react";
import MaterialTable from "material-table";

const taskColumns = [
  { title: "Task Name", field: "TaskName" },
  { title: "Task Description", field: "TaskDesc" }
];
const Page2 = () => {
  return <MaterialTable title="Task List" columns={taskColumns} data={[]} />;
};

export default Page2;
user22317
  • 59
  • 1
  • 5

2 Answers2

2

As discussed in this github issue thread, downgrade to ver. 1.68.0 will solve the problem.

yarn add material-table@1.68.0

Or

npm install material-table@1.68.0

DevLoverUmar
  • 11,809
  • 11
  • 68
  • 98
1

After pulling the MaterialTable source code and debugging. I found that the reducePercentsInCalc method was called recursively from renderHeader method. I think the code is trying to calculate the width of the header based on the cell content.

To avoid this calls, I set the width for the each column using width prop and that solved the issue.

user22317
  • 59
  • 1
  • 5
  • Hi, Even I am facing the same issue. Can you please include a sandbox link or a sample code as to how you set the width for the columns? – kz2014 Aug 29 '20 at 12:25
  • The workaround is not a suitable answer in most cases. I posted in https://gitter.im/material-table/Lobby to try and get the attention of the authors. – Cedric Druck Sep 02 '20 at 08:49
  • Confirm the workaround works for me. @kz2014 the sample code is just ``````. Where 100 can actually be any value. At least for me the columns fit automatically – Fogus Sep 21 '20 at 10:47
  • I've just found that the specific width will be applied if you use the fixed columns feature. In this case the table gets `style="table-layout: fixed"` and forces to use the columns width – Fogus Sep 22 '20 at 09:58