Merge branch 'development' into fix/th-125-fix-header

Author: h0wter

frontend/src/assets/css/scroll-bar.scss

@@ -0,0 +1,18 @@
+/* Works on Firefox */
+html {
+  scrollbar-color: $scroll-bar-thumb rgba(238 239 242 / 50%);
+  scrollbar-width: thin;
+}
+
+/* Works on Chrome, Edge, and Safari */
+body::-webkit-scrollbar {
+  width: 3px;
+  background: $scroll-bar;
+  border-radius: 5px;
+  opacity: 0.5;
+}
+
+body::-webkit-scrollbar-thumb {
+  background: $scroll-bar-thumb;
+  border-radius: 5px;
+}

frontend/src/assets/css/styles.scss

@@ -3,3 +3,4 @@
 @import "./scaffolding.scss";
 @import "./typography.scss";
 @import "./animations.scss";
+@import "./scroll-bar.scss";

frontend/src/assets/css/vars.scss

@@ -17,6 +17,8 @@ $green: #00ca99;
 $background-color-grey: #f6f7f9;
 $body-background: #f6f7f9;
 $header-background: #000955;
+$scroll-bar: #e6e8eb;
+$scroll-bar-thumb: #3563ad;
 $shadow-light: 0 4px 8px -2px rgb(0 85 255 / 16%);
 $shadow: 0 2px 4px -2px rgb(0 44 132 / 6%);
 $font-family: "Plus Jakarta Sans", sans-serif;

frontend/src/libs/components/table/libs/constant.ts

@@ -0,0 +1,6 @@
+const DEFAULT_COLUMN = {
+  minSize: 50,
+  maxSize: 300,
+};
+
+export { DEFAULT_COLUMN };

frontend/src/libs/components/table/styles.module.scss

@@ -16,38 +16,77 @@
 
 .thead {
   color: white;
-  background-color: #000b6a;
+  background-color: $header-background;
 }
 
 .th,
 .td {
   padding: 10px 15px;
+  border: 1px solid white;
+}
+
+.th {
+  position: relative;
+}
+
+.resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5px;
+  height: 100%;
+  background: $grey;
+  cursor: col-resize;
+  opacity: 0.5;
+  user-select: none;
+  touch-action: none;
+}
+
+.resizer.isResizing {
+  background: $red;
+  opacity: 1;
 }
 
 .th:first-child {
+  border: none;
   border-top-left-radius: 8px;
 }
 
 .th:last-child {
+  border: none;
   border-top-right-radius: 8px;
+
+  .resizer {
+    border-top-right-radius: 8px;
+  }
 }
 
-.tr {
-  border-bottom: 1px solid white;
+.td {
+  text-align: center;
 }
 
 .tr:nth-child(even) {
   background-color: #b9d1f1fa;
 }
 
 .tr:last-child {
-  border: none;
-
   .td:first-child {
+    border: none;
     border-bottom-left-radius: 8px;
   }
 
   .td:last-child {
+    border: none;
     border-bottom-right-radius: 8px;
   }
 }
+
+@media (hover: hover) {
+  .resizer {
+    opacity: 0;
+  }
+
+  *:hover > .resizer {
+    opacity: 1;
+  }
+}

frontend/src/libs/components/table/table.tsx

@@ -1,3 +1,4 @@
+import { getValidClassNames } from '~/libs/helpers/helpers.js';
 import {
   flexRender,
   getCoreRowModel,
@@ -8,6 +9,7 @@ import {
 import { type ColumnDef } from '~/libs/types/types.js';
 
 import { Pagination } from '../pagination/pagination.jsx';
+import { DEFAULT_COLUMN } from './libs/constant.js';
 import styles from './styles.module.scss';
 
 type Properties<T> = {
@@ -33,6 +35,8 @@ const Table = <T,>({
   const table = useReactTable({
     data,
     columns,
+    columnResizeMode: 'onChange',
+    defaultColumn: DEFAULT_COLUMN,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     initialState: {
@@ -56,13 +60,29 @@ const Table = <T,>({
       {table.getHeaderGroups().map((headerGroup) => (
         <tr key={headerGroup.id} className={styles.tr}>
           {headerGroup.headers.map((header) => (
-            <th key={header.id} className={styles.th}>
+            <th
+              key={header.id}
+              className={styles.th}
+              style={{
+                width: header.getSize(),
+              }}
+            >
               {header.isPlaceholder
                 ? null
                 : flexRender(
                     header.column.columnDef.header,
                     header.getContext(),
                   )}
+              <div
+                {...{
+                  onMouseDown: header.getResizeHandler(),
+                  onTouchStart: header.getResizeHandler(),
+                  className: getValidClassNames(
+                    styles.resizer,
+                    header.column.getIsResizing() && styles.isResizing,
+                  ),
+                }}
+              />
             </th>
           ))}
         </tr>
@@ -75,7 +95,13 @@ const Table = <T,>({
       {table.getRowModel().rows.map((row) => (
         <tr key={row.id} className={styles.tr}>
           {row.getVisibleCells().map((cell) => (
-            <td key={cell.id} className={styles.td}>
+            <td
+              key={cell.id}
+              className={styles.td}
+              style={{
+                width: cell.column.getSize(),
+              }}
+            >
               {flexRender(cell.column.columnDef.cell, cell.getContext())}
             </td>
           ))}
@@ -86,7 +112,12 @@ const Table = <T,>({
 
   return (
     <div className={styles.container}>
-      <table className={styles.table}>
+      <table
+        className={styles.table}
+        style={{
+          width: table.getCenterTotalSize(),
+        }}
+      >
         {createThead()}
         {createTbody()}
       </table>