init commit - update table2beta. (#852)

Author: MatthewwTN

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clever-components",
-  "version": "2.224.0",
+  "version": "2.225.0",
   "description": "A library of helpful React components and less styles",
   "repository": {
     "type": "git",

src/Table2Beta/Column.tsx

@@ -12,6 +12,7 @@ export interface Props {
   };
   noWrap?: boolean;
   sortable?: boolean;
+  tooltip?: React.ReactNode;
   sortValueFn?: Function;
   width?: string; // Not included in propTypes but appears to work and is commonly used.
 }
@@ -32,6 +33,7 @@ Column.propTypes = {
   }),
   noWrap: PropTypes.bool,
   sortable: PropTypes.bool,
+  tooltip: PropTypes.node,
   sortValueFn: PropTypes.func,
 };
 

src/Table2Beta/Header.tsx

@@ -41,6 +41,7 @@ export default function Header({
           key={column.id}
           onSortChange={() => onSortChange(column.id)}
           sortable={column.sortable && !disableSort}
+          tooltip={column.tooltip ? column.tooltip : null}
           width={column.width}
         >
           {column.header && column.header.content}

src/Table2Beta/HeaderCell.less

@@ -36,3 +36,8 @@
     fill: @neutral_black;
   }
 }
+
+.Table--header--cell--tooltip {
+  margin-left: 0.625rem;
+  cursor: pointer;
+}

src/Table2Beta/HeaderCell.tsx

@@ -14,6 +14,7 @@ export interface Props {
   children?: React.ReactNode;
   onSortChange?: Function;
   sortable?: boolean;
+  tooltip?: React.ReactNode;
   activeSortDirection?: "asc" | "desc";
   width?: string;
 }
@@ -24,13 +25,15 @@ export const cssClass = {
   LABEL: "Table--header--cell--label",
   SORTABLE: "Table--header--cell--sortable",
   SORT: "Table--header--cell--sort_icons",
+  TOOLTIP: "Table--header--cell--tooltip",
 };
 
 export default function HeaderCell({
   children,
   className,
   onSortChange,
   sortable,
+  tooltip,
   activeSortDirection,
   width,
 }: Props) {
@@ -59,6 +62,7 @@ export default function HeaderCell({
             <SortIcons direction={activeSortDirection} className={cssClass.SORT} />
           </div>
         )}
+        {tooltip && <div className={cssClass.TOOLTIP}>{tooltip}</div>}
       </FlexBox>
     </Cell>
   );