qbs-react-grid 2.1.0 → 2.2.1

package/lib/qbsTable/utilities/CardMenuDropdown.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _labels = require("../labels");
 var _icons = require("./icons");
 var _ToolTip = _interopRequireDefault(require("./ToolTip"));
 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); }
@@ -11,7 +12,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CardMenuDropdown = function CardMenuDropdown(_ref) {
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
-    rowData = _ref.rowData;
+    rowData = _ref.rowData,
+    labelsProp = _ref.labels;
+  var labels = (0, _labels.mergeLabels)(labelsProp);
   var _useState = (0, _react.useState)(false),
     openMenu = _useState[0],
     setOpenMenu = _useState[1];
@@ -70,7 +73,7 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
-    title: "Actions",
+    title: labels.actions,
     enabled: false,
     ref: menuButtonRef
   }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { QbsColumnProps } from '../commontypes';
+import { type QbsTableLabels } from '../labels';
 interface ColumnToggleProps {
     columns: QbsColumnProps[];
     onToggle: (columnName: string) => void;
@@ -11,6 +12,7 @@ interface ColumnToggleProps {
     tableHeight?: number;
     viewMode?: string;
     setViewMode?: (value: string) => void;
+    labels?: QbsTableLabels;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;
 export default ColumnToggle;

package/lib/qbsTable/utilities/ColumShowHide.js

@@ -3,6 +3,7 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _labels = require("../labels");
 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; }
@@ -15,7 +16,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,
+    labelsProp = _ref.labels;
+  var labels = (0, _labels.mergeLabels)(labelsProp);
   var _useState = (0, _react.useState)(null),
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
@@ -170,7 +173,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-label"
-  }, "FIXED COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, labels.fixedColumns), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-column"
@@ -182,7 +185,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-label"
-  }, "VISIBLE COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, labels.visibleColumns), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-column"
@@ -194,7 +197,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-label"
-  }, "AVAILABLE COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, labels.availableColumns), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-column"
@@ -215,13 +218,13 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleResetColumns === null || handleResetColumns === void 0 ? void 0 : handleResetColumns();
     }
