qbs-react-grid 2.2.9 → 2.2.12

package/es/qbsTable/QbsTable.js

@@ -122,11 +122,16 @@ var QbsTable = function QbsTable(_ref) {
     setRowViewToggle = _ref.setRowViewToggle,
     _ref$isFullScreen = _ref.isFullScreen,
     isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
-    rowHeight = _ref.rowHeight;
+    rowHeight = _ref.rowHeight,
+    _ref$showHeader = _ref.showHeader,
+    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader;
   var labels = useMemo(function () {
     return mergeQbsTableLabels(labelsProp);
   }, [labelsProp]);
-  var pinSide = rtl ? 'left' : 'right';
+  var effectiveWordWrap = useMemo(function () {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? false : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -149,6 +154,16 @@ var QbsTable = function QbsTable(_ref) {
     setTableViewToggle = _useState5[1];
   var isMobile = useResponsiveStore();
   var tableBodyRef = useRef(null);
+  var _useState6 = useState(0),
+    rowViewRefreshKey = _useState6[0],
+    setRowViewRefreshKey = _useState6[1];
+  useEffect(function () {
+    if (rowViewToggle) {
+      setRowViewRefreshKey(function (key) {
+        return key + 1;
+      });
+    }
+  }, [defaultRowView, rowViewToggle]);
   var handleSortColumn = useCallback(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -585,13 +600,13 @@ var QbsTable = function QbsTable(_ref) {
     className: "qbs-table-border-wrap"
   }, tableViewToggle ? /*#__PURE__*/React.createElement(Table, {
     height: autoHeight ? undefined : height,
-    key: tableKey,
+    key: tableKey + "-" + rowViewRefreshKey,
     tableKey: tableKey,
     rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
-    wordWrap: wordWrap,
+    wordWrap: effectiveWordWrap,
     autoHeight: autoHeight,
     sortColumn: sortColumn,
     style: {
@@ -615,7 +630,7 @@ var QbsTable = function QbsTable(_ref) {
     rowHeight: rowHeight,
     rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
-    showHeader: true,
+    showHeader: showHeader,
     defaultChecked: true,
     expandedRowKeys: expandedRowKeys,
     onExpandChange: onExpandChange,
@@ -697,7 +712,7 @@ var QbsTable = function QbsTable(_ref) {
     getToolTip: customRowStatus.getToolTip
   })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/React.createElement(Column, {
     width: 40,
-    fixed: pinSide
+    fixed: "right"
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -716,7 +731,7 @@ var QbsTable = function QbsTable(_ref) {
     rtl: rtl
   })), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
     width: 40,
-    fixed: pinSide
+    fixed: "right"
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,

package/es/qbsTable/TableCardList.js

@@ -106,11 +106,16 @@ var QbsTable = function QbsTable(_ref) {
     setTableFullView = _ref.setTableFullView,
     setRowViewToggle = _ref.setRowViewToggle,
     _ref$isFullScreen = _ref.isFullScreen,
-    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen;
+    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
+    _ref$showHeader = _ref.showHeader,
+    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader;
   var labels = useMemo(function () {
     return mergeQbsTableLabels(labelsProp);
   }, [labelsProp]);
-  var pinSide = rtl ? 'left' : 'right';
+  var effectiveWordWrap = useMemo(function () {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? false : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -449,7 +454,7 @@ var QbsTable = function QbsTable(_ref) {
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
-    wordWrap: wordWrap,
+    wordWrap: effectiveWordWrap,
     autoHeight: autoHeight,
     sortColumn: sortColumn,
     style: {
@@ -472,7 +477,7 @@ var QbsTable = function QbsTable(_ref) {
     headerHeight: headerHeight,
     rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
-    showHeader: true,
+    showHeader: showHeader,
     defaultChecked: true,
     expandedRowKeys: expandedRowKeys,
     onExpandChange: onExpandChange,
@@ -554,7 +559,7 @@ var QbsTable = function QbsTable(_ref) {
     getToolTip: customRowStatus.getToolTip
   })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/React.createElement(Column, {
     width: 40,
-    fixed: pinSide
+    fixed: "right"
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -573,7 +578,7 @@ var QbsTable = function QbsTable(_ref) {
     rtl: rtl
   })), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
     width: 40,
-    fixed: pinSide
+    fixed: "right"
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,

package/es/qbsTable/Toolbar.js

@@ -39,9 +39,7 @@ var ToolBar = function ToolBar(_ref) {
     setRowViewToggle = _ref.setRowViewToggle,
     _ref$isFullScreen = _ref.isFullScreen,
     isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
-    labelsProp = _ref.labels,
-    _ref$rtl = _ref.rtl,
-    rtl = _ref$rtl === void 0 ? false : _ref$rtl;
+    labelsProp = _ref.labels;
   var labels = useMemo(function () {
     return mergeQbsTableLabels(labelsProp);
   }, [labelsProp]);
@@ -81,8 +79,7 @@ var ToolBar = function ToolBar(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-toolbar-container",
-    ref: toolbarRef,
-    dir: rtl ? 'rtl' : 'ltr'
+    ref: toolbarRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-toolbar " + (className != null ? className : '')
   }, /*#__PURE__*/React.createElement("div", {
@@ -117,28 +114,40 @@ var ToolBar = function ToolBar(_ref) {
   }))), tableHeaderActions, /*#__PURE__*/React.createElement("div", {
     className: "pr-1 cursor-pointer relative table_custom_ctions"
   }, (rowViewToggle || isFullScreen) && /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-2 qbs-row-switch-container"
+    className: "flex gap-2 qbs-row-switch-cntainer"
   }, rowViewToggle && /*#__PURE__*/React.createElement("div", {
     className: "flex gap-2 table_cell_style qbs-table-top-icons"
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
     title: (_labels$switchToDefau = labels.switchToDefaultView) != null ? _labels$switchToDefau : ''
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "qbs-table-view-btn",
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    title: labels.switchToDefaultView,
     onClick: function onClick() {
       return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
+      }
     }
   }, /*#__PURE__*/React.createElement(DefaultView, {
     className: "" + (defaultRowView ? 'active' : '')
   }))), /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
     title: (_labels$switchToRelax = labels.switchToRelaxedView) != null ? _labels$switchToRelax : ''
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "qbs-table-view-btn",
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    title: labels.switchToRelaxedView,
     onClick: function onClick() {
       return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
+      }
     }
   }, /*#__PURE__*/React.createElement(ContentView, {
     className: "" + (!defaultRowView ? 'active' : '')
@@ -147,11 +156,17 @@ var ToolBar = function ToolBar(_ref) {
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
     title: (_labels$switchToFullS = labels.switchToFullScreen) != null ? _labels$switchToFullS : ''
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "qbs-table-view-btn",
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    title: labels.switchToFullScreen,
     onClick: function onClick() {
       return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
+      }
     }
   }, /*#__PURE__*/React.createElement(ExpandIcon, {
     className: "" + (fullWidthView ? 'active' : '')
@@ -160,9 +175,7 @@ var ToolBar = function ToolBar(_ref) {
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
     title: (_labels$switchToTable = labels.switchToTableView) != null ? _labels$switchToTable : ''
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "qbs-table-view-btn",
+  }, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(true);
     }
@@ -173,9 +186,7 @@ var ToolBar = function ToolBar(_ref) {
   }), /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
     title: (_labels$switchToCardV = labels.switchToCardView) != null ? _labels$switchToCardV : ''
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "qbs-table-view-btn",
+  }, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(false);
     }

package/es/qbsTable/commontypes.d.ts

@@ -138,6 +138,7 @@ export interface QbsTableProps {
     setRowViewToggle?: (value: boolean) => void;
     isFullScreen?: boolean;
     rowHeight?: number;
+    showHeader?: boolean;
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/es/qbsTable/utilities/ColumShowHide.js

@@ -1,10 +1,8 @@
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
 import { mergeQbsTableLabels } from '../labels';
 import { closeOtherColumnToggles, COLUMN_TOGGLE_CLOSE_OTHERS } from './columnToggleCoordinator';
 import { SettingsIcon } from './icons';
 var ColumnToggle = function ColumnToggle(_ref) {
-  var _document$getElementB;
   var columns = _ref.columns,
     onToggle = _ref.onToggle,
     onReorder = _ref.onReorder,
@@ -23,39 +21,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
   var popupRef = useRef(null);
-  var settingsBtnRef = useRef(null);
   var _useState2 = useState(),
     dragOverPosition = _useState2[0],
     setDragOverPosition = _useState2[1];
-  var _useState3 = useState({
-      top: 0,
-      left: 0
-    }),
-    position = _useState3[0],
-    setPosition = _useState3[1];
-  var updatePopupPosition = useCallback(function () {
-    var _popupRef$current, _popupRef$current2;
-    if (!settingsBtnRef.current) return;
-    var rect = settingsBtnRef.current.getBoundingClientRect();
-    var viewportPadding = 8;
-    var popupWidth = ((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.offsetWidth) || 272;
-    var popupHeight = ((_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.offsetHeight) || 320;
-    var left = rtl ? rect.left : rect.right - popupWidth;
-    if (left + popupWidth > window.innerWidth - viewportPadding) {
-      left = Math.max(viewportPadding, window.innerWidth - popupWidth - viewportPadding);
-    }
-    if (left < viewportPadding) {
-      left = viewportPadding;
-    }
-    var top = rect.bottom + 4;
-    if (top + popupHeight > window.innerHeight - viewportPadding) {
-      top = Math.max(viewportPadding, rect.top - popupHeight - 4);
-    }
-    setPosition({
-      top: top,
-      left: left
-    });
-  }, [rtl]);
   useEffect(function () {
     var handleCloseOthers = function handleCloseOthers(event) {
       var detail = event.detail;
@@ -68,16 +36,6 @@ var ColumnToggle = function ColumnToggle(_ref) {
       return document.removeEventListener(COLUMN_TOGGLE_CLOSE_OTHERS, handleCloseOthers);
     };
   }, [setIsOpen, toggleId]);
-  useEffect(function () {
-    if (!isOpen) return;
-    updatePopupPosition();
-    var frame = requestAnimationFrame(function () {
-      return updatePopupPosition();
-    });
-    return function () {
-      return cancelAnimationFrame(frame);
-    };
-  }, [isOpen, updatePopupPosition]);
   var handleToggle = useCallback(function (columnName) {
     onToggle(columnName);
   }, [onToggle]);
@@ -102,9 +60,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
     setDraggedItem(null);
   }, [columns, draggedItem, onReorder]);
   var handleClickOutside = useCallback(function (event) {
-    var _popupRef$current3, _settingsBtnRef$curre;
+    var _popupRef$current;
     var target = event.target;
-    if ((_popupRef$current3 = popupRef.current) !== null && _popupRef$current3 !== void 0 && _popupRef$current3.contains(target) || (_settingsBtnRef$curre = settingsBtnRef.current) !== null && _settingsBtnRef$curre !== void 0 && _settingsBtnRef$curre.contains(target)) {
+    if ((_popupRef$current = popupRef.current) !== null && _popupRef$current !== void 0 && _popupRef$current.contains(target)) {
       return;
     }
     setIsOpen(false);
@@ -132,9 +90,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
         return handleToggle(column.title);
       },
       className: "qbs-table-checkbox-input",
-      id: column.title
+      id: toggleId + "-" + column.title
     }), /*#__PURE__*/React.createElement("label", {
-      htmlFor: column.title
+      htmlFor: toggleId + "-" + column.title
     }, /*#__PURE__*/React.createElement("svg", {
       width: "8",
       height: "6",
@@ -174,9 +132,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
         return handleToggle(column.title);
       },
       className: "qbs-table-checkbox-input",
-      id: column.title
+      id: toggleId + "-" + column.title
     }), /*#__PURE__*/React.createElement("label", {
-      htmlFor: column.title
+      htmlFor: toggleId + "-" + column.title
     }, /*#__PURE__*/React.createElement("svg", {
       width: "8",
       height: "6",
@@ -213,15 +171,23 @@ var ColumnToggle = function ColumnToggle(_ref) {
     setIsOpen(false);
     handleColumnToggle === null || handleColumnToggle === void 0 ? void 0 : handleColumnToggle(columns);
   };
-  var portalTarget = (_document$getElementB = document.getElementById('portal-root')) != null ? _document$getElementB : document.body;
-  var popupContent = /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "qbs-table-settings-wrapper"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      if (isOpen) {
+        setIsOpen(false);
+        return;
+      }
+      closeOtherColumnToggles(toggleId);
+      setIsOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement(SettingsIcon, null)), isOpen && /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-column-popup" + (rtl ? ' qbs-table-column-popup--rtl' : ''),
     style: {
-      position: 'fixed',
-      top: position.top,
-      left: position.left,
-      maxHeight: tableHeight - 40,
-      zIndex: 10060
+      maxHeight: tableHeight - 40
     },
     ref: popupRef,
     dir: rtl ? 'rtl' : 'ltr'
@@ -277,23 +243,6 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, labels.save))));
-  return /*#__PURE__*/React.createElement("div", {
-    className: "qbs-table-settings-wrapper"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "qbs-table-settings-btn",
-    ref: settingsBtnRef,
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      if (isOpen) {
-        setIsOpen(false);
-        return;
-      }
-      closeOtherColumnToggles(toggleId);
-      updatePopupPosition();
-      setIsOpen(true);
-    }
-  }, /*#__PURE__*/React.createElement(SettingsIcon, null)), isOpen && portalTarget && /*#__PURE__*/ReactDOM.createPortal(popupContent, portalTarget));
+  }, labels.save)))));
 };
 export default ColumnToggle;

