rez-table-listing-mui 0.0.0

package/src/components/table-head-pin.tsx

@@ -0,0 +1,16 @@
+import { IconPinOffOutline } from "../assets/svg";
+import { TableHeaderProps } from "../types/table";
+
+function TableHeadPin<T>({ header }: TableHeaderProps<T>) {
+  return header.column.getIsPinned() !== "left" ? (
+    <div className="ts--head--button" onClick={() => header.column.pin("left")}>
+      {/* <IconPinOutline /> */}
+    </div>
+  ) : (
+    <div className="ts--head--button" onClick={() => header.column.pin(false)}>
+      <IconPinOffOutline />
+    </div>
+  );
+}
+
+export default TableHeadPin;

package/src/components/table-head-popover.tsx

@@ -0,0 +1,85 @@
+import {
+  Popover,
+  List,
+  ListItemButton,
+  ListItemText,
+  ListItemIcon,
+  Switch,
+} from "@mui/material";
+import { Header } from "@tanstack/react-table";
+import {
+  UpArrow,
+  DownArrow,
+  HideIcon,
+  IconPinOffOutline,
+  IconPinOutline,
+} from "../assets/svg";
+
+type Props<T> = {
+  anchorEl: HTMLElement | null;
+  onClose: () => void;
+  header: Header<T, unknown>;
+  wrap: boolean;
+  onToggleWrap: () => void;
+};
+
+function TableHeadPopover<T>({
+  anchorEl,
+  onClose,
+  header,
+  wrap,
+  onToggleWrap,
+}: Props<T>) {
+  const open = Boolean(anchorEl);
+  const column = header.column;
+  const isPinned = column.getIsPinned() === "left";
+
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+    >
+      <List dense>
+        <ListItemButton onClick={() => column.toggleSorting(false)}>
+          <ListItemIcon>
+            <UpArrow />
+          </ListItemIcon>
+          <ListItemText primary="Sort ascending" />
+        </ListItemButton>
+        <ListItemButton onClick={() => column.toggleSorting(true)}>
+          <ListItemIcon>
+            <DownArrow />
+          </ListItemIcon>
+          <ListItemText primary="Sort descending" />
+        </ListItemButton>
+        <ListItemButton onClick={() => column.toggleVisibility()}>
+          <ListItemIcon>
+            <HideIcon />
+          </ListItemIcon>
+          <ListItemText primary="Hide in view" />
+        </ListItemButton>
+        <ListItemButton
+          onClick={() => {
+            column.pin(isPinned ? false : "left");
+          }}
+        >
+          <ListItemIcon>
+            {isPinned ? <IconPinOffOutline /> : <IconPinOutline />}
+          </ListItemIcon>
+          <ListItemText
+            primary={isPinned ? "Unfreeze column" : "Freeze up to column"}
+          />
+        </ListItemButton>
+
+        <ListItemButton>
+          <ListItemText primary="Wrap Cell" />
+          <Switch checked={wrap} onChange={onToggleWrap} />
+        </ListItemButton>
+      </List>
+    </Popover>
+  );
+}
+
+export default TableHeadPopover;

package/src/components/table-head.tsx

