diff --git a/src/components/TableModule/TableModule.stories.tsx b/src/components/TableModule/TableModule.stories.tsx
index df005513..627a4bed 100644
--- a/src/components/TableModule/TableModule.stories.tsx
+++ b/src/components/TableModule/TableModule.stories.tsx
@@ -1,64 +1,34 @@
-import React, { useRef, useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { StoryObj, StoryFn, Meta } from '@storybook/react';
 
 import { TableModule } from './TableModule';
 import {
   RowSelectionRow,
   RowSelectionState,
   TableConfiguration,
-  TableSortClickProps,
 } from './types';
-import { TableModuleActions } from './TableModuleActions';
 import { Checkbox } from '../Checkbox';
 import { IconButton } from '../IconButton';
 import { SpinButton } from '../SpinButton';
-import { Share, Trash } from '@lifeomic/chromicons';
+import { Share, Trash, Smile } from '@lifeomic/chromicons';
 import { Button } from '../Button';
 import { TableActionDivider } from './TableActionDivider';
 import { Tooltip } from '../Tooltip';
 
-export default {
-  title: 'Components/TableModule',
+const meta: Meta<typeof TableModule> = {
   component: TableModule,
-  argTypes: {},
-  subcomponents: { TableModuleActions, TableActionDivider },
-} as ComponentMeta<typeof TableModule>;
-
-const data = [
-  {
-    description: 'Frozen yoghurt',
-    calories: '159',
-    fat: '6.0',
-    carbs: '24',
-    category: 'yogurt',
-  },
-  {
-    description: 'Ice cream sandwich',
-    calories: '237',
-    fat: '9.0',
-    carbs: '37',
-    category: 'ice cream',
-  },
-  {
-    description: 'Eclair',
-    calories: '262',
-    fat: '16.0',
-    carbs: '24',
-    category: 'dessert',
-  },
-  {
-    description: 'Cupcake',
-    calories: '305',
-    fat: '3.7',
-    carbs: '67',
-    category: 'cake',
-  },
-];
+};
+export default meta;
+type Story = StoryObj<typeof TableModule>;
 
+import { data } from './storyData';
 const dataLong = [...data, ...data, ...data, ...data];
 
-const Template: ComponentStory<typeof TableModule> = (args) => {
-  const tableRef = useRef<HTMLTableElement>(null);
+import { configBasic, configSticky, configWrapped } from './config';
+import { buildSortConfig } from './configSort';
+
+const Template: StoryFn<typeof TableModule> = (args) => {
+  const tableRef = React.useRef<HTMLTableElement>(null);
   return (
     <div style={{ overflow: 'auto', width: '80%', height: '400px' }}>
       <TableModule {...args} ref={tableRef} rowClickLabel="row-click-label" />
@@ -66,305 +36,52 @@ const Template: ComponentStory<typeof TableModule> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
-Default.args = {
-  data,
-  config: [
-    {
-      header: {
-        label: 'Description',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.description;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Calories',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.calories;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Fat',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.fat;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Carbs',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.carbs;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
-      },
-    },
-  ] as Array<TableConfiguration>,
+export const Default: Story = {
+  render: Template,
+  args: {
+    data,
+    config: configBasic as Array<TableConfiguration>,
+  },
 };
 
-export const WrappedCells = Template.bind({});
-WrappedCells.args = {
-  data,
-  maxCellWidth: 3,
-  wrapCellContent: true,
-  config: [
-    {
-      header: {
-        label: 'Description',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.description;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Calories',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          if (dataValue.calories === '159') {
-            return 'Vanilla: 250\nStrawberry: 175\nPlain: 80\n\nYogurt is known to provide probiotics through naturally included bacterial cultures. Beware of increaing your sugar intake though.\nNon-dairy options exist for those with lactose intolerance.';
-          }
-          return dataValue.calories;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Fat',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.fat;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Carbs',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.carbs;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
+export const WrappedCells: Story = {
+  render: Template,
+  args: {
+    data,
+    maxCellWidth: 3,
+    wrapCellContent: true,
+    config: configWrapped as Array<TableConfiguration>,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `If a table involves content that is very long and needs to be fully displayed, use \`wrapCellContent\` to show it all. This will also cover content that needs to honor new lines, i.e. a couple paragraphs with a break between or a list of items.`,
       },
     },
-  ] as Array<TableConfiguration>,
-};
-WrappedCells.parameters = {
-  docs: {
-    description: {
-      story: `If a table involves content that is very long and needs to be fully displayed, use wrapCellContent to show it all. This will also cover content that needs to honor new lines, i.e. a couple paragraphs with a break between or a list of items.`,
-    },
   },
 };
 
-export const Sticky = Template.bind({});
-Sticky.args = {
-  data: dataLong,
-  config: [
-    {
-      header: {
-        label: 'Description',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.description;
-        },
-      },
-      isSticky: true,
-    },
-    {
-      header: {
-        label: 'Calories',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.calories;
-        },
-      },
-      isSticky: true,
-    },
-    {
-      header: {
-        label: 'Fat',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.fat;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Carbs',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.carbs;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
-      },
-      isSticky: true,
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Category',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.category;
-        },
+export const Sticky: Story = {
+  render: Template,
+  args: {
+    data: dataLong,
+    config: configSticky as Array<TableConfiguration>,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `Columns can be made "sticky" or so they don't travel off-screen when scrolling the
+        table horizontally. This helps keep track of what row one is looking at in tables with more
+        columns than can be visible at one time in the document. \n \n Any number of columns can be made
+        sticky. They don't have to be consecutive, and can start and end at any column. However,
+        most common use-cases will likely just involve the first one or two consecutive columns
+        being sticky.`,
       },
     },
-  ] as Array<TableConfiguration>,
-};
-Sticky.parameters = {
-  docs: {
-    description: {
-      story: `Columns can be made "sticky" or so they don't travel off-screen when scrolling the
-      table horizontally. This helps keep track of what row one is looking at in tables with more
-      columns than can be visible at one time in the document. \n \n Any number of columns can be made
-      sticky. They don't have to be consecutive, and can start and end at any column. However,
-      most common use-cases will likely just involve the first one or two consecutive columns
-      being sticky.`,
-    },
   },
 };
 
-export const Sort: ComponentStory<typeof TableModule> = (args) => {
+const TemplateSort: StoryFn<typeof TableModule> = (args) => {
   const [sort, setSort] = React.useState({ key: null, direction: null });
 
   const handleSortClick = ({ key, direction }: any) => {
@@ -385,57 +102,8 @@ export const Sort: ComponentStory<typeof TableModule> = (args) => {
       return 0;
     });
   }
-
-  const sortConfig: Array<TableConfiguration> = [
-    {
-      header: {
-        label: 'Description',
-        onSort: (header: TableSortClickProps) => {
-          handleSortClick({
-            key: 'description',
-            direction: header.sortDirection,
-          });
-        },
-      },
-      cell: {
-        valuePath: 'description',
-      },
-    },
-    {
-      header: {
-        label: 'Calories',
-        onSort: (header: TableSortClickProps) => {
-          handleSortClick({ key: 'calories', direction: header.sortDirection });
-        },
-      },
-      cell: {
-        valuePath: 'calories',
-      },
-    },
-    {
-      header: {
-        label: 'Fat',
-        onSort: (header: TableSortClickProps) => {
-          handleSortClick({ key: 'fat', direction: header.sortDirection });
-        },
-      },
-      cell: {
-        valuePath: 'fat',
-      },
-    },
-    {
-      header: {
-        label: 'Carbs',
-        onSort: (header: TableSortClickProps) => {
-          handleSortClick({ key: 'carbs', direction: header.sortDirection });
-        },
-      },
-      cell: {
-        valuePath: 'carbs',
-      },
-    },
-  ];
-  const tableRef = useRef<HTMLTableElement | null>(null);
+  const sortConfig = buildSortConfig(handleSortClick);
+  const tableRef = React.useRef<HTMLTableElement | null>(null);
   return (
     <TableModule
       {...args}
@@ -446,102 +114,80 @@ export const Sort: ComponentStory<typeof TableModule> = (args) => {
     />
   );
 };
-Sort.parameters = {
-  docs: {
-    description: {
-      story: `The Table Module components provides callbacks for allowing consumers to perform
-their own sorting. Out of the box, no default sorting is provided to allow
-consumers to control how they want to sort their data. This allows folks to use
-an API to sort their data (header clicked, determine header name clicked, and
-send API request to sort the data) or allow the frontend to sort the data
-themselves (header clicked, determine header name clicked, and manually sort
-data from the frontend).`,
+
+export const Sort: Story = {
+  render: TemplateSort,
+  parameters: {
+    docs: {
+      description: {
+        story: `The Table Module components provides callbacks for allowing consumers to perform
+  their own sorting. Out of the box, no default sorting is provided to allow
+  consumers to control how they want to sort their data. This allows folks to use
+  an API to sort their data (header clicked, determine header name clicked, and
+  send API request to sort the data) or allow the frontend to sort the data
+  themselves (header clicked, determine header name clicked, and manually sort
+  data from the frontend).`,
+      },
     },
   },
 };
 
-export const HoverActions = Template.bind({});
-HoverActions.args = {
-  data,
-  config: [
-    {
-      header: {
-        label: 'Description',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.description;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Calories',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.calories;
-        },
-      },
-    },
-    {
-      header: {
-        label: 'Fat',
-      },
-      cell: {
-        content: (dataValue: any) => {
-          return dataValue.fat;
-        },
-      },
-    },
-  ] as Array<TableConfiguration>,
-  rowActions: (row: any) => (
-    <>
-      <Button variant="text" color="inverse" style={{ marginRight: '8px' }}>
-        Revoke
-      </Button>
-      <TableActionDivider />
-      <Tooltip title="Share">
-        <IconButton
-          aria-label="Share"
-          icon={Share}
-          color="inverse"
-          onClick={() => console.log(`search ${row}!`)}
-        />
-      </Tooltip>
-      <Tooltip title="Trash">
-        <IconButton
-          aria-label="Trash"
-          icon={Trash}
-          color="inverse"
-          onClick={() => console.log(`trash ${row}!`)}
-        />
-      </Tooltip>
-      {row.fat === '9.0' && (
-        <Tooltip title="Trash">
+export const HoverActions: Story = {
+  render: Template,
+  args: {
+    data,
+    config: configBasic as Array<TableConfiguration>,
+    rowActions: (row: any) => (
+      <>
+        <Button variant="text" color="inverse" style={{ marginRight: '8px' }}>
+          Revoke
+        </Button>
+        <TableActionDivider />
+        <Tooltip title="Share">
           <IconButton
-            aria-label="Trash"
-            icon={Trash}
+            aria-label="Share"
+            icon={Share}
             color="inverse"
-            onClick={() => console.log(`trash ${row}!`)}
+            onClick={() => console.log(`search ${row}!`)}
           />
         </Tooltip>
-      )}
-    </>
-  ),
-};
-HoverActions.parameters = {
-  docs: {
-    description: {
-      story: `It is a common design pattern to include actionable buttons for a table row. The
-Table Module exposes a \`rowActions\` prop to help. Hover over a row to view the
-actions toolbar.`,
+        {row.description !== 'Cupcake' && (
+          <Tooltip title="Trash">
+            <IconButton
+              aria-label="Trash"
+              icon={Trash}
+              color="inverse"
+              onClick={() => console.log(`trash ${row}!`)}
+            />
+          </Tooltip>
+        )}
+        {row.fat === '9.0' && (
+          <Tooltip title="Amaze">
+            <IconButton
+              aria-label="Amaze"
+              icon={Smile}
+              color="inverse"
+              onClick={() => console.log(`Amaze ${row}!`)}
+            />
+          </Tooltip>
+        )}
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `It is a common design pattern to include actionable buttons for a table row. The
+  Table Module exposes a \`rowActions\` prop to help. Hover over a row to view the
+  actions toolbar.\nActions can be different per row, in this example the row where fat = 9.0 has 
+  an extra action "Amaze" and the row where description = "Cupcake" does not have a "Trash" action.`,
+      },
     },
   },
 };
 
-export const RowSelection: ComponentStory<typeof TableModule> = (args) => {
-  const tableRef = useRef<HTMLTableElement | null>(null);
+const TemplateRowSelection: StoryFn<typeof TableModule> = (args) => {
+  const tableRef = React.useRef<HTMLTableElement | null>(null);
   const initialRowSelection: RowSelectionState = { '0': true };
   const [rowSelection, setRowSelection] = React.useState(initialRowSelection);
   const selectionColumn: TableConfiguration<RowSelectionRow> = {
@@ -564,33 +210,7 @@ export const RowSelection: ComponentStory<typeof TableModule> = (args) => {
     <TableModule
       {...args}
       data={data}
-      config={[
-        selectionColumn,
-        {
-          header: {
-            label: 'Description',
-          },
-          cell: {
-            valuePath: 'description',
-          },
-        },
-        {
-          header: {
-            label: 'Calories',
-          },
-          cell: {
-            valuePath: 'calories',
-          },
-        },
-        {
-          header: {
-            label: 'Fat',
-          },
-          cell: {
-            valuePath: 'fat',
-          },
-        },
-      ]}
+      config={[selectionColumn, ...configBasic]}
       ref={tableRef}
       rowClickLabel="row-click-label"
       enableRowSelection={true}
@@ -600,21 +220,24 @@ export const RowSelection: ComponentStory<typeof TableModule> = (args) => {
   );
 };
 
-RowSelection.parameters = {
-  docs: {
-    description: {
-      story: `It is a common design pattern to include multi-selection for a
-      table. The TableModule exposes properties like \`enableRowSelection\` to
-      enable this capability and use \`state.rowSelection\` to initialize row
-      selection state. In order to access row selection state, use the \`onRowSelectionChange\`
-      handler.`,
+export const RowSelection: Story = {
+  render: TemplateRowSelection,
+  parameters: {
+    docs: {
+      description: {
+        story: `It is a common design pattern to include multi-selection for a
+        table. The TableModule exposes properties like \`enableRowSelection\` to
+        enable this capability and use \`state.rowSelection\` to initialize row
+        selection state. In order to access row selection state, use the \`onRowSelectionChange\`
+        handler.`,
+      },
     },
   },
 };
 
-export const RowAddRemove = () => {
-  const [tableData, setTableData] = useState(data);
-  const tableRef = useRef<HTMLTableElement>(null);
+const TemplateRowAddRemove: StoryFn<typeof TableModule> = (args) => {
+  const [tableData, setTableData] = React.useState(data);
+  const tableRef = React.useRef<HTMLTableElement>(null);
   return (
     <div style={{ overflow: 'auto', width: '80%' }}>
       <Button
@@ -625,11 +248,12 @@ export const RowAddRemove = () => {
         Add row
       </Button>
       <TableModule
+        {...args}
         data={tableData}
-        config={HoverActions.args.config}
+        config={configBasic}
         ref={tableRef}
         rowClickLabel="row-click-label"
-        rowActions={(row: any, index?: number) => (
+        rowActions={(_row: any, index?: number) => (
           <Button
             variant="text"
             color="inverse"
@@ -650,10 +274,14 @@ export const RowAddRemove = () => {
   );
 };
 
-export const RowManualOrder: ComponentStory<typeof TableModule> = (args) => {
-  const tableRef = useRef<HTMLTableElement | null>(null);
+export const RowAddRemove: Story = {
+  render: TemplateRowAddRemove,
+};
+
+const TemplateRowManualOrder: StoryFn<typeof TableModule> = (args) => {
+  const tableRef = React.useRef<HTMLTableElement | null>(null);
   const [tableData, setTableData] = React.useState(data);
-  const spinColumn: TableConfiguration<Item> = {
+  const spinColumn: TableConfiguration = {
     header: {
       content: () => '',
     },
@@ -662,7 +290,7 @@ export const RowManualOrder: ComponentStory<typeof TableModule> = (args) => {
         <SpinButton
           decrementDisabled={index === tableData.length - 1}
           incrementDisabled={index === 0}
-          onIncrement={(e) => {
+          onIncrement={(_e) => {
             // swap row at index -1 and index
             const targetIndex = index! - 1;
             tableData[targetIndex] = tableData.splice(
@@ -672,7 +300,7 @@ export const RowManualOrder: ComponentStory<typeof TableModule> = (args) => {
             )[0];
             setTableData([...tableData]);
           }}
-          onDecrement={(e) => {
+          onDecrement={(_e) => {
             // swap row at index and index + 1
             const targetIndex = index! + 1;
             tableData[targetIndex] = tableData.splice(
@@ -690,46 +318,23 @@ export const RowManualOrder: ComponentStory<typeof TableModule> = (args) => {
     <TableModule
       {...args}
       data={tableData}
-      config={[
-        spinColumn,
-        {
-          header: {
-            label: 'Description',
-          },
-          cell: {
-            valuePath: 'description',
-          },
-        },
-        {
-          header: {
-            label: 'Calories',
-          },
-          cell: {
-            valuePath: 'calories',
-          },
-        },
-        {
-          header: {
-            label: 'Fat',
-          },
-          cell: {
-            valuePath: 'fat',
-          },
-        },
-      ]}
+      config={[spinColumn, ...configBasic]}
       ref={tableRef}
       rowClickLabel="row-click-label"
     />
   );
 };
 
-RowManualOrder.parameters = {
-  docs: {
-    description: {
-      story: `It supports manual row order via SpinButton. In this example, it
-      could either click the Up or Down button to adjust the order of a row.
-      When using keyboard, please use the Tab key to focus on a SpinButton then
-      use ArrowUp or ArrowDown button.`,
+export const RowManualOrder: Story = {
+  render: TemplateRowManualOrder,
+  parameters: {
+    docs: {
+      description: {
+        story: `It supports manual row order via SpinButton. In this example, it
+        could either click the Up or Down button to adjust the order of a row.
+        When using keyboard, please use the Tab key to focus on a SpinButton then
+        use ArrowUp or ArrowDown button.`,
+      },
     },
   },
 };
diff --git a/src/components/TableModule/config.ts b/src/components/TableModule/config.ts
new file mode 100644
index 00000000..41869251
--- /dev/null
+++ b/src/components/TableModule/config.ts
@@ -0,0 +1,99 @@
+const configBasic = [
+  {
+    header: {
+      label: 'Description',
+    },
+    cell: {
+      content: (dataValue: any) => {
+        return dataValue.description;
+      },
+    },
+    isSticky: false, // can be omitted if false
+  },
+  {
+    header: {
+      label: 'Calories',
+    },
+    cell: {
+      content: (dataValue: any) => {
+        return dataValue.calories;
+      },
+    },
+    isSticky: false,
+  },
+  {
+    header: {
+      label: 'Fat',
+    },
+    cell: {
+      content: (dataValue: any) => {
+        return dataValue.fat;
+      },
+    },
+    isSticky: false,
+  },
+  {
+    header: {
+      label: 'Carbs',
+    },
+    cell: {
+      content: (dataValue: any) => {
+        return dataValue.carbs;
+      },
+    },
+    isSticky: false,
+  },
+  {
+    header: {
+      label: 'Category',
+    },
+    cell: {
+      content: (dataValue: any) => {
+        return dataValue.category;
+      },
+    },
+    isSticky: false,
+  },
+];
+
+const configSticky = configBasic.map((item, index) => {
+  if (index < 2) {
+    return { ...item, isSticky: true };
+  }
+  return { ...item };
+});
+
+// double the items in configSticky so it is wide enough to scroll horizontally on most screens, so the sticky columns can be easily demoed
+configSticky.forEach((_item, index) => {
+  configSticky.push({
+    header: {
+      label: 'Lorem Ipsum',
+    },
+    cell: {
+      content: (dataValue: any) => {
+        return dataValue.misc;
+      },
+    },
+    // index is arbitrary here, just trying to show sticky columns don't have to be consecutive
+    isSticky: index === 0 ? true : false,
+  });
+});
+
+const configWrapped = configBasic.map((item) => {
+  if (item.header.label === 'Calories') {
+    return {
+      ...item,
+      cell: {
+        content: (dataValue: any) => {
+          if (dataValue.description === 'Frozen yoghurt') {
+            return 'Vanilla: 250\nStrawberry: 175\nPlain: 80\n\nYogurt is known to provide probiotics through naturally included bacterial cultures. Beware of increaing your sugar intake though.\n\nNon-dairy options exist for those with lactose intolerance.';
+          }
+          return dataValue.calories;
+        },
+      },
+    };
+  }
+  return { ...item };
+});
+
+export { configBasic, configSticky, configWrapped };
diff --git a/src/components/TableModule/configSort.ts b/src/components/TableModule/configSort.ts
new file mode 100644
index 00000000..926b227a
--- /dev/null
+++ b/src/components/TableModule/configSort.ts
@@ -0,0 +1,58 @@
+import { TableSortClickProps, TableConfiguration } from './types';
+
+const buildSortConfig = (handleSortClick: any) => {
+  return [
+    {
+      header: {
+        label: 'Description',
+        onSort: (header: TableSortClickProps) => {
+          handleSortClick({
+            key: 'description',
+            direction: header.sortDirection,
+          });
+        },
+      },
+      cell: {
+        valuePath: 'description',
+      },
+    },
+    {
+      header: {
+        label: 'Calories',
+        onSort: (header: TableSortClickProps) => {
+          handleSortClick({
+            key: 'calories',
+            direction: header.sortDirection,
+          });
+        },
+      },
+      cell: {
+        valuePath: 'calories',
+      },
+    },
+    {
+      header: {
+        label: 'Fat',
+        onSort: (header: TableSortClickProps) => {
+          handleSortClick({ key: 'fat', direction: header.sortDirection });
+        },
+      },
+      cell: {
+        valuePath: 'fat',
+      },
+    },
+    {
+      header: {
+        label: 'Carbs',
+        onSort: (header: TableSortClickProps) => {
+          handleSortClick({ key: 'carbs', direction: header.sortDirection });
+        },
+      },
+      cell: {
+        valuePath: 'carbs',
+      },
+    },
+  ] as Array<TableConfiguration>;
+};
+
+export { buildSortConfig };
diff --git a/src/components/TableModule/storyData.ts b/src/components/TableModule/storyData.ts
new file mode 100644
index 00000000..46aff65f
--- /dev/null
+++ b/src/components/TableModule/storyData.ts
@@ -0,0 +1,34 @@
+export const data = [
+  {
+    description: 'Frozen yoghurt',
+    calories: '159',
+    fat: '6.0',
+    carbs: '24',
+    category: 'yogurt',
+    misc: 'opulem',
+  },
+  {
+    description: 'Ice cream sandwich',
+    calories: '237',
+    fat: '9.0',
+    carbs: '37',
+    category: 'ice cream',
+    misc: 'retata',
+  },
+  {
+    description: 'Eclair',
+    calories: '262',
+    fat: '16.0',
+    carbs: '24',
+    category: 'dessert',
+    misc: 'doleam',
+  },
+  {
+    description: 'Cupcake',
+    calories: '305',
+    fat: '3.7',
+    carbs: '67',
+    category: 'cake',
+    misc: 'consecutir',
+  },
+];