package/es/qbsTable/utilities/ToolTip.js

@@ -35,7 +35,8 @@ var TooltipComponent = function TooltipComponent(_ref) {
     }
   }, children), /*#__PURE__*/React.createElement("span", {
     ref: dropRef,
-    className: 'tooltiptext'
+    className: "tooltiptext",
+    dir: "auto"
   }, title));
 };
 export default TooltipComponent;

package/es/qbsTable/utilities/VerticalDropDownMenu.js

@@ -51,7 +51,11 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     var menuHeight = visibleItems.length * 40;
     var spaceBelow = window.innerHeight - rect.bottom;
     var openBelow = spaceBelow >= menuHeight + menuGap;
-    var left = rect.left;
+    var isRtl = (document.documentElement.getAttribute('dir') || document.body.getAttribute('dir') || getComputedStyle(document.documentElement).direction) === 'rtl';
+    var left = isRtl ? rect.left : rect.left - menuWidth;
+    if (!isRtl && left < viewportPadding) {
+      left = rect.left;
+    }
     if (left + menuWidth > window.innerWidth - viewportPadding) {
       left = Math.max(viewportPadding, rect.right - menuWidth);
     }
@@ -165,7 +169,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     className: "inline-block vertical-menu-dropdown-wrapper"
   }, visibleCount > 0 && /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "vertical-menu-trigger-button p-2 rounded text-base-gray hover:bg-gray-light-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+    className: "vertical-menu-trigger-button",
     onClick: function onClick(event) {
       event.stopPropagation();
       if (openMenu) {

package/lib/less/qbs-table.less

@@ -381,16 +381,45 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+
+  > button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: #585858;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover,
+    &:focus {
+      background: transparent;
+      outline: none;
+    }
+  }
 }
 
 .qbs-table-column-popup {
-  position: fixed;
+  position: absolute;
+  top: calc(100% + 4px);
+  inset-inline-end: 0;
+  inset-inline-start: auto;
   padding: 8px;
   z-index: 10060;
   border-radius: 8px;
   background: #fff;
   box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-  min-width: 272px;
+  min-width: 300px;
+  width: max-content;
+  max-width: min(400px, calc(100vw - 16px));
   gap: 4px;
   display: flex;
   flex-direction: column;
@@ -413,10 +442,6 @@
 
 .qbs-table-columns-container {
   display: flex;
-  flex-direction: row;
-}
-
-.qbs-table-column-popup--rtl .qbs-table-columns-container {
   flex-direction: row-reverse;
 }
 
@@ -429,6 +454,10 @@
   padding: 4px 0 0;
 }
 
