@carbon/ibm-products 2.43.2-canary.7 → 2.43.2-canary.70

package/lib/components/DataSpreadsheet/DataSpreadsheet.d.ts

@@ -20,6 +20,10 @@ interface DataSpreadsheetProps {
      * The data that will build the column headers
      */
     columns?: readonly Column<object>[];
+    /**
+     * Disable column swapping, default false
+     */
+    disableColumnSwapping?: boolean;
     /**
      * The spreadsheet data that will be rendered in the body of the spreadsheet component
      */
@@ -28,6 +32,10 @@ interface DataSpreadsheetProps {
      * Sets the number of empty rows to be created when there is no data provided
      */
     defaultEmptyRowCount?: number;
+    /**
+     * Check if has custom row header component attached
+     */
+    hasCustomRowHeader?: boolean;
     /**
      * The spreadsheet id
      */
@@ -46,6 +54,18 @@ interface DataSpreadsheetProps {
      * The event handler that is called when the selection area values change
      */
     onSelectionAreaChange?: () => void;
+    /**
+     * Read-only table
+     */
+    readOnlyTable?: boolean;
+    /**
+     * Position of the custom row numbering component
+     */
+    renderRowHeaderDirection?: 'left' | 'right';
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeader?: (index: number) => any[];
     /**
      * The aria label applied to the Select all button
      */

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -41,7 +41,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet';
@@ -76,6 +76,12 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
     _ref$onSelectionAreaC = _ref.onSelectionAreaChange,
     onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
+    renderRowHeader = _ref.renderRowHeader,
+    renderRowHeaderDirection = _ref.renderRowHeaderDirection,
+    _ref$disableColumnSwa = _ref.disableColumnSwapping,
+    disableColumnSwapping = _ref$disableColumnSwa === void 0 ? false : _ref$disableColumnSwa,
+    _ref$readOnlyTable = _ref.readOnlyTable,
+    readOnlyTable = _ref$readOnlyTable === void 0 ? false : _ref$readOnlyTable,
     selectAllAriaLabel = _ref.selectAllAriaLabel,
     spreadsheetAriaLabel = _ref.spreadsheetAriaLabel,
     theme = _ref.theme,
@@ -147,13 +153,15 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     setActiveCellContent = _useState26[1];
   var activeCellRef = React.useRef();
   var cellEditorRulerRef = React.useRef();
+  var hasCustomRowHeader = typeof renderRowHeader === 'function';
+  var maxNumRowsCount = data.length.toString().length;
   var defaultColumn = React.useMemo(function () {
     return {
       width: 150,
-      rowHeaderWidth: 64,
+      rowHeaderWidth: hasCustomRowHeader ? 40 + maxNumRowsCount * 8.56 : 64,
       rowHeight: cellSizeValue
     };
-  }, [cellSizeValue]);
+  }, [cellSizeValue, hasCustomRowHeader, maxNumRowsCount]);
   var _useMultipleKeyTracki = useMultipleKeyTracking.useMultipleKeyTracking({
       ref: multiKeyTrackingRef,
       containerHasFocus: containerHasFocus,
@@ -220,9 +228,12 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     }
     if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) {
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
-        var _activeCellFullData$r;
         var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
-        setActiveCellContent((_activeCellFullData$r = activeCellFullData === null || activeCellFullData === void 0 ? void 0 : activeCellFullData.render('Cell')) !== null && _activeCellFullData$r !== void 0 ? _activeCellFullData$r : null);
+        if (activeCellFullData) {
+          setActiveCellContent(activeCellFullData.render('Cell'));
+        } else {
+          setActiveCellContent(null);
+        }
       }
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
         setActiveCellContent(null);
@@ -429,16 +440,16 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     }
   }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
   var handleKeyPressEvent = React.useCallback(function (event) {
-    commonEventHandlers.handleKeyPress(event, activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, setSelectionAreas, setSelectionAreaData, setCurrentMatcher, activeCellRef, setActiveCellCoordinates, setContainerHasFocus, setActiveCellContent);
-  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress]);
+    commonEventHandlers.handleKeyPress(event, activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, setSelectionAreas, setSelectionAreaData, setCurrentMatcher, activeCellRef, setActiveCellCoordinates, setContainerHasFocus, setActiveCellContent, readOnlyTable);
+  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, readOnlyTable]);
   var startEditMode = function startEditMode() {
     setIsEditing(true);
     setClickAndHoldActive(false);
     var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
     var activeCellValue;
     if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
-      var _activeCellFullData$r2;
-      activeCellValue = activeCellFullData ? (_activeCellFullData$r2 = activeCellFullData.row.cells) === null || _activeCellFullData$r2 === void 0 || (_activeCellFullData$r2 = _activeCellFullData$r2[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r2 === void 0 ? void 0 : _activeCellFullData$r2.value : null;
+      var _activeCellFullData$r;
+      activeCellValue = activeCellFullData ? (_activeCellFullData$r = activeCellFullData.row.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value : null;
     }
     setCellEditorValue(activeCellValue || '');
     if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
@@ -501,7 +512,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   // Go into edit mode if 'Enter' key is pressed on activeCellRef
   var handleActiveCellKeyDown = function handleActiveCellKeyDown(event) {
     var key = event.key;
-    if (key === 'Enter' && !activeCellInsideSelectionArea) {
+    if (key === 'Enter' && !activeCellInsideSelectionArea && !readOnlyTable) {
       if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header') {
         startEditMode();
       }
@@ -557,8 +568,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   };
 
   // Go into edit mode if double click is detected on activeCellRef
-  var handleActiveCellDoubleClick = function handleActiveCellDoubleClick() {
-    startEditMode();
+  var handleActiveCellDoubleClick = function handleActiveCellDoubleClick(readOnlyTable) {
+    if (!readOnlyTable) {
+      startEditMode();
+    }
   };
   useSpreadsheetEdit.useSpreadsheetEdit({
     isEditing: isEditing,
@@ -638,6 +651,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     setSelectionAreas: setSelectionAreas,
     setCurrentMatcher: setCurrentMatcher,
     setSelectionAreaData: setSelectionAreaData,
+    disableColumnSwapping: disableColumnSwapping,
+    readOnlyTable: readOnlyTable,
     totalVisibleColumns: totalVisibleColumns,
     updateActiveCellCoordinates: updateActiveCellCoordinates,
     setHeaderCellHoldActive: setHeaderCellHoldActive,
@@ -660,7 +675,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     headerGroups: headerGroups,
     defaultColumn: defaultColumn,
     getTableBodyProps: getTableBodyProps,
+    hasCustomRowHeader: hasCustomRowHeader,
     onDataUpdate: onDataUpdate,
+    renderRowHeaderDirection: renderRowHeaderDirection,
+    renderRowHeader: renderRowHeader,
     onActiveCellChange: onActiveCellChange,
     onSelectionAreaChange: onSelectionAreaChange,
     prepareRow: prepareRow,
@@ -683,7 +701,9 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     onMouseUp: handleActiveCellMouseUp,
     onClick: handleActiveCellClick,
     onKeyDown: handleActiveCellKeyDown,
-    onDoubleClick: handleActiveCellDoubleClick,
+    onDoubleClick: function onDoubleClick() {
+      return handleActiveCellDoubleClick(readOnlyTable);
+    },
     onMouseEnter: handleActiveCellMouseEnter,
     ref: activeCellRef,
     className: cx__default["default"]("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
@@ -705,9 +725,11 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       updateData: updateData
     }),
     onChange: function onChange(event) {
-      setCellEditorValue(event.target.value);
-      if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
-        cellEditorRulerRef.current.textContent = event.target.value;
+      if (previousState.isEditing) {
+        setCellEditorValue(event.target.value);
+        if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+          cellEditorRulerRef.current.textContent = event.target.value;
+        }
       }
     },
     ref: cellEditorRef,
@@ -757,6 +779,14 @@ exports.DataSpreadsheet.propTypes = {
    * Sets the number of empty rows to be created when there is no data provided
    */
   defaultEmptyRowCount: index["default"].number,
+  /**
+   * Disable column swapping, default false
+   */
+  disableColumnSwapping: index["default"].bool,
+  /**
+   * Check if spreadsheet is using custom row header component attached
+   */
+  hasCustomRowHeader: index["default"].bool,
   /**
    * The spreadsheet id
    */
@@ -773,6 +803,18 @@ exports.DataSpreadsheet.propTypes = {
    * The event handler that is called when the selection area values change
    */
   onSelectionAreaChange: index["default"].func,
+  /**
+   * Read-only table
+   */
+  readOnlyTable: index["default"].bool,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeader: index["default"].func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeaderDirection: index["default"].oneOf(['left', 'right']),
   /**
    * The aria label applied to the Select all button
    */

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts

@@ -52,6 +52,18 @@ interface DataSpreadsheetBodyProps {
      * The event handler that is called when the active cell changes
      */
     onActiveCellChange?: () => void;
+    /**
+     * Check if user is using custom component
+     */
+    hasCustomRowHeader?: boolean;
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeader?: (index: number) => any[];
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeaderDirection?: string;
     /**
      * The event handler that is called to set the rows for the empty spreadsheet
      */

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -44,6 +44,9 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     headerGroups = _ref.headerGroups,
     id = _ref.id,
     onDataUpdate = _ref.onDataUpdate,
+    renderRowHeader = _ref.renderRowHeader,
+    renderRowHeaderDirection = _ref.renderRowHeaderDirection,
+    hasCustomRowHeader = _ref.hasCustomRowHeader,
     prepareRow = _ref.prepareRow,
     rows = _ref.rows,
     selectionAreaData = _ref.selectionAreaData,
@@ -147,7 +150,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return;
       });
     }
-  }, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea, visibleColumns]);
+  }, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea, visibleColumns, hasCustomRowHeader]);
   var populateSelectionAreaCellData = function populateSelectionAreaCellData(_ref2) {
     var rowStart = _ref2.rowStart,
       rowEnd = _ref2.rowEnd,
@@ -221,7 +224,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         });
       }
     }
