feat(table): 3715-Resize-DataTable-Column

src/components/DataTable/_data-table.scss

@@ -97,3 +97,23 @@ html[dir='rtl'] {
   height: $spacing-09;
   padding: $spacing-05;
 }
+
+.#{$prefix}--data-table th {
+  position: relative;
+}
+.column-resize-wrapper {
+  top: 0;
+  right: -$spacing-01;
+  width: $spacing-02;
+  cursor: col-resize;
+  height: 100%;
+  z-index: 1;
+  position: absolute;
+  user-select: none;
+  outline: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  &:hover {
+    background-color: $ui-05;
+  }
+}

src/components/Table/TableHead/TableHead.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, createRef } from 'react';
 import PropTypes from 'prop-types';
 import { DataTable, Checkbox } from 'carbon-components-react';
 import isNil from 'lodash/isNil';
@@ -11,8 +11,9 @@ import { tableTranslateWithId } from '../../../utils/componentUtilityFunctions';
 
 import ColumnHeaderRow from './ColumnHeaderRow/ColumnHeaderRow';
 import FilterHeaderRow from './FilterHeaderRow/FilterHeaderRow';
+import TableHeader from './TableHeader';
 
-const { TableHead: CarbonTableHead, TableRow, TableExpandHeader, TableHeader } = DataTable;
+const { TableHead: CarbonTableHead, TableRow, TableExpandHeader } = DataTable;
 
 const propTypes = {
   /** Important table options that the head needs to know about */
@@ -68,6 +69,7 @@ const propTypes = {
   /** lightweight  */
   lightweight: PropTypes.bool,
   i18n: I18NPropTypes,
+  hasResize: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -82,6 +84,7 @@ const defaultProps = {
   i18n: {
     ...defaultI18NPropTypes,
   },
+  hasResize: true,
 };
 
 const StyledCheckboxTableHeader = styled(TableHeader)`
@@ -147,9 +150,52 @@ const TableHead = ({
   closeMenuText,
   lightweight,
   i18n,
+  hasResize,
 }) => {
   const filterBarActive = activeBar === 'filter';
-
+  const [columnWidth, setColumnWidth] = useState({});
+  const columnRef = ordering.map(() => createRef());
+  const columnVar = {
+    index: 0,
+    element: Node,
+    startX: 0,
+  };
+  const mousemoveCallback = e => {
+    const leftColumn = columnRef[columnVar.index].current.getBoundingClientRect();
+    const rightColumn = columnRef[
+      columnVar.index
+    ].current.nextElementSibling.getBoundingClientRect();
+    const mousePosition = e.clientX + columnVar.startX;
+    if (mousePosition >= 50 && mousePosition <= leftColumn.width + rightColumn.width - 50) {
+      columnVar.element.style.left = `${mousePosition}px`;
+    } else {
+      document.onmousemove = null;
+    }
+  };
+  const mouseupCallback = () => {
+    document.onmouseup = null;
+    document.onmousemove = null;
+    const resizePosition = columnVar.element.offsetLeft + columnVar.element.clientWidth;
+    setColumnWidth(psd => ({
+      ...psd,
+      [columnVar.index]: resizePosition,
+      [columnVar.index + 1]:
+        columnWidth[columnVar.index + 1] + (columnWidth[columnVar.index] - resizePosition),
+    }));
+  };
+  const onMouseUpCallback = (e, index) => {
+    columnVar.element = e.target;
+    columnVar.index = index;
+    columnVar.startX = columnVar.element.offsetLeft - e.clientX;
+    document.onmouseup = mouseupCallback;
+    document.onmousemove = mousemoveCallback;
+  };
+  useEffect(() => {
+    const nextWidth = columnRef.map(ref =>
+      ref.current ? ref.current.getBoundingClientRect().width : undefined
+    );
+    setColumnWidth(nextWidth);
+  }, []);
   return (
     <StyledCarbonTableHead lightweight={`${lightweight}`}>
       <TableRow>
@@ -169,7 +215,7 @@ const TableHead = ({
           </StyledCheckboxTableHeader>
         ) : null}
 
-        {ordering.map(item => {
+        {ordering.map((item, i) => {
           const matchingColumnMeta = columns.find(column => column.id === item.columnId);
           const hasSort = matchingColumnMeta && sort && sort.columnId === matchingColumnMeta.id;
           const align =
@@ -181,7 +227,8 @@ const TableHead = ({
               data-column={matchingColumnMeta.id}
               isSortable={matchingColumnMeta.isSortable}
               isSortHeader={hasSort}
-              width={matchingColumnMeta.width}
+              ref={columnRef[i]}
+              style={{ width: columnWidth[i] }}
               onClick={() => {
                 if (matchingColumnMeta.isSortable && onChangeSort) {
                   onChangeSort(matchingColumnMeta.id);
@@ -195,6 +242,10 @@ const TableHead = ({
               })}
             >
               <TableCellRenderer>{matchingColumnMeta.name}</TableCellRenderer>
+              {hasResize && i < ordering.length - 1 ? (
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                <div className="column-resize-wrapper" onMouseDown={e => onMouseUpCallback(e, i)} />
+              ) : null}
             </StyledCustomTableHeader>
           ) : null;
         })}

src/components/Table/TableHead/TableHeader.js

@@ -0,0 +1,177 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { settings } from 'carbon-components';
+import {
+  ArrowUp20 as Arrow,
+  ArrowsVertical20 as Arrows,
+} from '@carbon/icons-react';
+
+import { sortStates } from './state/sorting';
+
+const { prefix } = settings;
+
+const translationKeys = {
+  iconDescription: 'carbon.table.header.icon.description',
+};
+
+const translateWithId = (key, { sortDirection, isSortHeader }) => {
+  if (key === translationKeys.iconDescription) {
+    if (isSortHeader) {
+      // When transitioning, we know that the sequence of states is as follows:
+      // NONE -> ASC -> DESC -> NONE
+      if (sortDirection === sortStates.NONE) {
+        return 'Sort rows by this header in ascending order';
+      }
+      if (sortDirection === sortStates.ASC) {
+        return 'Sort rows by this header in descending order';
+      }
+
+      return 'Unsort rows by this header';
+    }
+    return 'Sort rows by this header in ascending order';
+  }
+
+  return '';
+};
+
+const sortDirections = {
+  [sortStates.NONE]: 'none',
+  [sortStates.ASC]: 'ascending',
+  [sortStates.DESC]: 'descending',
+};
+
+const TableHeader = React.forwardRef(function TableHeader(
+  {
+    className: headerClassName,
+    children,
+    isSortable,
+    isSortHeader,
+    onClick,
+    scope,
+    sortDirection,
+    translateWithId: t,
+    ...rest
+  },
+  ref
+) {
+  if (!isSortable) {
+    return (
+      <th {...rest} className={headerClassName} scope={scope}   ref={ref}>
+        <span className={`${prefix}--table-header-label`}>{children}</span>
+      </th>
+    );
+  }
+
+  const className = cx(headerClassName, {
+    [`${prefix}--table-sort`]: true,
+    [`${prefix}--table-sort--active`]:
+      isSortHeader && sortDirection !== sortStates.NONE,
+    [`${prefix}--table-sort--ascending`]:
+      isSortHeader && sortDirection === sortStates.DESC,
+  });
+  const ariaSort = !isSortHeader ? 'none' : sortDirections[sortDirection];
+
+  return (
+    <th
+      scope={scope}
+      className={headerClassName}
+      aria-sort={ariaSort}
+      ref={ref} 
+      {...rest} >
+      <button className={className} onClick={onClick} >
+        <span className={`${prefix}--table-header-label`}>{children}</span>
+        <Arrow
+          className={`${prefix}--table-sort__icon`}
+          aria-label={t('carbon.table.header.icon.description', {
+            header: children,
+            sortDirection,
+            isSortHeader,
+            sortStates,
+          })}
+        />
+        <Arrows
+          className={`${prefix}--table-sort__icon-unsorted`}
+          aria-label={t('carbon.table.header.icon.description', {
+            header: children,
+            sortDirection,
+            isSortHeader,
+            sortStates,
+          })}
+        />
+      </button>
+    </th>
+  );
+});
+
+TableHeader.propTypes = {
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Pass in children that will be embedded in the table header label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify whether this header is one through which a user can sort the table
+   */
+  isSortable: PropTypes.bool,
+
+  /**
+   * Specify whether this header is the header by which a table is being sorted
+   * by
+   */
+  isSortHeader: PropTypes.bool,
+
+  /**
+   * Hook that is invoked when the header is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the scope of this table header. You can find more info about this
+   * attribute at the following URL:
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+   */
+  scope: PropTypes.string,
+
+  /**
+   * Specify which direction we are currently sorting by, should be one of DESC,
+   * NONE, or ASC.
+   */
+  sortDirection: PropTypes.oneOf(Object.values(sortStates)),
+
+  /**
+   * Supply a method to translate internal strings with your i18n tool of
+   * choice. Translation keys are avabile on the `translationKeys` field for
+   * this component.
+   */
+  translateWithId: PropTypes.func,
+};
+
+TableHeader.defaultProps = {
+  className:'',
+  children:'',
+  isSortHeader:false,
+  isSortable: false,
+  sortDirection:'',
+  onClick:'',
+  scope: 'col',
+  translateWithId,
+};
+
+TableHeader.translationKeys = Object.values(translationKeys);
+
+TableHeader.displayName = 'TableHeader';
+
+export default TableHeader;