rez-table-listing-mui 1.3.62 → 2.0.1

package/src/listing/components/{table-head.tsx → table-head/table-head.tsx}

@@ -3,17 +3,25 @@ import {
   CraftTableFeatureProps,
   craftTableFilterSettingsOptionsProps,
   CraftTableOptionsProps,
-} from "../types/table-options";
-import { DownArrow, UpArrow } from "../../assets/svg";
-import { CSSProperties, useState } from "react";
-import { getColumnPinningStyles } from "../libs/utils/common";
+} from "../../types/table-options";
+import { DownArrow, UpArrow } from "../../../assets/svg";
+import { useState } from "react";
+import { getColumnPinningStyles } from "../../libs/utils/common";
 import {
   horizontalListSortingStrategy,
   SortableContext,
 } from "@dnd-kit/sortable";
 import DraggableTableHeader from "./table-head-dnd-cell";
 import TableHeadPin from "./table-head-pin";
-import Checkbox from "./inputs/checkbox";
+import Checkbox from "../inputs/checkbox";
+import TableColumnResizeHandle from "./table-head-resizer";
+import {
+  TableHeadCell,
+  TableHeadContent,
+  TableHeadRoot,
+  TableHeadRow,
+  TableHeadSort,
+} from "./table-head.styles";
 
 interface TableHeadProps<T> {
   table: Table<T>;
@@ -49,54 +57,26 @@ function TableHead<T>({
   };
 
   return (
-    <thead className={`ts__head ${stickyHeader ? "ts--sticky" : ""}`.trim()}>
+    <TableHeadRoot sticky={stickyHeader}>
       {table.getHeaderGroups().map((headerGroup) => (
-        <tr className="ts__head__tr" key={headerGroup?.id}>
+        <TableHeadRow striped={featureOptions.striped} key={headerGroup?.id}>
           {enableRowSelection && (
-            <th
-              className="ts__head__th ts__head__checkbox"
-              style={{
-                position: "sticky",
-                left: 0,
-                width: "50px",
-              }}
+            <TableHeadCell
+              sticky
+              compact={featureOptions.compactTable}
+              style={{ width: 50 }}
             >
-              <div className="ts__content">
+              <TableHeadContent>
                 <Checkbox
                   checked={table.getIsAllRowsSelected()}
                   indeterminate={table.getIsSomeRowsSelected()}
                   onChange={() => table.toggleAllRowsSelected()}
                 />
-              </div>
-            </th>
+              </TableHeadContent>
+            </TableHeadCell>
           )}
 
           {headerGroup.headers.map((header) => {
-            let sortProps: {
-              className: string;
-              title?: string;
-              style?: CSSProperties;
-            } = {
-              className: "ts__content",
-              // style: {
-              //   justifyContent: getColumnAlignment(
-              //     (header?.column?.columnDef?.meta as align)?.align
-              //   ),
-              // },
-            };
-
-            // if (header.column.getCanSort()) {
-            //   sortProps = {
-            //     ...sortProps,
-            //     title:
-            //       header.column.getNextSortingOrder() === "asc"
-            //         ? "Sort ascending"
-            //         : header.column.getNextSortingOrder() === "desc"
-            //         ? "Sort descending"
-            //         : "Clear sort",
-            //   };
-            // }
-
             return enableColumnReordering ? (
               <SortableContext
                 key={header?.id}
@@ -113,36 +93,30 @@ function TableHead<T>({
                 />
               </SortableContext>
             ) : (
-              <th
+              <TableHeadCell
                 key={header?.id}
-                className="ts__head__th"
                 colSpan={header.colSpan}
+                compact={featureOptions.compactTable}
+                onClick={handleHover}
                 style={{
                   ...getColumnPinningStyles(header.column),
                   width: `${header.column.getSize()}px`,
                   minWidth: `${header.column.columnDef.minSize}px`,
                   maxWidth: `${header.column.columnDef.maxSize}px`,
                 }}
-                onClick={handleHover}
               >
                 {header.isPlaceholder ? null : (
-                  <div {...sortProps}>
-                    <div
-                      className={`${
-                        header.column.getCanSort() ? "ts__content__sort" : ""
-                      }`.trim()}
-                      // onClick={header.column.getToggleSortingHandler()}
-                    >
+                  <TableHeadContent>
+                    <TableHeadSort sortable={header.column.getCanSort()}>
                       {flexRender(
                         header.column.columnDef.header,
                         header.getContext()
                       )}
 
-                      {{
-                        asc: <UpArrow />,
-                        desc: <DownArrow />,
-                      }[header.column.getIsSorted() as "asc" | "desc"] ?? null}
-                    </div>
+                      {{ asc: <UpArrow />, desc: <DownArrow /> }[
+                        header.column.getIsSorted() as "asc" | "desc"
+                      ] ?? null}
+                    </TableHeadSort>
 
                     {enableColumnPinning && (
                       <TableHeadPin
@@ -151,19 +125,12 @@ function TableHead<T>({
                         tableStates={tableStates}
                       />
                     )}
-                  </div>
+                  </TableHeadContent>
                 )}
 
                 {/* column resizing */}
                 {header.column.getCanResize() ? (
-                  <div
-                    onDoubleClick={() => header.column.resetSize()}
-                    onMouseDown={header.getResizeHandler()}
-                    onTouchStart={header.getResizeHandler()}
-                    className={`column__resize ${
-                      header.column.getIsResizing() ? "is__resizing" : ""
-                    }`}
-                  />
+                  <TableColumnResizeHandle header={header} />
                 ) : null}
 
                 {/* Popover */}
@@ -174,12 +141,12 @@ function TableHead<T>({
                   wrap={wrap}
                   tableStates={tableStates}
                 /> */}
-              </th>
+              </TableHeadCell>
             );
           })}
-        </tr>
+        </TableHeadRow>
       ))}
-    </thead>
+    </TableHeadRoot>
   );
 }
 

package/src/listing/components/table.tsx

@@ -1,7 +1,7 @@
 import { formatClassName } from "../libs/utils/common";
 import { CraftTableComponentProps } from "../types/table";
-import TableBody from "./table-body";
-import TableHead from "./table-head";
+import TableBody from "./table-body/table-body";
+import TableHead from "./table-head/table-head";
 
 function Table<T>({
   table,

package/src/listing/components/tabs/index.tsx

@@ -1,24 +1,21 @@
-import "./index.scss";
-import { Box, CircularProgress, IconButton, Tab, Tabs } from "@mui/material";
+import { Box, CircularProgress, IconButton } from "@mui/material";
 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";
-import { SettingIcon } from "../../../assets/svg";
+import { TableTab, TableTabCount, TableTabsRoot } from "./tabs.styles";
+import { SettingsOutlined } from "@mui/icons-material";
 
 interface TabDataProps {
-  tab_name: string | null;
-  count: string | number;
+  tab_value: string | null;
+  tab_value_count?: string | number;
 }
 
 interface TableTabsProps {
   loading?: boolean;
   tabsData?: TabDataProps[];
-  activeTab?: any;
+  activeTab?: string;
   tableStates: CraftTableOptionsProps;
   onClick: (state: string) => void;
-  columns?: any[];
   settingsOptions?: settingsOptionsProps;
 }
 
@@ -34,23 +31,25 @@ export function TableTabs({
 
   const handleTabClick = (tab: string) => {
     onClick(tab);
-    tableStates.setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    tableStates.setPagination((prev) => ({
+      ...prev,
+      pageIndex: 0,
+    }));
   };
 
-  // Normalize tab_name to uppercase for display + logic
   const normalizedTabs = useMemo(() => {
     return tabsData
-      ?.filter((tab) => tab.tab_name !== null)
+      ?.filter((tab) => tab.tab_value !== null)
       ?.map((tab) => ({
         ...tab,
-        tab_name: tab.tab_name,
+        tab_value: tab.tab_value,
       }));
   }, [tabsData]);
 
   const defaultTab = useMemo(() => {
     return (
-      normalizedTabs.find((t) => t.tab_name === "All")?.tab_name ||
-      normalizedTabs[0]?.tab_name ||
+      normalizedTabs.find((t) => t.tab_value === "All")?.tab_value ||
+      normalizedTabs[0]?.tab_value ||
       ""
     );
   }, [normalizedTabs]);
@@ -59,60 +58,43 @@ export function TableTabs({
 
   return (
     <Box display="flex" alignItems="center" justifyContent="flex-start">
-      {/* Layout settings icon */}
+      {/* Settings icon */}
       {settingsOptions?.showIcon && (
-        <IconButton
-          onClick={settingsOptions?.onClick}
-          sx={{ zIndex: 1000, mx: 0 }}
-        >
-          <SettingIcon />
+        <IconButton size="small" onClick={settingsOptions?.onClick}>
+          <SettingsOutlined fontSize="small" />
         </IconButton>
       )}
 
       {/* Tabs */}
-      <Tabs
+      <TableTabsRoot
         value={selectedTab}
-        onChange={(_, newValue) => {
-          handleTabClick(newValue);
-        }}
+        onChange={(_, newValue) => handleTabClick(newValue)}
         variant="scrollable"
         scrollButtons="auto"
-        slotProps={{ indicator: { sx: { display: "none" } } }}
-        sx={tableTabsStyles.tabs}
       >
         {normalizedTabs.map((tab) => {
-          const isSelected = activeTab?.tab_name === tab?.tab_name;
+          const isSelected = activeTab === tab?.tab_value;
 
           return (
-            <Tab
-              key={tab?.tab_name}
-              value={tab}
+            <TableTab
+              key={tab?.tab_value}
+              value={tab?.tab_value}
               label={
                 <Box display="flex" alignItems="center" gap={1}>
-                  <Box>{tab?.tab_name}</Box>
-                  <Box
-                    sx={{
-                      ...tableTabsStyles.tabCount,
-                      ...(isSelected && {
-                        // backgroundColor: "#ced3da",
-                        // borderColor: "#ced3da",
-                        backgroundColor: "#000",
-                        color: "#fff",
-                        fontWeight: "500",
-                      }),
-                    }}
-                  >
-                    {tab?.count == 0
-                      ? "0"
-                      : String(tab?.count).padStart(2, "0")}
+                  <Box sx={{ color: isSelected ? "#000" : "" }}>
+                    {tab?.tab_value}
                   </Box>
+                  <TableTabCount selected={isSelected}>
+                    {tab?.tab_value_count == 0
+                      ? "0"
+                      : String(tab?.tab_value_count).padStart(2, "0")}
+                  </TableTabCount>
                 </Box>
               }
-              sx={tableTabsStyles.tab}
             />
           );
         })}
-      </Tabs>
+      </TableTabsRoot>
     </Box>
   );
 }

package/src/listing/components/tabs/tabs.styles.ts

@@ -0,0 +1,49 @@
+// tableTabs.styles.ts
+import { styled } from "@mui/material/styles";
+import Tabs, { tabsClasses } from "@mui/material/Tabs";
+import Tab, { tabClasses } from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+
+export const TableTabsRoot = styled(Tabs)(({ theme }) => ({
+  minHeight: theme.spacing(3.5),
+
+  [`& .${tabsClasses.flexContainer}`]: {
+    minHeight: theme.spacing(3.5),
+  },
+
+  // hide indicator (instead of slotProps every time)
+  [`& .${tabsClasses.indicator}`]: {
+    display: "none",
+  },
+}));
+
+export const TableTab = styled(Tab)(({ theme }) => ({
+  color: theme.palette.grey[600],
+  padding: theme.spacing(1, 1.5),
+  minHeight: theme.spacing(3.5),
+  maxHeight: theme.spacing(3.5),
+  textTransform: "none",
+  minWidth: "unset",
+  whiteSpace: "nowrap",
+
+  [`&.${tabClasses.selected}`]: {
+    color: theme.palette.text.primary,
+    fontWeight: 700,
+  },
+}));
+
+export const TableTabCount = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "selected",
+})<{ selected?: boolean }>(({ theme, selected }) => ({
+  padding: theme.spacing(0.25),
+  borderRadius: theme.shape.borderRadius,
+  border: `1px solid ${
+    selected ? theme.palette.text.primary : theme.palette.grey[700]
+  }`,
+  color: selected ? theme.palette.common.white : theme.palette.text.primary,
+  backgroundColor: selected ? theme.palette.text.primary : "transparent",
+  fontWeight: selected ? 500 : 400,
+  lineHeight: 1,
+  minWidth: 20,
+  textAlign: "center",
+}));

package/src/listing/components/topbar/index.scss

@@ -34,13 +34,11 @@
         }
       }
       .ts--button {
-        margin-right: 0.6rem;
-        margin-top: 1rem;
         cursor: pointer;
       }
 
       .change-layout {
-        margin-top: 0.99rem;
+        margin-top: 0.4rem;
         cursor: pointer;
       }
 
@@ -54,7 +52,7 @@
       }
 
       .hide-column {
-        margin-top: 0.9rem;
+        margin-top: 0.8rem;
         position: relative;
 
         .ts-dropdown {