Skip to content Skip to sidebar Skip to footer
Home / Javascript / React Redux / Reactjs / Twitter Bootstrap

How To Create Table With Multiline Cells In React-bootstrap?

Post a Comment
I want to create table where some cells contain several lines. It's work if I do it:

Solution 1:

It is not possible to create a React Component that returns three elements without wrapping them in another element, such as a div. Otherwise, you'll get the following error:

A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

Your case here is a bit special, because you cannot have div's as the immediate child of table or tbody, so that's a problem...

What you can do however, is to create a class function that returns an array. Like this:

classMyAppextendsReact.Component {

  getTr = () => {
    return [
      <trkey={0}><tdrowSpan="3">Date</td></tr>,
      <trkey={1}><td>ID</td><td>Name</td><td>Decision</td></tr>,
      <trkey={2}><td>ID</td><td>Name</td><td>Decision</td></tr>
    ];
  }

  render() {
    return (
      <tableclassName="table"><thead><tr><th>Date</th><th>Analysed  ID</th><th>Analysed Name</th><th>Solve To change</th></tr></thead><tbody>
          {this.getTr()}
          {this.getTr()}
          {this.getTr()}
        </tbody></table>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("app"));
<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><divid="app"></div>

Solution 2:

You need to include tr tags in one div tag. The right way to rowSpan is this:

varMyRow = React.createClass({
  render: function () {
    return (
        <div><tr><tdrowSpan="2">{this.props.item.date}</td><td>{this.props.item.data[0].id}</td><td>{this.props.item.data[0].name}</td><td>{this.props.item.data[0].solve}</td></tr><tr><td>{this.props.item.data[1].id}</td><td>{this.props.item.data[1].name}</td><td>{this.props.item.data[1].solve}</td></tr></div>
    );
  }
});

This is my working example: http://jsfiddle.net/andrea689/e33pd14L/

Post a Comment for "How To Create Table With Multiline Cells In React-bootstrap?"

Menu Halaman Statis