@@ -0,0 +1,156 @@
+import { ColumnOrderState, flexRender, Table } from "@tanstack/react-table";
+import { CraftTableFeatureProps } from "../types/table-options";
+import { DownArrow, UpArrow } from "../assets/svg";
+import { CSSProperties } from "react";
+import {
+  getColumnAlignment,
+  getColumnPinningStyles,
+} from "../libs/utils/common";
+import { align } from "../types/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";
+
+interface TableHeadProps<T> {
+  table: Table<T>;
+  featureOptions: CraftTableFeatureProps;
+  columnOrder: ColumnOrderState;
+}
+
+function TableHead<T>({
+  table,
+  featureOptions,
+  columnOrder,
+}: TableHeadProps<T>) {
+  const {
+    stickyHeader,
+    enableColumnReordering,
+    enableColumnPinning,
+    enableRowSelection,
+  } = featureOptions;
+
+  return (
+    <thead className={`ts__head ${stickyHeader ? "ts--sticky" : ""}`.trim()}>
+      {table.getHeaderGroups().map((headerGroup) => (
+        <tr className="ts__head__tr" key={headerGroup?.id}>
+          {enableRowSelection && (
+            <th
+              className="ts__head__th ts__head__checkbox"
+              style={{
+                position: "sticky",
+                left: 0,
+                width: "50px",
+              }}
+            >
+              <div className="ts__content">
+                <Checkbox
+                  checked={table.getIsAllRowsSelected()}
+                  indeterminate={table.getIsSomeRowsSelected()}
+                  onChange={() => table.toggleAllRowsSelected()}
+                />
+              </div>
+            </th>
+          )}
+
+          {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}
+                items={columnOrder}
+                strategy={horizontalListSortingStrategy}
+              >
+                <DraggableTableHeader
+                  header={header}
+                  featureOptions={featureOptions}
+                />
+              </SortableContext>
+            ) : (
+              <th
+                key={header?.id}
+                className="ts__head__th"
+                colSpan={header.colSpan}
+                style={{
+                  ...getColumnPinningStyles(header.column),
+                  width: `${header.column.getSize()}px`,
+                  minWidth: `${header.column.columnDef.minSize}px`,
+                  maxWidth: `${header.column.columnDef.maxSize}px`,
+                }}
+              >
+                {header.isPlaceholder ? null : (
+                  <div {...sortProps}>
+                    <div
+                      className={`${
+                        header.column.getCanSort() ? "ts__content__sort" : ""
+                      }`.trim()}
+                      // onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+
+                      {{
+                        asc: <UpArrow />,
+                        desc: <DownArrow />,
+                      }[header.column.getIsSorted() as "asc" | "desc"] ?? null}
+                    </div>
+
+                    {enableColumnPinning && (
+                      <TableHeadPin
+                        header={header}
+                        featureOptions={featureOptions}
+                      />
+                    )}
+                  </div>
+                )}
+
+                {/* column resizing */}
+                {header.column.getCanResize() ? (
+                  <div
+                    onDoubleClick={() => header.column.resetSize()}
+                    onMouseDown={header.getResizeHandler()}
+                    onTouchStart={header.getResizeHandler()}
+                    className={`column__resize ${
+                      header.column.getIsResizing() ? "is__resizing" : ""
+                    }`}
+                  />
+                ) : null}
+              </th>
+            );
+          })}
+        </tr>
+      ))}
+    </thead>
+  );
+}
+
+export default TableHead;

package/src/components/table.tsx

@@ -0,0 +1,38 @@
+import { formatClassName } from "../libs/utils/common";
+import { CraftTableComponentProps } from "../types/table";
+import TableBody from "./table-body";
+import TableHead from "./table-head";
+
+function Table<T>({
+  table,
+  featureOptions,
+  NestedComponent,
+  columnOrder,
+  isCompactTable,
+}: CraftTableComponentProps<T>) {
+  const { striped } = featureOptions;
+
+  return (
+    <table
+      className={formatClassName(
+        `ts__table ${striped ? "ts--striped" : ""} ${
+          isCompactTable ? "ts--compact" : ""
+        }`
+      )}
+    >
+      <TableHead
+        table={table}
+        featureOptions={featureOptions}
+        columnOrder={columnOrder}
+      />
+      <TableBody
+        table={table}
+        featureOptions={featureOptions}
+        NestedComponent={NestedComponent}
+        columnOrder={columnOrder}
+      />
+    </table>
+  );
+}
+
+export default Table;

package/src/components/tabs/index.scss

@@ -0,0 +1,41 @@
+.table-tabs {
+  .tabs {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0rem;
+    padding: 0rem;
+
+    .tabs-settings {
+      margin-left: 0.1rem;
+      margin-right: 0.5rem;
+      cursor: pointer;
+    }
+
+    .tab {
+      display: flex;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      cursor: pointer;
+      color: var(--grey-900);
+      font-size: 0.875rem;
+      font-family: var(--fira-700);
+
+      .tab__label {
+        font-family: inherit;
+      }
+
+      &.active {
+        background: var(--grey-500);
+        border-top-left-radius: 0.5rem;
+        border-top-right-radius: 0.5rem;
+        backdrop-filter: blur(200px);
+      }
+    }
+
+    .tabs-dropdown {
+      margin-left: 1rem;
+      cursor: pointer;
+    }
+  }
+}

package/src/components/tabs/index.tsx