-  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]);
+  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns, hasCustomRowHeader]);
 
   //this method will check for any duplicate selection area and remove.
   //same selections are those have the same height, width, top, left styles. These inline styles are being set in createCellSelection util.
@@ -347,11 +350,12 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         "data-column-index": "header",
         type: "button",
         onClick: handleRowHeaderClickEvent(index),
-        className: cx__default["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
+        className: cx__default["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__td_custom"), hasCustomRowHeader ? true : false), "".concat(blockClass, "__td-th--active-header"), !hasCustomRowHeader && ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'row'))), "".concat(blockClass, "__td-th--selected-header"), !hasCustomRowHeader && checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
         style: {
-          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
+          flexDirection: hasCustomRowHeader ? renderRowHeaderDirection === 'Left' ? 'row-reverse' : row : undefined
         }
-      }, index + 1)), row.cells.map(function (cell, index) {
+      }, index + 1, hasCustomRowHeader && typeof renderRowHeader === 'function' && renderRowHeader(index))), row.cells.map(function (cell, index) {
         var _cell$column;
         var cellProps = propsHelper.prepareProps(cell.getCellProps(), 'key');
         return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
@@ -376,7 +380,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
+  }, [prepareRow, renderRowHeader, renderRowHeaderDirection, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
   var spreadsheetBodyRef = React.useRef();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: spreadsheetBodyRef,
@@ -442,6 +446,10 @@ DataSpreadsheetBody.propTypes = {
    */
   /**@ts-ignore */
   getTableBodyProps: index["default"].func,
+  /**
+   * Check if spreadsheet is using custom row header component attached
+   */
+  hasCustomRowHeader: index["default"].bool,
   /**
    * Headers provided from useTable hook
    */
@@ -466,6 +474,14 @@ DataSpreadsheetBody.propTypes = {
    * Prepare row function from react-table
    */
   prepareRow: index["default"].func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeader: index["default"].func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeaderDirection: index["default"].string,
   /**
    * All of the spreadsheet row data
    */

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts

@@ -16,6 +16,10 @@ interface DataSpreadsheetHeaderProps {
      * Specifies the cell height
      */
     cellSize?: Size;
+    /**
+     * Disable column swapping, default false
+     */
+    disableColumnSwapping?: boolean;
     /**
      * All of the spreadsheet columns
      */
@@ -36,6 +40,10 @@ interface DataSpreadsheetHeaderProps {
      * Headers provided from useTable hook
      */
     headerGroups?: any[];
+    /**
+     * Read-only table
+     */
+    readOnlyTable?: boolean;
     /**
      * All of the spreadsheet row data
      */

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -45,6 +45,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setActiveCellCoordinates = _ref.setActiveCellCoordinates,
     setCurrentMatcher = _ref.setCurrentMatcher,
     setSelectionAreas = _ref.setSelectionAreas,
+    readOnlyTable = _ref.readOnlyTable,
+    disableColumnSwapping = _ref.disableColumnSwapping,
     setSelectionAreaData = _ref.setSelectionAreaData,
     rows = _ref.rows,
     totalVisibleColumns = _ref.totalVisibleColumns,
@@ -184,6 +186,9 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       "data-row-index": "header",
       "data-column-index": "header",
       type: "button",
+      style: {
+        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+      },
       tabIndex: -1,
       "aria-label": selectAllAriaLabel,
       onClick: handleSelectAllClick,
@@ -200,8 +205,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         "data-row-index": "header",
         "data-column-index": index,
         tabIndex: -1,
-        onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : undefined,
-        onMouseUp: selectedHeader && typeof setSelectedHeaderReorderActive === 'function' ? function () {
+        onMouseDown: selectedHeader && !readOnlyTable && !disableColumnSwapping ? handleHeaderMouseDown(index) : undefined,
+        onMouseUp: selectedHeader && !readOnlyTable && !disableColumnSwapping && typeof setSelectedHeaderReorderActive === 'function' ? function () {
           return setSelectedHeaderReorderActive(false);
         } : undefined,
         onClick: !selectedHeader ? handleColumnHeaderClick(index) : undefined,
@@ -209,7 +214,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
           width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
         },
-        className: cx__default["default"]("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
+        className: cx__default["default"]("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--active-header-disabledSwapping"), disableColumnSwapping || readOnlyTable), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
         type: "button"
       }, column.render('Header')));
     }));
