Created the DataTable component.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent 94f126688e
commit 61befd5a3b

@ -14,7 +14,6 @@
"history": "^4.6.3",
"latest-version": "^3.1.0",
"material-ui": "^0.19.0",
"material-ui-datatables": "^0.18.2",
"prop-types": "^15.5.10",
"qs": "^6.5.0",
"react": "^15.6.1",

@ -16,39 +16,92 @@
* under the License.
*/
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Table, TableBody} from 'material-ui/Table';
import DataTableHeader from './DataTableHeader';
import React, {Component} from 'react';
import DataTableRow from './DataTableRow';
import DataTableHeader from './DataTableHeader';
import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
/**
* Error page.
* The Custom Table Component.
* This component wraps the material-ui Table component and add some extra functionalities.
* 1. Table header click. (For sorting)
* 2. Table row click.
*
* The main sort function is defined in the component where the data table is created and passed to the
* DataTable component via props.
*
* Following are the DataTable proptypes.
* 1. Headers: Table headers. This is an array of Json Objects.
* An Header Object contains the properties of each header. Currently following properties
* are supported.
* * sortable: boolean : whether the table column is sortable or not.
* * sort: func : If sortable, the sort function.
* * sort: func : If sortable, the sort function.
* * sort: func : If sortable, the sort function.
* * label: String: The Table header string.
* * id: String: Unique id for header.
*
* 2. Data: The list of data that needs to be displayed in the table.
* This is also a json array of data objects.
* The Json object should contain key: value pair where the key is the header id.
*
* */
class DataTable extends Component {
constructor() {
super();
this.state = {
data: [],
headers: [],
}
render() {
return (
<Table>
<DataTableHeader>
{this.props.headers.map((header) => {
};
componentWillMount() {
this.setState({data: this.props.data, headers: this.props.headers})
}
/**
* Triggers when user click on table row.
* This method invokes the parent method handleRowClick, which is passed via props.
* */
_handleRowClick(id) {
this.props.handleRowClick(id);
}
})}
</DataTableHeader>
<TableBody>
render() {
const {data, headers} = this.state;
if (data.length > 0) {
return (<Table
selectable={ false }>
<TableHeader displaySelectAll={ false }
adjustForCheckbox={ false }>
<TableRow>
{headers.map((header) => {
return (<DataTableHeader style={{display: 'flex'}} key={header.id} header={header}/>)
}
)}
</TableRow>
</TableHeader>
<TableBody>
{data.map((dataItem) =>{
return (<DataTableRow key={dataItem.id} dataItem={dataItem} handleClick={this._handleRowClick.bind(this)}/>)
})}
</TableBody>
</Table>
);
</Table>)}
return (<div>No apps</div>);
}
}
DataTable.prototypes = {
data: PropTypes.arrayOf(Object),
headers: PropTypes.arrayOf(String)
headers: PropTypes.arrayOf(Object),
sortData: PropTypes.func,
handleRowClick: PropTypes.func
};
export default DataTable;

@ -15,20 +15,61 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import FlatButton from 'material-ui/FlatButton';
import {TableHeaderColumn} from 'material-ui/Table';
/**
* Data Table header component.
* This component creates the header elements of the table.
* */
class DataTableHeader extends Component {
constructor() {
super();
}
DataTableHeader.prototypes = {
/*sortable : bool
* text: string (The header text)
/**
* The onClick function of the table header.
* Invokes the function passed in the header object.
* */
label: PropTypes.string,
sortable: PropTypes.bool,
sort: PropTypes.func
_tableHeaderClick() {
this.props.header.sort();
}
render() {
let headerCell = null;
/**
* If the header is sortable, create a button with onClick handler.
* else create a span element with label as the table header.
* */
if (this.props.header.sortable) {
headerCell = <FlatButton label={this.props.header.label}
onClick={this._tableHeaderClick.bind(this)}
style={{color: '#bdbdbd'}}/>;
} else {
headerCell = <span style={{position: 'relative',
paddingLeft: '16px',
paddingRight: '16px',
textTransform: 'uppercase',
fontWeight: 'normal',
color: '#bdbdbd',
fontSize: '14px'}}>{this.props.header.label}</span>;
}
return (
<TableHeaderColumn style={{paddingLeft: '0px'}} key={this.props.header.id}>
{headerCell}
</TableHeaderColumn>
);
}
}
DataTableHeader.prototypes = {
header: PropTypes.object
};
export default DataTableHeader;

@ -15,11 +15,47 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {TableRow, TableRowColumn} from 'material-ui/Table';
/**
* Data table row component.
* This component created a row in the data table according to the props.
* */
class DataTableRow extends Component {
constructor() {
super();
this.state = {
dataItem: {}
}
}
componentWillMount() {
this.setState({dataItem: this.props.dataItem})
}
_handleClick() {
this.props.handleClick(this.state.dataItem.id);
}
render() {
const {dataItem} = this.state;
return (
<TableRow onClick={this._handleClick.bind(this)} >
{Object.keys(dataItem).map((key) => {
if (key !== 'id') {
return <TableRowColumn style={{alignItems: 'center'}} key={key}>{dataItem[key]}</TableRowColumn>
} else {
return <TableRowColumn/>
}
} )}
</TableRow>
);
}
}
DataTableRow.propTypes = {

Loading…
Cancel
Save