rez-table-listing-mui 1.3.62 → 2.0.0

package/package.json

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

package/src/listing/components/index.scss

@@ -65,152 +65,14 @@
       max-height: calc(100vh - 56px);
     }
 
-    .ts__table.ts--striped > .ts__body > .ts__body__tr:nth-of-type(odd) {
-      background-color: var(--grey-200);
-    }
-    .ts__table:not(.ts--striped) > .ts__body > .ts__body__tr:hover {
-      background-color: var(--grey-100);
-      box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.05),
-        inset 0 -2px 2px rgba(0, 0, 0, 0.05);
-    }
-    .ts__table:not(.ts--striped) > .ts__head > .ts__head__tr {
-      background-color: var(--grey-100);
-
-      .ts__head__th {
-        border: 1px solid var(--grey-500);
-      }
-    }
-
-    .ts__table.ts--compact {
-      .ts__head > .ts__head__tr > .ts__head__th {
-        padding: 0.25rem 0.5rem;
-
-        .ts__content {
-          font-size: 0.875rem;
-        }
-      }
-
-      .ts__body > .ts__body__tr > .ts__body__td {
-        padding: 0.25rem 0.5rem;
-
-        .ts__content {
-          font-size: 0.75rem;
-        }
-      }
-    }
-
     .ts__table {
       width: max-content;
       min-width: 100%;
       border-spacing: 0;
       border-collapse: separate;
-
-      .ts__head.ts--sticky {
-        position: sticky;
-        top: 0rem;
-        z-index: 3;
-      }
-
-      .ts__head {
-        position: relative;
-        // box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); //removing shadow below table header
-
-        .ts__head__tr {
-          background-color: var(--white);
-
-          .ts__head__th {
-            position: relative;
-            padding: 0.5rem 1rem;
-            border: 1px solid var(--grey-500);
-            cursor: pointer;
-
-            .ts__dnd__button {
-              color: var(--grey-600);
-              // width: max-content;
-              // height: max-content;
-              // cursor: grabbing;
-
-              &:hover {
-                scale: 1.1;
-                color: var(--grey-900);
-                width: max-content;
-                height: max-content;
-                cursor: grabbing;
-              }
-            }
-
-            .ts__content {
-              display: flex;
-              align-items: center;
-              gap: 0.25rem;
-              min-height: 44px; // to give min height of 60 px
-
-              .ts__content__sort {
-                cursor: pointer;
-                user-select: none;
-
-                svg {
-                  margin-left: 0.25rem;
-                }
-              }
-
-              .ts--head--button {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                cursor: pointer;
-
-                &:hover {
-                  scale: 1.1;
-                }
-
-                svg {
-                  color: var(--grey-700);
-                }
-              }
-            }
-
-            .column__resize {
-              position: absolute;
-              top: 0;
-              right: 0;
-              height: 100%;
-              width: 5px;
-              background: rgba(0, 0, 0, 0.5);
-              cursor: col-resize;
-              user-select: none;
-              touch-action: none;
-              opacity: 0;
-
-              &:hover {
-                opacity: 1;
-              }
-            }
-
-            .column__resize.is__resizing {
-              background: rgba(0, 0, 0, 0.8);
-              opacity: 1;
-            }
-          }
-        }
-      }
-
-      .ts__body {
-        .ts__body__tr {
-          background-color: var(--white);
-
-          .ts__body__td {
-            font-size: 0.875rem;
-            padding: 0.5rem 1rem;
-            border-top: 1px solid var(--grey-300);
-            border-bottom: 1px solid var(--grey-300);
-          }
-        }
-      }
     }
   }
 }
-// Full screen styles fixes
 
 :fullscreen {
   width: 100vw !important;
@@ -229,9 +91,3 @@
   background: var(--white);
   overflow: hidden;
 }
-
-// .ts__table__wrapper.is-fullscreen {
-//   height: calc(100vh - 56px);
-//   max-height: none;
-//   overflow-y: auto;
-// }

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

