Add StyledTable to the Table stories

Signed-off-by: Elliot Greenwood <elliot@fundapps.co>
2021-11-09 13:27:07 +00:00
parent 327e79c2b8
commit cf090d25e7
1 changed files with 46 additions and 0 deletions
@@ -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>
+  );
+};