Ivan - Table Component - Create basic table component [skip ci]

client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js

@@ -1,14 +1,59 @@
 import React from 'react';
+import Table from 'core-components/table';
 
 class DashboardListTicketsPage extends React.Component {
 
     render() {
         return (
             <div>
-                DASHBOARD TICKET LIST
+                <Table headers={this.getTableHeaders()} rows={this.getTableRows()} />
             </div>
         );
     }
+
+    getTableHeaders() {
+        return [
+            'Number',
+            'Title',
+            'Department',
+            'Date'
+        ];
+    }
+
+    getTableRows() {
+        return [
+            [
+                '#445441',
+                'Problem with installation',
+                'Environment Setup',
+                '15 Apr 2016'
+            ],
+            [
+                '#445441',
+                'Problem with installation',
+                'Environment Setup',
+                '15 Apr 2016'
+            ],
+            [
+                '#445441',
+                'Problem with installation',
+                'Environment Setup',
+                '15 Apr 2016'
+            ],
+            [
+                '#445441',
+                'Problem with installation',
+                'Environment Setup',
+                '15 Apr 2016'
+            ],
+            [
+                '#445441',
+                'Problem with installation',
+                'Environment Setup',
+                '15 Apr 2016'
+            ]
+        ];
+    }
 }
 
 export default DashboardListTicketsPage;

client/src/core-components/table.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+class Table extends React.Component {
+    static propTypes = {
+        headers: React.PropTypes.arrayOf(React.PropTypes.string),
+        rows: React.PropTypes.arrayOf(React.PropTypes.arrayOf(React.PropTypes.node)),
+        type: React.PropTypes.oneOf(['default'])
+    };
+
+    static defaultProps = {
+        type: 'default'
+    };
+
+    render() {
+        return (
+            <table className="table">
+                <tr className="table__header">
+                    {this.props.headers.map(this.renderHeaderColumn.bind(this))}
+                </tr>
+                {this.props.rows.map(this.renderRow.bind(this))}
+            </table>
+        );
+    }
+
+    renderHeaderColumn(header) {
+        return (
+            <th className="table__header-column">{header}</th>
+        );
+    }
+
+    renderRow(row) {
+        return (
+            <tr className="table__row">
+                {row.map((cell) =><td className="table__cell">{cell}</td>)}
+            </tr>
+        );
+    }
+}
+
+export default Table;

client/src/core-components/table.scss

@@ -0,0 +1,30 @@
+@import "../scss/vars";
+
+.table {
+
+    &__header {
+        background-color: $primary-blue;
+        color: white;
+        font-variant: small-caps;
+    }
+
+    &__header-column {
+
+    }
+
+    &__row {
+        color: #B8B8B8;
+
+        &:nth-child(even) {
+            background-color: #F9F9F9;
+        }
+
+        &:nth-child(odd) {
+            background-color: $light-grey;
+        }
+    }
+
+    &__cell {
+
+    }
+}