qbs-react-grid 2.0.3 → 2.0.4

package/es/qbsTable/QbsTable.js

@@ -53,7 +53,7 @@ var QbsTable = function QbsTable(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 630 : _ref$height,
     onExpandChange = _ref.onExpandChange,
-    wordWrap = _ref.wordWrap,
+    propsWordWrap = _ref.wordWrap,
     _ref$dataRowKey = _ref.dataRowKey,
     dataRowKey = _ref$dataRowKey === void 0 ? 'id' : _ref$dataRowKey,
     defaultExpandAllRows = _ref.defaultExpandAllRows,
@@ -112,7 +112,8 @@ var QbsTable = function QbsTable(_ref) {
     loadMoreData = _ref.loadMoreData,
     infiniteLoading = _ref.infiniteLoading,
     _ref$infiniteScroll = _ref.infiniteScroll,
-    infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll;
+    infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll,
+    propsViewMode = _ref.viewMode;
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -136,6 +137,12 @@ var QbsTable = function QbsTable(_ref) {
   var isMobile = useResponsiveStore();
   var tableBodyRef = useRef(null);
   var wheelWrapperRef = useRef(null);
+  var _useState6 = useState(propsViewMode != null ? propsViewMode : 'expanded'),
+    viewMode = _useState6[0],
+    setViewMode = _useState6[1];
+  var _useState7 = useState(propsWordWrap != null ? propsWordWrap : false),
+    wordWrap = _useState7[0],
+    setWordWrap = _useState7[1];
   var handleSortColumn = useCallback(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -225,13 +232,21 @@ var QbsTable = function QbsTable(_ref) {
       });
     }
   }, [wordWrap]);
+  useEffect(function () {
+    if (viewMode === 'expanded') {
+      setWordWrap('break-word');
+    } else {
+      setWordWrap(false);
+    }
+    REFRESH_KEY = REFRESH_KEY + 1;
+  }, [viewMode]);
   var onReorder = useCallback(function (columns) {
     setColumns(columns);
   }, []);
 
   // useEffect(() => {
   // }, [columns]);
-
+  console.log(viewMode);
   var handleClear = function handleClear(_ref2) {
     setCheckedKeys([]);
     handleChecked([]);
@@ -697,6 +712,8 @@ var QbsTable = function QbsTable(_ref) {
     onReorder: onReorder,
     isOpen: isOpen,
     tableHeight: height,
+    viewMode: viewMode,
+    setViewMode: setViewMode,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
     handleColumnToggle: handleColumnToggle
@@ -713,6 +730,8 @@ var QbsTable = function QbsTable(_ref) {
     onToggle: handleToggle,
     tableHeight: height,
     onReorder: onReorder,
+    viewMode: viewMode,
+    setViewMode: setViewMode,
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,

package/es/qbsTable/commontypes.d.ts

@@ -131,6 +131,7 @@ export interface QbsTableProps {
     loadMoreData?: () => void;
     infiniteScroll?: boolean;
     infiniteLoading?: boolean;
+    viewMode?: string;
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/es/qbsTable/utilities/ColumShowHide.d.ts

@@ -9,6 +9,8 @@ interface ColumnToggleProps {
     handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     handleResetColumns?: () => void;
     tableHeight?: number;
+    viewMode?: string;
+    setViewMode?: (value: string) => void;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;
 export default ColumnToggle;

package/es/qbsTable/utilities/ColumShowHide.js

@@ -9,7 +9,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
     handleResetColumns = _ref.handleResetColumns,
     handleColumnToggle = _ref.handleColumnToggle,
     _ref$tableHeight = _ref.tableHeight,
-    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
+    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight,
+    viewMode = _ref.viewMode,
+    setViewMode = _ref.setViewMode;
   var _useState = useState(null),
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
@@ -215,6 +217,26 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, "Save"))))));
+  }, "Save"))), /*#__PURE__*/React.createElement("div", {
+    className: "qbs-table-popup-item"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    value: "compact",
+    checked: viewMode === 'compact',
+    onChange: function onChange() {
+      return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('compact');
+    }
+  }), "Compact View"), /*#__PURE__*/React.createElement("label", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    value: "expanded",
+    checked: viewMode === 'expanded',
+    onChange: function onChange() {
+      return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('expanded');
+    }
+  }), "Default View")))));
 };
 export default ColumnToggle;

