diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx
index 54f5a8c795..52e3702816 100644
--- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx
+++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx
@@ -13,7 +13,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { useMemo, useCallback } from "react";
 import { DataFilter } from "@okta/odyssey-react-mui/labs";
-import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui";
+import { DataTable, DataTableGetDataType } from "@okta/odyssey-react-mui";
 import { useColumns, data, OdysseyComponent } from "./roadmapData";
 import {
   Callout,
@@ -25,96 +25,95 @@ import {
 import { ThemeProvider as StorybookThemeProvider } from "@storybook/theming";
 import * as odysseyTokens from "@okta/odyssey-design-tokens";
 
-const processData = ({
-  initialData,
-  search,
-  filters,
-  sort,
-}: {
-  initialData: OdysseyComponent[];
-  search?: string;
-  filters?: DataFilter[];
-  sort?: DataTableSortingState;
-}) => {
-  let filteredData = [...initialData];
-
-  // Implement text-based query filtering
-  if (search) {
-    filteredData = filteredData.filter((row) =>
-      Object.values(row).some((value) =>
-        value.toString().toLowerCase().includes(search.toLowerCase()),
-      ),
-    );
-  }
-
-  // Implement column-specific filtering
-  if (filters) {
-    filteredData = filteredData.filter((row) => {
-      return filters.every(({ id, value }) => {
-        // If filter value is null or undefined, skip this filter
-        if (value === null || value === undefined) {
-          return true;
-        }
+// const processData = ({
+//   initialData,
+//   search,
+//   filters,
+//   sort,
+// }: {
+//   initialData: OdysseyComponent[];
+//   search?: string;
+//   filters?: DataFilter[];
+// }) => {
+//   let filteredData = [...initialData];
 
-        // General filtering for other columns
-        return row[id as keyof OdysseyComponent]
-          ?.toString()
-          .includes(value.toString());
-      });
-    });
-  }
+//   // Implement text-based query filtering
+//   if (search) {
+//     filteredData = filteredData.filter((row) =>
+//       Object.values(row).some((value) =>
+//         value.toString().toLowerCase().includes(search.toLowerCase()),
+//       ),
+//     );
+//   }
 
-  function parseCustomDate(dateStr: string): Date {
-    if (dateStr.length <= 0) {
-      return new Date(2999, 0);
-    }
+//   // Implement column-specific filtering
+//   if (filters) {
+//     filteredData = filteredData.filter((row) => {
+//       return filters.every(({ id, value }) => {
+//         // If filter value is null or undefined, skip this filter
+//         if (value === null || value === undefined) {
+//           return true;
+//         }
 
-    const months = [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun",
-      "Jul",
-      "Aug",
-      "Sep",
-      "Oct",
-      "Nov",
-      "Dec",
-    ];
-    const [monthStr, yearStr] = dateStr.split(" ");
-
-    const month = months.indexOf(monthStr);
-    const year = parseInt(yearStr.replace("'", ""), 10) + 2000; // Adjust for century
-
-    return new Date(year, month);
-  }
-
-  // Implement sorting
-  if (sort && sort.length > 0) {
-    filteredData.sort((a, b) => {
-      for (const { id, desc } of sort) {
-        let aValue: string | Date = a[id as keyof OdysseyComponent];
-        let bValue: string | Date = b[id as keyof OdysseyComponent];
-
-        if (
-          id === "startDate" ||
-          id === "labsRelease" ||
-          id === "fullRelease"
-        ) {
-          aValue = parseCustomDate(aValue);
-          bValue = parseCustomDate(bValue);
-        }
+//         // General filtering for other columns
+//         return row[id as keyof OdysseyComponent]
+//           ?.toString()
+//           .includes(value.toString());
+//       });
+//     });
+//   }
 
-        if (aValue < bValue) return desc ? 1 : -1;
-        if (aValue > bValue) return desc ? -1 : 1;
-      }
+//   function parseCustomDate(dateStr: string): Date {
+//     if (dateStr.length <= 0) {
+//       return new Date(2999, 0);
+//     }
 
-      return 0;
-    });
-  }
-};
+//     const months = [
+//       "Jan",
+//       "Feb",
+//       "Mar",
+//       "Apr",
+//       "May",
+//       "Jun",
+//       "Jul",
+//       "Aug",
+//       "Sep",
+//       "Oct",
+//       "Nov",
+//       "Dec",
+//     ];
+//     const [monthStr, yearStr] = dateStr.split(" ");
+
+//     const month = months.indexOf(monthStr);
+//     const year = parseInt(yearStr.replace("'", ""), 10) + 2000; // Adjust for century
+
+//     return new Date(year, month);
+//   }
+
+//   // Implement sorting
+//   if (sort && sort.length > 0) {
+//     filteredData.sort((a, b) => {
+//       for (const { id, desc } of sort) {
+//         let aValue: string | Date = a[id as keyof OdysseyComponent];
+//         let bValue: string | Date = b[id as keyof OdysseyComponent];
+
+//         if (
+//           id === "startDate" ||
+//           id === "labsRelease" ||
+//           id === "fullRelease"
+//         ) {
+//           aValue = parseCustomDate(aValue);
+//           bValue = parseCustomDate(bValue);
+//         }
+
+//         if (aValue < bValue) return desc ? 1 : -1;
+//         if (aValue > bValue) return desc ? -1 : 1;
+//       }
+
+//       return 0;
+//     });
+//   }
+// };
 
 export const InnerRoadmapTable = () => {
   const columns = useColumns(); // Use the hook to get columns
@@ -153,26 +152,47 @@ export const InnerRoadmapTable = () => {
     ],
     [],
   );
+  const filterData = ({
+    data,
+    ...args
+  }: {
+    data: OdysseyComponent[];
+  } & DataTableGetDataType) => {
+    let filteredData = data;
+    const { search, sort } = args;
 
-  // Memoize the fetchData function
-  const fetchData = useCallback(
-    ({
-      search,
-      filters,
-      sort,
-    }: {
-      search?: string;
-      filters?: DataFilter[];
-      sort?: DataTableSortingState;
-    }) => {
-      return processData({
-        initialData: data,
-        search,
-        filters,
-        sort,
+    // Implement text-based query filtering
+    if (search) {
+      filteredData = filteredData.filter((row) =>
+        Object.values(row).some((value) =>
+          value.toString().toLowerCase().includes(search.toLowerCase()),
+        ),
+      );
+    }
+
+    // Implement sorting
+    if (sort && sort.length > 0) {
+      filteredData.sort((a, b) => {
+        for (const { id, desc } of sort) {
+          const aValue = a[id as keyof Planet];
+          const bValue = b[id as keyof Planet];
+
+          if (aValue < bValue) return desc ? 1 : -1;
+          if (aValue > bValue) return desc ? -1 : 1;
+        }
+
+        return 0;
       });
+    }
+
+    return filteredData;
+  };
+
+  const fetchData = useCallback(
+    ({ ...props }: DataTableGetDataType) => {
+      return filterData({ data, ...props });
     },
-    [data], // Add data as a dependency if it can change
+    [data],
   );
   // const fetchData = useCallback(
   //   ({ ...props }: DataTableGetDataType) => {