From 997abebf8c2c9a978e9fad4c5ed4c712abfe8d0b Mon Sep 17 00:00:00 2001
From: ivan <ivan@opensupports.com>
Date: Sun, 14 Aug 2016 20:40:40 -0300
Subject: [PATCH] Ivan - Table Component - Create basic table component [skip
 ci]

---
 .../dashboard-list-tickets-page.js            | 47 ++++++++++++++++++-
 client/src/core-components/table.js           | 40 ++++++++++++++++
 client/src/core-components/table.scss         | 30 ++++++++++++
 3 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 client/src/core-components/table.js
 create mode 100644 client/src/core-components/table.scss

diff --git a/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js b/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js
index 8374828e..e79d036f 100644
--- a/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js
+++ b/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;
diff --git a/client/src/core-components/table.js b/client/src/core-components/table.js
new file mode 100644
index 00000000..e42bfcdb
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/client/src/core-components/table.scss b/client/src/core-components/table.scss
new file mode 100644
index 00000000..d8d09c0a
--- /dev/null
+++ b/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 {
+
+    }
+}
\ No newline at end of file