Material-table: Search fails with error: Cannot read property 'tableData' of undefined

[benjaminvdb]

Describe the bug
Searching fails for the provided data (see below) and component configuration with the following error:

Uncaught TypeError: Cannot read property 'tableData' of undefined
    at markForTreeRemove (:3000/static/js/1.chunk.js:217284)
    at :3000/static/js/1.chunk.js:217308
    at Array.forEach (<anonymous>)
    at DataManager.treefyData (:3000/static/js/1.chunk.js:217298)
    at DataManager.getRenderState (:3000/static/js/1.chunk.js:216646)
    at MaterialTable.<anonymous> (:3000/static/js/1.chunk.js:215903)
    at later (:3000/static/js/1.chunk.js:201658)

The page doesn't crash, but the following is shown in the console and the search results are incorrect.

To Reproduce
Enter any search term in the upper right search box using the code and data provided below.

Required data: tree.json

import React, { forwardRef } from "react";
import data from "./tree.json";
import MaterialTable from "material-table";
import Search from "@material-ui/icons/Search";
import ViewColumn from "@material-ui/icons/ViewColumn";
import SaveAlt from "@material-ui/icons/SaveAlt";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import FirstPage from "@material-ui/icons/FirstPage";
import LastPage from "@material-ui/icons/LastPage";
import Clear from "@material-ui/icons/Clear";
import Check from "@material-ui/icons/Check";
import FilterList from "@material-ui/icons/FilterList";
import Remove from "@material-ui/icons/Remove";
import AddBox from "@material-ui/icons/AddBox";
import DeleteOutline from "@material-ui/icons/DeleteOutline";
import Edit from "@material-ui/icons/Edit";
import ArrowUpward from "@material-ui/icons/ArrowUpward";

const columns = [
  { title: "Diagnose", field: "value", sorting: true, defaultSort: "asc" }
  // { title: "id", field: "id" }
];

const icons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => (
    <ChevronRight {...props} ref={ref} />
  )),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => (
    <ChevronLeft {...props} ref={ref} />
  )),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};

const TreeTable = ({ onChange, ...rest }) => {
  const isLeaf = rowData =>
    data.find(el => el.parentId === rowData.id) === undefined;

  function onlyUnique(value, index, self) {
    return self.indexOf(value) === index;
  }

  return (
    <MaterialTable
      {...rest}
      title="DSM-V"
      data={data}
      columns={columns}
      icons={icons}
      parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
      options={{
        selection: true,
        paging: false,
        sorting: true,
        search: true,
        showSelectAllCheckbox: false,
        selectionProps: rowData => ({
          disabled: !isLeaf(rowData),
          color: "primary"
        })
      }}
      onSelectionChange={rows =>
        onChange(
          rows.filter(onlyUnique).map(({ id, value }) => ({ id, value }))
        )
      }
    />
  );
};

export default TreeTable;

Expected behavior
I would expect the component to filter out the rows that do not match the search term.

Desktop (please complete the following information):

• OS: macOS 10.14.6
• Browser: Chrome
• Version: 76.0.3809.100 (Official Build) (64-bit)

Additional context
I've done a tiny bit of debugging on the failing markForTreeRemove function.

var markForTreeRemove = function markForTreeRemove(rowData) {
        var pointer = _this6.treefiedData;
        rowData.tableData.path.forEach(function (pathPart) {
          if (pointer.tableData && pointer.tableData.childRows) {
            pointer = pointer.tableData.childRows;
          }

          pointer = pointer[pathPart];
        });
        pointer.tableData.markedForTreeRemove = true;
      };

At some point in looping over rowData.tableData.path it encounters a pointer which is not an array, but an object, and tries to select index pathPart (which is not possible). This is one example:

pointer = {
    id: 791
    parentId: 182
    tableData: {
        id: 68,
        childRows: null,
        markedForTreeRemove: false,
        path: Array(3), 
        isTreeExpanded: false
    }
    value: "Andere gespecificeerde slaap-waakstoornis"
    __proto__: Object
}

with pathPart === 1 the following statement raises the error:

pointer = pointer[pathPart];

[benjaminvdb]

I've done my best to be as specific and detailed as possible and I've also done some basic debugging, hoping that someone could help out.

Is there anyone who could work with me to find a solution?

[benjaminvdb]

SOLUTION: I've ordered the data depth-first instead of by value, i.e., each parent node is followed by its children.

Here's an updated tree.json that does work.

This issue can be assigned the Bug label.

[benjaminvdb]

Bump.

Is it a known issue that the ordering of elements in the data prop affect the behavior of material-table?

[DanielSanchez94]

I have the same error! I not understand why!

[DanielSanchez94]

SOLUTION: I reset the data of table and search again.

[oze4]

/mtc::resolved

[oze4]

For those that are interested, I have been maintaining a fork of this repo - this issue has been resolved within that fork. You can check out a live demo here (fix included)

You can read more here about why I created, and am maintaining, a fork of this repo.

You can view the GitHub repo here

@material-table/core - if you can import it from 'material-table' you can import it from '@material-table/core'...

We are not making drastic changes to the codebase. We are keeping things as close to "as-is" as possible - our main goal is to resolve open issues/PR's in the material-table repo, but within the fork (it doen't appear this repo is actively maintained and I got sick of spending my time writing PR's for this repo just for them to go unnoticed)..

[muellma-items]

Any chance of this particular fix being merged into material-table? The repo @material-table/core hasn't been updated in 3 months either.
@oze4