@@ -10,8 +10,8 @@ const LoginButton = () => {
     // const api_url = "https://api.eth-qa.rezolut.in/api/enrol/auth";
     const api_url = "http://localhost:6010/api/auth";
     const email_id = "admin@rezolut.in";
-    const email_otp = "123456";
-    const sub_domain = "universal";
+    const verify_otp = "123456";
+    const sub_domain = "platform";
 
     setLoading(true);
 
@@ -26,10 +26,10 @@ const LoginButton = () => {
             identifier: email_id,
             service: "email",
             reset: true,
-            otp: "123456",
+            otp: verify_otp,
             otp_id: otpAPIResponse.data.otp_id,
             fcm_token: "",
-            subdomain: "platform",
+            subdomain: sub_domain,
           })
           .then((otpVerifyResponse) => {
             const token = otpVerifyResponse.data.accessToken;

package/src/listing/components/pagination/default/index.tsx

@@ -1,15 +1,22 @@
 import { Table } from "@tanstack/react-table";
-import {
-  TableFirstPageIcon,
-  TableLastPageIcon,
-  // TableNextPageIcon,
-  // TablePreviousPageIcon,
-} from "../../../../assets/svg";
-import TablePreviousPageIcon from "@mui/icons-material/NavigateBeforeRounded";
-import TableNextPageIcon from "@mui/icons-material/NavigateNextRounded";
-import "./index.scss";
+import { TableFirstPageIcon, TableLastPageIcon } from "../../../../assets/svg";
+import NavigateBeforeRounded from "@mui/icons-material/NavigateBeforeRounded";
+import NavigateNextRounded from "@mui/icons-material/NavigateNextRounded";
+import { MenuItem, Typography } from "@mui/material";
 import { CraftTablePaginationProps } from "../../../types/table";
 
+import {
+  PaginationContainer,
+  GoToPageContainer,
+  RowsPerPageContainer,
+  RecordsRangeContainer,
+  PageRangeContainer,
+  PaginationButtons,
+  PaginationButton,
+  RowsPerPageSelect,
+  GoToPageInput,
+} from "./pagination.styles";
+
 interface DefaultPaginationProps<T> {
   table: Table<T>;
   rowsPerPageArray: number[];
@@ -25,145 +32,108 @@ function DefaultPagination<T>({
   const pageCount = table.getPageCount();
   const pageSize = table.getState().pagination.pageSize;
   const rowCount = table.getRowCount();
+
   const recordsRangeFirst = pageIndex * pageSize - pageSize + 1;
   const recordsRangeLast = Math.min(pageIndex * pageSize, rowCount);
 
+  const isFullView = paginationOptions?.paginationView === "full";
+
   return (
-    <div className="pagination_container">
-      {paginationOptions?.paginationView === "full" ? (
-        <>
-          <span className="go_to_page_container">
-            &nbsp;&nbsp;Go to page&nbsp;:&nbsp;
-            <input
-              type="number"
-              defaultValue={pageIndex}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  const page = e.currentTarget.value
-                    ? Number(e.currentTarget.value) - 1
-                    : 0;
-                  table.setPageIndex(page);
-                }
-              }}
-              style={{ width: "60px", textAlign: "center" }}
-              min={1}
-              max={table?.getPageCount()}
-            />
-            &nbsp;
-          </span>
+    <PaginationContainer>
+      {isFullView && (
+        <GoToPageContainer>
+          <Typography variant="body2" fontSize={14} mr={1}>
+            Go to page:
+          </Typography>
+          <GoToPageInput
+            defaultValue={pageIndex}
+            type="number"
+            inputProps={{
+              min: 1,
+              max: pageCount,
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                const page = e.currentTarget.value
+                  ? Number(e.currentTarget.value) - 1
+                  : 0;
+                table.setPageIndex(page);
+              }
+            }}
+          />
+        </GoToPageContainer>
+      )}
+
+      <RowsPerPageContainer>
+        {isFullView && (
+          <Typography variant="body2" fontSize={14} mr={1}>
+            Rows per page:
+          </Typography>
+        )}
+        <RowsPerPageSelect
+          value={pageSize}
+          onChange={(e) => table.setPageSize(Number(e.target.value))}
+        >
+          {rowsPerPageArray.map((size) => (
+            <MenuItem key={size} value={size} sx={{ fontSize: 12 }}>
+              {size}
+            </MenuItem>
+          ))}
+        </RowsPerPageSelect>
+      </RowsPerPageContainer>
 
-          <div className="rows_per_page_container">
-            <span>Rows Per Page&nbsp;:&nbsp;</span>
-            <select
-              value={table.getState().pagination.pageSize}
-              onChange={(e) => {
-                table.setPageSize(Number(e.target.value));
-              }}
-            >
-              {rowsPerPageArray.map((pageSize) => (
-                <option key={pageSize} value={pageSize}>
-                  {pageSize}
-                </option>
-              ))}
-            </select>
-          </div>
+      <RecordsRangeContainer>
+        <strong>
+          {recordsRangeFirst} – {recordsRangeLast} of {rowCount}
+        </strong>
+      </RecordsRangeContainer>
 
-          <div className="records_range_container">
-            <span>Showing&nbsp;</span>
-            <strong>
-              {recordsRangeFirst} - {recordsRangeLast} of {rowCount}
-            </strong>
-          </div>
+      {isFullView && (
+        <PageRangeContainer>
+          <strong>
+            Page {pageIndex} of {pageCount}
+          </strong>
+        </PageRangeContainer>
+      )}
 
-          <span className="page_range_container">
-            <span>&nbsp;Page&nbsp;</span>
-            <strong>
-              {pageIndex} of {pageCount}
-              &nbsp;
-            </strong>
-          </span>
+      <PaginationButtons>
+        {isFullView && (
+          <PaginationButton
+            title="First Page"
+            disabled={!table.getCanPreviousPage()}
+            onClick={() => table.setPageIndex(0)}
+          >
+            <TableFirstPageIcon />
+          </PaginationButton>
+        )}
 
-          <div className="pagination_btn_container">
-            <button
-              title="First Page"
-              className="pagination_btn"
-              disabled={!table.getCanPreviousPage()}
-              onClick={() => table.setPageIndex(0)}
-            >
-              <TableFirstPageIcon />
-            </button>
-            <button
-              title="Previous Page"
-              className="pagination_btn"
-              disabled={!table.getCanPreviousPage()}
-              onClick={() => table.previousPage()}
-            >
-              <TablePreviousPageIcon fontSize="small" />
-            </button>
-            <button
-              title="Next Page"
-              className="pagination_btn"
-              disabled={!table.getCanNextPage()}
-              onClick={() => table.nextPage()}
-            >
-              <TableNextPageIcon />
-            </button>
-            <button
-              title="Last Page"
-              className="pagination_btn"
-              disabled={!table.getCanNextPage()}
-              onClick={() => table.setPageIndex(pageCount - 1)}
-            >
-              <TableLastPageIcon />
-            </button>
-          </div>
-        </>
-      ) : (
-        <>
-          <div className="rows_per_page_container">
-            {/* <span>Rows Per Page&nbsp;:&nbsp;</span> */}
-            <select
-              value={table.getState().pagination.pageSize}
-              onChange={(e) => {
-                table.setPageSize(Number(e.target.value));
-              }}
-            >
-              {rowsPerPageArray.map((pageSize) => (
-                <option key={pageSize} value={pageSize}>
-                  {pageSize}
-                </option>
-              ))}
-            </select>
-          </div>
+        <PaginationButton
+          title="Previous Page"
+          disabled={!table.getCanPreviousPage()}
+          onClick={() => table.previousPage()}
+        >
+          <NavigateBeforeRounded fontSize="small" />
+        </PaginationButton>
 
-          <div className="records_range_container">
-            {/* <span>Showing&nbsp;</span> */}
-            <strong>
-              {recordsRangeFirst} - {recordsRangeLast} of {rowCount}
-            </strong>
-          </div>
+        <PaginationButton
+          title="Next Page"
+          disabled={!table.getCanNextPage()}
+          onClick={() => table.nextPage()}
+        >
+          <NavigateNextRounded fontSize="small" />
+        </PaginationButton>
 
-          <div className="pagination_btn_container">
-            <button
-              title="Previous Page"
-              className="pagination_btn"
-              disabled={!table.getCanPreviousPage()}
-              onClick={() => table.previousPage()}
-            >
-              <TablePreviousPageIcon />
-            </button>
-            <button
-              title="Next Page"
-              className="pagination_btn"
-              disabled={!table.getCanNextPage()}
-              onClick={() => table.nextPage()}
-            >
-              <TableNextPageIcon />
-            </button>
-          </div>
-        </>
-      )}
-    </div>
+        {isFullView && (
+          <PaginationButton
+            title="Last Page"
+            disabled={!table.getCanNextPage()}
+            onClick={() => table.setPageIndex(pageCount - 1)}
+          >
+            <TableLastPageIcon />
+          </PaginationButton>
+        )}
+      </PaginationButtons>
+    </PaginationContainer>
   );
 }
 

