Created the DataTable component.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json

@@ -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",

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js

@@ -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: [],
+        }
+
+    };
+
+    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);
+    }
+
+
     render() {
-        return (
-            <Table>
-                <DataTableHeader>
-                    {this.props.headers.map((header) => {
-
-                    })}
-                </DataTableHeader>
+        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;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.js

@@ -15,20 +15,61 @@
  * specific language governing permissions and limitations
  * 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 {
 
+    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 = {
-    /*sortable : bool
-    * text: string (The header text)
-    * */
-    label: PropTypes.string,
-    sortable: PropTypes.bool,
-    sort: PropTypes.func
+    header: PropTypes.object
 };
 
-export default DataTableHeader;
+export default DataTableHeader;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.js

@@ -15,11 +15,47 @@
  * specific language governing permissions and limitations
  * 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 {
 
+    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 = {
@@ -27,4 +63,4 @@ DataTableRow.propTypes = {
     data: PropTypes.object
 };
 
-export default DataTableRow;
+export default DataTableRow;