Add DataTable story

Author: jpbarela

src/DataTable/index.jsx

@@ -0,0 +1,65 @@
+// @flow
+import * as React from "react";
+import { Table, TableBody, TableHeader, TableRow } from "../Table";
+import { createUseStyles } from "react-jss";
+
+type DataTableProps = {
+  columns: Array<ColumnProp>,
+  data: Array<Any>,
+};
+
+type ColumnProps = {
+  header: string,
+  textAlign: TextAlign,
+  width: string,
+};
+
+type TextAlign = "left" | "right" | "center";
+
+type DataElementProps = {
+  textAlign: TextAlign,
+  width: string,
+  item: string,
+};
+
+export function DataTable({ columns, data }: DataTableProps) {
+  return (
+    <Table>
+      <TableRow>
+        {columns.map((columnProps) => (
+          <ColumnHeader {...ColumnProps} />
+        ))}
+      </TableRow>
+      {data.map((row) => {
+        return (
+          <TableRow>
+            {row.map((element, index) => (
+              <DataElement
+                item={element.item}
+                textAlign={element.textAlign}
+                width={element.width}
+              />
+            ))}
+          </TableRow>
+        );
+      })}
+    </Table>
+  );
+}
+
+function ColumnHeader({ header }: ColumnProps) {
+  return <TableHeader>{header}</TableHeader>;
+}
+
+function DataElement({ item, textAlign, width }: DataTableProps) {
+  const useDataStyles = useDataTableStysles({ textAlign, width });
+
+  return <TableBody className={useDataStyles.tableData}>{item}</TableBody>;
+}
+
+const useDataTableStysles = createUseStyles({
+  tableData: {
+    textAlign: ({ textAlign }) => textAlign,
+    width: ({ width }) => width,
+  },
+});

src/index.js

@@ -1,6 +1,7 @@
 // @flow
 export { Button, useButtonStyles } from "./Button";
 export type { ButtonStyleProps } from "./Button";
+export { DataTable } from "./DataTable";
 export {
   DateInput,
   Form,

stories/DataTable/DataTable.stories.mdx

@@ -0,0 +1,45 @@
+import { Meta, Story } from "@storybook/addon-docs/blocks";
+import { action } from "@storybook/addon-actions";
+import { DataTable } from "../../src/";
+
+<Meta
+  title="DataTable"
+  component={DataTable}
+  argTypes={{
+    columns: { table: { disable: true } },
+    data: { table: { disable: true } },
+  }}
+/>
+
+# DataTable
+
+A data table is an easier way to visualize arrays of data. You can add an array of data to define the column type and
+
+export const Template = (args) => (
+  <DataTable
+    columns={[
+      {
+        header: "Strings",
+        textAlign: "left",
+      },
+      {
+        header: "Numbers",
+        textAlign: "center",
+        width: "8rem",
+      },
+      {
+        header: "Dates",
+        textAlign: "right",
+        width: "25rem",
+      },
+    ]}
+    data={[
+      ["a", 1, Date(2021, 0, 1)],
+      ["b", 2, Date(2021, 1, 1)],
+      ["c", 3, Date(2021, 2, 1)],
+    ]}
+    {...args}
+  />
+);
+
+<Story name="DataTable">{Template.bind({})}</Story>