package/src/listing/components/pagination/default/pagination.styles.ts

@@ -0,0 +1,113 @@
+import { styled } from "@mui/material/styles";
+import { Box, IconButton, Select, InputBase } from "@mui/material";
+
+/* Root container */
+export const PaginationContainer = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(0.5),
+  display: "flex",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  gap: theme.spacing(2),
+  fontSize: theme.typography.pxToRem(14),
+  backgroundColor: theme.palette.common.white,
+
+  [theme.breakpoints.down("md")]: {
+    justifyContent: "center",
+    fontSize: theme.typography.pxToRem(12),
+  },
+}));
+
+/* Hide go-to-page on <= 991px */
+export const GoToPageContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+
+  [theme.breakpoints.down("md")]: {
+    display: "none",
+  },
+}));
+
+/* Rows per page */
+export const RowsPerPageContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+
+  [theme.breakpoints.down("sm")]: {
+    display: "none",
+  },
+}));
+
+/* Records range */
+export const RecordsRangeContainer = styled(Box)(({ theme }) => ({
+  whiteSpace: "nowrap",
+  fontSize: theme.typography.pxToRem(14),
+
+  [theme.breakpoints.down("sm")]: {
+    display: "none",
+  },
+}));
+
+/* Page range */
+export const PageRangeContainer = styled(Box)(({ theme }) => ({
+  whiteSpace: "nowrap",
+  fontSize: theme.typography.pxToRem(14),
+}));
+
+/* Buttons wrapper */
+export const PaginationButtons = styled(Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(1),
+}));
+
+/* Pagination button */
+export const PaginationButton = styled(IconButton)(({ theme }) => ({
+  borderRadius: "50%",
+  height: 24,
+  width: 24,
+  padding: 2,
+  transition: "0.4s",
+
+  "&:hover": {
+    backgroundColor: theme.palette.grey[300],
+    boxShadow: "0 1px 2px 0 rgba(60,64,67,.6), 0 1px 3px 1px rgba(60,64,67,.3)",
+  },
+
+  "&.Mui-disabled": {
+    color: theme.palette.action.disabled,
+  },
+
+  [theme.breakpoints.down("sm")]: {
+    height: 24,
+    width: 24,
+    padding: 0,
+
+    "& svg": {
+      width: 20,
+      height: 20,
+    },
+  },
+}));
+
+/* Select (rows per page) */
+export const RowsPerPageSelect = styled(Select)(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  padding: theme.spacing(0),
+  fontSize: theme.typography.pxToRem(12),
+
+  "& .MuiSelect-select": {
+    padding: theme.spacing(0.5, 0.75),
+  },
+}));
+
+/* Input for go-to-page */
+export const GoToPageInput = styled(InputBase)(({ theme }) => ({
+  width: 60,
+  textAlign: "center",
+  borderRadius: theme.shape.borderRadius,
+  border: `1px solid ${theme.palette.divider}`,
+  fontSize: theme.typography.pxToRem(12),
+
+  "& .MuiInputBase-input": {
+    padding: theme.spacing(0.25, 0.75),
+  },
+}));

