How to clone a React Component (to append somewhere else) using React.js instead of JQuery.js

Question

I am working on some fieldsets using React.js + Backbone.js.

I have a table containing many columns and rows. Task is to make first column fixed whenever number of columns are greater than to show on screen. (e.g total columns are 8, only 6 columns can be shown on screen) So other two can be seen by scrolling horizontally.

With the logic currently I am is, use jQuery to clone each first column of each row, and create a new table, then append it after the original table, use CSS to position it on the original table, so the user can see the first column is fixed.

I am not satisfy with this approach, need your help to do great with great Virtual DOM of great Reactjs :) Any idea, suggestion will be appreciable :)

Answer 1

start with simple react Table component:

var Table= React.createClass({
    render: function() {
        return <table>
            {this.props.data.map(function(row){
                return <tr>
                    {row.map(function(cell){
                        return <td> {cell} </td>
                    })}
                </tr>
            })}
        </table>;
    }
});

this components is just a demo, real life table should be more complex.

now, the table you want is this component:

var DubbledTable= React.createClass({
    render: function() {
        var firstColumn= 
            this.props.data.map(function(row){
                return [row[0]]
            })
        return <span>
            <Table data={firstColumn} />
            <Table data={this.props.data} />
        </span>
    }
})

demo- http://jsfiddle.net/psx9f644/

enjoy