@@ -0,0 +1,132 @@
+import { useMemo, useState } from "react";
+import "./index.scss";
+import { formatClassName } from "../../libs/utils/common";
+import { SettingIcon, DropDownIcon } from "../../assets/svg";
+import {
+  Popover,
+  Box,
+  Typography,
+  List,
+  ListItemButton,
+  ListItemText,
+} from "@mui/material";
+
+interface TableTabsProps<T> {
+  data: T[];
+  state: string;
+  onClick: (state: string) => void;
+}
+
+export function TableTabs<T>({
+  data = [],
+  state = "All",
+  onClick,
+}: TableTabsProps<T>) {
+  const [activeTab, setActiveTab] = useState<string>(state);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [selectedColumn, setSelectedColumn] = useState<string | null>(null);
+
+  const columns = useMemo(() => {
+    if (!data.length) return [];
+    return Object.entries(data[0] as Record<string, any>)
+      .filter(([, value]) => typeof value !== "object" && !Array.isArray(value))
+      .map(([key]) => ({
+        accessorKey: key,
+        header: key
+          .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+          .replace(/^./, (str) => str.toUpperCase()),
+      }));
+  }, [data]);
+
+  const tabsData = useMemo(() => {
+    if (!selectedColumn) return [];
+
+    const counts: Record<string, number> = {};
+    data.forEach((item) => {
+      const key = (item as Record<string, any>)[selectedColumn];
+      const label = key?.toString?.() ?? "Unknown";
+      counts[label] = (counts[label] || 0) + 1;
+    });
+
+    return Object.entries(counts).map(([label, count]) => ({ label, count }));
+  }, [data, selectedColumn]);
+
+  const handleColumnSelect = (columnKey: string) => {
+    setSelectedColumn(columnKey);
+    setActiveTab("All");
+    setAnchorEl(null);
+  };
+
+  return (
+    <div className="table-tabs">
+      <ul className="tabs">
+        <div
+          className="tabs-settings"
+          onClick={(event) => {
+            setAnchorEl(event.currentTarget);
+          }}
+        >
+          <SettingIcon />
+        </div>
+
+        {selectedColumn && (
+          <>
+            <li
+              className={formatClassName(
+                `tab ${activeTab === "All" ? "active" : ""}`
+              )}
+              onClick={() => {
+                setActiveTab("All");
+                onClick("All");
+              }}
+            >
+              <span>All {selectedColumn}</span>
+              <span>{data.length}</span>
+            </li>
+            {tabsData.map(({ label, count }) => (
+              <li
+                key={label}
+                className={formatClassName(
+                  `tab ${activeTab === label ? "active" : ""}`
+                )}
+                onClick={() => {
+                  setActiveTab(label);
+                  onClick(label);
+                }}
+              >
+                <span>{label}</span>
+                <span>{count}</span>
+              </li>
+            ))}
+            <div className="tabs-dropdown">
+              <DropDownIcon />
+            </div>
+          </>
+        )}
+      </ul>
+
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+      >
+        <Box p={2} sx={{ width: 200 }}>
+          <Typography variant="subtitle1" gutterBottom>
+            Select a Column
+          </Typography>
+          <List dense>
+            {columns.map(({ accessorKey, header }) => (
+              <ListItemButton
+                key={accessorKey}
+                onClick={() => handleColumnSelect(accessorKey)}
+              >
+                <ListItemText primary={header} />
+              </ListItemButton>
+            ))}
+          </List>
+        </Box>
+      </Popover>
+    </div>
+  );
+}

package/src/components/topbar/index.scss

@@ -0,0 +1,84 @@
+.ts__table__container {
+  .ts-topbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 2.5rem;
+    background-color: #fff;
+
+    .right-section {
+      display: flex;
+      justify-content: center;
+      gap: 0.4rem;
+
+      .ts--button {
+        margin-right: 0.6rem;
+        margin-top: 1rem;
+        cursor: pointer;
+      }
+
+      .change-layout {
+        margin-top: 1rem;
+        cursor: pointer;
+      }
+
+      .sort {
+        margin-top: 1rem;
+      }
+
+      // .add-new-button {
+      //   margin-right: 0.9rem;
+      //   margin-bottom: 0.5rem;
+      //   border-radius: 2px;
+      //   // padding: 4px 14px;
+      //   background-color: #505050;
+      //   cursor: pointer;
+      // }
+
+      .fullscreen-toggle {
+        margin-right: 0.5rem;
+        margin-top: 0.9rem;
+      }
+
+      .hide-column {
+        margin-top: 0.9rem;
+        position: relative;
+
+        .ts-dropdown {
+          .ts-dropdown-content {
+            .toggle-all {
+              cursor: pointer;
+              width: inherit;
+              background-color: #fff;
+              padding: 0.25rem 1rem;
+              border-radius: 0.25rem;
+              border: 1px solid #dbdbdb;
+
+              &:hover {
+                box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
+              }
+            }
+
+            .switches {
+              margin-top: 1rem;
+              display: flex;
+              flex-direction: column;
+              gap: 0.5rem;
+
+              .ts-column-visible {
+                display: flex;
+                // align-items: center;
+                gap: 0.5rem;
+
+                .ts-column-visible-label {
+                  font-size: 0.875rem;
+                  font-weight: 500;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}