package/src/listing/components/{table-body-dnd-cell.tsx → table-body/table-body-dnd-cell.tsx}

@@ -1,13 +1,13 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Cell, flexRender } from "@tanstack/react-table";
-import { CSSProperties } from "react";
-import { align } from "../types/common";
-import { getColumnPinningStylesBody } from "../libs/utils/common";
+import { align } from "../../types/common";
+import { getColumnPinningStylesBody } from "../../libs/utils/common";
 import {
   CraftTableFeatureProps,
   CraftTableOptionsProps,
-} from "../types/table-options";
+} from "../../types/table-options";
+import { TableBodyCell } from "./table-body.styles";
 
 interface DragAlongCellProps<T> {
   cell: Cell<T, unknown>;
@@ -28,34 +28,27 @@ function DragAlongCell<T>({
 
   const isPinned = cell.column.getIsPinned();
 
-  const style: CSSProperties = {
-    opacity: isDragging ? 0.8 : 1,
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    width: cell.column.getSize(),
-    ...getColumnPinningStylesBody(cell.column),
-    ...((wrapColumns.all_wrap || wrapColumns[cell.column.id]) && {
-      wordBreak: "break-all",
-      // whiteSpace: "normal",
-    }),
-  };
-
   return (
-    <td
+    <TableBodyCell
       ref={setNodeRef}
-      {...{
-        style: {
-          ...style,
-          zIndex: isPinned ? 2 : isDragging ? 1 : 0,
-        },
-        align: (cell.column.columnDef.meta as align)?.align || "left",
-        className: "ts__body__td",
+      align={(cell.column.columnDef.meta as align)?.align || "left"}
+      style={{
+        opacity: isDragging ? 0.8 : 1,
+        transform: CSS.Translate.toString(transform),
+        transition: "width transform 0.2s ease-in-out",
+        width: cell.column.getSize(),
+        ...getColumnPinningStylesBody(cell.column),
+        ...((wrapColumns.all_wrap || wrapColumns[cell.column.id]) && {
+          wordBreak: "break-all",
+          whiteSpace: "normal",
+        }),
+        zIndex: isPinned ? 2 : isDragging ? 1 : 0,
       }}
     >
       {cell.getIsPlaceholder()
         ? null
         : flexRender(cell.column.columnDef.cell, cell.getContext())}
-    </td>
+    </TableBodyCell>
   );
 }