feat(table): add styles and dividers

src/Table/TableHeader.js

@@ -1,18 +1,23 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
+import {StyleSheet} from 'react-native';
+import {Divider} from 'react-native-elements';
 import {Row, Col, TextStrong} from '@indec/react-native-commons';
 
 import columnPropType from './columnPropType';
 import styles from './styles';
 
 const TableHeader = ({columns}) => (
-    <Row>
-        {columns.map(column => (
-            <Col key={column.id} style={[styles.col, column.style]}>
-                <TextStrong style={styles.header}>{column.label}</TextStrong>
-            </Col>
-        ))}
-    </Row>
+    <Fragment>
+        <Row style={styles.headerContainer}>
+            {columns.map(column => (
+                <Col key={column.id} style={[styles.col, column.style]}>
+                    <TextStrong style={styles.header}>{column.label}</TextStrong>
+                </Col>
+            ))}
+        </Row>
+        <Divider style={StyleSheet.flatten([styles.itemsDivider, styles.headerDivider])}/>
+    </Fragment>
 );
 
 TableHeader.propTypes = {

src/Table/TableRow.js

@@ -1,6 +1,8 @@
 /* eslint-disable react/no-typos */
-import React from 'react';
+import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
+import {StyleSheet} from 'react-native';
+import {Divider} from 'react-native-elements';
 import {Row} from '@indec/react-native-commons';
 
 import columnPropType from './columnPropType';
@@ -9,11 +11,14 @@ import datumPropType from './datumPropType';
 import styles from './styles';
 
 const TableRow = ({datum, columns}) => (
-    <Row key={datum._id} style={styles.row}>
-        {columns.map(column => (
-            <TableCell key={column.id} datum={datum} column={column}/>
-        ))}
-    </Row>
+    <Fragment>
+        <Row key={datum._id} style={styles.row}>
+            {columns.map(column => (
+                <TableCell key={column.id} datum={datum} column={column}/>
+            ))}
+        </Row>
+        <Divider style={StyleSheet.flatten([styles.itemsDivider, styles.rowDivider])}/>
+    </Fragment>
 );
 
 TableRow.propTypes = {

src/Table/datumPropType.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
 
 export default PropTypes.shape({
-    _id: PropTypes.number.isRequired
+    _id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
 });

src/Table/styles.js

@@ -6,5 +6,24 @@ export default StyleSheet.create({
     },
     col: {
         paddingLeft: 20
+    },
+    itemsDivider: {
+        flex: 1,
+        marginTop: 3,
+        marginRight: 10,
+        marginBottom: 3,
+        marginLeft: 10
+    },
+    headerContainer: {
+        flex: 0.2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: 30
+    },
+    rowDivider: {
+        backgroundColor: '#dcdcdc'
+    },
+    headerDivider: {
+        backgroundColor: '#0e516e'
     }
 });