diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 844dadca2b..206a2075b4 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -2322,7 +2322,7 @@ exports[`Storyshots Table|Table Default 1`] = `
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
-        FIRST
+        First Name
       </th>
       <th
         className="has-cursor-pointer"
@@ -2330,48 +2330,64 @@ exports[`Storyshots Table|Table Default 1`] = `
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
-        SECOND
+        Last Name
         <i
           className="fas fa-sort-amount-down has-text-grey-light sc-hzDkRC escBde"
         />
       </th>
+      <th
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        E-Mail
+      </th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>
-        <h1>
-          dddd
-        </h1>
+        <h4>
+          Tricia
+        </h4>
       </td>
       <td>
-        <h2
+        <b
           style={
             Object {
               "color": "red",
             }
           }
         >
-          xyz
-        </h2>
+          McMillan
+        </b>
+      </td>
+      <td>
+        <a>
+          tricia@hitchhiker.com
+        </a>
       </td>
     </tr>
     <tr>
       <td>
-        <h1>
-          abc
-        </h1>
+        <h4>
+          Arthur
+        </h4>
       </td>
       <td>
-        <h2
+        <b
           style={
             Object {
               "color": "red",
             }
           }
         >
-          bbbb
-        </h2>
+          Dent
+        </b>
+      </td>
+      <td>
+        <a>
+          arthur@hitchhiker.com
+        </a>
       </td>
     </tr>
   </tbody>
@@ -2390,7 +2406,7 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
-        FIRST
+        Id
         <i
           className="fas fa-sort-alpha-down has-text-grey-light sc-hzDkRC escBde"
         />
@@ -2401,7 +2417,18 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
-        SECOND
+        Name
+        <i
+          className="fas fa-sort-alpha-down has-text-grey-light sc-hzDkRC escBde"
+        />
+      </th>
+      <th
+        className="has-cursor-pointer"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        Description
         <i
           className="fas fa-sort-alpha-down has-text-grey-light sc-hzDkRC escBde"
         />
@@ -2411,26 +2438,35 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
   <tbody>
     <tr>
       <td>
-        d
+        21
       </td>
       <td>
-        y
+        Pommes
+      </td>
+      <td>
+        Fried potato sticks
       </td>
     </tr>
     <tr>
       <td>
-        a
+        42
       </td>
       <td>
-        b
+        Quarter-Pounder
+      </td>
+      <td>
+        Big burger
       </td>
     </tr>
     <tr>
       <td>
-        z
+        -84
       </td>
       <td>
-        a
+        Icecream
+      </td>
+      <td>
+        Cold dessert
       </td>
     </tr>
   </tbody>
diff --git a/scm-ui/ui-components/src/table/Table.stories.tsx b/scm-ui/ui-components/src/table/Table.stories.tsx
index b29db2c965..3d2241dcba 100644
--- a/scm-ui/ui-components/src/table/Table.stories.tsx
+++ b/scm-ui/ui-components/src/table/Table.stories.tsx
@@ -7,15 +7,15 @@ import { ColumnProps } from "./table";
 
 storiesOf("Table|Table", module)
   .add("Default", () => (
-    <Table data={[{ first: "dddd", second: "xyz" }, { first: "abc", second: "bbbb" }]}>
-      <Column header={"FIRST"}>{(row: any) => <h1>{row.first}</h1>}</Column>
+    <Table data={[{ firstname: "Tricia", lastname: "McMillan", email: "tricia@hitchhiker.com" }, { firstname: "Arthur", lastname: "Dent", email: "arthur@hitchhiker.com" }]}>
+      <Column header={"First Name"}>{(row: any) => <h4>{row.firstname}</h4>}</Column>
       <Column
-        header={"SECOND"}
+        header={"Last Name"}
         createComparator={(props: ColumnProps, columnIndex: number) => {
           return (a: any, b: any) => {
-            if (a.second > b.second) {
+            if (a.lastname > b.lastname) {
               return -1;
-            } else if (a.second < b.second) {
+            } else if (a.lastname < b.lastname) {
               return 1;
             } else {
               return 0;
@@ -23,13 +23,15 @@ storiesOf("Table|Table", module)
           };
         }}
       >
-        {(row: any) => <h2 style={{ color: "red" }}>{row.second}</h2>}
+        {(row: any) => <b style={{ color: "red" }}>{row.lastname}</b>}
       </Column>
+      <Column header={"E-Mail"}>{(row: any) => <a>{row.email}</a>}</Column>
     </Table>
   ))
   .add("TextColumn", () => (
-    <Table data={[{ first: "d", second: "y" }, { first: "a", second: "b" }, { first: "z", second: "a" }]}>
-      <TextColumn header={"FIRST"} dataKey={"first"} />
-      <TextColumn header={"SECOND"} dataKey={"second"} />
+    <Table data={[{ id: "21", title: "Pommes", desc: "Fried potato sticks" },{ id: "42", title: "Quarter-Pounder", desc: "Big burger" }, {id: "-84", title: "Icecream", desc: "Cold dessert"}]}>
+      <TextColumn header={"Id"} dataKey={"id"} />
+      <TextColumn header={"Name"} dataKey={"title"} />
+      <TextColumn header={"Description"} dataKey={"desc"} />
     </Table>
   ));