Added extra features to data table.

merge-requests/7/head
Menaka Jayawardena 7 years ago
parent 39925efacf
commit c389a5ec50

@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
import React, {Component} from 'react';
import DataTableRow from './DataTableRow';
import DataTableHeader from './DataTableHeader';
import RaisedButton from 'material-ui/RaisedButton';
import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
/**
@ -73,7 +74,14 @@ class DataTable extends Component {
render() {
const {data, headers} = this.state;
if (data.length > 0) {
let noDataContent = null;
if (this.props.noDataMessage.type === 'button') {
noDataContent = <div><RaisedButton label={this.props.noDataMessage.text}/></div>
}
if (data) {
return (<Table
selectable={ false }>
<TableHeader displaySelectAll={ false }
@ -87,12 +95,15 @@ class DataTable extends Component {
</TableHeader>
<TableBody>
{data.map((dataItem) =>{
return (<DataTableRow key={dataItem.id} dataItem={dataItem} handleClick={this._handleRowClick.bind(this)}/>)
return (<DataTableRow key={dataItem.id}
dataItem={dataItem}
handleClick={this._handleRowClick.bind(this)}/>)
})}
</TableBody>
</Table>)}
</Table>)
}
return (<div>No apps</div>);
return (<div>{noDataContent}</div>);
}
}
@ -101,7 +112,8 @@ DataTable.prototypes = {
data: PropTypes.arrayOf(Object),
headers: PropTypes.arrayOf(Object),
sortData: PropTypes.func,
handleRowClick: PropTypes.func
handleRowClick: PropTypes.func,
noDataMessage: PropTypes.object
};
export default DataTable;

@ -37,6 +37,9 @@ class DataTableRow extends Component {
this.setState({dataItem: this.props.dataItem})
}
/**
* Triggers the click event on the data table row.
* */
_handleClick() {
this.props.handleClick(this.state.dataItem.id);
}
@ -47,7 +50,8 @@ class DataTableRow extends Component {
<TableRow onClick={this._handleClick.bind(this)} >
{Object.keys(dataItem).map((key) => {
if (key !== 'id') {
return <TableRowColumn style={{alignItems: 'center'}} key={key}>{dataItem[key]}</TableRowColumn>
return <TableRowColumn style={{alignItems: 'center'}}
key={key}>{dataItem[key]}</TableRowColumn>
} else {
return <TableRowColumn/>
}

Loading…
Cancel
Save