Material-ui: [Table] Can't another use a wrapped TableBody component with a different display name

[ffxsam]

I'm getting some strange behavior here:

const RoleEditor = (props) => {
  let roles;

  if (!props.user) {
    return null;
  }

  roles = props.user.roles;

  return <div style={styles.container}>
    <Table selectable={false}>
      <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
        <TableRow>
          <TableHeaderColumn>Organisation</TableHeaderColumn>

          {renderAvailableRoles()}
        </TableRow>
      </TableHeader>

      <RoleCheckboxGrid
        orgs={props.orgs}
        roles={availableRoles}
      />
    </Table>
  </div>
};

There's going to be quite a bit of business logic in rendering out the checkboxes, so I wanted to make it into a separate component:

export default RoleCheckboxGrid = (props) => {
  return <TableBody displayRowCheckbox={false}>
    <TableRow>
      <TableRowColumn>
        Hi
      </TableRowColumn>
    </TableRow>
  </TableBody>
}

But I don't see the table body on the page. And using the React dev tools extension for Chrome, I don't even see my RoleCheckboxGrid component! Am I doing something wrong?

[nathanmarks]

I vote we rewrite table before @ffxsam blows up the issue tracker :smile:

[ffxsam]

@nathanhere :laughing: Sorry! I'm using MUI on two major projects.. so I keep running into minor bumps.

[nathanmarks]

@ffxsam Oh don't be sorry. I'm glad you're finding all this stuff and reporting it!!!

PS. I feel your pain with the table, I have every single component wrapped...

[nathanmarks]

@ffxsam I'm not sure why you are getting this issue, I have everything wrapped and nested in different components without a problem. Can you setup a repo to reproduce?

[ffxsam]

Sure, here you go: https://github.com/ffxsam/table-issue

Set up & run:

1. Install Meteor if you don't already have it: curl https://install.meteor.com/ | sh
2. npm install
3. meteor

[dev357]

Had the same issue, i guess this is the problem(from table.js):

if (displayName === 'TableBody') {
  tBody = _this._createTableBody(child);
} else if (displayName === 'TableHeader') {
  tHead = _this._createTableHeader(child);
} else if (displayName === 'TableFooter') {
  tFoot = _this._createTableFooter(child);
}

Seems if you can make your component fake having a displayName of TableBody everything will render again.

[nathanmarks]

@dev357 @ffxsam The way I have things setup in my app is I have named my own component TableBody -- which is an abstraction rather than a table body designed for a specific component. I'm using a column definition object in combination with a results/rows array of objects to dynamically create my columns/rows.

I think that this issue (in terms of addressing the root cause) is going to have to wait until table gets a rework.

[dev357]

I ran into this issue because i was trying to use react-dnd to drag table rows around. The decorators seemed to change the displayname to "DragDropContext(TableBody)" and that doesnt work anymore.

[nathanmarks]

@dev357 As long as gaearon/react-dnd works with tables -- I'll make sure that we test it in the refactor.

[nathanmarks]

@ffxsam If you're satisfied with the response for now (keeping in mind that solving this is definitely something we'd like to change in a Table refactor), let's close this and I'm going to start an umbrella issue for a table refactor tonight.

[zachguo]

I ran into this issue after upgrading from 0.14 to 0.15.
It didn't work even though I hardcoded displayName. Is there any workaround?

[zachguo]

ok, a workaround is adding static muiName = 'TableBody';(ES6) or statics: { muiName: 'TableBody' }, to your wrapping component.

[aweary]

let's close this and I'm going to start an umbrella issue for a table refactor tonight.

@nathanmarks what's the status on this? Still seeing this same issue in the latest release, though setting muiName like @zachguo seems to resolve it for now. It should, at the very least, not fail silently. I doubt anyone would ever expect a component to not render because it doesn't have an internally used static property attached.

[nathanmarks]

@Aweary There is a table refactor on the next branch which is currently under development.

[kelsonic]

@zachguo I get a warning when I implemented your workaround:

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <tr>.
See AppDetails > TableRow > TableRow > tr > TableRowColumn > TableRow > tr.

Not sure if this issue is resolved but figured I'd ask.

My table looks like this (each component is a wrapper for the material-ui component as we have a lot of business logic we need to put in each component):

      <Table>
        <TableHeader>
          <TableRow>
            <TableHeaderColumn>ID</TableHeaderColumn>
            <TableHeaderColumn>Name</TableHeaderColumn>
            <TableHeaderColumn>Status</TableHeaderColumn>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableRowColumn>1</TableRowColumn>
            <TableRowColumn>John Smith</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>2</TableRowColumn>
            <TableRowColumn>Randal White</TableRowColumn>
            <TableRowColumn>Unemployed</TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>3</TableRowColumn>
            <TableRowColumn>Stephanie Sanders</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>4</TableRowColumn>
            <TableRowColumn>Steve Brown</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
        </TableBody>
      </Table>