react data table example
Example 1: react-data-table-component
.... const data = [{ id: 1, title: 'Conan the Barbarian', summary: 'Orphaned boy Conan is enslaved after his village is destroyed...', year: '1982' } ...];const columns = [ { name: 'Title', sortable: true, cell: row => <div data-tag="allowRowEvents"><div style={{ fontWeight: bold }}>{row.title}</div>{row.summary}</div>, }, { name: 'Year', selector: 'year', sortable: true, right: true, },]; ... class MyComponent extends Component { render() { return ( <DataTable title="Arnold Movies" columns={columns} data={data} selectableRows selectableRowsComponent={Checkbox} selectableRowsComponentProps={{ inkDisabled: true }} sortIcon={<FontIcon>arrow_downward</FontIcon>} onSelectedRowsChange={handleChange} /> ) }};
Example 2: how to get checked row data using react table in react js
getTrProps={(state, rowInfo) => {
if (rowInfo && rowInfo.row) {
return {
onClick: (e) => {
this.setState({
selected: rowInfo.index
})
},
style: {
background: rowInfo.index === this.state.selected ? '#00afec' : 'white',
color: rowInfo.index === this.state.selected ? 'white' : 'black'
}
}
}else{
return {}
}
}