Add data table (#23)

jpbarela · Mar 14, 2021 · ae8a3fd · ae8a3fd
1 parent 93e420a
commit ae8a3fd
Show file tree

Hide file tree

Showing 10 changed files with 25,838 additions and 6,483 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jpbarela/arachnae",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A simple React component library",
   "main": "dist/index.js",
   "files": [

diff --git a/src/DataTable/__snapshots__/index.test.jsx.snap b/src/DataTable/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders 1`] = `
+<div>
+  <table
+    class="table-0-2-1"
+  >
+    <thead>
+      <tr>
+        <th
+          class="tableHeader-0-2-3 tableHeader-d3-0-2-7"
+          colspan="1"
+          rowspan="1"
+        >
+          Strings
+        </th>
+        <th
+          class="tableHeader-0-2-3 tableHeader-d5-0-2-9"
+          colspan="1"
+          rowspan="1"
+        >
+          Numbers
+        </th>
+        <th
+          class="tableHeader-0-2-3 tableHeader-d7-0-2-11"
+          colspan="1"
+          rowspan="1"
+        >
+          Dates
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td
+          class="tableData-0-2-2 tableData-d8-0-2-12"
+          colspan="1"
+          rowspan="1"
+        >
+          a
+        </td>
+        <td
+          class="tableData-0-2-2 tableData-d10-0-2-14"
+          colspan="1"
+          rowspan="1"
+        >
+          1
+        </td>
+        <td
+          class="tableData-0-2-2 tableData-d12-0-2-16"
+          colspan="1"
+          rowspan="1"
+        >
+          Fri Jan 01 2021
+        </td>
+      </tr>
+      <tr>
+        <td
+          class="tableData-0-2-2 tableData-d14-0-2-18"
+          colspan="1"
+          rowspan="1"
+        >
+          b
+        </td>
+        <td
+          class="tableData-0-2-2 tableData-d16-0-2-20"
+          colspan="1"
+          rowspan="1"
+        >
+          2
+        </td>
+        <td
+          class="tableData-0-2-2 tableData-d18-0-2-22"
+          colspan="1"
+          rowspan="1"
+        >
+          Mon Feb 01 2021
+        </td>
+      </tr>
+      <tr>
+        <td
+          class="tableData-0-2-2 tableData-d20-0-2-24"
+          colspan="1"
+          rowspan="1"
+        >
+          c
+        </td>
+        <td
+          class="tableData-0-2-2 tableData-d22-0-2-26"
+          colspan="1"
+          rowspan="1"
+        >
+          3
+        </td>
+        <td
+          class="tableData-0-2-2 tableData-d24-0-2-28"
+          colspan="1"
+          rowspan="1"
+        >
+          Mon Mar 01 2021
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
diff --git a/src/DataTable/index.jsx b/src/DataTable/index.jsx
@@ -0,0 +1,90 @@
+// @flow
+import * as React from "react";
+import {
+  Table,
+  TableBody,
+  TableData,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../Table";
+import type { TextAlign } from "../commonTypes";
+
+type DataTableProps = {
+  columns: Array<ColumnProps>,
+  data: Array<any>,
+  borderWidth?: string,
+};
+
+type ColumnProps = {
+  header?: string,
+  textAlign?: TextAlign,
+  width?: string,
+};
+
+type DataElementProps = {
+  item: string,
+  borderWidth?: string,
+  textAlign?: TextAlign,
+  width?: string,
+};
+
+export function DataTable({
+  borderWidth,
+  columns,
+  data,
+}: DataTableProps): React.Node {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          {columns.map((column, index) => (
+            <ColumnHeader
+              key={column.header || index}
+              header={column.header}
+              width={column.width}
+            />
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {data.map((row, i) => {
+          return (
+            <TableRow key={i}>
+              {row.map((element, j) => (
+                <DataElement
+                  key={`${i}_${j}`}
+                  item={element}
+                  textAlign={columns[j].textAlign}
+                  width={columns[j].width}
+                  borderWidth={borderWidth}
+                />
+              ))}
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function ColumnHeader({ header, width }: ColumnProps) {
+  return (
+    <TableHeader textAlign="center" width={width}>
+      {header}
+    </TableHeader>
+  );
+}
+
+function DataElement({
+  borderWidth,
+  item,
+  textAlign,
+  width,
+}: DataElementProps) {
+  return (
+    <TableData borderWidth={borderWidth} textAlign={textAlign} width={width}>
+      {item}
+    </TableData>
+  );
+}
diff --git a/src/DataTable/index.test.jsx b/src/DataTable/index.test.jsx
@@ -0,0 +1,35 @@
+// @flow
+import * as React from "react";
+import { render } from "../test-utils";
+import { DataTable } from "./index";
+
+describe("Button", () => {
+  it("renders", () => {
+    const container = render(
+      <DataTable
+        columns={[
+          {
+            header: "Strings",
+            textAlign: "left",
+          },
+          {
+            header: "Numbers",
+            textAlign: "center",
+            width: "8rem",
+          },
+          {
+            header: "Dates",
+            textAlign: "right",
+            width: "25rem",
+          },
+        ]}
+        data={[
+          ["a", 1, new Date(2021, 0, 1).toDateString()],
+          ["b", 2, new Date(2021, 1, 1).toDateString()],
+          ["c", 3, new Date(2021, 2, 1).toDateString()],
+        ]}
+      />
+    );
+    expect(container.baseElement.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/src/Table/__snapshots__/index.test.jsx.snap b/src/Table/__snapshots__/index.test.jsx.snap
@@ -3,17 +3,19 @@
 exports[`Row renders 1`] = `
 <div>
   <table
-    class="table-0-2-2"
+    class="table-0-2-1"
   >
     <thead>
       <tr>
         <th
+          class="tableHeader-0-2-3 tableHeader-d3-0-2-7"
           colspan="1"
           rowspan="1"
         >
           Name
         </th>
         <th
+          class="tableHeader-0-2-3 tableHeader-d5-0-2-9"
           colspan="1"
           rowspan="1"
         >
@@ -24,14 +26,14 @@ exports[`Row renders 1`] = `
     <tbody>
       <tr>
         <td
-          class="tableData-0-2-3 "
+          class="tableData-0-2-2 tableData-d6-0-2-10"
           colspan="1"
           rowspan="1"
         >
           Joe
         </td>
         <td
-          class="tableData-0-2-3 "
+          class="tableData-0-2-2 tableData-d8-0-2-12"
           colspan="1"
           rowspan="1"
         >
@@ -40,14 +42,14 @@ exports[`Row renders 1`] = `
       </tr>
       <tr>
         <td
-          class="tableData-0-2-3 "
+          class="tableData-0-2-2 tableData-d10-0-2-14"
           colspan="1"
           rowspan="1"
         >
           Jane
         </td>
         <td
-          class="tableData-0-2-3 "
+          class="tableData-0-2-2 tableData-d12-0-2-16"
           colspan="1"
           rowspan="1"
         >