feat: 🎸 [Table] Sortable columns and dataCy for Header Cell

Added possibility to set singularly set columns as sortable, by default
passing "onSortChange" property will enable it for all columns. Added
also a specific dataCy for each column header to allow retrieval in
tests.

✅ Closes: 188

src/components/Table/components/HeadCell/index.tsx

@@ -1,20 +1,29 @@
 import React, { CSSProperties, FC, useCallback, useMemo } from "react";
 import { TableCell as MUITableCell, TableSortLabel as MUITableSortLabel, useTheme } from "@material-ui/core";
 
+import { IBase } from "../../../../types/Base";
 import { ITableColumn, ITableOnSortCallback, ITableSorting } from "../../../../types/Table";
 import { suppressEvent } from "../../../../utils";
 import { CHECKBOX_SELECTION_PATH, TOOLBAR_DIMENSION } from "../../utils";
 
-interface ITableHeadCell {
+interface ITableHeadCell extends IBase {
   column: ITableColumn;
+  dataCy: string;
   onSort: ITableOnSortCallback;
   sortable: boolean;
   sorting: ITableSorting;
   stickyHeader: boolean;
 }
 
-const TableHeadCell: FC<ITableHeadCell> = ({ column, onSort, sortable: tableSortable, sorting, stickyHeader }) => {
-  const { label, path, padding, render, width } = column;
+const TableHeadCell: FC<ITableHeadCell> = ({
+  column,
+  dataCy,
+  onSort,
+  sortable: tableSortable,
+  sorting,
+  stickyHeader,
+}) => {
+  const { label, path, padding, render, sortable: columnSortable, width } = column;
   const theme = useTheme();
 
   const cellPadding = useMemo(() => padding || "default", [padding]);
@@ -56,6 +65,18 @@ const TableHeadCell: FC<ITableHeadCell> = ({ column, onSort, sortable: tableSort
     [path, onSort, sorting]
   );
 
+  const sortable = useMemo(() => {
+    if (!tableSortable) {
+      return false;
+    }
+
+    if (columnSortable === undefined || columnSortable === null) {
+      return tableSortable;
+    }
+
+    return columnSortable;
+  }, [columnSortable, tableSortable]);
+
   const sortActive = useMemo(() => path === sorting.path, [path, sorting]);
 
   const sortDirection = useMemo(() => (path === sorting.path ? sorting.ordering || undefined : "asc"), [path, sorting]);
@@ -69,8 +90,8 @@ const TableHeadCell: FC<ITableHeadCell> = ({ column, onSort, sortable: tableSort
   }
 
   return (
-    <MUITableCell padding={cellPadding} style={cellStyle} variant="head">
-      {!tableSortable ? (
+    <MUITableCell data-cy={dataCy} padding={cellPadding} style={cellStyle} variant="head">
+      {!sortable ? (
         label
       ) : (
         <MUITableSortLabel active={sortActive} direction={sortDirection} onClick={onSortWrapper}>

src/components/Table/index.tsx

@@ -40,6 +40,10 @@ export const SUBPARTS_MAP = {
     label: "Action (with label)",
     value: (label = "{label}") => `action-${label}`,
   },
+  headerCell: {
+    label: "Header Cell (with label)",
+    value: (label = "{label}") => `header-cell-${label}`,
+  },
   pagination: {
     label: "Pagination (with label)",
     value: (label = "{label}") => `pagination-${label}`,
@@ -296,6 +300,7 @@ const Table: FC<ITable> = ({
               <TableHeadCell
                 key={`column-${column.path || index}`}
                 column={column}
+                dataCy={getComposedDataCy(dataCy, SUBPARTS_MAP.headerCell, column.label || `${index}`)}
                 onSort={onSortWrapper}
                 sortable={!!onSortChange}
                 sorting={sorting}

src/types/Table.ts

@@ -23,6 +23,7 @@ export interface ITableColumn {
   padding?: "checkbox" | "default" | "none";
   path: string;
   render?: (row: any) => ReactNode;
+  sortable?: boolean;
   width?: number | string;
 }