1

I have the following SSCCE in React using fixed-data-table:

const rows = [{name: 'Apple', desc: 'a popular fruit'},
              {name: 'Cat',   desc: 'a domesticated feline'}];


const App = React.createClass({

    render: function() {
        return (
            <Table id='foo'
            height={200}
            width={400}
            rowsCount={rows.length}
            rowHeight={26}
            headerHeight={50}>
                <Column
                    width={0}
                    flexGrow={2}
                    cell={props=>(<Cell>{rows[props.rowIndex].name}</Cell>)}
                    header='Name'/>
                <Column
                    width={0}
                    flexGrow={2}
                    cell={props=>(<Cell>{rows[props.rowIndex].desc}</Cell>)}
                    header='Description'/>
            </Table>
        );
    }
});

The above works and renders both columns:

enter image description here

Now I am trying to create my own helper component to simplify the Column interface:

const EnhancedColumn = React.createClass({
    render: function() {
        console.log('render called');
        return (
                    <Column
                    width={0}
                    flexGrow={2}
                    cell={props=>(<Cell>{rows[props.rowIndex].name}</Cell>)}
                    header='Name'/>
        );
    }
});

const App2 = React.createClass({

    render: function() {
        return (
            <Table id='foo'
            height={200}
            width={400}
            rowsCount={rows.length}
            rowHeight={26}
            headerHeight={50}>
                <EnhancedColumn/>
                <Column
                    width={0}
                    flexGrow={2}
                    cell={props=>(<Cell>{rows[props.rowIndex].desc}</Cell>)}
                    header='Description'/>
            </Table>
        );
    }
});

Suddenly the EnhancedColumn is not rendered at all (in fact its render method is not even called as the message render is called does not appear on the console):

enter image description here

I logged this as an issue.

Marcus Junius Brutus
  • 26,087
  • 41
  • 189
  • 331
  • One thing I noticed is you aren't passing props down to populate the enhanced column's data. Also it's kinda hard to debug this without the root usage of those components, so you should add a little bit more code for context! – Dibesjr Jun 14 '16 at 14:34
  • @Dibesjr there's no `props` to pass. Root usage is trivial: `ReactDOM.render( , $('#app')[0]);` (or `App2/` when it clips the first column). – Marcus Junius Brutus Jun 14 '16 at 14:39
  • Where is the data coming from? EDIT: Nevermind saw where you store your mock data – Dibesjr Jun 14 '16 at 14:40
  • Are your rendering all of your children in the table component? – Dibesjr Jun 14 '16 at 14:43

0 Answers0