qbs-react-grid 2.2.9 → 2.2.11

package/lib/qbsTable/Toolbar.js

@@ -46,9 +46,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 = (0, _react.useMemo)(function () {
     return (0, _labels.mergeQbsTableLabels)(labelsProp);
   }, [labelsProp]);
@@ -88,8 +86,7 @@ var ToolBar = function ToolBar(_ref) {
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-toolbar-container",
-    ref: toolbarRef,
-    dir: rtl ? 'rtl' : 'ltr'
+    ref: toolbarRef
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-toolbar " + (className != null ? className : '')
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -124,28 +121,40 @@ var ToolBar = function ToolBar(_ref) {
   }))), tableHeaderActions, /*#__PURE__*/_react["default"].createElement("div", {
     className: "pr-1 cursor-pointer relative table_custom_ctions"
   }, (rowViewToggle || isFullScreen) && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "flex gap-2 qbs-row-switch-container"
+    className: "flex gap-2 qbs-row-switch-cntainer"
   }, rowViewToggle && /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex gap-2 table_cell_style qbs-table-top-icons"
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
     title: (_labels$switchToDefau = labels.switchToDefaultView) != null ? _labels$switchToDefau : ''
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    className: "qbs-table-view-btn",
+  }, /*#__PURE__*/_react["default"].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["default"].createElement(_icons.DefaultView, {
     className: "" + (defaultRowView ? 'active' : '')
   }))), /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
     title: (_labels$switchToRelax = labels.switchToRelaxedView) != null ? _labels$switchToRelax : ''
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    className: "qbs-table-view-btn",
+  }, /*#__PURE__*/_react["default"].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["default"].createElement(_icons.ContentView, {
     className: "" + (!defaultRowView ? 'active' : '')
@@ -154,11 +163,17 @@ var ToolBar = function ToolBar(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
     title: (_labels$switchToFullS = labels.switchToFullScreen) != null ? _labels$switchToFullS : ''
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    className: "qbs-table-view-btn",
+  }, /*#__PURE__*/_react["default"].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["default"].createElement(_icons.ExpandIcon, {
     className: "" + (fullWidthView ? 'active' : '')
@@ -167,9 +182,7 @@ var ToolBar = function ToolBar(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
     title: (_labels$switchToTable = labels.switchToTableView) != null ? _labels$switchToTable : ''
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    className: "qbs-table-view-btn",
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(true);
     }
@@ -180,9 +193,7 @@ var ToolBar = function ToolBar(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
     title: (_labels$switchToCardV = labels.switchToCardView) != null ? _labels$switchToCardV : ''
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    className: "qbs-table-view-btn",
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(false);
     }

package/lib/qbsTable/utilities/ColumShowHide.js

@@ -1,17 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _labels = require("../labels");
 var _columnToggleCoordinator = require("./columnToggleCoordinator");
 var _icons = require("./icons");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var ColumnToggle = function ColumnToggle(_ref) {
-  var _document$getElementB;
   var columns = _ref.columns,
     onToggle = _ref.onToggle,
     onReorder = _ref.onReorder,
@@ -30,39 +27,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
   var popupRef = (0, _react.useRef)(null);
-  var settingsBtnRef = (0, _react.useRef)(null);
   var _useState2 = (0, _react.useState)(),
     dragOverPosition = _useState2[0],
     setDragOverPosition = _useState2[1];
-  var _useState3 = (0, _react.useState)({
-      top: 0,
-      left: 0
-    }),
-    position = _useState3[0],
-    setPosition = _useState3[1];
-  var updatePopupPosition = (0, _react.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]);
   (0, _react.useEffect)(function () {
     var handleCloseOthers = function handleCloseOthers(event) {
       var detail = event.detail;
@@ -75,16 +42,6 @@ var ColumnToggle = function ColumnToggle(_ref) {
       return document.removeEventListener(_columnToggleCoordinator.COLUMN_TOGGLE_CLOSE_OTHERS, handleCloseOthers);
     };
   }, [setIsOpen, toggleId]);
-  (0, _react.useEffect)(function () {
-    if (!isOpen) return;
-    updatePopupPosition();
-    var frame = requestAnimationFrame(function () {
-      return updatePopupPosition();
-    });
-    return function () {
-      return cancelAnimationFrame(frame);
-    };
-  }, [isOpen, updatePopupPosition]);
   var handleToggle = (0, _react.useCallback)(function (columnName) {
     onToggle(columnName);
   }, [onToggle]);
@@ -109,9 +66,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
     setDraggedItem(null);
   }, [columns, draggedItem, onReorder]);
   var handleClickOutside = (0, _react.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);
@@ -139,9 +96,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
         return handleToggle(column.title);
       },
       className: "qbs-table-checkbox-input",
-      id: column.title
+      id: toggleId + "-" + column.title
     }), /*#__PURE__*/_react["default"].createElement("label", {
-      htmlFor: column.title
+      htmlFor: toggleId + "-" + column.title
     }, /*#__PURE__*/_react["default"].createElement("svg", {
       width: "8",
       height: "6",
@@ -181,9 +138,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
         return handleToggle(column.title);
       },
       className: "qbs-table-checkbox-input",
-      id: column.title
+      id: toggleId + "-" + column.title
     }), /*#__PURE__*/_react["default"].createElement("label", {
-      htmlFor: column.title
+      htmlFor: toggleId + "-" + column.title
     }, /*#__PURE__*/_react["default"].createElement("svg", {
       width: "8",
       height: "6",
@@ -220,15 +177,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["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "qbs-table-settings-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      if (isOpen) {
+        setIsOpen(false);
+        return;
+      }
+      (0, _columnToggleCoordinator.closeOtherColumnToggles)(toggleId);
+      setIsOpen(true);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_icons.SettingsIcon, null)), isOpen && /*#__PURE__*/_react["default"].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'
@@ -284,24 +249,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, labels.save))));
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "qbs-table-settings-wrapper"
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    className: "qbs-table-settings-btn",
-    ref: settingsBtnRef,
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      if (isOpen) {
-        setIsOpen(false);
-        return;
-      }
-      (0, _columnToggleCoordinator.closeOtherColumnToggles)(toggleId);
-      updatePopupPosition();
-      setIsOpen(true);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_icons.SettingsIcon, null)), isOpen && portalTarget && /*#__PURE__*/_reactDom["default"].createPortal(popupContent, portalTarget));
+  }, labels.save)))));
 };
 var _default = ColumnToggle;
 exports["default"] = _default;

