From cf090d25e7da6d180b437888c5dcfdb9fa6e6a49 Mon Sep 17 00:00:00 2001
From: Elliot Greenwood <elliot@fundapps.co>
Date: Tue, 9 Nov 2021 13:27:07 +0000
Subject: [PATCH] Add StyledTable to the Table stories

Signed-off-by: Elliot Greenwood <elliot@fundapps.co>
---
 .../src/components/Table/Table.stories.tsx    | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/packages/core-components/src/components/Table/Table.stories.tsx b/packages/core-components/src/components/Table/Table.stories.tsx
index 7785764b22..b057d0a12c 100644
--- a/packages/core-components/src/components/Table/Table.stories.tsx
+++ b/packages/core-components/src/components/Table/Table.stories.tsx
@@ -326,3 +326,49 @@ export const FilterTable = () => {
     </div>
   );
 };
+
+export const StyledTable = () => {
+  const classes = useStyles();
+  const columns: TableColumn[] = [
+    {
+      title: 'Column 1',
+      field: 'col1',
+      highlight: true,
+      cellStyle: (_, rowData: any & { tableData: { id: number } }) => {
+        return rowData.tableData.id % 2 === 0
+          ? {
+              color: '#6CD75F',
+            }
+          : {
+              color: '#DC3D5A',
+            };
+      },
+    },
+    {
+      title: 'Column 2',
+      field: 'col2',
+      cellStyle: { color: '#2FA5DC' },
+    },
+    {
+      title: 'Numeric value',
+      field: 'number',
+      type: 'numeric',
+    },
+    {
+      title: 'A Date',
+      field: 'date',
+      type: 'date',
+    },
+  ];
+
+  return (
+    <div className={classes.container}>
+      <Table
+        options={{ paging: false }}
+        data={testData10}
+        columns={columns}
+        title="Backstage Table"
+      />
+    </div>
+  );
+};