Putting table rows in other components

[trshafer]

Hey @glittershark,

I'd like to have my table rows exist in a different file/component from the table component. Something like this:

var 
  reactable = require('reactable'),
  Table = reactable.Table, 
  Tr = reactable.Tr, 
  Td = reactable.Td;

RowComponent = React.createClass({
  render: function(){
    return (
      <Tr>
        <Td column="Name">{this.props.row.name}</Td>
      </Tr>
    );
  }
});

TableComponent = React.createClass({
  renderRow: function(row){
    var key = "row-"+row.id;
    return (<RowComponent key={key} row={row}/>);
  },
  renderRows: function(){
    this.state.rows.map(this.renderRow);
  },
  render: function(){
    return (<Table>{this.renderRows()}</Table>);
  }
});

However it doesn't render properly. Any thoughts? I've tried manually specifying columns, but that didn't make a difference. The closest I've gotten is it showing three blank rows.

Thanks!

[glittershark]

So, yeah, we should definitely allow this. The problem, at least with the Tr, is that the table parses through its children components and only pulls data from Trs - maybe we descend a level down for each component and check the type of that?

[trshafer]

Thanks for taking a look. If I remove the reactable elements and go with the standard <table>, <tr>, and <td> elements, then the html is correct, even if React thinks there are more virtual elements. I think it makes sense for reactable to try to be a drop in replacement for basic <table>, <tr>, and <td> elements. To achieve this, I think you're right. It's a reasonable assumption to go 1 level deeper to find the Tr when it's a custom component.

I see utility in #159 as well. When the <Td> is complex and you might want to render different components depending on the need. Say for example that you want the cells to be editable so clicking on one transforms that cell into a form that can update the data value. That would make sense to have different custom React components for a single <Td>.

Thanks for taking a look.

[alfredo-cp]

@growlsworth exactly, I'm rendering a table which will have different type of content (buttons, dropdowns, links, etc) and I was thinking into create a base cell component wich will ask what type of cell to render, and also will validate data, etc.

I solved it for now just passing the normal Tr and my custom component as its children.

<CPTr column="Due Date">
  <CPDueDate>{item.due_date}</CPDueDate>
</CPTr>

[trshafer]

This is proving to be more difficult than I would like. The issue is that I cannot get children of external sub components. Will require more investigation.

[hellogerard]

+1 for this. My table rows are pretty complex, and it makes sense to put them in their own Component.

Great component, BTW.

[aidanlister]

I'm trying to replicate an Angular UI table that looks like so: http://share.aidanlister.com/cjzX and finding it somewhat impossible in Reactable.

@growlsworth's renderRow looks like a really elegant way of handling it.

How far up the ladder you want to go in terms of declarative vs configuration is probably another discussion ... it would be cool to specify the renderer as part of the column definition perhaps?

      {
        key: 'tags',
        label: 'Tags',
        renderer: this.renderTagCell,
      },
      {
        key: 'ref',
        label: 'Ref'
      },

[jgarcia99]

So has this issue been solved? I also have a Row component with props in the td's nested in my Table component & I get the same console errors @alfredo-cp got.

[trshafer]

There's an implementation discussion happening at #166.

[jgarcia99]

@alfredo-cp what was your temporary resolution? Need some help

[alfredo-cp]

@jgarcia99 I posted above what my temp solution was. I ended up doing my own grid component.

[jgarcia99]

@alfredo-cp you think I should go that route I see yours was td instead

[alfredo-cp]

@jgarcia99 if your data is complex rather than a plain object with strings I'd say go for your own grid component.

[jgarcia99]

Mine is just an array of objects. @alfredo-cp