web-dev-qa-db-fra.com

React.js créant une table avec une quantité dynamique de lignes avec une colonne modifiable

J'essaie de créer une table react.js qui se synchronise avec une carte de dépliant. J'ai ces données et je peux obtenir les données correctement, mais je ne peux pas créer correctement une table. Je peux voir les en-têtes parce qu'ils sont codés en dur, mais je ne peux pas voir les lignes. J'ai également une image pour expliquer les données aux points console.log () dans le code. Voici le code:

/* Table React Component */
var TABLE_CONFIG = {
  sort: { column: "Zone", order: "desc" },
  columns: {
    col1: { name: "Zone", filterText: "", defaultSortOrder: "desc" },
    col2: { name: "Population", filterText: "", defaultSortOrder: "desc" }
  }
};

var Table = React.createClass({
  getInitialState: function() {
    var tabledata = [];
    var length = _.size(testJSON.zones);
    for(i = 0; i < length; i++) {

      var name = _.keys(testJSON.zones)[i];

      var population = testJSON.zones[name].population.value;
      if(name == "default") {
        population = testJSON.zones[name].population.default.value;
      }

      tabledata[i] = {name, population};
    }
    console.log(tabledata);
    return {zones: tabledata};
  },

  render: function() {
    var rows = [];
    this.state.zones.forEach(function(zone) {
        rows.Push(<tr Population={zone.population} Zone={zone.name} />);
    }.bind(this));
    console.log(rows);
    return (
        <table>
            <thead>
                <tr>
                    <th>Zone</th>
                    <th>Population</th>
                </tr>
            </thead>
            <tbody>{rows}</tbody>
        </table>
      );
  }
});

Ici, vous pouvez voir la ligne console.log(tabledata) en entier ainsi que le premier objet dans console.log(rows)

Zone name and population

Je voudrais voir quelque chose comme l'image ci-dessous. Veuillez noter que je souhaite que la colonne Zone ne soit pas une entrée modifiable, mais que la population soit modifiable:

Desired Table

javascriptreactjshtml-tablejsonobjectdynamic-tables
11
napkinsterror

<tr Population={zone.population} Zone={zone.name} /> ne semble pas être un composant valide React pour moi. Le minuscule <tr> indique qu'il ne s'agit pas d'un composant personnalisé, mais qu'il représente une ligne de tableau HTML standard. <tr> les éléments nécessitent <td> ou <th> éléments à l'intérieur, par exemple:

var rows = [];
this.state.zones.forEach(function(zone) {
    rows.Push(
      <tr />
        <td><SomePopulationComponent /></td>
        <td><SomeZoneComponent /></td>
      </tr>
    );
}.bind(this));

Vous pouvez extraire cela dans un élément personnalisé:

var CustomRow = React.createClass({
    render: function() {
        return (
            <tr>
                <td>{this.props.Population}</td>
                <td>{this.props.Zone}</td>
            </tr>
        );
    }
});

// ...

var rows = [];
this.state.zones.forEach(function(zone) {
    rows.Push(<CustomRow Population={zone.population} Zone={zone.name} />);
}.bind(this));

N'oubliez pas non plus de donner aux éléments générés depuis l'intérieur d'une fonction map/foreach un attribut key.

17
Michelle Tilley

J'ai rendu ce tableau de données dynamique avec des lignes et des colonnes dynamiques modifiables

class App extends React.Component {

    constructor(props){
        super(props);

        this.state = {
            data: [
                {'id':1,1:'',2:'Class1',3:'Class2',4:'Class3',5:'Class4',6:'Class5',7:'Class6'},
                {'id':2,1:'MONDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'},
                {'id':3,1:'TUESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'},
                {'id':4,1:'WEDNESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'},
                {'id':5,1:'THURSDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'},
                {'id':6,1:'FRIDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}
            ],
            errorInput:''
        };

        this.submitStepSignupForm = this.submitStepSignupForm.bind(this);
        this.appendColumn = this.appendColumn.bind(this);
        //  this.editColumn = this.editColumn.bind(this);

    render(){

        let tableStyle = {
            align:"center"
        };

        let list = this.state.data.map(p =>{
            return (
                <tr className="grey2" key={p.id}>
                    {Object.keys(p).filter(k => k !== 'id').map(k => {
                        return (
                            <td className="grey1" key={p.id+''+k}>
                                <div suppressContentEditableWarning="true" contentEditable="true" value={k} onInput={this.editColumn.bind(this,{p},{k})}>
                                    {p[k]}
                                </div>
                            </td>
                        );
                    })}
                </tr>
            );
        });

        return (
            <fieldset className="step-4">
                <div className="heading">
                    <h3>Tell us about your schedule</h3>
                    <p>Dynamic Data Table by Rohan Arihant </p>
                </div>
                <div className="schedule padd-lr">
                    <table cellSpacing="3" id="mytable" style={tableStyle}>
                        <tbody>{list}</tbody>
                    </table>
                </div>
           </fieldset>
        );
    }
}

https://codepen.io/rohanarihant/pen/qmjKpj

7
RohanArihant