package/lib/qbsTable/QbsTable.js

@@ -59,7 +59,7 @@ var QbsTable = function QbsTable(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 630 : _ref$height,
     onExpandChange = _ref.onExpandChange,
-    wordWrap = _ref.wordWrap,
+    propsWordWrap = _ref.wordWrap,
     _ref$dataRowKey = _ref.dataRowKey,
     dataRowKey = _ref$dataRowKey === void 0 ? 'id' : _ref$dataRowKey,
     defaultExpandAllRows = _ref.defaultExpandAllRows,
@@ -118,7 +118,8 @@ var QbsTable = function QbsTable(_ref) {
     loadMoreData = _ref.loadMoreData,
     infiniteLoading = _ref.infiniteLoading,
     _ref$infiniteScroll = _ref.infiniteScroll,
-    infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll;
+    infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll,
+    propsViewMode = _ref.viewMode;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -142,6 +143,12 @@ var QbsTable = function QbsTable(_ref) {
   var isMobile = (0, _useResponsiveStore["default"])();
   var tableBodyRef = (0, _react.useRef)(null);
   var wheelWrapperRef = (0, _react.useRef)(null);
+  var _useState6 = (0, _react.useState)(propsViewMode != null ? propsViewMode : 'expanded'),
+    viewMode = _useState6[0],
+    setViewMode = _useState6[1];
+  var _useState7 = (0, _react.useState)(propsWordWrap != null ? propsWordWrap : false),
+    wordWrap = _useState7[0],
+    setWordWrap = _useState7[1];
   var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -231,13 +238,21 @@ var QbsTable = function QbsTable(_ref) {
       });
     }
   }, [wordWrap]);
+  (0, _react.useEffect)(function () {
+    if (viewMode === 'expanded') {
+      setWordWrap('break-word');
+    } else {
+      setWordWrap(false);
+    }
+    REFRESH_KEY = REFRESH_KEY + 1;
+  }, [viewMode]);
   var onReorder = (0, _react.useCallback)(function (columns) {
     setColumns(columns);
   }, []);
 
   // useEffect(() => {
   // }, [columns]);
-
+  console.log(viewMode);
   var handleClear = function handleClear(_ref2) {
     setCheckedKeys([]);
     handleChecked([]);
@@ -703,6 +718,8 @@ var QbsTable = function QbsTable(_ref) {
     onReorder: onReorder,
     isOpen: isOpen,
     tableHeight: height,
+    viewMode: viewMode,
+    setViewMode: setViewMode,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
     handleColumnToggle: handleColumnToggle
@@ -719,6 +736,8 @@ var QbsTable = function QbsTable(_ref) {
     onToggle: handleToggle,
     tableHeight: height,
     onReorder: onReorder,
+    viewMode: viewMode,
+    setViewMode: setViewMode,
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,

package/lib/qbsTable/commontypes.d.ts

@@ -131,6 +131,7 @@ export interface QbsTableProps {
     loadMoreData?: () => void;
     infiniteScroll?: boolean;
     infiniteLoading?: boolean;
+    viewMode?: string;
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/lib/qbsTable/utilities/ColumShowHide.d.ts

@@ -9,6 +9,8 @@ interface ColumnToggleProps {
     handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     handleResetColumns?: () => void;
     tableHeight?: number;
+    viewMode?: string;
+    setViewMode?: (value: string) => void;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;
 export default ColumnToggle;

package/lib/qbsTable/utilities/ColumShowHide.js

@@ -15,7 +15,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
     handleResetColumns = _ref.handleResetColumns,
     handleColumnToggle = _ref.handleColumnToggle,
     _ref$tableHeight = _ref.tableHeight,
-    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
+    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight,
+    viewMode = _ref.viewMode,
+    setViewMode = _ref.setViewMode;
   var _useState = (0, _react.useState)(null),
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
@@ -221,7 +223,27 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, "Save"))))));
+  }, "Save"))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "qbs-table-popup-item"
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "radio",
+    value: "compact",
+    checked: viewMode === 'compact',
+    onChange: function onChange() {
+      return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('compact');
+    }
+  }), "Compact View"), /*#__PURE__*/_react["default"].createElement("label", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "radio",
+    value: "expanded",
+    checked: viewMode === 'expanded',
+    onChange: function onChange() {
+      return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('expanded');
+    }
+  }), "Default View")))));
 };
 var _default = ColumnToggle;
 exports["default"] = _default;

