diff --git a/__mocks__/fake_table_columns_and_data.ts b/__mocks__/fake_table_columns_and_data.ts
new file mode 100644
index 000000000..ff97ac4cd
--- /dev/null
+++ b/__mocks__/fake_table_columns_and_data.ts
@@ -0,0 +1,41 @@
+import type { ColumnDef } from '@tanstack/react-table'
+
+export const FAKE_BASIC_TABLE_COLUMNS: Array<ColumnDef<FakeBasicTableDataItem>> = [
+  {
+    accessorFn: row => row.id,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    enableSorting: false,
+    header: () => 'ID',
+    id: 'id',
+    size: 64
+  },
+  {
+    accessorFn: row => row.lastName,
+    header: () => 'Last Name',
+    id: 'lastName'
+  },
+  {
+    accessorFn: row => row.firstName,
+    header: () => 'First Name',
+    id: 'firstName',
+    size: 240
+  }
+]
+
+export type FakeBasicTableDataItem = {
+  firstName: string
+  id: number
+  lastName: string
+}
+export const FAKE_BASIC_TABLE_DATA: FakeBasicTableDataItem[] = [
+  { firstName: 'Alice', id: 1, lastName: 'Smith' },
+  { firstName: 'Bob', id: 2, lastName: 'Johnson' },
+  { firstName: 'Charlie', id: 3, lastName: 'Williams' },
+  { firstName: 'David', id: 4, lastName: 'Brown' },
+  { firstName: 'Emily', id: 5, lastName: 'Jones' },
+  { firstName: 'Fiona', id: 6, lastName: 'Garcia' },
+  { firstName: 'George', id: 7, lastName: 'Miller' },
+  { firstName: 'Hannah', id: 8, lastName: 'Davis' },
+  { firstName: 'Ivan', id: 9, lastName: 'Rodriguez' },
+  { firstName: 'Jenny', id: 10, lastName: 'Martinez' }
+]
diff --git a/e2e/base/tables/DataTable.spec.tsx b/e2e/base/tables/DataTable.spec.tsx
index 7e475b42c..0b066232a 100644
--- a/e2e/base/tables/DataTable.spec.tsx
+++ b/e2e/base/tables/DataTable.spec.tsx
@@ -1,7 +1,26 @@
 import { StoryBox } from '../../../.storybook/components/StoryBox'
-import { _DataTable as DataTableStory, args as dataTableProps } from '../../../stories/tables/DataTable.stories'
+import {
+  FAKE_BASIC_TABLE_COLUMNS,
+  FAKE_BASIC_TABLE_DATA,
+  type FakeBasicTableDataItem
+} from '../../../__mocks__/fake_table_columns_and_data'
+import { _DataTable as DataTableStory } from '../../../stories/tables/DataTable.stories'
 import { mountAndWait } from '../utils'
 
+import type { DataTableProps } from 'index'
+
+const dataTableProps: DataTableProps<FakeBasicTableDataItem> = {
+  columns: FAKE_BASIC_TABLE_COLUMNS,
+  data: FAKE_BASIC_TABLE_DATA,
+  initialSorting: [
+    {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      desc: false,
+      id: 'lastName'
+    }
+  ]
+}
+
 context('Story', () => {
   it('Should find the matching first name using `cy.getTableRowById()`', () => {
     mountAndWait(
diff --git a/stories/tables/DataTable.stories.tsx b/stories/tables/DataTable.stories.tsx
index 3968a097c..a2809b329 100644
--- a/stories/tables/DataTable.stories.tsx
+++ b/stories/tables/DataTable.stories.tsx
@@ -1,46 +1,16 @@
 import { generateStoryDecorator } from '../../.storybook/utils/generateStoryDecorator'
+import {
+  FAKE_BASIC_TABLE_COLUMNS,
+  FAKE_BASIC_TABLE_DATA,
+  type FakeBasicTableDataItem
+} from '../../__mocks__/fake_table_columns_and_data'
 import { DataTable, type DataTableProps } from '../../src'
 
 import type { Meta } from '@storybook/react'
-import type { ColumnDef } from '@tanstack/react-table'
 
-const COLUMNS: Array<ColumnDef<(typeof DATA)[0]>> = [
-  {
-    accessorFn: row => row.id,
-    enableSorting: false,
-    header: () => 'ID',
-    id: 'id',
-    size: 64
-  },
-  {
-    accessorFn: row => row.lastName,
-    header: () => 'Last Name',
-    id: 'lastName'
-  },
-  {
-    accessorFn: row => row.firstName,
-    header: () => 'First Name',
-    id: 'firstName',
-    size: 240
-  }
-]
-
-export const DATA = [
-  { firstName: 'Alice', id: 1, lastName: 'Smith' },
-  { firstName: 'Bob', id: 2, lastName: 'Johnson' },
-  { firstName: 'Charlie', id: 3, lastName: 'Williams' },
-  { firstName: 'David', id: 4, lastName: 'Brown' },
-  { firstName: 'Emily', id: 5, lastName: 'Jones' },
-  { firstName: 'Fiona', id: 6, lastName: 'Garcia' },
-  { firstName: 'George', id: 7, lastName: 'Miller' },
-  { firstName: 'Hannah', id: 8, lastName: 'Davis' },
-  { firstName: 'Ivan', id: 9, lastName: 'Rodriguez' },
-  { firstName: 'Jenny', id: 10, lastName: 'Martinez' }
-]
-
-export const args: DataTableProps<(typeof DATA)[0]> = {
-  columns: COLUMNS,
-  data: DATA,
+const args: DataTableProps<FakeBasicTableDataItem> = {
+  columns: FAKE_BASIC_TABLE_COLUMNS,
+  data: FAKE_BASIC_TABLE_DATA,
   initialSorting: [
     {
       // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -51,7 +21,7 @@ export const args: DataTableProps<(typeof DATA)[0]> = {
 }
 
 /* eslint-disable sort-keys-fix/sort-keys-fix */
-const meta: Meta<DataTableProps<(typeof DATA)[0]>> = {
+const meta: Meta<DataTableProps<FakeBasicTableDataItem>> = {
   title: 'Tables/DataTable',
   component: DataTable,
 
@@ -65,7 +35,7 @@ const meta: Meta<DataTableProps<(typeof DATA)[0]>> = {
 
 export default meta
 
-export function _DataTable(props: DataTableProps<(typeof DATA)[0]>) {
+export function _DataTable(props: DataTableProps<FakeBasicTableDataItem>) {
   return (
     <>
       <DataTable {...props} />