Added Table, TableColumnHeader, TableRow components

• Added:
- Table, TableColumnHeader, TableRow components

app/javascript/gabsocial/components/table.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Text from './text'
+import TableColumnHeader from './table_column_header'
+import TableRow from './table_row'
+
+class Table extends React.PureComponent {
+
+  render() {
+    const {
+      id,
+      columns,
+      rows,
+    } = this.props
+
+    return (
+      <table className={[_s.d, _s.border1PX, _s.borderColorSecondary].join(' ')}>
+        {
+          Array.isArray(columns) &&
+          <tr className={[_s.d, _s.flexRow, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+            {
+              columns.map((column, i) => (
+                <TableColumnHeader
+                  tableId={id}
+                  column={column}
+                  key={`table-${id}-column-header-${i}`}
+                  total={columns.length}
+                  index={i}
+                />
+              ))
+            }
+          </tr>
+        }
+        {
+          Array.isArray(rows) &&
+          rows.map((row, i) => (
+            <TableRow
+              tableId={id}
+              row={row}
+              key={`table-${id}-row-${i}`}
+              total={rows.length}
+              index={i}
+            />
+          ))
+        }
+      </table>
+    )
+  }
+
+}
+
+Table.propTypes = {
+  id: PropTypes.string,
+  columns: PropTypes.array,
+  rows: PropTypes.array,
+}
+
+export default Table

app/javascript/gabsocial/components/table_column_header.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { CX } from '../constants'
+import Text from './text'
+
+class TableColumnHeader extends React.PureComponent {
+
+  render() {
+    const {
+      column,
+      total,
+      index,
+    } = this.props
+
+    const isLast = index === total - 1
+    const classes = CX({
+      d: 1,
+      px15: 1,
+      py10: 1, 
+      borderRight1PX: !isLast,
+      borderColorSecondary: !isLast,
+    })
+
+    const style = {
+      width: `${100 / total}%`
+    }
+
+    return (
+      <th className={classes} style={style}>
+        <Text size='medium' weight='medium'>
+          {column}
+        </Text>
+      </th>
+    )
+  }
+
+}
+
+TableColumnHeader.propTypes = {
+  column: PropTypes.object,
+  index: PropTypes.number,
+  total: PropTypes.number,
+  tableId: PropTypes.string,
+}
+
+export default TableColumnHeader

app/javascript/gabsocial/components/table_row.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { CX } from '../constants'
+import Text from './text'
+
+class TableRow extends React.PureComponent {
+
+  render() {
+    const {
+      id,
+      row,
+      total,
+      index,
+    } = this.props
+
+    if (!Array.isArray(row)) return null
+
+    const isLast = index === total - 1
+    const classes = CX({
+      d: 1,
+      flexRow: 1, 
+      borderBottom1PX: !isLast,
+      borderColorSecondary: !isLast,
+    })
+
+    const style = {
+      width: `${100 / row.length}%`
+    }
+    
+    return (
+      <tr className={classes}>
+        {
+          row.map((item, i) => {
+            const itemClasses = CX({
+              d: 1,
+              px15: 1,
+              py10: 1,
+              borderRight1PX: i !== row.length - 1,
+              borderColorSecondary: i !== row.length - 1,
+            })
+            return (
+              <td className={itemClasses} style={style} key={`row-data-${id}-${i}`}>
+                <Text>
+                  {row[i]}
+                </Text>
+              </td>
+            )
+          })
+        }
+      </tr>
+    )
+  }
+
+}
+
+TableRow.propTypes = {
+  row: PropTypes.object,
+  tableId: PropTypes.string,
+  total: PropTypes.number,
+  index: PropTypes.number,
+}
+
+export default TableRow