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", "history": "^4.6.3",
"latest-version": "^3.1.0", "latest-version": "^3.1.0",
"material-ui": "^0.19.0", "material-ui": "^0.19.0",
"material-ui-datatables": "^0.18.2",
"prop-types": "^15.5.10", "prop-types": "^15.5.10",
"qs": "^6.5.0", "qs": "^6.5.0",
"react": "^15.6.1", "react": "^15.6.1",

@ -16,39 +16,92 @@
* under the License. * under the License.
*/ */
import React, {Component} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {Table, TableBody} from 'material-ui/Table'; import React, {Component} from 'react';
import DataTableHeader from './DataTableHeader';
import DataTableRow from './DataTableRow'; 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 { class DataTable extends Component {
constructor() { constructor() {
super(); super();
this.state = {
data: [],
headers: [],
} }
render() { };
return (
<Table> componentWillMount() {
<DataTableHeader> this.setState({data: this.props.data, headers: this.props.headers})
{this.props.headers.map((header) => { }
/**
* 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> </TableBody>
</Table> </Table>)}
);
return (<div>No apps</div>);
} }
} }
DataTable.prototypes = { DataTable.prototypes = {
data: PropTypes.arrayOf(Object), data: PropTypes.arrayOf(Object),
headers: PropTypes.arrayOf(String) headers: PropTypes.arrayOf(Object),
sortData: PropTypes.func,
handleRowClick: PropTypes.func
}; };
export default DataTable; export default DataTable;

@ -15,20 +15,61 @@
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
import React, {Component} from 'react';
import PropTypes from 'prop-types'; 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 { class DataTableHeader extends Component {
constructor() {
super();
}
/**
* The onClick function of the table header.
* Invokes the function passed in the header object.
* */
_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 = { DataTableHeader.prototypes = {
/*sortable : bool header: PropTypes.object
* text: string (The header text)
* */
label: PropTypes.string,
sortable: PropTypes.bool,
sort: PropTypes.func
}; };
export default DataTableHeader; export default DataTableHeader;

@ -15,11 +15,47 @@
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
import React, {Component} from 'react';
import PropTypes from 'prop-types'; 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 { 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 = { DataTableRow.propTypes = {

Loading…
Cancel
Save