feat: v2 Table Component

platform/ui/src/components/Table/Table.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const Table = ({ children, className, fullWidth, style }) => {
+  return (
+    <div
+      className={classnames(
+        'text-lg text-white',
+        {
+          'w-full': fullWidth,
+        },
+        className
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+
+Table.defaultProps = {
+  className: '',
+  fullWidth: true,
+  style: {},
+};
+
+Table.propTypes = {
+  fullWidth: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+export default Table;

platform/ui/src/components/Table/Table.mdx

@@ -0,0 +1,63 @@
+---
+name: Table
+menu: Components
+route: components/table
+---
+
+import { Playground, Props, Link } from 'docz';
+import { Table, TableHead, TableBody, TableRow, TableCell } from '@ohif/ui';
+
+# Table
+
+Tables display sets of data.
+
+## Import
+
+```javascript
+import { Table } from '@ohfi/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="p-4">
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>Item 01</TableCell>
+          <TableCell>Item 02</TableCell>
+          <TableCell>Item 03</TableCell>
+          <TableCell>Item 04</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Content 01</TableCell>
+          <TableCell>Content 02</TableCell>
+          <TableCell>Content 03</TableCell>
+          <TableCell>Content 04</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
+</Playground>
+
+## Table width
+
+Table has full width by default. If you want to change its width, you will have
+to set the `fullWidth` prop to `false` and then define your own table width by
+passing a `className` or by `style`.
+
+## Table components
+
+<Link to="components/table-head">TableHead</Link>
+<br />
+<Link to="components/table-body">TableBody</Link>
+<br />
+<Link to="components/table-row">TableRow</Link>
+<br />
+<Link to="components/table-cell">TableCell</Link>
+
+## Properties
+
+<Props of={Table} />

platform/ui/src/components/Table/index.js

@@ -0,0 +1,2 @@
+import Table from './Table';
+export default Table;

platform/ui/src/components/TableBody/TableBody.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const TableBody = ({ children, className, style }) => {
+  return (
+    <div
+      className={classnames(
+        'mt-2 max-h-48 overflow-y-scroll ohif-scrollbar',
+        className
+      )}
+      style={style}
+    >
+      {React.Children.map(children, child =>
+        React.cloneElement(child, { isTableHead: false })
+      )}
+    </div>
+  );
+};
+
+TableBody.defaultProps = {
+  className: '',
+  style: {},
+};
+
+TableBody.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+export default TableBody;

platform/ui/src/components/TableBody/index.js

@@ -0,0 +1,2 @@
+import TableBody from './TableBody';
+export default TableBody;

platform/ui/src/components/TableCell/TableCell.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const TableCell = ({ children, className, isTableHead, size, style }) => {
+  const sizeClasses = {
+    small: 'flex-0.3',
+    normal: 'flex-1',
+  };
+
+  return (
+    <div
+      className={classnames(
+        'px-2 last:border-r-0 break-all',
+        sizeClasses[size],
+        {
+          'border-r border-custom-violetPale': !isTableHead,
+        },
+        className
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+
+TableCell.defaultProps = {
+  className: '',
+  isTableHead: false,
+  size: 'normal',
+  style: {},
+};
+
+TableCell.propTypes = {
+  isTableHead: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'normal']),
+  style: PropTypes.object,
+};
+
+export default TableCell;

platform/ui/src/components/TableCell/index.js

@@ -0,0 +1,2 @@
+import TableCell from './TableCell';
+export default TableCell;

platform/ui/src/components/TableHead/TableHead.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const TableHead = ({ children, className, style }) => {
+  return (
+    <div
+      className={classnames(
+        'bg-custom-navy border-b border-custom-violetPale flex font-bold',
+        className
+      )}
+      style={style}
+    >
+      {React.cloneElement(children, {
+        isTableHead: true,
+      })}
+    </div>
+  );
+};
+
+TableHead.defaultProps = {
+  className: '',
+  style: {},
+};
+
+TableHead.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+export default TableHead;

platform/ui/src/components/TableHead/index.js

@@ -0,0 +1,2 @@
+import TableHead from './TableHead';
+export default TableHead;

platform/ui/src/components/TableRow/TableRow.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const TableRow = ({ children, className, isTableHead, style }) => {
+  return (
+    <div className={classnames('w-full flex', className)} style={style}>
+      {React.Children.map(children, child =>
+        React.cloneElement(child, { isTableHead })
+      )}
+    </div>
+  );
+};
+
+TableRow.defaultProps = {
+  isTableHead: false,
+  className: '',
+  style: {},
+};
+
+TableRow.propTypes = {
+  isTableHead: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+export default TableRow;

platform/ui/src/components/TableRow/index.js

@@ -0,0 +1,2 @@
+import TableRow from './TableRow';
+export default TableRow;

platform/ui/src/components/index.js

@@ -7,6 +7,11 @@ import Input from './Input';
 import NavBar from './NavBar';
 import Select from './Select';
 import Svg from './Svg';
+import Table from './Table';
+import TableBody from './TableBody';
+import TableCell from './TableCell';
+import TableHead from './TableHead';
+import TableRow from './TableRow';
 import ThemeWrapper from './ThemeWrapper/';
 import Typography from './Typography';
 
@@ -20,6 +25,11 @@ export {
   NavBar,
   Select,
   Svg,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
   ThemeWrapper,
   Typography,
 };