+.qbs-table-column-popup--rtl {
+  text-align: right;
+}
+
 .qbs-table-column-popup--rtl .qbs-table-popup-footer {
   flex-direction: row-reverse;
 }

package/lib/qbsTable/QbsTable.js

@@ -128,11 +128,16 @@ var QbsTable = function QbsTable(_ref) {
     setRowViewToggle = _ref.setRowViewToggle,
     _ref$isFullScreen = _ref.isFullScreen,
     isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
-    rowHeight = _ref.rowHeight;
+    rowHeight = _ref.rowHeight,
+    _ref$showHeader = _ref.showHeader,
+    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader;
   var labels = (0, _react.useMemo)(function () {
     return (0, _labels.mergeQbsTableLabels)(labelsProp);
   }, [labelsProp]);
-  var pinSide = rtl ? 'left' : 'right';
+  var effectiveWordWrap = (0, _react.useMemo)(function () {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? false : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -155,6 +160,16 @@ var QbsTable = function QbsTable(_ref) {
     setTableViewToggle = _useState5[1];
   var isMobile = (0, _useResponsiveStore["default"])();
   var tableBodyRef = (0, _react.useRef)(null);
+  var _useState6 = (0, _react.useState)(0),
+    rowViewRefreshKey = _useState6[0],
+    setRowViewRefreshKey = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (rowViewToggle) {
+      setRowViewRefreshKey(function (key) {
+        return key + 1;
+      });
+    }
+  }, [defaultRowView, rowViewToggle]);
   var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -591,13 +606,13 @@ var QbsTable = function QbsTable(_ref) {
     className: "qbs-table-border-wrap"
   }, tableViewToggle ? /*#__PURE__*/_react["default"].createElement(_Table["default"], {
     height: autoHeight ? undefined : height,
-    key: tableKey,
+    key: tableKey + "-" + rowViewRefreshKey,
     tableKey: tableKey,
     rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
-    wordWrap: wordWrap,
+    wordWrap: effectiveWordWrap,
     autoHeight: autoHeight,
     sortColumn: sortColumn,
     style: {
@@ -621,7 +636,7 @@ var QbsTable = function QbsTable(_ref) {
     rowHeight: rowHeight,
     rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
-    showHeader: true,
+    showHeader: showHeader,
     defaultChecked: true,
     expandedRowKeys: expandedRowKeys,
     onExpandChange: onExpandChange,
@@ -703,7 +718,7 @@ var QbsTable = function QbsTable(_ref) {
     getToolTip: customRowStatus.getToolTip
   })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
     width: 40,
-    fixed: pinSide
+    fixed: "right"
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -722,7 +737,7 @@ var QbsTable = function QbsTable(_ref) {
     rtl: rtl
   })), /*#__PURE__*/_react["default"].createElement(_Cell["default"], null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
     width: 40,
-    fixed: pinSide
+    fixed: "right"
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,

package/lib/qbsTable/TableCardList.js

@@ -112,11 +112,16 @@ var QbsTable = function QbsTable(_ref) {
     setTableFullView = _ref.setTableFullView,
     setRowViewToggle = _ref.setRowViewToggle,
     _ref$isFullScreen = _ref.isFullScreen,
-    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen;
+    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
+    _ref$showHeader = _ref.showHeader,
+    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader;
   var labels = (0, _react.useMemo)(function () {
     return (0, _labels.mergeQbsTableLabels)(labelsProp);
   }, [labelsProp]);
-  var pinSide = rtl ? 'left' : 'right';
+  var effectiveWordWrap = (0, _react.useMemo)(function () {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? false : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -455,7 +460,7 @@ var QbsTable = function QbsTable(_ref) {
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
-    wordWrap: wordWrap,
+    wordWrap: effectiveWordWrap,
     autoHeight: autoHeight,
     sortColumn: sortColumn,
     style: {
@@ -478,7 +483,7 @@ var QbsTable = function QbsTable(_ref) {
     headerHeight: headerHeight,
     rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
-    showHeader: true,
+    showHeader: showHeader,
     defaultChecked: true,
     expandedRowKeys: expandedRowKeys,
     onExpandChange: onExpandChange,
@@ -560,7 +565,7 @@ var QbsTable = function QbsTable(_ref) {
     getToolTip: customRowStatus.getToolTip
   })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
     width: 40,
-    fixed: pinSide
+    fixed: "right"
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -579,7 +584,7 @@ var QbsTable = function QbsTable(_ref) {
     rtl: rtl
   })), /*#__PURE__*/_react["default"].createElement(_Cell["default"], null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
     width: 40,
-    fixed: pinSide
+    fixed: "right"
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,