Add knobs for remaining props in Table

Author: Coteh

story/src/2-Table.stories.tsx

@@ -1,12 +1,28 @@
 import React from 'react';
 import { Table } from '../../frontend/src/component/ui/Table';
-import { array, number } from '@storybook/addon-knobs';
+import { array, number, text, select } from '@storybook/addon-knobs';
 
 export default {
   title: 'UI/Table',
   component: Table
 };
 
+function alignSelector(label: string) {
+  return select(
+    label,
+    {
+      center: 'center',
+      end: 'end',
+      justify: 'justify',
+      left: 'left',
+      'match-parent': 'match-parent',
+      right: 'right',
+      start: 'start'
+    },
+    'left'
+  );
+}
+
 export const table = () => {
   const headers = array('Header Columns', ['Long Link', 'Alias']);
   return (
@@ -15,6 +31,16 @@ export const table = () => {
       rows={new Array(number('Number of rows', 2))
         .fill(0)
         .map((_, i) => headers.map((_, j) => `data ${i}-${j}`))}
+      headerFontSize={`${number('Header Font Size (px)', 16)}px`}
+      widths={headers.map(
+        (_, i) => number(`Column ${i + 1} Width (%)`, 50) + '%'
+      )}
+      alignHeaders={headers.map((_, i) =>
+        alignSelector(`Column ${i + 1} Header Alignment (%)`)
+      )}
+      alignBodyColumns={headers.map((_, i) =>
+        alignSelector(`Column ${i + 1} Body Column Alignment (%)`)
+      )}
     />
   );
 };