{"action":"created","issue":{"url":"https://api.github.com/repos/glittershark/reactable/issues/156","labels_url":"https://api.github.com/repos/glittershark/reactable/issues/156/labels{/name}","comments_url":"https://api.github.com/repos/glittershark/reactable/issues/156/comments","events_url":"https://api.github.com/repos/glittershark/reactable/issues/156/events","html_url":"https://github.com/glittershark/reactable/issues/156","id":93664469,"number":156,"title":"Putting table rows in other components","user":{"login":"growlsworth","id":135461,"avatar_url":"https://avatars.githubusercontent.com/u/135461?v=3","gravatar_id":"","url":"https://api.github.com/users/growlsworth","html_url":"https://github.com/growlsworth","followers_url":"https://api.github.com/users/growlsworth/followers","following_url":"https://api.github.com/users/growlsworth/following{/other_user}","gists_url":"https://api.github.com/users/growlsworth/gists{/gist_id}","starred_url":"https://api.github.com/users/growlsworth/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/growlsworth/subscriptions","organizations_url":"https://api.github.com/users/growlsworth/orgs","repos_url":"https://api.github.com/users/growlsworth/repos","events_url":"https://api.github.com/users/growlsworth/events{/privacy}","received_events_url":"https://api.github.com/users/growlsworth/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-07-08T00:57:36Z","updated_at":"2015-08-23T02:40:37Z","closed_at":null,"body":"Hey @glittershark,\r\n\r\nI'd like to have my table rows exist in a different file/component from the table component. Something like this:\r\n\r\n```JavaScript\r\nvar \r\n  reactable = require('reactable'),\r\n  Table = reactable.Table, \r\n  Tr = reactable.Tr, \r\n  Td = reactable.Td;\r\n\r\nRowComponent = React.createClass({\r\n  render: function(){\r\n    return (\r\n      <Tr>\r\n        <Td column=\"Name\">{this.props.row.name}</Td>\r\n      </Tr>\r\n    );\r\n  }\r\n});\r\n\r\nTableComponent = React.createClass({\r\n  renderRow: function(row){\r\n    var key = \"row-\"+row.id;\r\n    return (<RowComponent key={key} row={row}/>);\r\n  },\r\n  renderRows: function(){\r\n    this.state.rows.map(this.renderRow);\r\n  },\r\n  render: function(){\r\n    return (<Table>{this.renderRows()}</Table>);\r\n  }\r\n});\r\n```\r\n\r\nHowever 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.\r\n\r\nThanks!"},"comment":{"url":"https://api.github.com/repos/glittershark/reactable/issues/comments/133776080","html_url":"https://github.com/glittershark/reactable/issues/156#issuecomment-133776080","issue_url":"https://api.github.com/repos/glittershark/reactable/issues/156","id":133776080,"user":{"login":"aidanlister","id":54896,"avatar_url":"https://avatars.githubusercontent.com/u/54896?v=3","gravatar_id":"","url":"https://api.github.com/users/aidanlister","html_url":"https://github.com/aidanlister","followers_url":"https://api.github.com/users/aidanlister/followers","following_url":"https://api.github.com/users/aidanlister/following{/other_user}","gists_url":"https://api.github.com/users/aidanlister/gists{/gist_id}","starred_url":"https://api.github.com/users/aidanlister/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aidanlister/subscriptions","organizations_url":"https://api.github.com/users/aidanlister/orgs","repos_url":"https://api.github.com/users/aidanlister/repos","events_url":"https://api.github.com/users/aidanlister/events{/privacy}","received_events_url":"https://api.github.com/users/aidanlister/received_events","type":"User","site_admin":false},"created_at":"2015-08-23T02:40:37Z","updated_at":"2015-08-23T02:40:37Z","body":"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.\r\n\r\n@growlsworth's renderRow looks like a really elegant way of handling it.\r\n\r\nHow 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?\r\n```\r\n      {\r\n        key: 'tags',\r\n        label: 'Tags',\r\n        renderer: this.renderTagCell,\r\n      },\r\n      {\r\n        key: 'ref',\r\n        label: 'Ref'\r\n      },\r\n```"}}