From 53f5e08cd77d19c78345ff18c4de63fa624b76ec Mon Sep 17 00:00:00 2001
From: belousovjr <belousowork@gmail.com>
Date: Mon, 27 Nov 2023 17:26:28 +0200
Subject: [PATCH 1/4] Added clickable rows to table component

---
 src/components/Button/Button.tsx       |  6 +-
 src/components/Table/Table.tsx         | 97 +++++++++++++++-----------
 src/components/Table/index.stories.tsx | 11 +--
 src/components/Table/styles.ts         | 44 +++++++++---
 src/components/Table/types.ts          |  1 +
 src/components/Table/utils.ts          |  8 ---
 6 files changed, 101 insertions(+), 66 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index e5a0d72..df4bc38 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,6 +1,6 @@
 import { ButtonProps } from "./types";
 import LoadingSpinner from "../Loaders/LoadingSpinner";
-import { ButtonContainer, ButtonContent, ButtonLoader, ButtonWrapper } from './styles';
+import { ButtonContainer, ButtonContent, ButtonLoader, ButtonWrapper } from "./styles";
 
 ButtonWrapper.defaultProps = {
   variant: "default",
@@ -14,7 +14,7 @@ export default function ({
   loading,
   onClick,
   ...props
-}: ButtonProps & { loading?: boolean; onClick?: () => void }) {
+}: ButtonProps & { loading?: boolean; onClick?: (e: MouseEvent) => void }) {
   return (
     <ButtonWrapper
       {...props}
@@ -22,7 +22,7 @@ export default function ({
       href={props.to}
       onClick={(e: any) => {
         if (loading || props.disabled) e.preventDefault();
-        else if (onClick) onClick();
+        else if (onClick) onClick(e);
       }}
     >
       <ButtonContainer isLoading={loading}>
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index ac86f35..8b6156d 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -6,6 +6,7 @@ import {
   TableItem,
   TablePagBtn,
   TablePagWrap,
+  TableRow,
   TableWrap,
 } from "./styles";
 import { ITableProps, SortData } from "./types";
@@ -43,6 +44,7 @@ export default function Table<T = any>({
   changePage = (page: number) => {},
   loading,
   emptyCard,
+  clickRow,
 }: ITableProps<T>) {
   const maxPage = useMemo(() => Math.ceil(items.length / perPage), [items, perPage]);
 
@@ -78,48 +80,61 @@ export default function Table<T = any>({
       <Box width={"100%"}>{header}</Box>
       <TableContentWrap>
         {items.length && !loading ? (
-          <TableContent cols={headers} data-testid={`table-content`}>
-            {headers.map((header, i) => {
-              const isSortable = !!((header.sortable && header.key) || header.sortFunc);
-              return (
-                <TableHeader key={i} data-testid={`table-header-${i}`}>
-                  {header.key && header.title && (
-                    <TableHeaderTitleBtn
-                      disabled={!isSortable}
-                      onClick={() => {
-                        const sortBy = header.key;
-                        if (sortBy) {
-                          if (sortData?.sortBy === sortBy && sortData.reverseOrder) setSortData(null);
-                          else {
-                            const reverseOrder = sortData?.sortBy !== sortBy ? false : !sortData?.reverseOrder;
-                            setSortData({ sortBy, reverseOrder });
+          <TableContent data-testid={`table-content`} cols={headers}>
+            <TableRow cols={headers}>
+              {headers.map((header, i) => {
+                const isSortable = !!((header.sortable && header.key) || header.sortFunc);
+                return (
+                  <TableHeader key={i} data-testid={`table-header-${i}`}>
+                    {header.key && header.title && (
+                      <TableHeaderTitleBtn
+                        disabled={!isSortable}
+                        onClick={() => {
+                          const sortBy = header.key;
+                          if (sortBy) {
+                            if (sortData?.sortBy === sortBy && sortData.reverseOrder) setSortData(null);
+                            else {
+                              const reverseOrder = sortData?.sortBy !== sortBy ? false : !sortData?.reverseOrder;
+                              setSortData({ sortBy, reverseOrder });
+                            }
                           }
-                        }
-                      }}
-                      active={sortData?.sortBy === header.key}
-                    >
-                      {isSortable && <SortBtn data={sortData || undefined} active={sortData?.sortBy === header.key} />}
-                      <span>{header.title}</span>
-                    </TableHeaderTitleBtn>
-                  )}
-                  {header.tooltip && (
-                    <Box ml={"4px"}>
-                      <Tooltip content={header.tooltip}>
-                        <QuestionIcon size={"13px"} color="darkGray" />
-                      </Tooltip>
-                    </Box>
-                  )}
-                </TableHeader>
-              );
-            })}
-            {paginatedItems.map((item) =>
-              headers.map((header, j) => {
-                const customContent = header.renderFunc && header.renderFunc(item);
-                const nativeContent = String(header.key ? item[header.key] : "");
-                const content = customContent || nativeContent;
-                return <TableItem key={j}>{content}</TableItem>;
-              })
-            )}
+                        }}
+                        active={sortData?.sortBy === header.key}
+                      >
+                        {isSortable && (
+                          <SortBtn data={sortData || undefined} active={sortData?.sortBy === header.key} />
+                        )}
+                        <span>{header.title}</span>
+                      </TableHeaderTitleBtn>
+                    )}
+                    {header.tooltip && (
+                      <Box ml={"4px"}>
+                        <Tooltip content={header.tooltip}>
+                          <QuestionIcon size={"13px"} color="darkGray" />
+                        </Tooltip>
+                      </Box>
+                    )}
+                  </TableHeader>
+                );
+              })}
+            </TableRow>
+            {paginatedItems.map((item, k) => (
+              <TableRow
+                cols={headers}
+                key={k}
+                onClick={() => {
+                  if (clickRow) clickRow(item);
+                }}
+                clickable={!!clickRow}
+              >
+                {headers.map((header, j) => {
+                  const customContent = header.renderFunc && header.renderFunc(item);
+                  const nativeContent = String(header.key ? item[header.key] : "");
+                  const content = customContent || nativeContent;
+                  return <TableItem key={j}>{content}</TableItem>;
+                })}
+              </TableRow>
+            ))}
           </TableContent>
         ) : loading ? (
           <Flex alignItems={"center"} justifyContent={"center"} height={"100%"}>
diff --git a/src/components/Table/index.stories.tsx b/src/components/Table/index.stories.tsx
index 50ff994..2169075 100644
--- a/src/components/Table/index.stories.tsx
+++ b/src/components/Table/index.stories.tsx
@@ -102,7 +102,6 @@ export const Table = () => {
               </Flex>
             ),
           },
-
           {
             key: "price",
             title: "Price $",
@@ -115,7 +114,8 @@ export const Table = () => {
             width: "77px",
             renderFunc: (item) => (
               <Button
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
                   console.log("Click table item", item);
                 }}
                 scale={"small"}
@@ -132,13 +132,16 @@ export const Table = () => {
         changePage={setPage}
         header={
           showCustomHeader ? (
-            <Text pb={"24px"} variant="h5">
+            <Text pb={"24px"} px={"8px"} variant="h5">
               Custom header
             </Text>
           ) : undefined
         }
-        minHeight={withMinHeight ? "369px" : undefined}
+        minHeight={withMinHeight ? "392px" : undefined}
         loading={loading}
+        clickRow={(item) => {
+          console.log("clicked row:", item.id);
+        }}
       />
     </Box>
   );
diff --git a/src/components/Table/styles.ts b/src/components/Table/styles.ts
index 8ac9e25..ed01f63 100644
--- a/src/components/Table/styles.ts
+++ b/src/components/Table/styles.ts
@@ -3,7 +3,6 @@ import { Box, Grid } from "../Box";
 import { rgba } from "polished";
 import { ITableHeader } from "./types";
 import { SCREEN_WIDTH } from "../../constants";
-import { genAdaptiveGrid } from "./utils";
 
 export const TableWrap = styled(Grid)`
   justify-items: center;
@@ -16,12 +15,11 @@ export const TableWrap = styled(Grid)`
   box-sizing: border-box;
 
   @media (min-width: ${SCREEN_WIDTH.SM}px) {
-    padding: 24px 40px;
+    padding: 24px 32px;
   }
 `;
 
 export const TableContentWrap = styled(Box)`
-  overflow-y: hidden;
   overflow-x: auto;
   width: 100%;
   @media (min-width: ${SCREEN_WIDTH.SM}px) {
@@ -29,23 +27,49 @@ export const TableContentWrap = styled(Box)`
   }
 `;
 export const TableContent = styled(Grid)<{ cols: ITableHeader<any>[] }>`
-  align-items: center;
-  grid-row-gap: 18px;
-  grid-column-gap: 8px;
-  grid-template-columns: ${({ cols }) => genAdaptiveGrid(cols.length, 2)};
+  width: ${({ cols }) => (cols.length / 2) * 100}%;
+  grid-row-gap: 10px;
 
   @media (min-width: ${SCREEN_WIDTH.XS}px) {
-    grid-template-columns: ${({ cols }) => genAdaptiveGrid(cols.length, 3)};
+    width: ${({ cols }) => (cols.length / 3) * 100}%;
+  }
+
+  @media (min-width: ${SCREEN_WIDTH.SM}px) {
+    width: 100%;
   }
+`;
+
+//${(cols.length / 2) * 100}% + ${(cols.length - 1) * 8}px}
+export const TableRow = styled(Grid)<{ cols: ITableHeader<any>[]; clickable?: boolean }>`
+  position: relative;
+  align-items: center;
+  padding: 8px 0;
+  border-radius: 12px;
+
+  grid-template-columns: ${({ cols }) => `repeat(${cols.length}, 1fr)`};
+
   @media (min-width: ${SCREEN_WIDTH.SM}px) {
-    grid-template-columns: ${({ cols }) => cols.map((col) => col.width || "auto").join(" ")};
+    grid-template-columns: ${({ cols }) => cols.map((col) => col.width || "1fr").join(" ")};
+    padding: 8px 4px;
+  }
+
+  cursor: ${({ clickable }) => (clickable ? "pointer" : "default")};
+  
+  &:hover {
+    background: ${({theme, clickable}) => clickable ? rgba( theme.colors.primaryDefault, 0.2) : ''};
+  }
+  
+  transition: background-color 0.2s;
+  
+  & > * {
+    padding: 0 4px;
   }
 `;
 
 export const TableHeader = styled(Box)`
   display: flex;
   align-items: center;
-  padding: 8px 0 12px;
+  padding-bottom: 4px;
   min-height: 17px;
 `;
 
diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts
index afed289..7010813 100644
--- a/src/components/Table/types.ts
+++ b/src/components/Table/types.ts
@@ -16,6 +16,7 @@ export interface ITableProps<T> {
   items: T[];
   loading?: boolean;
   changePage?: (page: number) => void;
+  clickRow?: (item: T) => void;
   minHeight?: string;
   header?: ReactNode;
   emptyCard?: ReactNode;
diff --git a/src/components/Table/utils.ts b/src/components/Table/utils.ts
index ac5fdd8..787eba5 100644
--- a/src/components/Table/utils.ts
+++ b/src/components/Table/utils.ts
@@ -8,11 +8,3 @@ export const defaultSortCallback = <T = any>(itemA: T, itemB: T, sortData: SortD
   if (a > b) return 1 * orderFactor;
   return 0;
 };
-
-export const genAdaptiveGrid = (length: number, shown: number, gapCol = 8) => {
-  const percent = 100 / shown;
-  const gap = (gapCol * (shown - 1)) / shown;
-  return Array.from({ length })
-    .map(() => `calc(${percent}% - ${gap}px)`)
-    .join(" ");
-};

From 317947e36fdc6036b95a96a80450ec454e21f99f Mon Sep 17 00:00:00 2001
From: belousovjr <belousowork@gmail.com>
Date: Mon, 27 Nov 2023 17:35:55 +0200
Subject: [PATCH 2/4] Updated padding of custom header

---
 src/components/Table/Table.tsx         |  3 ++-
 src/components/Table/index.stories.tsx |  2 +-
 src/components/Table/styles.ts         | 18 +++++++++++++-----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 8b6156d..522e9ed 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -3,6 +3,7 @@ import {
   TableContentWrap,
   TableHeader,
   TableHeaderTitleBtn,
+  TableHeaderWrap,
   TableItem,
   TablePagBtn,
   TablePagWrap,
@@ -77,7 +78,7 @@ export default function Table<T = any>({
 
   return (
     <TableWrap minHeight={minHeight}>
-      <Box width={"100%"}>{header}</Box>
+      <TableHeaderWrap>{header}</TableHeaderWrap>
       <TableContentWrap>
         {items.length && !loading ? (
           <TableContent data-testid={`table-content`} cols={headers}>
diff --git a/src/components/Table/index.stories.tsx b/src/components/Table/index.stories.tsx
index 2169075..991ad31 100644
--- a/src/components/Table/index.stories.tsx
+++ b/src/components/Table/index.stories.tsx
@@ -132,7 +132,7 @@ export const Table = () => {
         changePage={setPage}
         header={
           showCustomHeader ? (
-            <Text pb={"24px"} px={"8px"} variant="h5">
+            <Text pb={"24px"} variant="h5">
               Custom header
             </Text>
           ) : undefined
diff --git a/src/components/Table/styles.ts b/src/components/Table/styles.ts
index ed01f63..1d25a20 100644
--- a/src/components/Table/styles.ts
+++ b/src/components/Table/styles.ts
@@ -19,6 +19,15 @@ export const TableWrap = styled(Grid)`
   }
 `;
 
+export const TableHeaderWrap = styled(Box)`
+  width: 100%;
+  padding: 0 4px;
+  box-sizing: border-box;
+
+  @media (min-width: ${SCREEN_WIDTH.SM}px) {
+    padding: 0 8px;
+  }
+`;
 export const TableContentWrap = styled(Box)`
   overflow-x: auto;
   width: 100%;
@@ -39,7 +48,6 @@ export const TableContent = styled(Grid)<{ cols: ITableHeader<any>[] }>`
   }
 `;
 
-//${(cols.length / 2) * 100}% + ${(cols.length - 1) * 8}px}
 export const TableRow = styled(Grid)<{ cols: ITableHeader<any>[]; clickable?: boolean }>`
   position: relative;
   align-items: center;
@@ -54,13 +62,13 @@ export const TableRow = styled(Grid)<{ cols: ITableHeader<any>[]; clickable?: bo
   }
 
   cursor: ${({ clickable }) => (clickable ? "pointer" : "default")};
-  
+
   &:hover {
-    background: ${({theme, clickable}) => clickable ? rgba( theme.colors.primaryDefault, 0.2) : ''};
+    background: ${({ theme, clickable }) => (clickable ? rgba(theme.colors.primaryDefault, 0.2) : "")};
   }
-  
+
   transition: background-color 0.2s;
-  
+
   & > * {
     padding: 0 4px;
   }

From 29664a60051834febe790b4a7debda7368e9738d Mon Sep 17 00:00:00 2001
From: belousovjr <belousowork@gmail.com>
Date: Mon, 27 Nov 2023 19:30:18 +0200
Subject: [PATCH 3/4] Updated table test

---
 src/__tests__/components/table.test.tsx | 307 ++++++++++++++----------
 1 file changed, 174 insertions(+), 133 deletions(-)

diff --git a/src/__tests__/components/table.test.tsx b/src/__tests__/components/table.test.tsx
index 7ac63fc..8a7b95b 100644
--- a/src/__tests__/components/table.test.tsx
+++ b/src/__tests__/components/table.test.tsx
@@ -6,7 +6,10 @@ import Button from "../../components/Button/Button";
 import { fireEvent } from "@testing-library/react";
 
 const getOnlyItemsOfTable = (table: HTMLDivElement) =>
-  Array.from(table.children).filter((el) => !el.getAttribute("data-testid"));
+  Array.from(table.children)
+    .map((row) => Array.from(row.children))
+    .flat()
+    .filter((el) => !el.getAttribute("data-testid"));
 
 const getItemsTextContent = (table: HTMLDivElement) => getOnlyItemsOfTable(table).map((el) => el.textContent);
 
@@ -56,36 +59,32 @@ describe("Table", () => {
     expect(JSON.stringify(amountColTextReversed)).toEqual(JSON.stringify(["4", "3"]));
 
     expect(asFragment()).toMatchInlineSnapshot(`
-      <DocumentFragment>
-     .c2 {
-     width: 100%;
-   }
-
-   .c14 {
+   <DocumentFragment>
+     .c15 {
      margin-right: 0.4em;
    }
-
-   .c15 {
+   
+   .c16 {
      min-width: 10px;
      color: #5d93b2;
    }
-
-   .c16 {
+   
+   .c17 {
      margin-left: 0.4em;
      margin-right: 0.4em;
    }
-
-   .c13 {
+   
+   .c14 {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }
-
+   
    .c0 {
      display: grid;
    }
-
+   
    .c1 {
      justify-items: center;
      grid-template-rows: auto 1fr auto;
@@ -95,24 +94,42 @@ describe("Table", () => {
      padding: 16px;
      box-sizing: border-box;
    }
-
+   
+   .c2 {
+     width: 100%;
+     padding: 0 4px;
+     box-sizing: border-box;
+   }
+   
    .c3 {
-     overflow-y: hidden;
      overflow-x: auto;
      width: 100%;
    }
-
+   
    .c4 {
+     width: 100%;
+     grid-row-gap: 10px;
+   }
+   
+   .c5 {
+     position: relative;
      -webkit-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
-     grid-row-gap: 18px;
-     grid-column-gap: 8px;
-     grid-template-columns: calc(50% - 4px) calc(50% - 4px);
+     padding: 8px 0;
+     border-radius: 12px;
+     grid-template-columns: repeat(2,1fr);
+     cursor: default;
+     -webkit-transition: background-color 0.2s;
+     transition: background-color 0.2s;
    }
-
-   .c5 {
+   
+   .c5 > * {
+     padding: 0 4px;
+   }
+   
+   .c6 {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
@@ -121,11 +138,11 @@ describe("Table", () => {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
-     padding: 8px 0 12px;
+     padding-bottom: 4px;
      min-height: 17px;
    }
-
-   .c6 {
+   
+   .c7 {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
@@ -143,12 +160,12 @@ describe("Table", () => {
      font-size: 12px;
      font-weight: 400;
    }
-
-   .c6:disabled {
+   
+   .c7:disabled {
      cursor: default;
    }
-
-   .c7 {
+   
+   .c8 {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
@@ -166,20 +183,20 @@ describe("Table", () => {
      font-size: 12px;
      font-weight: 400;
    }
-
-   .c7:disabled {
+   
+   .c8:disabled {
      cursor: default;
    }
-
-   .c9 {
+   
+   .c10 {
      font-size: 14px;
      font-weight: 300;
      line-height: 18px;
      text-align: left;
      color: #ffffff;
    }
-
-   .c10 {
+   
+   .c11 {
      grid-template-columns: 1fr max-content 1fr;
      -webkit-align-items: center;
      -webkit-box-align: center;
@@ -195,8 +212,8 @@ describe("Table", () => {
      margin-top: 8px;
      font-size: 12px;
    }
-
-   .c11 {
+   
+   .c12 {
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
@@ -211,81 +228,93 @@ describe("Table", () => {
      padding: 6px;
      border-radius: 14px;
    }
-
-   .c11:disabled {
+   
+   .c12:disabled {
      visibility: hidden;
    }
-
-   .c8 {
+   
+   .c9 {
      margin-right: 4px;
      fill: none !important;
      stroke: #000000;
      width: 12px;
    }
-
-   .c12 {
+   
+   .c13 {
      fill: none !important;
      stroke: #5d93b2;
      width: 16px;
    }
-
+   
    @media (min-width:640px) {
      .c1 {
-       padding: 24px 40px;
+       padding: 24px 32px;
      }
    }
-
+   
+   @media (min-width:640px) {
+     .c2 {
+       padding: 0 8px;
+     }
+   }
+   
    @media (min-width:640px) {
      .c3 {
        overflow-x: hidden;
      }
    }
-
+   
    @media (min-width:420px) {
      .c4 {
-       grid-template-columns: calc(33.333333333333336% - 5.333333333333333px) calc(33.333333333333336% - 5.333333333333333px);
+       width: 66.66666666666666%;
      }
    }
-
+   
    @media (min-width:640px) {
      .c4 {
-       grid-template-columns: auto auto;
+       width: 100%;
      }
    }
-
+   
+   @media (min-width:640px) {
+     .c5 {
+       grid-template-columns: 1fr 1fr;
+       padding: 8px 4px;
+     }
+   }
+   
    @media (min-width:420px) {
-     .c10 {
+     .c11 {
        font-size: 14px;
      }
    }
-
+   
    @media (min-width:640px) {
-     .c10 {
+     .c11 {
        font-size: 16px;
        margin-top: 44px;
      }
    }
-
+   
    @supports (-webkit-text-size-adjust:none) and (not (-ms-accelerator:true)) and (not (-moz-appearance:none)) {
-     .c8 {
+     .c9 {
        -webkit-filter: none !important;
        filter: none !important;
      }
    }
-
+   
    @supports (-webkit-text-size-adjust:none) and (not (-ms-accelerator:true)) and (not (-moz-appearance:none)) {
-     .c12 {
+     .c13 {
        -webkit-filter: none !important;
        filter: none !important;
      }
    }
-
+   
    <div
        class="c0 c1"
      >
        <div
          class="c2"
-         width="100%"
        >
          Custom header
        </div>
@@ -297,94 +326,106 @@ describe("Table", () => {
            data-testid="table-content"
          >
            <div
-             class="c5"
-             data-testid="table-header-0"
+             class="c0 c5"
            >
-             <button
+             <div
                class="c6"
-               disabled=""
+               data-testid="table-header-0"
              >
-               <span>
-                 Value
-               </span>
-             </button>
-           </div>
-           <div
-             class="c5"
-             data-testid="table-header-1"
-           >
-             <button
-               class="c7"
+               <button
+                 class="c7"
+                 disabled=""
+               >
+                 <span>
+                   Value
+                 </span>
+               </button>
+             </div>
+             <div
+               class="c6"
+               data-testid="table-header-1"
              >
-               <svg
+               <button
                  class="c8"
-                 color="#000000"
-                 fill="none"
-                 viewBox="0 0 12 12"
-                 xmlns="http://www.w3.org/2000/svg"
                >
-                 <path
-                   d="M5.25 9L3.75 10.5L2.25 9"
-                   stroke="#7b8187"
-                   stroke-linecap="round"
-                   stroke-linejoin="round"
-                 />
-                 <path
-                   d="M6.75 3L8.25 1.5L9.75 3"
-                   stroke="#5d93b2"
-                   stroke-linecap="round"
-                   stroke-linejoin="round"
-                 />
-                 <path
-                   d="M8.25 10.5V1.5"
-                   stroke="#5d93b2"
-                   stroke-linecap="round"
-                   stroke-linejoin="round"
-                 />
-                 <path
-                   d="M3.75 1.5V10.5"
-                   stroke="#7b8187"
-                   stroke-linecap="round"
-                   stroke-linejoin="round"
-                 />
-               </svg>
-               <span>
-                 Amount
-               </span>
-             </button>
-           </div>
-           <div
-             class="c9"
-           >
-             Value 1
+                 <svg
+                   class="c9"
+                   color="#000000"
+                   fill="none"
+                   viewBox="0 0 12 12"
+                   xmlns="http://www.w3.org/2000/svg"
+                 >
+                   <path
+                     d="M5.25 9L3.75 10.5L2.25 9"
+                     stroke="#7b8187"
+                     stroke-linecap="round"
+                     stroke-linejoin="round"
+                   />
+                   <path
+                     d="M6.75 3L8.25 1.5L9.75 3"
+                     stroke="#5d93b2"
+                     stroke-linecap="round"
+                     stroke-linejoin="round"
+                   />
+                   <path
+                     d="M8.25 10.5V1.5"
+                     stroke="#5d93b2"
+                     stroke-linecap="round"
+                     stroke-linejoin="round"
+                   />
+                   <path
+                     d="M3.75 1.5V10.5"
+                     stroke="#7b8187"
+                     stroke-linecap="round"
+                     stroke-linejoin="round"
+                   />
+                 </svg>
+                 <span>
+                   Amount
+                 </span>
+               </button>
+             </div>
            </div>
            <div
-             class="c9"
+             class="c0 c5"
            >
-             4
-           </div>
-           <div
-             class="c9"
-           >
-             Value 4
+             <div
+               class="c10"
+             >
+               Value 1
+             </div>
+             <div
+               class="c10"
+             >
+               4
+             </div>
            </div>
            <div
-             class="c9"
+             class="c0 c5"
            >
-             3
+             <div
+               class="c10"
+             >
+               Value 4
+             </div>
+             <div
+               class="c10"
+             >
+               3
+             </div>
            </div>
          </div>
        </div>
        <div
-         class="c0 c10"
+         class="c0 c11"
        >
          <button
-           class="c11"
+           class="c12"
            data-testid="table-btn-previous"
            disabled=""
          >
            <svg
-             class="c12"
+             class="c13"
              color="primaryDefault"
              fill="none"
              viewBox="0 0 16 16"
@@ -403,21 +444,21 @@ describe("Table", () => {
            </svg>
          </button>
          <div
-           class="c13"
+           class="c14"
          >
            <div
-             class="c14"
+             class="c15"
            >
              Page
            </div>
            <div
-             class="c15"
+             class="c16"
              color="#5d93b2"
            >
              1
            </div>
            <div
-             class="c16"
+             class="c17"
            >
              of
            </div>
@@ -428,11 +469,11 @@ describe("Table", () => {
            </div>
          </div>
          <button
-           class="c11"
+           class="c12"
            data-testid="table-btn-next"
          >
            <svg
-             class="c12"
+             class="c13"
              color="primaryDefault"
              fill="none"
              style="transform: scaleX(-1);"

From 23673420be01c1cc16fad1c97d7ee936e6e5cce8 Mon Sep 17 00:00:00 2001
From: belousovjr <belousowork@gmail.com>
Date: Tue, 28 Nov 2023 14:12:27 +0200
Subject: [PATCH 4/4] Updated clickable table elements behavior

---
 src/components/Table/index.stories.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/Table/index.stories.tsx b/src/components/Table/index.stories.tsx
index 991ad31..33fc78d 100644
--- a/src/components/Table/index.stories.tsx
+++ b/src/components/Table/index.stories.tsx
@@ -21,6 +21,7 @@ export const Table = () => {
   const [showCustomHeader, setShowCustomHeader] = useState(true);
   const [loading, setLoading] = useState(false);
   const [empty, setEmpty] = useState(false);
+  const [disabledRows, setDisabledRows] = useState(false);
 
   const items = [
     { id: 0, price: 12, name: "H Name", someField: "Some Field 1", sortField: "123" },
@@ -79,6 +80,10 @@ export const Table = () => {
           </Tooltip>
           <Checkbox value={empty} onChange={setEmpty} />
         </label>
+        <label style={{ cursor: "pointer", display: "flex" }}>
+          <Text mr={"8px"}>Non clickable rows</Text>
+          <Checkbox value={disabledRows} onChange={setDisabledRows} />
+        </label>
       </Grid>
       <TableComponent<ItemType>
         headers={[
@@ -116,7 +121,7 @@ export const Table = () => {
               <Button
                 onClick={(e) => {
                   e.stopPropagation();
-                  console.log("Click table item", item);
+                  alert(`Click action: ${item.id}`);
                 }}
                 scale={"small"}
                 variant={"outlined"}
@@ -139,9 +144,13 @@ export const Table = () => {
         }
         minHeight={withMinHeight ? "392px" : undefined}
         loading={loading}
-        clickRow={(item) => {
-          console.log("clicked row:", item.id);
-        }}
+        clickRow={
+          !disabledRows
+            ? (item) => {
+                alert(`Click row: ${item.id}`);
+              }
+            : undefined
+        }
       />
     </Box>
   );