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.
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.
Comments