CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Keren Chandran
Keren Chandran

Reputation: 86

Material UI Table Slow

So I am using Material-UI for a large data table, and realized it is really slow to use. Before creating an issue in Github, I wanted to ask other users of the framework if there is a work around to increase performance.

This is the code that I have:

<Table
    height='500'
    fixedHeader
    selectable
    multiSelectable
  >
      <TableHeader
        displaySelectAll
        adjustForCheckbox
        enableSelectAll
      >
        <TableRow>
          <TableHeaderColumn tooltip="Status">Status</TableHeaderColumn>
          <TableHeaderColumn tooltip="Name">Name</TableHeaderColumn>
          <TableHeaderColumn tooltip="Email">Email</TableHeaderColumn>
          <TableHeaderColumn tooltip="Phone No.">Phone No.</TableHeaderColumn>
          <TableHeaderColumn tooltip="Company">Company</TableHeaderColumn>
          <TableHeaderColumn tooltip="Skills">Skills</TableHeaderColumn>
        </TableRow>
      </TableHeader>
      <TableBody
        displayRowCheckbox
      >
        {filteredApplicants.map((applicant, index) => (
          <TableRow key={index} selected={applicant.selected}>
            <TableRowColumn><Status status={applicant.status} updateStatus={updateApplicantStatus}/></TableRowColumn>
            <TableRowColumn>{applicant.name}</TableRowColumn>
            <TableRowColumn>{applicant.email}</TableRowColumn>
            <TableRowColumn>{applicant.phone}</TableRowColumn>
            <TableRowColumn>{applicant.company}</TableRowColumn>
            <TableRowColumn><Skills skills={applicant.skills}/></TableRowColumn>
          </TableRow>
          ))}
      </TableBody>
    </Table>

Upvotes: 6

Views: 14077

Answers (2)

Davi DeBarros
Davi DeBarros

Reputation: 368

I found that its almost impossible to use material-ui table when you have over ~500 rows, what i have done in the past is use react-virtualized and style the rows so that it looks similar to material-ui.

React-virtualized also gives you the ability to listen to row clicks, so you can use that to disable and enable the a Checkbox on the clicked row.

Upvotes: 3

Oscar Franco
Oscar Franco

Reputation: 6228

You might want to check your code for any unnecessary render calls and bad practices that can cause them: https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.dn0e5qhtw

As for the performance of the table rendering itself I never had a problem, but I always rendered paged data, if you try to render several thousand items it might cause problems, I found material-ui to have several shortcomings in performance and cases where you have to alter the default behaviour of the components, if you cannot find a problem then you can always render some custom component.

Upvotes: 5

Related Questions