package/package.json

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

package/src/qbsTable/QbsTable.tsx

@@ -52,7 +52,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   minHeight,
   height = 630,
   onExpandChange,
-  wordWrap,
+  wordWrap: propsWordWrap,
   dataRowKey = 'id',
   defaultExpandAllRows,
   handleRowExpanded,
@@ -96,7 +96,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
   hasMoreData,
   loadMoreData,
   infiniteLoading,
-  infiniteScroll = false
+  infiniteScroll = false,
+  viewMode: propsViewMode
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -108,7 +109,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const isMobile = useResponsiveStore();
   const tableBodyRef = useRef<HTMLDivElement>(null);
   const wheelWrapperRef = useRef<HTMLDivElement>(null);
-
+  const [viewMode, setViewMode] = useState(propsViewMode ?? 'expanded');
+  const [wordWrap, setWordWrap] = useState(propsWordWrap ?? false);
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
       setLoading(true);
@@ -212,14 +214,21 @@ const QbsTable: React.FC<QbsTableProps> = ({
       );
     }
   }, [wordWrap]);
-
+  useEffect(() => {
+    if (viewMode === 'expanded') {
+      setWordWrap('break-word');
+    } else {
+      setWordWrap(false);
+    }
+    REFRESH_KEY = REFRESH_KEY + 1;
+  }, [viewMode]);
   const onReorder = useCallback((columns: QbsColumnProps[]) => {
     setColumns(columns);
   }, []);
 
   // useEffect(() => {
   // }, [columns]);
-
+  console.log(viewMode);
   const handleClear = ([]) => {
     setCheckedKeys([]);
     handleChecked([]);
@@ -733,6 +742,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       onReorder={onReorder}
                       isOpen={isOpen}
                       tableHeight={height}
+                      viewMode={viewMode}
+                      setViewMode={setViewMode}
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
@@ -757,6 +768,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       onToggle={handleToggle}
                       tableHeight={height}
                       onReorder={onReorder}
+                      viewMode={viewMode}
+                      setViewMode={setViewMode}
                       isOpen={isOpen}
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}

package/src/qbsTable/commontypes.ts

@@ -134,6 +134,8 @@ export interface QbsTableProps {
   loadMoreData?: ()=> void
   infiniteScroll?: boolean
   infiniteLoading?:boolean
+  viewMode?:string
+
 }
 
 export interface QbsTableToolbarProps {

package/src/qbsTable/utilities/ColumShowHide.tsx

@@ -12,6 +12,8 @@ interface ColumnToggleProps {
   handleColumnToggle?: (columns: QbsColumnProps[]) => void;
   handleResetColumns?: () => void;
   tableHeight?: number;
+  viewMode?: string;
+  setViewMode?: (value: string) => void;
 }
 
 const ColumnToggle: React.FC<ColumnToggleProps> = ({
@@ -22,7 +24,9 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
   setIsOpen,
   handleResetColumns,
   handleColumnToggle,
-  tableHeight = 450
+  tableHeight = 450,
+  viewMode,
+  setViewMode
 }) => {
   const [draggedItem, setDraggedItem] = useState<number | null>(null);
   const popupRef = useRef<HTMLDivElement | null>(null);
@@ -239,6 +243,27 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
                 </div>
               </>
             )}
+            <div className="qbs-table-popup-item">
+              <label className="flex items-center gap-2">
+                <input
+                  type="radio"
+                  value="compact"
+                  checked={viewMode === 'compact'}
+                  onChange={() => setViewMode?.('compact')}
+                />
+                Compact View
+              </label>
+
+              <label className="flex items-center gap-2">
+                <input
+                  type="radio"
+                  value="expanded"
+                  checked={viewMode === 'expanded'}
+                  onChange={() => setViewMode?.('expanded')}
+                />
+                Default View
+              </label>
+            </div>
           </div>
         </div>
       )}