Unable to use other Tr-inherited components

[igorsantos07]

I'm developing a table that would contain different content in some columns, depending on some features on the data line. I've created it already using pure HTML tables, and my approach is to have different classes for different item types, such as:

//based on http://stackoverflow.com/a/29876284/102960
const Types = { type1: Type1Line, type2: Type2Line }

class Page extends Component {
  render() {
    <table>
      {this.props.stuff.map(thing => {
        let ThingLine = Types[thing.type]
        return <ThingLine key={thing.id} thing={thing}/>
      })}
    </table>
  }
}

class Type1Line extends Component {
  render() {
    return <tr><td>{this.props.thing.name}</td></tr>
  }
}

class Type2Line extends Component {
  render() {
    return <tr><td>Special: {this.props.thing.name}</td></tr>
  }
}

This is an over simplification, just to understand the code structure, but there are several other rules to justify the use of different "TR types".

However, I tried to bring Reactable to this structure as we will also need filtering and paging, but... It does not work. Lines are only rendered if they're precisely Tr. Not even extending from Tr instead of render()ing Trs works.

Would it be hard to make the code more extensible, allowing for Tr sub-classing?

[glittershark]

It's... not trivial. See #196. (I'm gonna close this in favor of discussing over there)

[igorsantos07]

@glittershark indeed, this is actually a dup.
Sad it's hard, it does seem to be not trivial as you said.

I worked it around by using data wrappers and centralizing line markup in one place; if this helps anyone else that's facing the same issue, point them here:

const Types = { type1: Type1Line, type2: Type2Line }

class Page extends Component {
  render() {
    <Table>
      {this.props.stuff.map(thing => {
        let ThingLine = Types[thing.type](thing)
        return (
          <Tr key={thing.id}>
            <Td>{ThingLine.displayName()}</Td>
          </Tr>
      })}
    </Table>
  }
}

Class Line {
  constructor(thing) {
    this.thing = thing
  }
}

class Type1Line extends Line {
  displayName() {
    return this.thing.name
  }
}

class Type2Line extends Line {
  displayName() {
    return "Special: " + this.thing.name
  }
}

[igorsantos07]

Just a heads up, @glittershark: this issue have just arrived from the dead in my production build, thanks to UglifyJS function mangler.
To workaround it, Reactable's classes must be included in the mangle exception rules.

[igorsantos07]

Actually, even in development it's complaining. Digging in, I see the issue is with a Thead element... It's not present in the switch anymore (table.js around line 103). However, the interface is still rendering just fine.

[glittershark]

Last issue is fixed by #264, I just need to push out a version with that fix