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

Question

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 · Accepted Answer · 2015-07-07 04:06:38Z

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);

François Richard · Accepted Answer · 2015-07-06 16:05:37Z

0

var buttons = [];
SomeButtonsProps.forEach(function(props) {
    var button = <button> props.whatever </button>;
    buttons.push(button);
});

Then return( {buttons} );

This should work. Hope it helps.

answered Jul 6, 2015 at 16:05

François Richard

7,08411 gold badges47 silver badges83 bronze badges

Comments

Gunnar Forsgren - Mobimation · Accepted Answer · 2017-06-07 15:04:57Z

0

There has been a v6 migration of APIs that deprecated constructs such as the CellRenderer.

https://facebook.github.io/fixed-data-table/v6-migration.html

But the new solution is pretty cool.

That page hints at how to write own custom renderers that can inject own HTML elements in list columns.

answered Jun 7, 2017 at 15:04

Gunnar Forsgren - Mobimation

1,39910 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related