@@ -245,6 +250,10 @@ DataSpreadsheetHeader.propTypes = {
     rowHeaderWidth: index["default"].number,
     width: index["default"].number
   }),
+  /**
+   * Disable column swapping, default false
+   */
+  disableColumnSwapping: index["default"].bool,
   /**
    * Whether or not a click/hold is active on a header cell
    */
@@ -253,6 +262,10 @@ DataSpreadsheetHeader.propTypes = {
    * Headers provided from useTable hook
    */
   headerGroups: index["default"].arrayOf(index["default"].object),
+  /**
+   * Read-only table
+   */
+  readOnlyTable: index["default"].bool,
   /**
    * All of the spreadsheet row data
    */

package/lib/components/DataSpreadsheet/hooks/useSpreadsheetMouseMove.js

@@ -44,9 +44,12 @@ var useSpreadsheetMouseMove = function useSpreadsheetMouseMove(_ref) {
       var totalSpreadsheetScrollingWidth = listContainer.scrollWidth;
       var clonedSelectionWidth = clonedSelectionElement.offsetWidth;
       var clonePlacement = Math.max(xPositionRelativeToSpreadsheet - offsetXValue, defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth);
+      var leftPosition = totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth;
       // Moves the position of the cloned selection area to follow mouse, and
       // add the amount horizontally scrolled
-      clonedSelectionElement.style.left = layout.px(totalSpreadsheetScrollingWidth - clonedSelectionWidth >= clonePlacement ? clonePlacement + scrollAmount : totalSpreadsheetScrollingWidth - clonedSelectionWidth);
+      if (leftPosition < spreadsheetCoords.right - 40) {
+        clonedSelectionElement.style.left = layout.px(leftPosition);
+      }
     };
     if (headerCellHoldActive) {
       ref.current.addEventListener('mousemove', handleMouseMove);

package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js

@@ -26,11 +26,43 @@ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
   var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
   var matcherId = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-matcher-id');
   var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
+  var listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
+  var scrollSpeed = 10; // Scrolling speed
+  var leftEdgeThreshold = 120; // Distance from the left edge to start scrolling
+  var rightEdgeThreshold = 100; // Distance from the right edge to start scrolling
+
+  var _event = event,
+    clientX = _event.clientX;
+  var _listContainer$getBou = listContainer.getBoundingClientRect(),
+    left = _listContainer$getBou.left,
+    right = _listContainer$getBou.right;
+
+  // Is near left side of viewport
+  if (clientX < leftEdgeThreshold) {
+    window.scrollBy(-scrollSpeed, 0);
+  }
+
+  // Is near right side of viewport
+  if (clientX > window.innerWidth - rightEdgeThreshold) {
+    window.scrollBy(scrollSpeed, 0);
+  }
+
+  // Is near left edge of table
+  if (clientX > left && clientX < left + leftEdgeThreshold) {
+    listContainer.scrollBy(-scrollSpeed, 0);
+  }
+
+  // Is near right edge of table
+  if (clientX < right && clientX > right - rightEdgeThreshold) {
+    listContainer.scrollBy(scrollSpeed, 0);
+  }
   if (Number(newColumnIndex) > Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = layout.px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
+    var leftPosition = closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount;
+    indicatorLineElement.style.left = layout.px(leftPosition);
   }
   if (Number(newColumnIndex) < Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = layout.px(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
+    var _leftPosition = closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount;
+    indicatorLineElement.style.left = layout.px(_leftPosition);
   }
   if (Number(newColumnIndex) === Number(originalColumnIndex)) {
     indicatorLineElement.style.left = selectionAreaOrigin.style.left;

package/lib/components/Datagrid/Datagrid/Datagrid.d.ts

@@ -16,10 +16,6 @@ export interface DatagridProps {
      * The data grid state, much of it being supplied by the useDatagrid hook
      */
     datagridState: DataGridState;
-    /**
-     * Table title
-     */
-    title?: string;
 }
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.

package/lib/components/Datagrid/Datagrid/Datagrid.js

@@ -25,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["datagridState", "title", "ariaToolbarLabel"];
+var _excluded = ["datagridState", "ariaToolbarLabel"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 /**
@@ -33,7 +33,6 @@ var componentName = 'Datagrid';
  */
 exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
-    title = _ref.title,
     ariaToolbarLabel = _ref.ariaToolbarLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   if (!datagridState) {
@@ -49,13 +48,13 @@ exports.Datagrid = /*#__PURE__*/React__default["default"].forwardRef(function (_
     state = datagridState.state;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var props = {
-    title: title,
     datagridState: datagridState,
     ariaToolbarLabel: ariaToolbarLabel
   };
   return /*#__PURE__*/React__default["default"].createElement(FilterProvider.FilterProvider, {
     filters: state === null || state === void 0 ? void 0 : state.filters,
-    filterProps: filterProps
+    filterProps: filterProps,
+    tableId: tableId
   }, /*#__PURE__*/React__default["default"].createElement(InlineEditContext.InlineEditProvider, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     id: tableId,
     ref: ref,
@@ -81,9 +80,5 @@ exports.Datagrid.propTypes = {
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
   /**@ts-ignore */
-  datagridState: index["default"].object.isRequired,
-  /**
-   * Table title
-   */
-  title: index["default"].string
+  datagridState: index["default"].object.isRequired
 };

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -167,7 +167,7 @@ var DatagridContent = function DatagridContent(_ref) {
       className: "".concat(blockClass, "__filter-summary"),
       filters: filterTags,
       clearFilters: function clearFilters() {
-        return EventEmitter.dispatch(constants.CLEAR_FILTERS);
+        return EventEmitter.dispatch(constants.CLEAR_FILTERS, tableId);
       },
       renderLabel: filterProps === null || filterProps === void 0 ? void 0 : filterProps.renderLabel,
       overflowType: "tag"

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -32,10 +32,8 @@ var _excluded = ["className"],
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
-  var title = getNodeTextContent.getNodeTextContent(header.Header);
-  if (title) {
-    props.title = title;
-  } else {
+  var content = getNodeTextContent.getNodeTextContent(header.Header);
+  if (!content) {
     props['aria-hidden'] = true;
   }
   return props;
@@ -91,6 +89,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
     "aria-label": resizerAriaLabel || 'Resize column',
     disabled: isFetching
   })), /*#__PURE__*/React__default["default"].createElement("span", {
+    role: "separator",
     className: "".concat(blockClass, "__col-resize-indicator")
   }));
 };
@@ -99,7 +98,8 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var resizerAriaLabel = datagridState.resizerAriaLabel,
     isTableSortable = datagridState.isTableSortable,
     rows = datagridState.rows,
-    isFetching = datagridState.isFetching;
+    isFetching = datagridState.isFetching,
+    headers = datagridState.headers;
   useInitialColumnSort.useInitialColumnSort(datagridState);
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
@@ -144,7 +144,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     }
     onMouseDown === null || onMouseDown === void 0 || onMouseDown(event);
   };
-  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
+  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps({
+      role: undefined
+    }),
     headerGroupClassName = _headerGroup$getHeade.className,
     headerGroupProps = _rollupPluginBabelHelpers.objectWithoutProperties(_headerGroup$getHeade, _excluded);
   var renderSlug = function renderSlug(slug) {
@@ -161,6 +163,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   });
   var key = headerGroupProps.key,
     rowProps = _rollupPluginBabelHelpers.objectWithoutProperties(headerGroupProps, _excluded2);
+  var withActionsColumn = headers ? !!headers.filter(function (header) {
+    return header.isAction;
+  }).length : false;
   return /*#__PURE__*/React__default["default"].createElement(react.TableRow, _rollupPluginBabelHelpers["extends"]({
     key: key
   }, rowProps, {
@@ -190,9 +195,19 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var _ref5 = columnResizing || {},
       columnWidths = _ref5.columnWidths;
     var originalCol = visibleColumns[index];
-    var _header$getHeaderProp = header.getHeaderProps(),
+    var _header$getHeaderProp = header.getHeaderProps({
+        role: undefined
+      }),
       headerProps = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_header$getHeaderProp), _header$getHeaderProp));
-    var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
+    var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header, {
+      role: undefined
+    });
+    var headerStyle = headerProps === null || headerProps === void 0 ? void 0 : headerProps.style;
+    var lastVisibleIndex = withActionsColumn ? 2 : 1;
+    var lastVisibleFlexStyle = index === visibleColumns.length - lastVisibleIndex ? '1 1 0' : '0 0 auto';
+    if (headerStyle) {
+      headerStyle.flex = lastVisibleFlexStyle;
+    }
     return /*#__PURE__*/React__default["default"].createElement(react.TableHeader, _rollupPluginBabelHelpers["extends"]({}, headerProps, {
       className: cx__default["default"](header === null || header === void 0 ? void 0 : header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header === null || header === void 0 ? void 0 : header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header === null || header === void 0 ? void 0 : header.isSorted), "".concat(blockClass, "__header-actions-column"), header === null || header === void 0 ? void 0 : header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header === null || header === void 0 ? void 0 : header.slug)), headerProps.className),
       key: header.id,