From 3ec5eb40aa9f1f200b3f8428b8ad164bbb8465be Mon Sep 17 00:00:00 2001
From: katspaugh <ivan.kalyaev@gmail.com>
Date: Tue, 4 May 2021 10:53:29 +0200
Subject: [PATCH] Table: don't show the sorting arrow when no sorting fn passed

---
 src/dataDisplay/Table/index.tsx            |  18 +-
 tests/__snapshots__/storybook.test.js.snap | 217 +--------------------
 2 files changed, 18 insertions(+), 217 deletions(-)

diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx
index ee07c97b..e6ed5375 100644
--- a/src/dataDisplay/Table/index.tsx
+++ b/src/dataDisplay/Table/index.tsx
@@ -111,7 +111,7 @@ export const Table = ({
   sortedByHeaderId,
   sortDirection,
   onRowClick = () => undefined,
-  onHeaderClick = () => undefined,
+  onHeaderClick,
 }: Props): React.ReactElement => (
   <TableContainer component={Paper} elevation={3}>
     <TableMui className={className}>
@@ -123,12 +123,16 @@ export const Table = ({
               <TableCell
                 key={header.id}
                 align={header.alignment || TableAlignment.left}>
-                <TableSortLabel
-                  active={sortedByHeaderId === header.id}
-                  direction={sortDirection}
-                  onClick={() => onHeaderClick(header.id)}>
-                  {header.label}
-                </TableSortLabel>
+                {onHeaderClick ? (
+                  <TableSortLabel
+                    active={sortedByHeaderId === header.id}
+                    direction={sortDirection}
+                    onClick={() => onHeaderClick(header.id)}>
+                    {header.label}
+                  </TableSortLabel>
+                ) : (
+                  header.label
+                )}
               </TableCell>
             ))}
           </TableRow>
diff --git a/tests/__snapshots__/storybook.test.js.snap b/tests/__snapshots__/storybook.test.js.snap
index b710c44d..4f22bed8 100644
--- a/tests/__snapshots__/storybook.test.js.snap
+++ b/tests/__snapshots__/storybook.test.js.snap
@@ -6019,144 +6019,28 @@ exports[`Storyshots Data Display/Table Collapsible 1`] = `
           className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft"
           scope="col"
         >
-          <span
-            aria-disabled={false}
-            className="MuiButtonBase-root MuiTableSortLabel-root"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onDragLeave={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            role="button"
-            tabIndex={0}
-          >
-            col1
-            <svg
-              aria-hidden={true}
-              className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-              />
-            </svg>
-          </span>
+          col1
         </th>
         <th
           aria-sort={null}
           className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight"
           scope="col"
         >
-          <span
-            aria-disabled={false}
-            className="MuiButtonBase-root MuiTableSortLabel-root"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onDragLeave={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            role="button"
-            tabIndex={0}
-          >
-            col2
-            <svg
-              aria-hidden={true}
-              className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-              />
-            </svg>
-          </span>
+          col2
         </th>
         <th
           aria-sort={null}
           className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight"
           scope="col"
         >
-          <span
-            aria-disabled={false}
-            className="MuiButtonBase-root MuiTableSortLabel-root"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onDragLeave={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            role="button"
-            tabIndex={0}
-          >
-            col3
-            <svg
-              aria-hidden={true}
-              className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-              />
-            </svg>
-          </span>
+          col3
         </th>
         <th
           aria-sort={null}
           className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft"
           scope="col"
         >
-          <span
-            aria-disabled={false}
-            className="MuiButtonBase-root MuiTableSortLabel-root"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onDragLeave={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            role="button"
-            tabIndex={0}
-          >
-            
-            <svg
-              aria-hidden={true}
-              className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-              />
-            </svg>
-          </span>
+          
         </th>
       </tr>
     </thead>
@@ -6373,108 +6257,21 @@ exports[`Storyshots Data Display/Table Simple Table 1`] = `
           className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft"
           scope="col"
         >
-          <span
-            aria-disabled={false}
-            className="MuiButtonBase-root MuiTableSortLabel-root"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onDragLeave={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            role="button"
-            tabIndex={0}
-          >
-            col1
-            <svg
-              aria-hidden={true}
-              className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-              />
-            </svg>
-          </span>
+          col1
         </th>
         <th
           aria-sort={null}
           className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight"
           scope="col"
         >
-          <span
-            aria-disabled={false}
-            className="MuiButtonBase-root MuiTableSortLabel-root"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onDragLeave={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            role="button"
-            tabIndex={0}
-          >
-            col2
-            <svg
-              aria-hidden={true}
-              className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-              />
-            </svg>
-          </span>
+          col2
         </th>
         <th
           aria-sort={null}
           className="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight"
           scope="col"
         >
-          <span
-            aria-disabled={false}
-            className="MuiButtonBase-root MuiTableSortLabel-root"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onDragLeave={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            role="button"
-            tabIndex={0}
-          >
-            col3
-            <svg
-              aria-hidden={true}
-              className="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-              />
-            </svg>
-          </span>
+          col3
         </th>
       </tr>
     </thead>