-  }, "Reset to default"), /*#__PURE__*/_react["default"].createElement("a", {
+  }, labels.resetToDefault), /*#__PURE__*/_react["default"].createElement("a", {
     className: "qbs-table-reset-link",
     href: "#",
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, "Save"))))));
+  }, labels.save))))));
 };
 var _default = ColumnToggle;
 exports["default"] = _default;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface SearchProps {
     placeholder: string;
+    searchAriaLabel?: string;
     handleChange: (value: string) => void;
     searchValue: string | undefined;
     handleSearch: (value?: string) => void;

package/lib/qbsTable/utilities/SearchInput.js

@@ -7,6 +7,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 SearchInput = function SearchInput(_ref) {
   var placeholder = _ref.placeholder,
+    _ref$searchAriaLabel = _ref.searchAriaLabel,
+    searchAriaLabel = _ref$searchAriaLabel === void 0 ? 'Search' : _ref$searchAriaLabel,
     handleChange = _ref.handleChange,
     searchValue = _ref.searchValue,
     handleSearch = _ref.handleSearch;
@@ -30,7 +32,7 @@ var SearchInput = function SearchInput(_ref) {
     placeholder: placeholder,
     value: searchValue != null ? searchValue : '',
     onChange: handleInputChange,
-    "aria-label": "Search"
+    "aria-label": searchAriaLabel
   }), /*#__PURE__*/_react["default"].createElement("button", {
     className: "search-button absolute left-1 bottom-1.5 bg-white text-grey-dark",
     onClick: function onClick() {

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

@@ -1 +1 @@
-export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number): string;
+export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number, formatRange?: (start: number, end: number, total: number) => string): string;

package/lib/qbsTable/utilities/tablecalc.js

@@ -2,8 +2,13 @@
 
 exports.__esModule = true;
 exports.getRowDisplayRange = getRowDisplayRange;
-function getRowDisplayRange(totalRows, rowsPerPage, pageNumber) {
+function getRowDisplayRange(totalRows, rowsPerPage, pageNumber, formatRange) {
+  if (formatRange === void 0) {
+    formatRange = function formatRange(start, end, total) {
+      return "Showing " + start + " to " + end + " of " + total;
+    };
+  }
   var start = (pageNumber - 1) * rowsPerPage + 1;
   var end = Math.min(pageNumber * rowsPerPage, totalRows);
-  return "Showing " + (start != null ? start : 0) + " to " + (end != null ? end : 0) + " of " + (totalRows != null ? totalRows : 0);
+  return formatRange(start != null ? start : 0, end != null ? end : 0, totalRows != null ? totalRows : 0);
 }

package/package.json

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

package/src/Cell.tsx

@@ -144,11 +144,13 @@ const Cell = React.forwardRef((props: InnerCellProps, ref: React.Ref<HTMLDivElem
   };
 
   const paddingKey = rtl ? 'paddingRight' : 'paddingLeft';
+  const resolvedAlign =
+    rtl && align === 'left' ? 'right' : rtl && align === 'right' ? 'left' : align;
   const contentStyles: React.CSSProperties = {
     ...style,
     width: fullText ? width - 1 : width,
     height: nextHeight,
-    textAlign: align,
+    textAlign: resolvedAlign,
     [paddingKey]: isTreeCol ? depth * LAYER_WIDTH + 10 : style?.[paddingKey] || style?.padding
   };
 

package/src/Pagination.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useEffect, useState } from 'react';
 
 import CustomSelect from './customSelect';
+import { mergeLabels, type QbsTableLabels } from './qbsTable/labels';
 import { getRowDisplayRange } from './qbsTable/utilities/tablecalc';
 
 // Import the custom select component
@@ -15,6 +16,8 @@ type PageProps = {
     onRowsPerPage?: (row: number, page: number) => void;
     onPagination?: (row: number, page: number) => void;
   };
+  labels?: QbsTableLabels;
+  dataTheme?: string;
 };
 
 const PageIndex = ({ currentPage, handleFirst, pageCount }) => {
@@ -52,7 +55,8 @@ const PageIndex = ({ currentPage, handleFirst, pageCount }) => {
   return <>{renderPageNumbers()}</>;
 };
 
-const Pagination: FC<PageProps> = ({ paginationProps }) => {
+const Pagination: FC<PageProps> = ({ paginationProps, labels: labelsProp, dataTheme }) => {
+  const labels = mergeLabels(labelsProp);
   const {
     dropOptions = [10, 20, 50, 100, 200],
     currentPage = 1,
@@ -96,9 +100,12 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
   return (
     <div
       className="qbs-table-custom-pagination"
+      data-theme={dataTheme}
       style={{ display: 'flex', justifyContent: 'space-between' }}
     >
-      <div className="rows-count">{getRowDisplayRange(total, rowsPerPageState, currentPage)}</div>
+      <div className="rows-count">
+        {getRowDisplayRange(total, rowsPerPageState, currentPage, labels.showingRange)}
+      </div>
       <div className="qbs-table-pagination-right-block">
         <button
           className="qbs-table-icon-container"
@@ -194,7 +201,7 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
         </button>
       </div>
       <div className="qbs-table-pagination-flexBox">
-        <span className="qbs-table-pagination-text">Items per page</span>
+        <span className="qbs-table-pagination-text">{labels.itemsPerPage}</span>
         <CustomSelect
           options={dropData}
           selectedValue={rowsPerPageState}

package/src/index.ts

@@ -11,7 +11,7 @@ export type { ColumnProps } from './Column';
 export type { CellProps } from './Cell';
 export type { HeaderCellProps } from './HeaderCell';
 export type { ColumnGroupProps } from './ColumnGroup';
-export type { QbsTableProps } from './qbsTable/commontypes';
+export type { QbsTableProps, QbsTableLabels } from './qbsTable/commontypes';
 export type {
   StandardProps,
   SortType,

package/src/less/qbs-table.less

@@ -104,12 +104,156 @@
   }
 }
 .qbs-table[data-theme='dark'] {
-  background-color: #333333;
-  color: #ffffff;
+  background-color: #1f1f1f;
+  color: #f5f5f5;
+
+  .qbs-table-border-wrap {
+    border-color: #3d3d3d;
+    background: #262626;
+  }
+
+  .qbs-table-toolbar-container,
+  .qbs-table-toolbar,
+  .qbs-table-toolbar-sub-container,
+  .sub-qbs-table-toolbar {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-search-container {
+    .input {
+      border-color: #4a4a4a;
+      background: #2d2d2d;
+      color: #f5f5f5;
+
+      &:hover,
+      &:focus {
+        border-color: #6b6b6b;
+        background: #2d2d2d;
+      }
+    }
+
+    .search-button,
+    .close-button {
+      color: #d1d1d1;
+      background-color: transparent;
+    }
+  }
+
+  .qbs-table-column-popup,
+  .qbs-table-popup-container {
+    background: #2d2d2d;
+    color: #f5f5f5;
+    border-color: #4a4a4a;
+  }
+
+  .qbs-table-popup-label,
+  .qbs-table-popup-value,
+  .qbs-table-reset-link {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-custom-pagination,
+  .qbs-table-pagination-text,
+  .rows-count {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-icon-container svg path {
+    stroke: #e5e5e5;
+  }
+
+  .custom-select-trigger,
+  .custom-select-options {
+    background: #2d2d2d;
+    color: #f5f5f5;
+    border-color: #4a4a4a;
+  }
+
+  .qbs-card-container {
+    border-color: #4a4a4a;
+    background: #262626;
+    color: #f5f5f5;
+  }
+
+  .nodata-title {
+    color: #f5f5f5;
+  }
+
+  .tooltiptext {
+    background-color: #3d3d3d;
+    color: #fff;
+  }
+}
+
+.qbs-table-custom-pagination[data-theme='dark'] {
+  color: #f5f5f5;
+
+  .rows-count,
+  .qbs-table-pagination-text {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-icon-container svg path {
+    stroke: #e5e5e5;
+  }
 }
+
 .rs-table-cell-content[data-theme='dark'] {
-  background-color: #333333;
-  color: #ffffff;
+  background-color: #262626;
+  color: #f5f5f5;
+}
+
+.qbs-table[data-theme='dark'] {
+  .rs-table,
+  .rs-table-body-row-wrapper,
+  .rs-table-row,
+  .rs-table-cell,
+  .rs-table-cell-group,
+  .rs-table-row-header,
+  .rs-table-row-header .rs-table-cell {
+    background-color: #262626;
+    color: #f5f5f5;
+  }
+
+  .rs-table-cell-content {
+    background-color: #262626;
+    color: #f5f5f5;
+  }
+
+  .rs-table-row-header .rs-table-cell-content,
+  .rs-table-cell-header .rs-table-cell-content {
+    background-color: #1b2028;
+    color: #f5f5f5;
+  }
+
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-content {
+    background-color: #1d2633;
+  }
+
+  .rs-table-cell {
+    border-color: #3d3d3d;
+  }
+
+  .rs-table-scrollbar {
+    background-color: #2d2d2d;
+  }
+
+  .rs-table-scrollbar-handle {
+    background-color: #5a5a5a;
+  }
+}
+
+.qbs-table[dir='rtl'] {
+  .rs-table-cell-header .rs-table-cell-content {
+    text-align: right;
+  }
+
+  .rs-table-cell-wrap {
+    justify-content: flex-start;
+    width: 100%;
+  }
 }
 /* Dropdown container */
 .qbs-table-menu-dropdown {

package/src/qbsTable/QbsTable.tsx

@@ -6,8 +6,10 @@ import ColumnGroup from '../ColumnGroup';
 import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
+import isRTL from '../utils/isRTL';
 import useResponsiveStore from '../utils/useResponsiveStore';
 import { QbsColumnProps, QbsTableProps } from './commontypes';
+import { mergeLabels } from './labels';
 import {
   ActionCell,
   CheckCell,
@@ -60,6 +62,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   rowExpand = false,
   actionProps = [],
   theme,
+  rtl: rtlProp,
   handleMenuActions,
   onRowClick,
   expandedRowKeys,
@@ -106,12 +109,18 @@ const QbsTable: React.FC<QbsTableProps> = ({
   dropType = 'horizondal',
   rowHeight,
   isFullScreen,
-  showHeader = true
+  showHeader = true,
+  labels: labelsProp
 }) => {
+  const labels = useMemo(() => mergeLabels(labelsProp), [labelsProp]);
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
-  const dataTheme = useMemo(() => localStorage.getItem('theme') ?? theme, [theme]);
+  const dataTheme = useMemo(
+    () => theme ?? (typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) ?? 'light',
+    [theme]
+  );
+  const rtl = rtlProp ?? isRTL();
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>(null);
   const [tableViewToggle, setTableViewToggle] = useState(tableView);
@@ -273,11 +282,25 @@ const QbsTable: React.FC<QbsTableProps> = ({
     fullWidthView: fullWidthView,
     setTableFullView: setTableFullView,
     setRowViewToggle: setRowViewToggle,
-    isFullScreen: isFullScreen
+    isFullScreen: isFullScreen,
+    labels
   };
-  const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 
   useEffect(() => {
+    if (!dataTheme || typeof document === 'undefined') return;
+
+    document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
+    document.documentElement.dataset.theme = dataTheme;
+  }, [dataTheme]);
+
+  const themeToggle = useMemo(
+    () => (typeof document !== 'undefined' ? document.getElementById('themeToggle') : null),
+    []
+  ) as HTMLInputElement | null;
+
+  useEffect(() => {
+    if (theme || typeof document === 'undefined') return;
+
     const handleThemeToggle = () => {
       if (themeToggle?.checked) {
         document.body.setAttribute('data-theme', 'dark');
@@ -302,7 +325,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
       themeToggle?.removeEventListener('change', handleThemeToggle);
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
-  }, [themeToggle]);
+  }, [theme, themeToggle]);
 
   const handleExpanded = useCallback(
     (rowData: any) => {
@@ -609,7 +632,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
   };
 
   return (
-    <div className={`qbs-table ${classes.tableContainerClass}`} data-theme={dataTheme}>
+    <div
+      className={`qbs-table ${classes.tableContainerClass}`}
+      data-theme={dataTheme}
+      dir={rtl ? 'rtl' : 'ltr'}
+    >
       {toolbar && <ToolBar {...toolbarProps} />}
       <div className="qbs-table-border-wrap">
         {tableViewToggle ? (
@@ -618,6 +645,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             key={tableKey + REFRESH_KEY}
             tableKey={tableKey}
             data={data}
+            rtl={rtl}
             tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
             dataTheme={dataTheme}
             wordWrap={wordWrap}
@@ -638,7 +666,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
               renderEmpty ? (
                 renderEmpty(info)
               ) : (
-                <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
+                <NoData title={emptyTitle ?? labels.noDataFound} subtitle={emptySubTitle} />
               )
             }
             columns={columns}
@@ -760,6 +788,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
+                      labels={labels}
                     />
                   </HeaderCell>
                   <Cell />
@@ -787,6 +816,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
+                      labels={labels}
                     />
                   )}
                 </HeaderCell>
@@ -819,7 +849,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           >
             {(data?.length === 0 || !data) && !isLoading && (
               <div className="flex flex-col gap-2 p-2 mt-6 card-empty-container">
-                <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
+                <NoData title={emptyTitle ?? labels.noDataFound} subtitle={emptySubTitle} />
               </div>
             )}
             {isLoading ? (
@@ -846,6 +876,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       columns={columns}
                       tableBodyRef={tableBodyRef}
                       actionProps={actionProps}
+                      labels={labels}
                     />
                   )}
                 </div>
@@ -854,7 +885,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
           </div>
         )}
         <div>
-          {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
+          {pagination && data?.length > 0 && (
+            <Pagination paginationProps={paginationProps} labels={labels} dataTheme={dataTheme} />
+          )}
         </div>
       </div>
     </div>

package/src/qbsTable/TableCardList.tsx

@@ -7,6 +7,7 @@ import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
 import { QbsColumnProps, QbsTableProps } from './commontypes';
+import { mergeLabels } from './labels';
 import {
   ActionCell,
   CheckCell,
@@ -82,12 +83,17 @@ const QbsTable: React.FC<QbsTableProps> = ({
   autoHeight,
   emptySubTitle,
   emptyTitle,
-  dropType = 'horizontal'
+  dropType = 'horizontal',
+  labels: labelsProp
 }) => {
+  const labels = useMemo(() => mergeLabels(labelsProp), [labelsProp]);
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
-  const dataTheme = useMemo(() => localStorage.getItem('theme') ?? theme, [theme]);
+  const dataTheme = useMemo(
+    () => theme ?? (typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) ?? 'light',
+    [theme]
+  );
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>(null);
   const tableBodyRef = useRef<HTMLDivElement>(null);
@@ -228,11 +234,25 @@ const QbsTable: React.FC<QbsTableProps> = ({
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
     dataLength: data?.length,
-    searchPlaceholder: searchPlaceholder
+    searchPlaceholder: searchPlaceholder,
+    labels
   };
-  const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 
   useEffect(() => {
+    if (!dataTheme || typeof document === 'undefined') return;
+
+    document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
+    document.documentElement.dataset.theme = dataTheme;
+  }, [dataTheme]);
+
+  const themeToggle = useMemo(
+    () => (typeof document !== 'undefined' ? document.getElementById('themeToggle') : null),
+    []
+  ) as HTMLInputElement | null;
+
+  useEffect(() => {
+    if (theme || typeof document === 'undefined') return;
+
     const handleThemeToggle = () => {
       if (themeToggle?.checked) {
         document.body.setAttribute('data-theme', 'dark');
@@ -257,7 +277,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
       themeToggle?.removeEventListener('change', handleThemeToggle);
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
-  }, [themeToggle]);
+  }, [theme, themeToggle]);
 
   const handleExpanded = useCallback(
     (rowData: any) => {
@@ -463,7 +483,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             renderEmpty ? (
               renderEmpty(info)
             ) : (
-              <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
+              <NoData title={emptyTitle ?? labels.noDataFound} subtitle={emptySubTitle} />
             )
           }
           columns={columns}
@@ -581,6 +601,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
+                    labels={labels}
                   />
                 </HeaderCell>
                 <Cell />
@@ -606,6 +627,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
+                    labels={labels}
                   />
                 )}
               </HeaderCell>
@@ -622,7 +644,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
         </Table>
 
         <div>
-          {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
+          {pagination && data?.length > 0 && (
+            <Pagination paginationProps={paginationProps} labels={labels} dataTheme={dataTheme} />
+          )}
         </div>
       </div>
     </div>