rez-table-listing-mui 0.0.20 → 0.0.22

package/src/components/tabs/index.tsx

@@ -8,6 +8,7 @@ import {
   List,
   ListItemButton,
   ListItemText,
+  CircularProgress,
 } from "@mui/material";
 import { useCraftTable } from "../../libs/hooks/useCraftTable";
 
@@ -22,6 +23,7 @@ interface TableTabsProps<T> {
   statusKey: string;
   onClick: (state: string) => void;
   tabStats?: TabStat[];
+  loading?: boolean;
 }
 
 export function TableTabs<T>({
@@ -30,6 +32,7 @@ export function TableTabs<T>({
   statusKey,
   onClick,
   tabStats,
+  loading,
 }: TableTabsProps<T>) {
   const [activeTab, setActiveTab] = useState<string>(state || "ALL");
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -69,56 +72,55 @@ export function TableTabs<T>({
 
   return (
     <div className="table-tabs">
-      <ul className="tabs">
-        {/* <div
-          className="tabs-settings"
-          onClick={(event) => {
-            setAnchorEl(event.currentTarget);
-          }}
-        >
-          <SettingIcon />
-        </div> */}
-
-        {(selectedColumn || tabStats?.length) && (
-          <>
-            <li
-              className={formatClassName(
-                `tab ${activeTab === "ALL" ? "active" : ""}`
-              )}
-              onClick={() => {
-                setActiveTab("ALL");
-                setPagination((prev) => ({ ...prev, pageIndex: 0 })); // Reset to first page
-                onClick("ALL");
-              }}
-            >
-              <span>All</span>
-              <span>
-                {tabsData.find((tab) => tab.label === "ALL")?.count ?? 0}
-              </span>
-            </li>
-            {tabsData
-              .filter(({ label }) => label !== "ALL")
-              .map(({ label, count }) => (
-                <li
-                  key={label}
-                  className={formatClassName(
-                    `tab ${activeTab === label ? "active" : ""}`
-                  )}
-                  onClick={() => {
-                    setActiveTab(label);
-                    setPagination((prev) => ({ ...prev, pageIndex: 0 })); // Reset to first page
-                    onClick(label);
-                  }}
-                >
-                  <span>
-                    {typeof label === "string" ? label.toUpperCase() : ""}
-                  </span>
-                  <span className="count">{count}</span>
-                </li>
-              ))}
-          </>
-        )}
-      </ul>
+      {loading ? (
+        <div className="tabs-loader">
+          <CircularProgress size={24} />
+        </div>
+      ) : (
+        <ul className="tabs">
+          {tabStats && tabStats.length > 0 && (
+            <>
+              <li
+                className={formatClassName(
+                  `tab ${activeTab === "ALL" ? "active" : ""}`
+                )}
+                onClick={() => {
+                  setActiveTab("ALL");
+                  setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+                  onClick("ALL");
+                }}
+              >
+                <span>All</span>
+                <span>
+                  {tabsData.find((tab) => tab.label === "ALL")?.count ?? 0}
+                </span>
+              </li>
+              {tabsData
+                .filter(({ label }) => label !== "ALL")
+                .map(({ label, count }) => (
+                  <li
+                    key={label}
+                    className={formatClassName(
+                      `tab ${activeTab === label ? "active" : ""}`
+                    )}
+                    onClick={() => {
+                      setActiveTab(label);
+                      setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+                      onClick(label);
+                    }}
+                  >
+                    <span>
+                      {typeof label === "string"
+                        ? label.toUpperCase()
+                        : "UNKNOWN"}
+                    </span>
+                    <span className="count">{count}</span>
+                  </li>
+                ))}
+            </>
+          )}
+        </ul>
+      )}
 
       <Popover
         open={Boolean(anchorEl)}

package/src/components/topbar/index.tsx

@@ -17,6 +17,7 @@ import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
 import SortPopover from "../sorting-modal.tsx";
 import ColumnToggle from "../column-visibility-modal/index.tsx";
 import { CraftTableOptionsProps } from "../../types/table-options.ts";
+import TableSearch from "../search/index.tsx";
 
 interface TopbarProps<T> {
   table: Table<T>;
@@ -28,6 +29,8 @@ interface TopbarProps<T> {
   columnOrder?: string[];
   setColumnOrder?: React.Dispatch<React.SetStateAction<string[]>>;
   tableStates?: CraftTableOptionsProps;
+  searchValue?: string;
+  onSearchChange?: (val: string) => void;
 }
 
 function Topbar<T>({
@@ -37,6 +40,8 @@ function Topbar<T>({
   setIsCompactTable,
   paginationComponent,
   topbarOptions,
+  searchValue,
+  onSearchChange,
 }: TopbarProps<T>) {
   const [wrapCell, setWrapCell] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -92,7 +97,6 @@ function Topbar<T>({
 
   // search
   const [showSearchInput, setShowSearchInput] = useState(false);
-  const [searchValue, setSearchValue] = useState("");
   const searchContainerRef = useRef<HTMLDivElement>(null);
 
   useOutsideClick({
@@ -116,21 +120,10 @@ function Topbar<T>({
         )} */}
 
         {showSearch && (
-          <div className="search-wrapper" ref={searchContainerRef}>
-            <div
-              className="search-icon ts--button"
-              onClick={() => setShowSearchInput((prev) => !prev)}
-            >
-              <SearchIcon />
-            </div>
-            <input
-              type="text"
-              className={`search-input ${showSearchInput ? "expanded" : ""}`}
-              placeholder="Type to search..."
-              value={searchValue}
-              onChange={(e) => setSearchValue(e.target.value)}
-            />
-          </div>
+          <TableSearch
+            value={searchValue ?? ""}
+            onChange={onSearchChange ?? (() => {})}
+          />
         )}
 
         {showChangeLayoutToggle && (
@@ -224,7 +217,7 @@ function Topbar<T>({
                 fullscreenToggle();
                 setIsFullscreen((prev) => !prev);
               }}
-              // groupBy={groupBy}
+              groupBy={groupBy}
               onGroupByChange={(value: string) => setGroupBy(value)}
             />
           </div>

package/src/types/table.ts

@@ -75,6 +75,8 @@ export interface CraftTableProps<T> {
   customRenderFn?: CustomRenderFnMap<T>;
   shouldHideColumn?: (accessorKey?: string) => boolean;
   styleOptions?: CraftTableStyleProps;
+  searchValue?: string;
+  onSearchChange?: (val: string) => void;
 }
 export interface CraftTableComponentProps<T> {
   table: Table<T>;