Adding button to each row in react (flux) fixed data table

Harsha Vardhan Putrevu Published at Dev

Harsha Vardhan Putrevu

I'm trying to add button to each row in fixed data table, but I don't know how. My current code:

var Details = React.createClass({    

    getInitialState() {
            return {
              rows: usersStore.getUsersList(),
              filteredRows: null,
              filterBy: null,
            };
          },    

           componentWillMount() {
            this._filterRowsBy(this.state.filterBy);
          },

          _rowGetter(rowIndex) {
            return this.state.filteredRows[rowIndex];
          },

          _filterRowsBy(filterBy) {
            var rows = this.state.rows.slice();        
            var filteredRows = filterBy ? rows.filter(function(row){
              return row.name.toLowerCase().indexOf(filterBy.toLowerCase()) >= 0
            }) : rows;

            this.setState({
              filteredRows,
              filterBy,
            });
          },

          _onFilterChange(e) {
            this._filterRowsBy(e.target.value);
          },

    render: function () {   

        return (

            <div>
                <label>filter by <input onChange={this._onFilterChange} /></label>
                <Table
                 height={200}      
                  rowHeight={30}
                  rowGetter={this._rowGetter}
                  rowsCount={this.state.filteredRows.length}
                  width={450}
                  maxHeight={450}
                  headerHeight={40}>
                  <Column
                    label="Name"
                    width={270}
                    dataKey="name"
                  />
                  <Column
                    label="Age"
                    width={100}
                    dataKey="age"
                  />
                  <Column
                    label="Qualification"
                    width={120}
                    dataKey="Qualification"
                  />
                  <Column label="Edit"
                    width={120}>
                    <button type="button" className="btn btn-default" onClick={this.update}>Update</button>
                  </Column>
                </Table>
            </div>
        );
    }    
})

While using this code it showing datakey is mandatory and if I remove column tags and adding only button in table also its not accepting.

Ramu

Here is the sample code of adding buttons to each row in react fixed data table

    var Table = FixedDataTable.Table;
var Column = FixedDataTable.Column;

var EmpTable = React.createClass({

  getInitialState: function() {
    return {
      rows: [
        {title: "Ramu", rank: "1", year: "2000"},
        {title: "Harsha", rank: "2", year: "1999"},
        {title: "Hussain", rank: "3", year: "1998"},
        {title: "Vamsi", rank: "4", year: "1997"},
        {title: "Mahesh", rank: "5", year: "1996"},
        {title: "Nitesh", rank: "6", year: "1995"},
        {title: "Subbu", rank: "7", year: "1994"},
        {title: "Kamal", rank: "8", year: "1993"},
        {title: "Kishore", rank: "9", year: "1992"},
        {title: "Venu", rank: "10", year: "1991"},
        {title: "Bhasi", rank: "11", year: "1990"},
        {title: "Suresh", rank: "12", year: "1989"},
        {title: "Ramesh", rank: "13", year: "1988"},
        {title: "Narendra", rank: "14", year: "1987"},
        {title: "Anil", rank: "15", year: "1986"}
      ]
    };
  },


  _displayDataForRow(rowData, rowIndex){      

    alert(rowIndex);
    alert(JSON.stringify(rowData));

  },

  _renderButton(cellData, cellDataKey, rowData, rowIndex){

    return <button style={{width: '80%'}} onClick={this._displayDataForRow.bind(null, rowData, rowIndex)}>click</button>;

  },

  _rowGetter(rowIndex) {
    return this.state.rows[rowIndex];
  },

  render: function() {
    return (
      <div>
        <Table
          rowHeight={30}                  
          rowGetter={this._rowGetter}             
          rowsCount={this.state.rows.length}          
          width={500}
          maxHeight={200}
          headerHeight={30}>

          <Column
           label="Name"
           width={200}
           dataKey="title"
          />
          <Column
           label="Rank"
           width={100}
           dataKey="rank"
          />
          <Column
           label="Year"
           width={100}
           dataKey="year"
          />
          <Column
           label="Click"
           width={80}                      
           cellRenderer= {this._renderButton}                 
          />
        </Table>
      </div>
    );
  }
});

EmpTable = React.createFactory(EmpTable);

React.render(EmpTable(), document.body);

Collected from the Internet

Please contact [email protected] to delete if infringement.