carbon-addons-iot-react 2.154.0-next.2 → 2.154.0-next.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.154.0-next.3](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.2...v2.154.0-next.3) (2023-10-18)
+
+
+### Features
+
+* **table:** enable percentage-based column width for the table header ([#3831](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3831)) ([6dd5d97](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6dd5d97af83286a7d42a8f60d3ded51727c7c89e))
+
+
+
+
+
 # [2.154.0-next.2](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.154.0-next.1...v2.154.0-next.2) (2023-10-13)
 
 

package/es/components/Table/Table.js

@@ -688,7 +688,8 @@ var defaultProps = function defaultProps(baseProps) {
     error: null,
     // TODO: set default in v3. Leaving null for backwards compat. to match 'id' which was
     // previously used as testId.
-    testId: null
+    testId: null,
+    enablePercentageColumnWidth: false
   };
 };
 
@@ -698,6 +699,7 @@ var Table = function Table(props) {
   var _merge2 = merge({}, defaultProps(props), props),
       id = _merge2.id,
       columns = _merge2.columns,
+      enablePercentageColumnWidth = _merge2.enablePercentageColumnWidth,
       columnGroups = _merge2.columnGroups,
       data = _merge2.data,
       expandedData = _merge2.expandedData,
@@ -716,7 +718,7 @@ var Table = function Table(props) {
       testId = _merge2.testId,
       size = _merge2.size,
       zIndex = _merge2.zIndex,
-      others = _objectWithoutProperties(_merge2, ["id", "columns", "columnGroups", "data", "expandedData", "locale", "view", "actions", "actions", "options", "lightweight", "className", "style", "i18n", "secondaryTitle", "tooltip", "error", "testId", "size", "zIndex"]); // There is no way to access the current search value in the Table
+      others = _objectWithoutProperties(_merge2, ["id", "columns", "enablePercentageColumnWidth", "columnGroups", "data", "expandedData", "locale", "view", "actions", "actions", "options", "lightweight", "className", "style", "i18n", "secondaryTitle", "tooltip", "error", "testId", "size", "zIndex"]); // There is no way to access the current search value in the Table
   // so we need to track that for the save view functionality.
 
 
@@ -1034,6 +1036,7 @@ var Table = function Table(props) {
       truncateCellText: useCellTextTruncate
     }),
     columns: columns,
+    enablePercentageColumnWidth: enablePercentageColumnWidth,
     columnGroups: columnGroups,
     filters: view.filters,
     actions: _objectSpread(_objectSpread(_objectSpread({}, pick(actions.toolbar, 'onApplyFilter')), pick(actions.table, 'onSelectAll', 'onChangeSort', 'onChangeOrdering', 'onColumnSelectionConfig', 'onOverflowItemClicked', 'onFilterRowIconClick')), {}, {

package/es/components/Table/TableHead/TableHead.js

@@ -1,7 +1,7 @@
-import 'core-js/modules/es.object.keys.js';
 import 'core-js/modules/es.symbol.js';
 import 'core-js/modules/es.object.get-own-property-descriptor.js';
 import 'core-js/modules/es.object.get-own-property-descriptors.js';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import debounce from '../../../node_modules/lodash-es/debounce.js';
@@ -15,8 +15,10 @@ import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/es.object.entries.js';
 import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/es.array.find.js';
+import 'core-js/modules/es.array.slice.js';
 import 'core-js/modules/es.array.find-index.js';
 import 'core-js/modules/es.function.name.js';
 import React__default, { createRef, useState, useCallback, useLayoutEffect, useEffect } from 'react';
@@ -80,6 +82,7 @@ var propTypes = {
 
   /** List of columns */
   columns: TableColumnsPropTypes.isRequired,
+  enablePercentageColumnWidth: PropTypes.bool,
 
   /** Specify the properties of each column group in the table. Defaults to empty column. */
   columnGroups: TableColumnGroupPropType,
@@ -164,6 +167,7 @@ var defaultProps = {
   closeMenuText: 'Close menu',
   i18n: _objectSpread({}, defaultI18NPropTypes),
   hasFastFilter: true,
+  enablePercentageColumnWidth: false,
   testId: '',
   showExpanderColumn: false,
   size: undefined,
@@ -236,6 +240,7 @@ var TableHead = function TableHead(_ref) {
       hasFastFilter = _ref.hasFastFilter,
       showExpanderColumn = _ref.showExpanderColumn,
       size = _ref.size,
+      enablePercentageColumnWidth = _ref.enablePercentageColumnWidth,
       filterRowIcon = _ref.filterRowIcon,
       filterRowIconDescription = _ref.filterRowIconDescription;
   var filterBarActive = activeBar === 'filter';
@@ -248,6 +253,11 @@ var TableHead = function TableHead(_ref) {
       currentColumnWidths = _useState2[0],
       setCurrentColumnWidths = _useState2[1];
 
+  var _useState3 = useState(enablePercentageColumnWidth),
+      _useState4 = _slicedToArray(_useState3, 2),
+      percentageMode = _useState4[0],
+      setPercentageMode = _useState4[1];
+
   if (isEmpty(currentColumnWidths)) {
     columns.forEach(function (col) {
       initialColumnWidths[col.id] = col.width;
@@ -291,8 +301,28 @@ var TableHead = function TableHead(_ref) {
   };
 
   var onManualColumnResize = function onManualColumnResize(modifiedColumnWidths) {
-    var newColumnWidths = createNewWidthsMap(ordering, currentColumnWidths, modifiedColumnWidths);
-    updateColumnWidths(newColumnWidths);
+    if (percentageMode) {
+      var modifiedColumns = _toConsumableArray(columns);
+
+      Object.keys(modifiedColumns).forEach(function (key) {
+        if (modifiedColumns[key].hasOwnProperty('width')) {
+          delete modifiedColumns[key].width;
+        }
+      }); // while Resizing setting all column width to default DEFAULT_COLUMN_WIDTH 150px
+
+      var columnPropInlcudingWidths = addMissingColumnWidths({
+        ordering: ordering,
+        columns: modifiedColumns,
+        currentColumnWidths: {}
+      });
+      var newColumnWidths = createNewWidthsMap(ordering, columnPropInlcudingWidths);
+      setCurrentColumnWidths(newColumnWidths);
+      setPercentageMode(false);
+    } else {
+      var _newColumnWidths = createNewWidthsMap(ordering, currentColumnWidths, modifiedColumnWidths);
+
+      updateColumnWidths(_newColumnWidths);
+    }
   };
 
   var onColumnToggle = function onColumnToggle(columnId, newOrdering) {
@@ -309,14 +339,14 @@ var TableHead = function TableHead(_ref) {
           updateColumnWidths(newColumnWidths);
         }
       } else {
-        var _newColumnWidths = calculateWidthsOnToggle({
+        var _newColumnWidths2 = calculateWidthsOnToggle({
           currentColumnWidths: currentColumnWidths,
           newOrdering: newOrdering,
           columnId: columnId,
           columns: columns
         });
 
-        updateColumnWidths(_newColumnWidths);
+        updateColumnWidths(_newColumnWidths2);
       }
     }
 
@@ -369,7 +399,13 @@ var TableHead = function TableHead(_ref) {
     // if the widths of the column prop are externally updated or if columns are added/removed.
     var externallyModified = !isEqual(columns, previousColumns) || !isEqual(ordering, previousOrdering);
 
-    if (hasResize && columns.length && !isEmpty(currentColumnWidths) && externallyModified) {
+    if (hasResize && columns.length && !isEmpty(currentColumnWidths) && externallyModified && !percentageMode) {
+      /* eslint-disable no-param-reassign */
+      Object.keys(columns).forEach(function (key) {
+        if (columns[key].width && columns[key].width.includes('%')) {
+          delete columns[key].width;
+        }
+      });
       checkColumnWidthFormat(columns); // PRESERVE WIDTHS
       // Preserve column when possible widths when columns are externally modified
 
@@ -413,7 +449,53 @@ var TableHead = function TableHead(_ref) {
   // since it would be directly overridden by the column props. This effect can be removed
   // with issue https://github.com/IBM/carbon-addons-iot-react/issues/1224
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [hasResize, columns, ordering, previousColumns]);
+  [hasResize, columns, ordering, previousColumns, percentageMode]);
+  useEffect(function () {
+    var tableWidth;
+    var columnWidth;
+    var filteredColumns = columns.filter(function (colOrder) {
+      var hiddenCol = ordering.find(function (col) {
+        return col.columnId === colOrder.id;
+      });
+      return !hiddenCol || !hiddenCol.isHidden;
+    });
+    var hasOverflowMenu = filteredColumns.some(function (column) {
+      return column.overflowMenuItems && column.overflowMenuItems.length > 0;
+    });
+    var totalColumns = filteredColumns.length;
+
+    if (enablePercentageColumnWidth && filteredColumns.length && percentageMode && !hasOverflowMenu) {
+      if (hasRowSelection === 'multi' && !(hasRowExpansion || hasRowNesting)) {
+        tableWidth = "calc(100% - 54px)";
+        columnWidth = "calc(".concat(tableWidth, " / ").concat(totalColumns, ")");
+      } else if ((hasRowExpansion || hasRowNesting) && !(hasRowSelection === 'multi' || useRadioButtonSingleSelect && hasRowSelection === 'single')) {
+        tableWidth = "calc(100% - 40px)";
+        columnWidth = "calc(".concat(tableWidth, " / ").concat(totalColumns, ")");
+      } else if ((hasRowExpansion || hasRowNesting) && (hasRowSelection === 'multi' || useRadioButtonSingleSelect && hasRowSelection === 'single')) {
+        tableWidth = "calc(100% - 94px)";
+        columnWidth = "calc(".concat(tableWidth, " / ").concat(totalColumns, ")");
+      } else {
+        columnWidth = "".concat(parseInt(100 / filteredColumns.length, 10), "%");
+      }
+
+      var updatedColumns = filteredColumns.map(function (col) {
+        var updatedCol = _objectSpread({}, col);
+
+        updatedCol.width = columnWidth;
+        return updatedCol;
+      });
+      var columnPropIncludingWidths = addMissingColumnWidths({
+        ordering: ordering,
+        columns: updatedColumns,
+        currentColumnWidths: currentColumnWidths
+      });
+      var newColumnWidths = createNewWidthsMap(ordering, columnPropIncludingWidths);
+
+      if (!isEqual(currentColumnWidths, newColumnWidths)) {
+        setCurrentColumnWidths(newColumnWidths);
+      }
+    }
+  }, [columns, ordering, hasRowExpansion, hasRowNesting, hasRowSelection, useRadioButtonSingleSelect, currentColumnWidths, enablePercentageColumnWidth, percentageMode]);
   var visibleColumns = ordering.filter(function (col) {
     return !col.isHidden;
   });
@@ -882,6 +964,17 @@ TableHead.__docgenInfo = {
       "required": false,
       "description": "should we filter on each keypress"
     },
+    "enablePercentageColumnWidth": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
     "testId": {
       "defaultValue": {
         "value": "''",

package/es/components/Table/TableHead/columnWidthUtilityFunctions.js

@@ -8,10 +8,12 @@ import cloneDeep from '../../../node_modules/lodash-es/cloneDeep.js';
 import 'core-js/modules/es.array.find.js';
 import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.object.values.js';
 import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.object.values.js';
 import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.string.ends-with.js';
 import 'core-js/modules/es.number.is-nan.js';
@@ -51,7 +53,7 @@ function createWidthsMap(ordering, columnWidths, adjustedCols) {
       return col.id === orderedColumn.columnId;
     }) : columnWidths[orderedColumn.columnId];
     newColumnWidths[orderedColumn.columnId] = {
-      width: current && current.width !== undefined ? parseInt(current.width, 10) : undefined,
+      width: current !== null && current !== void 0 && current.width ? current.width.toString().includes('%') ? current.width : parseInt(current.width, 10) : undefined,
       id: orderedColumn.columnId
     };
   });

package/lib/components/Table/Table.js

@@ -705,7 +705,8 @@ var defaultProps = function defaultProps(baseProps) {
     error: null,
     // TODO: set default in v3. Leaving null for backwards compat. to match 'id' which was
     // previously used as testId.
-    testId: null
+    testId: null,
+    enablePercentageColumnWidth: false
   };
 };
 
@@ -715,6 +716,7 @@ var Table = function Table(props) {
   var _merge2 = merge({}, defaultProps(props), props),
       id = _merge2.id,
       columns = _merge2.columns,
+      enablePercentageColumnWidth = _merge2.enablePercentageColumnWidth,
       columnGroups = _merge2.columnGroups,
       data = _merge2.data,
       expandedData = _merge2.expandedData,
@@ -733,7 +735,7 @@ var Table = function Table(props) {
       testId = _merge2.testId,
       size = _merge2.size,
       zIndex = _merge2.zIndex,
-      others = _objectWithoutProperties__default['default'](_merge2, ["id", "columns", "columnGroups", "data", "expandedData", "locale", "view", "actions", "actions", "options", "lightweight", "className", "style", "i18n", "secondaryTitle", "tooltip", "error", "testId", "size", "zIndex"]); // There is no way to access the current search value in the Table
+      others = _objectWithoutProperties__default['default'](_merge2, ["id", "columns", "enablePercentageColumnWidth", "columnGroups", "data", "expandedData", "locale", "view", "actions", "actions", "options", "lightweight", "className", "style", "i18n", "secondaryTitle", "tooltip", "error", "testId", "size", "zIndex"]); // There is no way to access the current search value in the Table
   // so we need to track that for the save view functionality.
 
 
@@ -1051,6 +1053,7 @@ var Table = function Table(props) {
       truncateCellText: useCellTextTruncate
     }),
     columns: columns,
+    enablePercentageColumnWidth: enablePercentageColumnWidth,
     columnGroups: columnGroups,
     filters: view.filters,
     actions: _objectSpread(_objectSpread(_objectSpread({}, pick(actions.toolbar, 'onApplyFilter')), pick(actions.table, 'onSelectAll', 'onChangeSort', 'onChangeOrdering', 'onColumnSelectionConfig', 'onOverflowItemClicked', 'onFilterRowIconClick')), {}, {

package/lib/components/Table/TableHead/TableHead.js

@@ -1,9 +1,9 @@
 'use strict';
 
-require('core-js/modules/es.object.keys.js');
 require('core-js/modules/es.symbol.js');
 require('core-js/modules/es.object.get-own-property-descriptor.js');
 require('core-js/modules/es.object.get-own-property-descriptors.js');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var debounce = require('../../../node_modules/lodash-es/debounce.js');
@@ -17,8 +17,10 @@ require('core-js/modules/es.array.map.js');
 require('core-js/modules/web.dom-collections.for-each.js');
 require('core-js/modules/es.object.entries.js');
 require('core-js/modules/es.array.filter.js');
-require('core-js/modules/es.array.slice.js');
+require('core-js/modules/es.object.keys.js');
+require('core-js/modules/es.string.includes.js');
 require('core-js/modules/es.array.find.js');
+require('core-js/modules/es.array.slice.js');
 require('core-js/modules/es.array.find-index.js');
 require('core-js/modules/es.function.name.js');
 var React = require('react');
@@ -46,6 +48,7 @@ var ColumnGrouping = require('./ColumnGrouping/ColumnGrouping.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -91,6 +94,7 @@ var propTypes = {
 
   /** List of columns */
   columns: TablePropTypes.TableColumnsPropTypes.isRequired,
+  enablePercentageColumnWidth: PropTypes__default['default'].bool,
 
   /** Specify the properties of each column group in the table. Defaults to empty column. */
   columnGroups: TablePropTypes.TableColumnGroupPropType,
@@ -175,6 +179,7 @@ var defaultProps = {
   closeMenuText: 'Close menu',
   i18n: _objectSpread({}, TablePropTypes.defaultI18NPropTypes),
   hasFastFilter: true,
+  enablePercentageColumnWidth: false,
   testId: '',
   showExpanderColumn: false,
   size: undefined,
@@ -247,6 +252,7 @@ var TableHead = function TableHead(_ref) {
       hasFastFilter = _ref.hasFastFilter,
       showExpanderColumn = _ref.showExpanderColumn,
       size = _ref.size,
+      enablePercentageColumnWidth = _ref.enablePercentageColumnWidth,
       filterRowIcon = _ref.filterRowIcon,
       filterRowIconDescription = _ref.filterRowIconDescription;
   var filterBarActive = activeBar === 'filter';
@@ -259,6 +265,11 @@ var TableHead = function TableHead(_ref) {
       currentColumnWidths = _useState2[0],
       setCurrentColumnWidths = _useState2[1];
 
+  var _useState3 = React.useState(enablePercentageColumnWidth),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      percentageMode = _useState4[0],
+      setPercentageMode = _useState4[1];
+
   if (isEmpty(currentColumnWidths)) {
     columns.forEach(function (col) {
       initialColumnWidths[col.id] = col.width;
@@ -302,8 +313,28 @@ var TableHead = function TableHead(_ref) {
   };
 
   var onManualColumnResize = function onManualColumnResize(modifiedColumnWidths) {
-    var newColumnWidths = columnWidthUtilityFunctions.createNewWidthsMap(ordering, currentColumnWidths, modifiedColumnWidths);
-    updateColumnWidths(newColumnWidths);
+    if (percentageMode) {
+      var modifiedColumns = _toConsumableArray__default['default'](columns);
+
+      Object.keys(modifiedColumns).forEach(function (key) {
+        if (modifiedColumns[key].hasOwnProperty('width')) {
+          delete modifiedColumns[key].width;
+        }
+      }); // while Resizing setting all column width to default DEFAULT_COLUMN_WIDTH 150px
+
+      var columnPropInlcudingWidths = columnWidthUtilityFunctions.addMissingColumnWidths({
+        ordering: ordering,
+        columns: modifiedColumns,
+        currentColumnWidths: {}
+      });
+      var newColumnWidths = columnWidthUtilityFunctions.createNewWidthsMap(ordering, columnPropInlcudingWidths);
+      setCurrentColumnWidths(newColumnWidths);
+      setPercentageMode(false);
+    } else {
+      var _newColumnWidths = columnWidthUtilityFunctions.createNewWidthsMap(ordering, currentColumnWidths, modifiedColumnWidths);
+
+      updateColumnWidths(_newColumnWidths);
+    }
   };
 
   var onColumnToggle = function onColumnToggle(columnId, newOrdering) {
@@ -320,14 +351,14 @@ var TableHead = function TableHead(_ref) {
           updateColumnWidths(newColumnWidths);
         }
       } else {
-        var _newColumnWidths = columnWidthUtilityFunctions.calculateWidthsOnToggle({
+        var _newColumnWidths2 = columnWidthUtilityFunctions.calculateWidthsOnToggle({
           currentColumnWidths: currentColumnWidths,
           newOrdering: newOrdering,
           columnId: columnId,
           columns: columns
         });
 
-        updateColumnWidths(_newColumnWidths);
+        updateColumnWidths(_newColumnWidths2);
       }
     }
 
@@ -380,7 +411,13 @@ var TableHead = function TableHead(_ref) {
     // if the widths of the column prop are externally updated or if columns are added/removed.
     var externallyModified = !isEqual(columns, previousColumns) || !isEqual(ordering, previousOrdering);
 
-    if (hasResize && columns.length && !isEmpty(currentColumnWidths) && externallyModified) {
+    if (hasResize && columns.length && !isEmpty(currentColumnWidths) && externallyModified && !percentageMode) {
+      /* eslint-disable no-param-reassign */
+      Object.keys(columns).forEach(function (key) {
+        if (columns[key].width && columns[key].width.includes('%')) {
+          delete columns[key].width;
+        }
+      });
       columnWidthUtilityFunctions.checkColumnWidthFormat(columns); // PRESERVE WIDTHS
       // Preserve column when possible widths when columns are externally modified
 
@@ -424,7 +461,53 @@ var TableHead = function TableHead(_ref) {
   // since it would be directly overridden by the column props. This effect can be removed
   // with issue https://github.com/IBM/carbon-addons-iot-react/issues/1224
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [hasResize, columns, ordering, previousColumns]);
+  [hasResize, columns, ordering, previousColumns, percentageMode]);
+  React.useEffect(function () {
+    var tableWidth;
+    var columnWidth;
+    var filteredColumns = columns.filter(function (colOrder) {
+      var hiddenCol = ordering.find(function (col) {
+        return col.columnId === colOrder.id;
+      });
+      return !hiddenCol || !hiddenCol.isHidden;
+    });
+    var hasOverflowMenu = filteredColumns.some(function (column) {
+      return column.overflowMenuItems && column.overflowMenuItems.length > 0;
+    });
+    var totalColumns = filteredColumns.length;
+
+    if (enablePercentageColumnWidth && filteredColumns.length && percentageMode && !hasOverflowMenu) {
+      if (hasRowSelection === 'multi' && !(hasRowExpansion || hasRowNesting)) {
+        tableWidth = "calc(100% - 54px)";
+        columnWidth = "calc(".concat(tableWidth, " / ").concat(totalColumns, ")");
+      } else if ((hasRowExpansion || hasRowNesting) && !(hasRowSelection === 'multi' || useRadioButtonSingleSelect && hasRowSelection === 'single')) {
+        tableWidth = "calc(100% - 40px)";
+        columnWidth = "calc(".concat(tableWidth, " / ").concat(totalColumns, ")");
+      } else if ((hasRowExpansion || hasRowNesting) && (hasRowSelection === 'multi' || useRadioButtonSingleSelect && hasRowSelection === 'single')) {
+        tableWidth = "calc(100% - 94px)";
+        columnWidth = "calc(".concat(tableWidth, " / ").concat(totalColumns, ")");
+      } else {
+        columnWidth = "".concat(parseInt(100 / filteredColumns.length, 10), "%");
+      }
+
+      var updatedColumns = filteredColumns.map(function (col) {
+        var updatedCol = _objectSpread({}, col);
+
+        updatedCol.width = columnWidth;
+        return updatedCol;
+      });
+      var columnPropIncludingWidths = columnWidthUtilityFunctions.addMissingColumnWidths({
+        ordering: ordering,
+        columns: updatedColumns,
+        currentColumnWidths: currentColumnWidths
+      });
+      var newColumnWidths = columnWidthUtilityFunctions.createNewWidthsMap(ordering, columnPropIncludingWidths);
+
+      if (!isEqual(currentColumnWidths, newColumnWidths)) {
+        setCurrentColumnWidths(newColumnWidths);
+      }
+    }
+  }, [columns, ordering, hasRowExpansion, hasRowNesting, hasRowSelection, useRadioButtonSingleSelect, currentColumnWidths, enablePercentageColumnWidth, percentageMode]);
   var visibleColumns = ordering.filter(function (col) {
     return !col.isHidden;
   });
@@ -893,6 +976,17 @@ TableHead.__docgenInfo = {
       "required": false,
       "description": "should we filter on each keypress"
     },
+    "enablePercentageColumnWidth": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
     "testId": {
       "defaultValue": {
         "value": "''",

package/lib/components/Table/TableHead/columnWidthUtilityFunctions.js

@@ -12,10 +12,12 @@ var cloneDeep = require('../../../node_modules/lodash-es/cloneDeep.js');
 require('core-js/modules/es.array.find.js');
 require('core-js/modules/es.array.reduce.js');
 require('core-js/modules/web.dom-collections.for-each.js');
-require('core-js/modules/es.array.filter.js');
-require('core-js/modules/es.object.values.js');
 require('core-js/modules/es.array.includes.js');
 require('core-js/modules/es.string.includes.js');
+require('core-js/modules/es.object.to-string.js');
+require('core-js/modules/es.regexp.to-string.js');
+require('core-js/modules/es.array.filter.js');
+require('core-js/modules/es.object.values.js');
 require('core-js/modules/es.array.map.js');
 require('core-js/modules/es.string.ends-with.js');
 require('core-js/modules/es.number.is-nan.js');
@@ -61,7 +63,7 @@ function createWidthsMap(ordering, columnWidths, adjustedCols) {
       return col.id === orderedColumn.columnId;
     }) : columnWidths[orderedColumn.columnId];
     newColumnWidths[orderedColumn.columnId] = {
-      width: current && current.width !== undefined ? parseInt(current.width, 10) : undefined,
+      width: current !== null && current !== void 0 && current.width ? current.width.toString().includes('%') ? current.width : parseInt(current.width, 10) : undefined,
       id: orderedColumn.columnId
     };
   });

package/package.json

@@ -336,11 +336,11 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "2.154.0-next.2",
+  "version": "2.154.0-next.3",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2",
     "got": "11.8.5"
   },
-  "gitHead": "956af8cbb5c4e33cfafe0e44cf7e245825c74ac5"
+  "gitHead": "11d3d2c6ea05a1355e9a345ce1dd08343f5b993d"
 }

package/umd/carbon-addons-iot-react.js

@@ -35824,7 +35824,7 @@
 	      return col.id === orderedColumn.columnId;
 	    }) : columnWidths[orderedColumn.columnId];
 	    newColumnWidths[orderedColumn.columnId] = {
-	      width: current && current.width !== undefined ? parseInt(current.width, 10) : undefined,
+	      width: current !== null && current !== void 0 && current.width ? current.width.toString().includes('%') ? current.width : parseInt(current.width, 10) : undefined,
 	      id: orderedColumn.columnId
 	    };
 	  });
@@ -36809,6 +36809,7 @@
 
 	  /** List of columns */
 	  columns: TableColumnsPropTypes.isRequired,
+	  enablePercentageColumnWidth: PropTypes__default['default'].bool,
 
 	  /** Specify the properties of each column group in the table. Defaults to empty column. */
 	  columnGroups: TableColumnGroupPropType,
@@ -36893,6 +36894,7 @@
 	  closeMenuText: 'Close menu',
 	  i18n: _objectSpread$26({}, defaultI18NPropTypes),
 	  hasFastFilter: true,
+	  enablePercentageColumnWidth: false,
 	  testId: '',
 	  showExpanderColumn: false,
 	  size: undefined,
@@ -36965,6 +36967,7 @@
 	      hasFastFilter = _ref.hasFastFilter,
 	      showExpanderColumn = _ref.showExpanderColumn,
 	      size = _ref.size,
+	      enablePercentageColumnWidth = _ref.enablePercentageColumnWidth,
 	      filterRowIcon = _ref.filterRowIcon,
 	      filterRowIconDescription = _ref.filterRowIconDescription;
 	  var filterBarActive = activeBar === 'filter';
@@ -36977,6 +36980,11 @@
 	      currentColumnWidths = _useState2[0],
 	      setCurrentColumnWidths = _useState2[1];
 
+	  var _useState3 = React$1.useState(enablePercentageColumnWidth),
+	      _useState4 = slicedToArray$2(_useState3, 2),
+	      percentageMode = _useState4[0],
+	      setPercentageMode = _useState4[1];
+
 	  if (isEmpty(currentColumnWidths)) {
 	    columns.forEach(function (col) {
 	      initialColumnWidths[col.id] = col.width;
@@ -37020,8 +37028,28 @@
 	  };
 
 	  var onManualColumnResize = function onManualColumnResize(modifiedColumnWidths) {
-	    var newColumnWidths = createNewWidthsMap(ordering, currentColumnWidths, modifiedColumnWidths);
-	    updateColumnWidths(newColumnWidths);
+	    if (percentageMode) {
+	      var modifiedColumns = toConsumableArray(columns);
+
+	      Object.keys(modifiedColumns).forEach(function (key) {
+	        if (modifiedColumns[key].hasOwnProperty('width')) {
+	          delete modifiedColumns[key].width;
+	        }
+	      }); // while Resizing setting all column width to default DEFAULT_COLUMN_WIDTH 150px
+
+	      var columnPropInlcudingWidths = addMissingColumnWidths({
+	        ordering: ordering,
+	        columns: modifiedColumns,
+	        currentColumnWidths: {}
+	      });
+	      var newColumnWidths = createNewWidthsMap(ordering, columnPropInlcudingWidths);
+	      setCurrentColumnWidths(newColumnWidths);
+	      setPercentageMode(false);
+	    } else {
+	      var _newColumnWidths = createNewWidthsMap(ordering, currentColumnWidths, modifiedColumnWidths);
+
+	      updateColumnWidths(_newColumnWidths);
+	    }
 	  };
 
 	  var onColumnToggle = function onColumnToggle(columnId, newOrdering) {
@@ -37038,14 +37066,14 @@
 	          updateColumnWidths(newColumnWidths);
 	        }
 	      } else {
-	        var _newColumnWidths = calculateWidthsOnToggle({
+	        var _newColumnWidths2 = calculateWidthsOnToggle({
 	          currentColumnWidths: currentColumnWidths,
 	          newOrdering: newOrdering,
 	          columnId: columnId,
 	          columns: columns
 	        });
 
-	        updateColumnWidths(_newColumnWidths);
+	        updateColumnWidths(_newColumnWidths2);
 	      }
 	    }
 
@@ -37098,7 +37126,13 @@
 	    // if the widths of the column prop are externally updated or if columns are added/removed.
 	    var externallyModified = !isEqual$1(columns, previousColumns) || !isEqual$1(ordering, previousOrdering);
 
-	    if (hasResize && columns.length && !isEmpty(currentColumnWidths) && externallyModified) {
+	    if (hasResize && columns.length && !isEmpty(currentColumnWidths) && externallyModified && !percentageMode) {
+	      /* eslint-disable no-param-reassign */
+	      Object.keys(columns).forEach(function (key) {
+	        if (columns[key].width && columns[key].width.includes('%')) {
+	          delete columns[key].width;
+	        }
+	      });
 	      checkColumnWidthFormat(columns); // PRESERVE WIDTHS
 	      // Preserve column when possible widths when columns are externally modified
 
@@ -37142,7 +37176,53 @@
 	  // since it would be directly overridden by the column props. This effect can be removed
 	  // with issue https://github.com/IBM/carbon-addons-iot-react/issues/1224
 	  // eslint-disable-next-line react-hooks/exhaustive-deps
-	  [hasResize, columns, ordering, previousColumns]);
+	  [hasResize, columns, ordering, previousColumns, percentageMode]);
+	  React$1.useEffect(function () {
+	    var tableWidth;
+	    var columnWidth;
+	    var filteredColumns = columns.filter(function (colOrder) {
+	      var hiddenCol = ordering.find(function (col) {
+	        return col.columnId === colOrder.id;
+	      });
+	      return !hiddenCol || !hiddenCol.isHidden;
+	    });
+	    var hasOverflowMenu = filteredColumns.some(function (column) {
+	      return column.overflowMenuItems && column.overflowMenuItems.length > 0;
+	    });
+	    var totalColumns = filteredColumns.length;
+
+	    if (enablePercentageColumnWidth && filteredColumns.length && percentageMode && !hasOverflowMenu) {
+	      if (hasRowSelection === 'multi' && !(hasRowExpansion || hasRowNesting)) {
+	        tableWidth = "calc(100% - 54px)";
+	        columnWidth = "calc(".concat(tableWidth, " / ").concat(totalColumns, ")");
+	      } else if ((hasRowExpansion || hasRowNesting) && !(hasRowSelection === 'multi' || useRadioButtonSingleSelect && hasRowSelection === 'single')) {
+	        tableWidth = "calc(100% - 40px)";
+	        columnWidth = "calc(".concat(tableWidth, " / ").concat(totalColumns, ")");
+	      } else if ((hasRowExpansion || hasRowNesting) && (hasRowSelection === 'multi' || useRadioButtonSingleSelect && hasRowSelection === 'single')) {
+	        tableWidth = "calc(100% - 94px)";
+	        columnWidth = "calc(".concat(tableWidth, " / ").concat(totalColumns, ")");
+	      } else {
+	        columnWidth = "".concat(parseInt(100 / filteredColumns.length, 10), "%");
+	      }
+
+	      var updatedColumns = filteredColumns.map(function (col) {
+	        var updatedCol = _objectSpread$26({}, col);
+
+	        updatedCol.width = columnWidth;
+	        return updatedCol;
+	      });
+	      var columnPropIncludingWidths = addMissingColumnWidths({
+	        ordering: ordering,
+	        columns: updatedColumns,
+	        currentColumnWidths: currentColumnWidths
+	      });
+	      var newColumnWidths = createNewWidthsMap(ordering, columnPropIncludingWidths);
+
+	      if (!isEqual$1(currentColumnWidths, newColumnWidths)) {
+	        setCurrentColumnWidths(newColumnWidths);
+	      }
+	    }
+	  }, [columns, ordering, hasRowExpansion, hasRowNesting, hasRowSelection, useRadioButtonSingleSelect, currentColumnWidths, enablePercentageColumnWidth, percentageMode]);
 	  var visibleColumns = ordering.filter(function (col) {
 	    return !col.isHidden;
 	  });
@@ -37611,6 +37691,17 @@
 	      "required": false,
 	      "description": "should we filter on each keypress"
 	    },
+	    "enablePercentageColumnWidth": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": ""
+	    },
 	    "testId": {
 	      "defaultValue": {
 	        "value": "''",
@@ -48573,7 +48664,8 @@
 	    error: null,
 	    // TODO: set default in v3. Leaving null for backwards compat. to match 'id' which was
 	    // previously used as testId.
-	    testId: null
+	    testId: null,
+	    enablePercentageColumnWidth: false
 	  };
 	};
 
@@ -48583,6 +48675,7 @@
 	  var _merge2 = merge$1({}, defaultProps$29(props), props),
 	      id = _merge2.id,
 	      columns = _merge2.columns,
+	      enablePercentageColumnWidth = _merge2.enablePercentageColumnWidth,
 	      columnGroups = _merge2.columnGroups,
 	      data = _merge2.data,
 	      expandedData = _merge2.expandedData,
@@ -48601,7 +48694,7 @@
 	      testId = _merge2.testId,
 	      size = _merge2.size,
 	      zIndex = _merge2.zIndex,
-	      others = objectWithoutProperties$1(_merge2, ["id", "columns", "columnGroups", "data", "expandedData", "locale", "view", "actions", "actions", "options", "lightweight", "className", "style", "i18n", "secondaryTitle", "tooltip", "error", "testId", "size", "zIndex"]); // There is no way to access the current search value in the Table
+	      others = objectWithoutProperties$1(_merge2, ["id", "columns", "enablePercentageColumnWidth", "columnGroups", "data", "expandedData", "locale", "view", "actions", "actions", "options", "lightweight", "className", "style", "i18n", "secondaryTitle", "tooltip", "error", "testId", "size", "zIndex"]); // There is no way to access the current search value in the Table
 	  // so we need to track that for the save view functionality.
 
 
@@ -48919,6 +49012,7 @@
 	      truncateCellText: useCellTextTruncate
 	    }),
 	    columns: columns,
+	    enablePercentageColumnWidth: enablePercentageColumnWidth,
 	    columnGroups: columnGroups,
 	    filters: view.filters,
 	    actions: _objectSpread$1Y(_objectSpread$1Y(_objectSpread$1Y({}, pick(actions.toolbar, 'onApplyFilter')), pick(actions.table, 'onSelectAll', 'onChangeSort', 'onChangeOrdering', 'onColumnSelectionConfig', 'onOverflowItemClicked', 'onFilterRowIconClick')), {}, {