package/lib/qbsTable/utilities/ToolTip.js

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

package/lib/qbsTable/utilities/VerticalDropDownMenu.js

@@ -58,7 +58,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);
     }
@@ -172,7 +176,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     className: "inline-block vertical-menu-dropdown-wrapper"
   }, visibleCount > 0 && /*#__PURE__*/_react["default"].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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "2.2.9",
+  "version": "2.2.11",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/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/src/qbsTable/QbsTable.tsx

@@ -105,7 +105,10 @@ const QbsTable: React.FC<QbsTableProps> = ({
   rowHeight,
 }) => {
   const labels = useMemo(() => mergeQbsTableLabels(labelsProp), [labelsProp]);
-  const pinSide = rtl ? 'left' : 'right';
+  const effectiveWordWrap = useMemo(() => {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? wordWrap : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
@@ -115,6 +118,14 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const [tableViewToggle, setTableViewToggle] = useState(tableView);
   const isMobile = useResponsiveStore();
   const tableBodyRef = useRef<HTMLDivElement>(null);
+  const [rowViewRefreshKey, setRowViewRefreshKey] = useState(0);
+
+  useEffect(() => {
+    if (rowViewToggle) {
+      setRowViewRefreshKey(key => key + 1);
+    }
+  }, [defaultRowView, rowViewToggle]);
+
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
       setLoading(true);
@@ -602,13 +613,13 @@ const QbsTable: React.FC<QbsTableProps> = ({
         {tableViewToggle ? (
           <Table
             height={autoHeight ? undefined : height}
-            key={tableKey}
+            key={`${tableKey}-${rowViewRefreshKey}`}
             tableKey={tableKey}
             rtl={rtl}
             data={data}
             tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
             dataTheme={dataTheme}
-            wordWrap={wordWrap}
+            wordWrap={effectiveWordWrap}
             autoHeight={autoHeight}
             sortColumn={sortColumn}
             style={{ position: 'relative' }}
@@ -728,7 +739,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             {columnsRendered}
             {!actionProps ||
               (actionProps?.length === 0 && columnToggle && (
-                <Column width={40} fixed={pinSide}>
+                <Column width={40} fixed="right">
                   <HeaderCell
                     verticalAlign={findGrouped() ? 'middle' : undefined}
                     className={` ${classes.headerlClass}`}
@@ -752,7 +763,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                 </Column>
               ))}
             {actionProps && actionProps?.length > 0 && (
-              <Column width={40} fixed={pinSide}>
+              <Column width={40} fixed="right">
                 <HeaderCell
                   verticalAlign={findGrouped() ? 'middle' : undefined}
                   className={` ${classes.headerlClass}`}

package/src/qbsTable/TableCardList.tsx

@@ -94,7 +94,10 @@ const QbsTable: React.FC<QbsTableProps> = ({
   isFullScreen = false,
 }) => {
   const labels = useMemo(() => mergeQbsTableLabels(labelsProp), [labelsProp]);
-  const pinSide = rtl ? 'left' : 'right';
+  const effectiveWordWrap = useMemo(() => {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? wordWrap : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
@@ -478,7 +481,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           data={data}
           tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
           dataTheme={dataTheme}
-          wordWrap={wordWrap}
+          wordWrap={effectiveWordWrap}
           autoHeight={autoHeight}
           sortColumn={sortColumn}
           style={{ position: 'relative' }}
@@ -595,7 +598,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           {columnsRendered}
           {!actionProps ||
             (actionProps?.length === 0 && columnToggle && (
-              <Column width={40} fixed={pinSide}>
+              <Column width={40} fixed="right">
                 <HeaderCell
                   verticalAlign={findGrouped() ? 'middle' : undefined}
                   className={` ${classes.headerlClass}`}
@@ -619,7 +622,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
               </Column>
             ))}
           {actionProps && actionProps?.length > 0 && (
-            <Column width={40} fixed={pinSide}>
+            <Column width={40} fixed="right">
               <HeaderCell
                 verticalAlign={findGrouped() ? 'middle' : undefined}
                 className={` ${classes.headerlClass}`}

package/src/qbsTable/Toolbar.tsx

@@ -36,7 +36,6 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   setRowViewToggle,
   isFullScreen = false,
   labels: labelsProp,
-  rtl = false,
 }) => {
   const labels = useMemo(() => mergeQbsTableLabels(labelsProp), [labelsProp]);
   const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
@@ -78,7 +77,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   };
 
   return (
-    <div className="qbs-table-toolbar-container" ref={toolbarRef} dir={rtl ? 'rtl' : 'ltr'}>
+    <div className="qbs-table-toolbar-container" ref={toolbarRef}>
       <div className={`qbs-table-toolbar ${className ?? ''}`}>
         <div className="start-container" style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <div className="qbs-table-primary-filter">
@@ -116,32 +115,44 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
           {tableHeaderActions}
           <div className="pr-1 cursor-pointer relative table_custom_ctions">
             {(rowViewToggle || isFullScreen) && (
-              <div className="flex gap-2 qbs-row-switch-container">
+              <div className="flex gap-2 qbs-row-switch-cntainer">
                 {rowViewToggle && (
                   <div className="flex gap-2 table_cell_style qbs-table-top-icons">
                     <TooltipComponent
                       tableBodyRef={toolbarRef}
                       title={labels.switchToDefaultView ?? ''}
                     >
-                      <button
-                        type="button"
-                        className="qbs-table-view-btn"
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        title={labels.switchToDefaultView}
                         onClick={() => setRowViewToggle?.(true)}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            setRowViewToggle?.(true);
+                          }
+                        }}
                       >
                         <DefaultView className={`${defaultRowView ? 'active' : ''}`} />
-                      </button>
+                      </div>
                     </TooltipComponent>
                     <TooltipComponent
                       tableBodyRef={toolbarRef}
                       title={labels.switchToRelaxedView ?? ''}
                     >
-                      <button
-                        type="button"
-                        className="qbs-table-view-btn"
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        title={labels.switchToRelaxedView}
                         onClick={() => setRowViewToggle?.(false)}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            setRowViewToggle?.(false);
+                          }
+                        }}
                       >
                         <ContentView className={`${!defaultRowView ? 'active' : ''}`} />
-                      </button>
+                      </div>
                     </TooltipComponent>
                   </div>
                 )}
@@ -151,13 +162,19 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                       tableBodyRef={toolbarRef}
                       title={labels.switchToFullScreen ?? ''}
                     >
-                      <button
-                        type="button"
-                        className="qbs-table-view-btn"
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        title={labels.switchToFullScreen}
                         onClick={() => setTableFullView?.(!fullWidthView)}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            setTableFullView?.(!fullWidthView);
+                          }
+                        }}
                       >
                         <ExpandIcon className={`${fullWidthView ? 'active' : ''}`} />
-                      </button>
+                      </div>
                     </TooltipComponent>
                   </div>
                 )}
@@ -167,25 +184,17 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
             {enableTableToggle && !isMobile && (
               <div className="qbs-table-top-icons flex gap-2">
                 <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToTableView ?? ''}>
-                  <button
-                    type="button"
-                    className="qbs-table-view-btn"
-                    onClick={() => setTableViewToggle?.(true)}
-                  >
+                  <div onClick={() => setTableViewToggle?.(true)}>
                     <TableView className={`${tableViewToggle ? 'active' : ''}`} />
-                  </button>
+                  </div>
                 </TooltipComponent>
 
                 <div className="border-r h-4 w-1" />
 
                 <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToCardView ?? ''}>
-                  <button
-                    type="button"
-                    className="qbs-table-view-btn"
-                    onClick={() => setTableViewToggle?.(false)}
-                  >
+                  <div onClick={() => setTableViewToggle?.(false)}>
                     <CardView className={`${!tableViewToggle ? 'active' : ''}`} />
-                  </button>
+                  </div>
                 </TooltipComponent>
               </div>
             )}