rez-table-listing-mui 0.0.0

package/src/components/index.scss

@@ -0,0 +1,176 @@
+.ts__table__container {
+  --black: #000;
+  --white: #fff;
+  --grey-100: #fafafa;
+  --grey-200: #f4f4f4;
+  --grey-300: #edeeef;
+  --grey-500: #dcddde;
+  --grey-600: #bbbbbd;
+  --grey-700: #77787b;
+  --grey-900: #414042;
+
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+
+  // set default styles for all elements
+  & * {
+    box-sizing: border-box;
+  }
+
+  .ts__loader {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    color: var(--grey-900);
+    font-size: 1.2rem;
+  }
+
+  .ts__table__wrapper {
+    overflow-x: auto;
+    max-height: calc(100vh - 106px);
+
+    .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);
+
+        .ts__head__tr {
+          background-color: var(--white);
+
+          .ts__head__th {
+            position: relative;
+            padding: 0.5rem 1rem;
+            border: 1px solid var(--grey-300);
+
+            .ts__dnd__button {
+              color: var(--grey-100);
+              // 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;
+
+              .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);
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/inputs/checkbox/index.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+interface CheckboxProps {
+  type?: "checkbox";
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+  indeterminate?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const Checkbox = ({
+  checked = false,
+  disabled = false,
+  onChange = () => {},
+  indeterminate = false,
+  className,
+  style,
+  ...props
+}: CheckboxProps) => {
+  const id = uuidv4();
+  const [check, setCheck] = React.useState<boolean>(checked);
+  const ref = useRef(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = e.target.checked;
+    setCheck(isChecked);
+
+    if (onChange) onChange(isChecked);
+  };
+
+  useEffect(() => {
+    setCheck(checked);
+  }, [checked]);
+
+  useEffect(() => {
+    if (ref.current) {
+      (ref.current as HTMLInputElement).indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  return (
+    <input
+      id={id}
+      ref={ref}
+      type="checkbox"
+      checked={check}
+      onChange={handleChange}
+      disabled={disabled}
+      className={className}
+      {...props}
+    />
+  );
+};
+
+export default Checkbox;

package/src/components/inputs/index.scss

@@ -0,0 +1,63 @@
+.ts__table__container {
+  .input-switch {
+    position: relative;
+    display: inline-block;
+    width: 2rem;
+    height: 1rem;
+  }
+
+  /* Hide default HTML checkbox */
+  .input-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  /* The slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 0.8rem;
+    width: 0.8rem;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+  }
+
+  input:checked + .slider {
+    background-color: #c7222a;
+  }
+
+  input:focus + .slider {
+    box-shadow: 0 0 1px #2196f3;
+  }
+
+  input:checked + .slider:before {
+    -webkit-transform: translateX(0.9rem);
+    -ms-transform: translateX(0.9rem);
+    transform: translateX(0.9rem);
+  }
+
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: 34px;
+  }
+
+  .slider.round:before {
+    border-radius: 50%;
+  }
+}

package/src/components/inputs/switch.tsx

@@ -0,0 +1,14 @@
+import "./index.scss";
+
+interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Switch = ({ ...props }: SwitchProps) => {
+  return (
+    <label className="input-switch">
+      <input type="checkbox" {...props} />
+      <span className="slider round"></span>
+    </label>
+  );
+};
+
+export default Switch;

package/src/components/nestedcomponent/index.scss

@@ -0,0 +1,14 @@
+.nested-component {
+  display: flex;
+  flex-direction: column;
+
+  .row-items {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 5px;
+
+    .row-items-header {
+      font-weight: 500;
+    }
+  }
+}

package/src/components/nestedcomponent/index.tsx

@@ -0,0 +1,53 @@
+// import { Row } from "@tanstack/react-table";
+// import "./index.scss";
+
+// export function NestedComponent({ row }: { row: Row<defaultColumnsProps1> }) {
+//   const data = {
+//     col1: [
+//       {
+//         header: "Location Name",
+//         value: row?.original?.location?.name,
+//       },
+//       {
+//         header: "Location URL",
+//         value: row?.original?.location?.url,
+//       },
+//       {
+//         header: "Origin Name",
+//         value: row?.original?.origin?.name,
+//       },
+//       {
+//         header: "Origin URL",
+//         value: row?.original?.origin?.url,
+//       },
+//     ],
+//     col2: [
+//       {
+//         header: "Created Date",
+//         value: row?.original?.created,
+//       },
+//     ],
+//   };
+
+//   return (
+//     <div className="nested-component">
+//       <div className="row-items">
+//         {data?.col1.map((item) => (
+//           <div>
+//             <p className="row-items-header">{item?.header}</p>
+//             <p>{item?.value}</p>
+//           </div>
+//         ))}
+//       </div>
+
+//       <div className="row-items">
+//         {data?.col2.map((item) => (
+//           <div>
+//             <p className="row-items-header">{item?.header}</p>
+//             <p>{item?.value}</p>
+//           </div>
+//         ))}
+//       </div>
+//     </div>
+//   );
+// }

package/src/components/pagination/default/index.scss

@@ -0,0 +1,76 @@
+.pagination_container {
+  --grey-300: #edeeef;
+
+  // box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.05);
+  padding: 8px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1.5rem;
+  font-size: 0.875rem;
+  // border-top: 1px solid var(--grey-300);
+  background-color: #fff;
+  margin-bottom: 0.5rem;
+
+  @media screen and (max-width: 991px) {
+    justify-content: center;
+    font-size: 0.75rem;
+
+    .go_to_page_container {
+      display: none;
+    }
+  }
+  @media screen and (max-width: 768px) {
+    gap: 1rem;
+
+    .records_range_container,
+    .rows_per_page_container {
+      display: none;
+    }
+  }
+
+  .pagination_btn_container {
+    display: flex;
+    gap: 0.5rem;
+
+    .pagination_btn {
+      position: relative;
+      user-select: none;
+      border: none;
+      border-radius: 50%;
+      height: 2rem;
+      width: 2rem;
+      padding: 4px;
+      cursor: pointer;
+      transition: 0.4s;
+      background-color: transparent;
+
+      @media screen and (max-width: 768px) {
+        height: 1.5rem;
+        width: 1.5rem;
+        padding: 0rem;
+
+        svg {
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+      }
+
+      &:disabled {
+        cursor: unset;
+        fill: rgba(0, 0, 0, 0.18);
+      }
+      &:not(:disabled) {
+        cursor: pointer;
+      }
+      &:focus {
+        outline: none;
+      }
+      &:hover:not(:disabled) {
+        background-color: var(--grey-300);
+        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.6),
+          0 1px 3px 1px rgba(60, 64, 67, 0.3);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,168 @@
+import { Table } from "@tanstack/react-table";
+import {
+  TableFirstPageIcon,
+  TableLastPageIcon,
+  TableNextPageIcon,
+  TablePreviousPageIcon,
+} from "../../../assets/svg";
+import "./index.scss";
+import { CraftTablePaginationProps } from "../../../types/table";
+
+interface DefaultPaginationProps<T> {
+  table: Table<T>;
+  rowsPerPageArray: number[];
+  paginationOptions?: CraftTablePaginationProps;
+}
+
+function DefaultPagination<T>({
+  table,
+  rowsPerPageArray,
+  paginationOptions,
+}: DefaultPaginationProps<T>) {
+  const pageIndex = table.getState().pagination.pageIndex + 1;
+  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);
+
+  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>
+
+          <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>
+
+          <div className="records_range_container">
+            <span>Showing&nbsp;</span>
+            <strong>
+              {recordsRangeFirst} - {recordsRangeLast} of {rowCount}
+            </strong>
+          </div>
+
+          <span className="page_range_container">
+            <span>&nbsp;Page&nbsp;</span>
+            <strong>
+              {pageIndex} of {pageCount}
+              &nbsp;
+            </strong>
+          </span>
+
+          <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 />
+            </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>
+
+          <div className="records_range_container">
+            {/* <span>Showing&nbsp;</span> */}
+            <strong>
+              {recordsRangeFirst} - {recordsRangeLast} of {rowCount}
+            </strong>
+          </div>
+
+          <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>
+  );
+}
+
+export default DefaultPagination;