rez-table-listing-mui 1.2.6 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/components/tabs/index.tsx

@@ -4,6 +4,7 @@ import { CraftTableOptionsProps } from "../../types/table-options";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import { settingsOptionsProps } from "../../types/table";
 import { tableTabsStyles } from "./styles";
+import { useMemo } from "react";
 
 interface TabDataProps {
   tab_value: string | null;
@@ -36,12 +37,24 @@ export function TableTabs({
   };
 
   // Normalize tab_value to uppercase for display + logic
-  const normalizedTabs = tabsData
-    ?.filter((tab) => tab.tab_value)
-    ?.map((tab) => ({
-      ...tab,
-      tab_value: tab.tab_value,
-    }));
+  const normalizedTabs = useMemo(() => {
+    return tabsData
+      ?.filter((tab) => tab.tab_value)
+      ?.map((tab) => ({
+        ...tab,
+        tab_value: tab.tab_value?.toUpperCase(),
+      }));
+  }, [tabsData]);
+
+  const defaultTab = useMemo(() => {
+    return (
+      normalizedTabs.find((t) => t.tab_value === "ALL")?.tab_value ||
+      normalizedTabs[0]?.tab_value ||
+      ""
+    );
+  }, [normalizedTabs]);
+
+  const selectedTab = activeTab || defaultTab;
 
   return (
     <Box display="flex" alignItems="center" justifyContent="flex-start">
@@ -57,7 +70,7 @@ export function TableTabs({
 
       {/* Tabs */}
       <Tabs
-        value={activeTab}
+        value={selectedTab}
         onChange={(_, newValue) => handleTabClick(newValue)}
         variant="scrollable"
         scrollButtons={false}