Add knobs for headers and number of rows

frontend/src/component/ui/Table.tsx

@@ -2,7 +2,6 @@ import React, { Component, ReactChild } from 'react';
 
 import styles from './Table.module.scss';
 import { TextAlignProperty } from 'csstype';
-import { Styling, withCSSModule } from './styling';
 
 interface IProps {
   headers?: ReactChild[];

story/src/2-Table.stories.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
 import { Table } from '../../frontend/src/component/ui/Table';
-import { action } from '@storybook/addon-actions';
-import { text } from '@storybook/addon-knobs';
+import { array, number } from '@storybook/addon-knobs';
 
 export default {
   title: 'UI/Table',
   component: Table
 };
 
 export const table = () => {
+  const headers = array('Header Columns', ['Long Link', 'Alias']);
   return (
     <Table
-      headers={['Long Link', 'Alias']}
-      rows={[
-        ['http://www.google.com', 'google'],
-        ['http://www.facebook.com', 'facebook']
-      ]}
+      headers={headers}
+      rows={new Array(number('Number of rows', 2))
+        .fill(0)
+        .map((_, i) => headers.map((_, j) => `data ${i}-${j}`))}
     />
   );
 };