client: Add style parameters to Table component

client/src/components/Navbar/Navbar.scss

@@ -1,7 +1,6 @@
 @import '@/variables';
 
 .navbar {
-  background-image: url('@/assets/login-banner.png');
   position: fixed;
   width: 15rem;
   height: 100%;
@@ -17,19 +16,18 @@
   left: 0;
   background-color: $navbar-backgroud-color;
 
-
   &__logo {
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
     align-items: center;
-  
+
     &__image {
       width: 3.5rem;
       height: 3rem;
       border-radius: 7rem;
     }
-  
+
     &__name {
       font-size: 1.5rem;
       color: $navbar-text-color;
@@ -48,4 +46,4 @@
     margin-left: 1rem;
     margin-bottom: 1rem;
   }
-}
+}

client/src/components/Table/Table.scss

@@ -22,8 +22,6 @@
     grid-template-columns: subgrid;
     grid-column: span 100;
     overflow-y: scroll;
-
-    /* max-height: 30vh; */
   }
 
   &__row {
@@ -38,13 +36,12 @@
 
   &__cell,
   &__header {
-    grid: grid;
     grid-template-columns: subgrid;
-
-    /* grid-column: span 30; */
     text-wrap: wrap;
     padding: 0 1rem;
     font-size: 1rem;
+    display: flex;
+    align-items: center;
   }
 
   &__header {

client/src/components/Table/Table.tsx

@@ -7,6 +7,21 @@ interface TableRow {
 export interface TableProps<Row extends TableRow> {
   columns: TableColumn<Row>[];
   rows: Row[];
+
+  /**
+   * Max height of the table defined in the css units (px, rem, ect.)
+   * Used to accomodate sticky table headers.
+   * By default table doesn't have a max height.
+   */
+  maxHeight?: string;
+
+  /**
+   * AlignLeft forces all columns to take as little space as possible
+   * making all columns tightly packed on the left side of the table.
+   * Useful if we need a column that is always the size of its contents.
+   * Default value is false
+   */
+  alignLeft?: boolean;
 }
 
 export interface TableColumn<Row extends TableRow> {
@@ -17,39 +32,60 @@ export interface TableColumn<Row extends TableRow> {
 export interface TableRowProps<Row extends TableRow> {
   row: Row;
   columns: TableColumn<Row>[];
+  alignLeft: boolean;
 }
 
 export const getCellRowSpan = <Row extends TableRow>(
   columns: TableColumn<Row>[],
+  alignLeft: boolean,
 ): { gridColumn: string } => {
-  return { gridColumn: `span ${columns.length}` };
+  if (columns.length == 0 || alignLeft) {
+    return { gridColumn: '' };
+  }
+
+  return { gridColumn: `span ${Math.floor(100 / columns.length)}` };
 };
 
-function TableBodyRow<Row extends TableRow>({ row, columns }: TableRowProps<Row>): React.ReactNode {
+function getTableStyle(maxHeight: string) {
+  return { maxHeight };
+}
+
+function TableBodyRow<Row extends TableRow>({
+  row,
+  columns,
+  alignLeft,
+}: TableRowProps<Row>): React.ReactNode {
   return (
     <div className="table__row">
       {columns.map((column: TableColumn<Row>) => (
-        <div key="index" className={'table__cell'}>
+        <div key="index" className={'table__cell'} style={getCellRowSpan(columns, alignLeft)}>
           {column.customComponent ? column.customComponent(row) : row[column.columnKey]}
         </div>
       ))}
     </div>
   );
 }
 
-function Table<T extends TableRow>({ columns, rows }: TableProps<T>): React.ReactNode {
+function Table<T extends TableRow>({
+  columns,
+  rows,
+  maxHeight,
+  alignLeft = false,
+}: TableProps<T>): React.ReactNode {
+  const tableStyle = maxHeight ? getTableStyle(maxHeight) : {};
+
   return (
     <div className="table">
       <div className="table__headers">
         {columns.map((column: TableColumn<T>, index: number) => (
-          <div key={index} className="table__header">
+          <div key={index} className="table__header" style={getCellRowSpan(columns, alignLeft)}>
             {column.header}
           </div>
         ))}
       </div>
-      <div className="table__body">
+      <div className="table__body" style={tableStyle}>
         {rows.map((row: T, index: number) => (
-          <TableBodyRow key={index} row={row} columns={columns} />
+          <TableBodyRow key={index} row={row} columns={columns} alignLeft={alignLeft} />
         ))}
       </div>
     </div>

client/src/index.css → client/src/index.scss

@@ -1,20 +1,15 @@
 /* stylelint-disable-next-line import-notation */
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import '@/variables';
 
 :root {
   font-family: Roboto, sans-serif;
   line-height: 1.5;
   font-weight: 400;
   box-sizing: content-box;
-
-  /* background-image: linear-gradient(rgb(217 217 217 / 100%), rgb(219 255 241 / 100%)); */
-  background-color: #07111b;
+  background-color: $background;
   color-scheme: dark;
-
-  /* color: rgb(0 0 0 / 87%); */
-  color: white;
-
-  /* color: rgb(49 49 49 / 100%); */
+  color: $font-color;
   font-synthesis: none;
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
@@ -23,14 +18,9 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
   text-decoration: inherit;
 }
 
-a:hover {
-  color: #535bf2;
-}
-
 body {
   margin: 0;
   display: flex;
@@ -53,30 +43,10 @@ button {
   font-weight: 500;
   font-family: inherit;
   cursor: pointer;
-  background-color: rgb(244 244 244 / 30%);
   transition: border-color 0.25s;
 }
 
-button:hover {
-  border-color: #f91515;
-}
-
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #fff;
-  }
-
-  a:hover {
-    color: #747bff;
-  }
-
-  button {
-    background-color: #f9f9f9;
-  }
-}

client/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import './index.scss';
 import Router from 'pages/Router.tsx';
 import { RouterProvider } from 'react-router-dom';
 

client/src/pages/Home/Home.tsx

@@ -1,139 +1,5 @@
-import Table, { TableColumn } from 'components/Table/Table';
-
-interface UserRow {
-  name: string;
-  surname: string;
-  phoneNumber: number;
-  [key: string]: string | number;
-}
-
-const customTextField = (row: UserRow): React.ReactNode => {
-  return (
-    <div> Customdsaksjdsdasfkjsdfksjldjldjasdaslkhdasjlhdasjhdlkasjdkjaajshdlak {row.name}</div>
-  );
-};
-
-const TableData: {
-  columns: TableColumn<UserRow>[];
-  rows: UserRow[];
-} = {
-  columns: [
-    {
-      header: 'Name',
-      columnKey: 'name',
-      // customComponent: customTextField,
-    },
-    {
-      header: 'Surname',
-      columnKey: 'surname',
-      customComponent: customTextField,
-    },
-    {
-      header: 'Phone Number',
-      columnKey: 'phoneNumber',
-      customComponent: customTextField,
-    },
-  ],
-  rows: [
-    {
-      name: 'John',
-      surname: 'One',
-      phoneNumber: 132,
-    },
-    {
-      name: 'John',
-      surname: 'Two',
-      phoneNumber: 132,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'One',
-      phoneNumber: 132,
-    },
-    {
-      name: 'John',
-      surname: 'Two',
-      phoneNumber: 132,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-    {
-      name: 'John',
-      surname: 'Three',
-      phoneNumber: 152,
-    },
-  ],
-};
-
 const Home = () => {
-  return (
-    <div style={{ width: '80vw', height: '50vh', backgroundColor: '#0C1926' }}>
-      <Table rows={TableData.rows} columns={TableData.columns} />
-    </div>
-  );
+  return <div>Hello</div>;
 };
 
 export default Home;

client/src/pages/Router.tsx

@@ -1,6 +1,6 @@
 import { Route, createBrowserRouter, createRoutesFromElements, defer } from 'react-router-dom';
 import Login from './Login/Login';
-// import { ProtectedLayout } from 'providers/AuthProvider/ProtectedLayout';
+import { ProtectedLayout } from 'providers/AuthProvider/ProtectedLayout';
 import { AuthLayout } from 'providers/AuthProvider/AuthLayout';
 import Home from './Home/Home';
 import { getAuthInfo } from 'providers/AuthProvider/AuthProvider';
@@ -14,15 +14,14 @@ const router = createBrowserRouter(
           authData: getAuthInfo(),
         });
       }}
-      errorElement={<Home />}
+      errorElement={<Login />}
     >
       <Route path="/login" element={<Login />} />
-      <Route path="/" element={<Home />} />
+      <Route path="/" element={<ProtectedLayout />}>
+        <Route path="/" element={<Home />} />
+      </Route>
     </Route>,
   ),
 );
 
-// <Route path="/" element={<ProtectedLayout />}>
-// </Route>
-
 export default router;