xchain-components/src/components/XTable/index.js

Xchain Components

/* @flow */
/* eslint react/jsx-filename-extension: 0 */

import * as React from 'react';
import { Table } from 'semantic-ui-react';
import XDisplayText from 'components/XDisplayText';

type Props = {
  tableWidth?: string,
  singleLine?: boolean,
  tableHeader: Array<string>,
  tableRows: Array<Array<string>>,
  color?: string,
};

const XTable = (props: Props) => {
  const {
    singleLine, tableHeader, tableRows, color, tableWidth,
  } = props;
  return (
    <Table color={color} singleLine={singleLine} style={{ width: tableWidth}} >
    <Table.Header style={{ backgroundColor: '#000000'}}>
      <Table.Row>
        {
          tableHeader !== undefined && tableHeader !== null
            ?  tableHeader.map((header, index) => (
                  <Table.HeaderCell key={index}>{header}</Table.HeaderCell>
              )) : null
        }
      </Table.Row>
    </Table.Header>

    <Table.Body>
      {
        tableRows !== undefined && tableRows !== null
          ? tableRows.map((row, index) => (
              <Table.Row key={index}>
              {
                row.map((rowData, index) => (
                  <Table.Cell key={index}>{rowData}</Table.Cell>
                  ))
              }
              </Table.Row>
            )) : null
      }
    </Table.Body>
  </Table>
  );
};

XTable.defaultProps = {
  tableWidth: '100px',
  singleLine: true,
  color: 'transparent',
};

export default XTable;