@wavemaker-ai/react-runtime 1.0.0-rc.322 → 1.0.0-rc.324

package/components/data/list/components/StandardListItems.js

@@ -35,7 +35,7 @@ const StandardListItems = ({
     const itemId = getItemId(item, globalIndex);
     const isFirst = index === 0;
     const isLast = index === currentItems.length - 1;
-    const isActive = (Array.isArray(activeItems) || activeItems instanceof Set) && some(Array.from(activeItems), (active) => active._wmListItemId === item._wmListItemId);
+    const isActive = (Array.isArray(activeItems) || activeItems instanceof Set) && some(Array.from(activeItems), (active) => active._wmListItemId && item._wmListItemId && active._wmListItemId === item._wmListItemId);
     return /* @__PURE__ */ jsx(
       ListItemWithTemplate,
       {

package/components/data/list/components/props.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { GroupedDataItem } from "../hooks";
-import { INavigation, IDirection, IAlignment, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListBeforeDataRenderHandler } from "../props";
+import { INavigation, IDirection, IAlignment, DisableItemProp, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListBeforeDataRenderHandler } from "../props";
 import { DragEndEvent } from "@dnd-kit/core";
 export type DefaultEventHandler<T = ListItemData> = (event: React.MouseEvent, item: T) => void;
 export interface ListPaginationProps {
@@ -58,7 +58,7 @@ export interface ListItemsProps<T = ListItemData> {
     orderby?: string;
     startIndex?: number;
     endIndex?: number;
-    disableitem: boolean;
+    disableitem: DisableItemProp<T>;
     itemclass: string | ((item: T) => string | null | undefined);
     itemsPerRowClass: string;
     direction: IDirection;
@@ -71,9 +71,11 @@ export interface ListItemsProps<T = ListItemData> {
     nodatamessage: string;
     ondemandmessage: string;
     loadingicon: string;
+    loadingiconurl?: string;
     loadingdatamsg: string;
     paginationclass: string;
     isLoadingMore: boolean;
+    prefabName?: string;
     collapsible: boolean;
     showcount: boolean;
     groupCollapsed: Record<string, boolean>;
@@ -102,6 +104,8 @@ export interface ListHeaderProps {
     title?: string;
     subheading?: string;
     iconclass?: string;
+    iconurl?: string;
+    prefabName?: string;
 }
 export interface ListTemplateProps {
     children: React.ReactNode;
@@ -128,9 +132,11 @@ export interface LoadMoreButtonProps {
     paginationclass: string;
     isLoadingMore: boolean;
     loadingicon: string;
+    loadingiconurl?: string;
     loadingdatamsg: string;
     ondemandmessage: string;
     onLoadMore: () => void;
+    prefabName?: string;
 }
 export interface GroupHeaderProps {
     groupKey: string;
@@ -155,7 +161,7 @@ export interface ListItemWithTemplateProps<T extends ListItemData = ListItemData
     itemId: string;
     isFirst: boolean;
     isLast: boolean;
-    disableitem: boolean;
+    disableitem: DisableItemProp<T>;
     itemclass: string | ((item: T, index?: number) => string | null | undefined);
     itemsPerRowClass: string;
     name: string;
@@ -177,7 +183,7 @@ export interface StandardListItemsProps<T extends ListItemData = ListItemData> {
     currentPageItems: CurrentPageItemsResult<T>;
     direction: string;
     enablereorder: boolean;
-    disableitem: boolean;
+    disableitem: DisableItemProp<T>;
     itemclass: string | ((item: T, index?: number) => string | null | undefined);
     itemsPerRowClass: string;
     name: string;
@@ -198,7 +204,7 @@ export interface GroupedListItemsProps<T extends ListItemData = ListItemData> {
     groupedData: GroupedDataItem<T>[];
     paginatedGroupedData: PaginatedGroupedDataItem<T>[];
     direction: string;
-    disableitem: boolean;
+    disableitem: DisableItemProp<T>;
     itemclass: string | ((item: T, index?: number) => string | null | undefined);
     itemsPerRowClass: string;
     name: string;

package/components/data/list/hooks/props.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { DefaultEventHandler, IPaginationMeta } from "../components/props";
-import { WmListProps, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListItemEventHandler, ListSelectHandler } from "../props";
+import { WmListProps, DisableItemProp, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListItemEventHandler, ListSelectHandler } from "../props";
 export interface GroupedDataItem<T = ListItemData> {
     key: string;
     data: T[];
@@ -11,7 +11,7 @@ export type UseListDataProps<T = ListItemData> = Pick<WmListProps<T>, "datafield
 export interface UseListEventHandlersProps<T extends ListItemData = ListItemData> {
     items: T[];
     multiselect: boolean;
-    disableitem: boolean;
+    disableitem: DisableItemProp<T>;
     selectionlimit: number;
     collapsible: boolean;
     selectedItems: T[];

package/components/data/list/hooks/useListEventHandlers.js

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { useCallback, useRef, useEffect } from "react";
 import { findIndex, includes, filter, slice, min, max } from "lodash-es";
-import { getSelectedItemWidgets } from "../utils/list-helpers";
+import { getSelectedItemWidgets, resolveDisableItem } from "../utils/list-helpers";
 import { useWidgetProxy } from "../../../../context/WidgetProvider";
 import { setWidgetIndex, setWidgetPageIndex, setWidgetItem } from "../utils/widget-instance-utils";
 const useListEventHandlers = (props) => {
@@ -82,7 +82,8 @@ const useListEventHandlers = (props) => {
   );
   const handleListItemClick = useCallback(
     (event, item) => {
-      if (disableitem) return;
+      const itemIndex = findIndex(items, (i) => i === item);
+      if (resolveDisableItem(disableitem, item, itemIndex)) return;
       const selectCount = selectedItems.length;
       const isItemSelected = includes(selectedItems, item);
       const isItemActive = activeItems.has(item);

package/components/data/list/index.d.ts

@@ -8,10 +8,11 @@ declare const WmListStandalone: React.ComponentType<{
     dataset?: any;
     datasource?: import("../../../variables/live-variable").LiveVariableConfig;
     direction?: import("./props").IDirection;
-    disableitem?: boolean;
+    disableitem?: import("./props").DisableItemProp<ListItemData>;
     enablereorder?: boolean;
     groupby?: string;
     iconclass?: string;
+    iconurl?: string;
     itemclass?: string | ((item: ListItemData) => string | null | undefined);
     itemsperrow?: string;
     listclass?: string;
@@ -21,6 +22,7 @@ declare const WmListStandalone: React.ComponentType<{
     loadingdatamsg?: string;
     skeletonRows?: number;
     loadingicon?: string;
+    loadingiconurl?: string;
     maxsize?: number;
     statehandler?: StorageType;
     navigation?: import("./props").INavigation;
@@ -115,6 +117,7 @@ declare const WmListStandalone: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     showSkeleton?: boolean;
+    widget?: string;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmListStandalone as WmList };
 /**
@@ -178,5 +181,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/data/list/index.js

@@ -37,7 +37,7 @@ import { AppSpinner } from "../../common";
 import {
   WmSkeleton,
   SKELETON_REGISTRY,
-  shouldShowSkeleton
+  useShouldShowSkeleton
 } from "../../common/wm-skeleton";
 import {
   useListData,
@@ -122,9 +122,11 @@ const WmList = (props) => {
     title = "",
     subheading = "",
     iconclass = "",
+    iconurl,
     nodatamessage = LIST_MESSAGES.NO_DATA,
     loadingdatamsg = LIST_MESSAGES.LOADING,
-    loadingicon = "fa-spinner",
+    loadingicon = "fa fa-circle-o-notch",
+    loadingiconurl,
     ondemandmessage = LIST_MESSAGES.LOAD_MORE,
     // Styling Classes
     listclass = "list-group media-list",
@@ -490,7 +492,7 @@ const WmList = (props) => {
     }),
     [direction, wrap, alignment, gap, columngap]
   );
-  if (shouldShowSkeleton(props.loading, props.showSkeleton))
+  if (useShouldShowSkeleton(props.loading, props.showSkeleton))
     return /* @__PURE__ */ jsx(
       WmSkeleton,
       __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmList"]), {
@@ -515,7 +517,16 @@ const WmList = (props) => {
       "data-navigation": navigation,
       ref: ListWrapperRef,
       children: [
-        /* @__PURE__ */ jsx(ListHeader, { title, subheading, iconclass }),
+        /* @__PURE__ */ jsx(
+          ListHeader,
+          {
+            title,
+            subheading,
+            iconclass,
+            iconurl,
+            prefabName: props.prefabName
+          }
+        ),
         /* @__PURE__ */ jsx(AppSpinner, { show: (_e = datasource == null ? void 0 : datasource.loading) != null ? _e : false, spinnermessages: [loadingdatamsg] }),
         /* @__PURE__ */ jsxs(
           InlineNavigation,
@@ -570,9 +581,11 @@ const WmList = (props) => {
                         nodatamessage,
                         ondemandmessage,
                         loadingicon,
+                        loadingiconurl,
                         loadingdatamsg,
                         paginationclass,
                         isLoadingMore: listState.isLoadingMore,
+                        prefabName: props.prefabName,
                         collapsible,
                         showcount,
                         groupCollapsed: listState.groupCollapsed,

package/components/data/list/props.d.ts

@@ -25,6 +25,10 @@ export type IColumnAlignment = "start" | "center" | "end";
 export type ListItemData = Record<string, unknown> & {
     _wmListItemId?: string;
 };
+/**
+ * Per-item disable flag: static boolean or callback evaluated per list row.
+ */
+export type DisableItemProp<T = ListItemData> = boolean | ((item: T, index: number) => boolean);
 export type ListItemEventHandler = (event: React.MouseEvent, widget: unknown) => void;
 export type ListPageEventHandler = (event: React.MouseEvent | null, page: number) => void;
 export type ListReorderEventHandler<T = ListItemData> = (event: React.MouseEvent | null, data: T[], changedItem: T) => void;
@@ -64,9 +68,9 @@ export interface ListProps<T = ListItemData> {
      */
     direction?: IDirection;
     /**
-     * Whether to disable list items.
+     * Whether to disable list items (boolean or per-item callback).
      */
-    disableitem?: boolean;
+    disableitem?: DisableItemProp<T>;
     /**
      * Whether to enable reordering of list items.
      */
@@ -79,6 +83,10 @@ export interface ListProps<T = ListItemData> {
      * CSS class for the list icon.
      */
     iconclass?: string;
+    /**
+     * URL for the list icon (.svg renders inline, other URLs as image).
+     */
+    iconurl?: string;
     /**
      * CSS class or function returning a class for each list item.
      */
@@ -116,6 +124,10 @@ export interface ListProps<T = ListItemData> {
      * CSS class for the loading icon.
      */
     loadingicon?: string;
+    /**
+     * URL for the loading icon (.svg renders inline, other URLs as image).
+     */
+    loadingiconurl?: string;
     /**
      * Maximum size of the collection.
      */

package/components/data/list/utils/list-helpers.d.ts

@@ -1,4 +1,4 @@
-import { IAlignment, IDirection, ListItemData } from "../props";
+import { DisableItemProp, IAlignment, IDirection, ListItemData } from "../props";
 import { StorageType } from "@wavemaker-ai/react-runtime/utils/state-persistance";
 /**
  * Get items per row CSS classes based on configuration
@@ -20,6 +20,10 @@ export declare function hasListGroupAutoLayoutClass(layoutProps: {
     gap?: unknown;
     columngap?: unknown;
 }): boolean;
+/**
+ * Resolves disableitem prop to a boolean for a single list row.
+ */
+export declare const resolveDisableItem: <T extends ListItemData>(disableitem: DisableItemProp<T> | undefined, item: T, index: number) => boolean;
 /**
  * Get safe dataset ensuring it's always an array
  * @param dataset - Input dataset of any type

package/components/data/list/utils/list-helpers.js

@@ -42,6 +42,15 @@ function hasListGroupAutoLayoutClass(layoutProps) {
   const extra_LayoutAttrs = [wrap, alignment, gap, columngap];
   return extra_LayoutAttrs.some((v) => v !== void 0 && v !== null);
 }
+const resolveDisableItem = (disableitem, item, index) => {
+  if (!disableitem) {
+    return false;
+  }
+  if (typeof disableitem === "function") {
+    return !!disableitem(item, index);
+  }
+  return disableitem;
+};
 const flattenIfArrayOfArrays = (arr) => {
   if (arr.length === 0) return arr;
   const first = arr[0];
@@ -139,5 +148,6 @@ export {
   getSelectedItemWidgets,
   getTextAlignClass,
   hasListGroupAutoLayoutClass,
+  resolveDisableItem,
   saveListState
 };

package/components/data/pagination/components/PageSizeSelector.js

@@ -1,12 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo, memo } from "react";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import Select from "@mui/material/Select";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
+import TablePagination from "@mui/material/TablePagination";
 import { APP_LOCALE } from "../../list/utils/constants";
 import { useAppSelector } from "../../../../store";
+const EmptyPaginationActions = () => null;
+EmptyPaginationActions.displayName = "EmptyPaginationActions";
 const PageSizeSelectorComponent = ({
   pagesizeoptions = "5,10,20,50,100",
   maxResults = 10,
@@ -25,164 +23,60 @@ const PageSizeSelectorComponent = ({
     }
     return parsedOptions;
   }, [pagesizeoptions, paginationMeta == null ? void 0 : paginationMeta.size]);
-  const effectiveMaxResults = useMemo(() => {
-    return (paginationMeta == null ? void 0 : paginationMeta.size) || maxResults;
-  }, [paginationMeta == null ? void 0 : paginationMeta.size, maxResults]);
-  const rowSummary = useMemo(() => {
-    if (!dataSize) {
-      return null;
-    }
-    const startIndex = Math.min((currentPage - 1) * effectiveMaxResults + 1, dataSize);
-    const endIndex = Math.min(currentPage * effectiveMaxResults, dataSize);
-    return {
-      startIndex,
-      endIndex,
-      totalRecords: dataSize
-    };
-  }, [currentPage, effectiveMaxResults, dataSize]);
-  const handleChange = (event) => {
+  const effectiveMaxResults = (paginationMeta == null ? void 0 : paginationMeta.size) || maxResults;
+  const handleRowsPerPageChange = (event) => {
     const newValue = Number(event.target.value);
     if (onPageSizeChange) {
       onPageSizeChange(event, newValue);
     }
   };
-  return /* @__PURE__ */ jsxs(
-    Box,
+  return /* @__PURE__ */ jsx(
+    TablePagination,
     {
-      sx: {
-        display: "flex",
-        flexWrap: "wrap",
-        alignItems: "center",
-        gap: 2
-      },
+      component: "div",
       className: "pagination page-size-selector",
-      children: [
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 1
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                Typography,
-                {
-                  component: "label",
-                  sx: {
-                    fontSize: "14px",
-                    color: "text.primary",
-                    whiteSpace: "nowrap"
-                  },
-                  title: itemsPerPageLabel,
-                  children: [
-                    itemsPerPageLabel,
-                    " :"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                FormControl,
-                {
-                  size: "small",
-                  sx: {
-                    minWidth: 70,
-                    "& .MuiInputBase-root": {
-                      height: "auto"
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      id: "page-size-select",
-                      value: effectiveMaxResults,
-                      onChange: handleChange,
-                      sx: {
-                        fontSize: "14px",
-                        minHeight: "auto",
-                        "& .MuiSelect-select": {
-                          paddingTop: "6px",
-                          paddingBottom: "6px",
-                          paddingLeft: "10px",
-                          paddingRight: "32px",
-                          // Space for dropdown arrow
-                          minHeight: "auto"
-                        },
-                        "& .MuiOutlinedInput-notchedOutline": {
-                          borderColor: "rgba(0, 0, 0, 0.23)"
-                        }
-                      },
-                      MenuProps: {
-                        PaperProps: {
-                          sx: {
-                            maxHeight: 300,
-                            "& .MuiMenuItem-root": {
-                              fontSize: "14px",
-                              padding: "6px 16px",
-                              // Override any global padding
-                              margin: 0
-                              // Override any global margin
-                            },
-                            "& .MuiList-root": {
-                              padding: "8px 0"
-                              // Ensure proper list padding
-                            },
-                            "& li": {
-                              padding: 0,
-                              // Override global li padding
-                              margin: 0
-                              // Override global li margin
-                            }
-                          }
-                        },
-                        anchorOrigin: {
-                          vertical: "bottom",
-                          horizontal: "center"
-                        },
-                        transformOrigin: {
-                          vertical: "top",
-                          horizontal: "center"
-                        }
-                      },
-                      children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option, children: option }, option))
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        rowSummary && /* @__PURE__ */ jsx(
-          Box,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 0.5
-            },
-            className: "item-range",
-            children: /* @__PURE__ */ jsxs(
-              Typography,
-              {
-                sx: {
-                  fontSize: "14px",
-                  color: "text.primary"
-                },
-                children: [
-                  /* @__PURE__ */ jsxs(Box, { component: "span", children: [
-                    rowSummary.startIndex,
-                    " - ",
-                    rowSummary.endIndex
-                  ] }),
-                  /* @__PURE__ */ jsx(Box, { component: "span", sx: { mx: 0.5 }, children: "\xA0\xA0of\xA0\xA0" }),
-                  /* @__PURE__ */ jsx(Box, { component: "span", children: rowSummary.totalRecords })
-                ]
+      count: dataSize,
+      page: Math.max(0, currentPage - 1),
+      onPageChange: () => {
+      },
+      rowsPerPage: effectiveMaxResults,
+      onRowsPerPageChange: handleRowsPerPageChange,
+      rowsPerPageOptions: options,
+      labelRowsPerPage: `${itemsPerPageLabel} :`,
+      ActionsComponent: EmptyPaginationActions,
+      slotProps: {
+        toolbar: {
+          className: "items-per-page"
+        },
+        selectLabel: {
+          className: "app-label",
+          title: itemsPerPageLabel
+        },
+        select: {
+          id: "page-size-select",
+          size: "small",
+          className: "btn app-button dropdown-toggle page-size-select",
+          MenuProps: {
+            disableScrollLock: true,
+            anchorOrigin: { vertical: "top", horizontal: "left" },
+            transformOrigin: { vertical: "bottom", horizontal: "left" },
+            slotProps: {
+              paper: {
+                elevation: 0,
+                className: "dropdown-menu pagesize-options"
               }
-            )
+            }
           }
-        )
-      ]
+        },
+        menuItem: {
+          className: "dropdown-item"
+        },
+        displayedRows: dataSize ? {
+          className: "item-range"
+        } : {
+          className: "page-size-no-range"
+        }
+      }
     }
   );
 };

package/components/data/pagination/hooks/usePagination.js

@@ -821,12 +821,35 @@ const usePagination = ({
       }
     }
   }, [isServerSidePagination, totalItems, paginationMeta]);
+  const hasServerReportedPage = isServerSidePagination && (paginationMeta == null ? void 0 : paginationMeta.number) !== void 0 && (paginationMeta == null ? void 0 : paginationMeta.number) !== null;
   useEffect(() => {
+    if (hasServerReportedPage) {
+      return;
+    }
     if (initialPage !== void 0 && initialPage !== paginationState.currentPage) {
       setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: initialPage }));
       disableNavigation();
     }
-  }, [initialPage, paginationState.currentPage, disableNavigation]);
+  }, [initialPage, paginationState.currentPage, disableNavigation, hasServerReportedPage]);
+  useEffect(() => {
+    if (!isServerSidePagination) {
+      return;
+    }
+    const metaPageNumber = paginationMeta == null ? void 0 : paginationMeta.number;
+    if (metaPageNumber === void 0 || metaPageNumber === null) {
+      return;
+    }
+    const serverCurrentPage = metaPageNumber + 1;
+    if (serverCurrentPage > 0 && serverCurrentPage !== paginationState.currentPage) {
+      setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: serverCurrentPage }));
+      disableNavigation();
+    }
+  }, [
+    isServerSidePagination,
+    paginationMeta == null ? void 0 : paginationMeta.number,
+    paginationState.currentPage,
+    disableNavigation
+  ]);
   useEffect(() => {
     if (maxResults !== paginationState.currentMaxResults) {
       setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentMaxResults: maxResults }));

package/components/data/table/components/RowCells.js

@@ -76,7 +76,7 @@ const RowCells = memo(
               textAlign: (_f = cell.column.columnDef.meta) == null ? void 0 : _f.textAlign,
               backgroundColor: (_g = cell.column.columnDef.meta) == null ? void 0 : _g.backgroundColor
             }, (() => {
-              const _a2 = cell.column.columnDef.meta || {}, { className, textAlign, backgroundColor } = _a2, otherMeta = __objRest(_a2, ["className", "textAlign", "backgroundColor"]);
+              const _a2 = cell.column.columnDef.meta || {}, { className, textAlign, backgroundColor, _cell } = _a2, otherMeta = __objRest(_a2, ["className", "textAlign", "backgroundColor", "_cell"]);
               return otherMeta;
             })()), {
               fontSize: "inherit",

package/components/data/table/components/TableDataRow.js

@@ -15,7 +15,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, Fragment, useMemo } from "react";
+import { memo, Fragment, useMemo, useCallback } from "react";
 import { TableRow } from "@mui/material";
 import { RowCells } from "./RowCells";
 import { useEditedRow } from "../hooks/use-edited-rows";
@@ -44,6 +44,10 @@ const TableDataRowComponent = ({
   customColumnsRevision = 0,
   columnsVersion = 0
 }) => {
+  const handleClick = useCallback(
+    (event) => onRowClick(event, row.original, rowId),
+    [onRowClick, row.original, rowId]
+  );
   const editedTableData = useEditedRow(rowId);
   const mergedRowData = useMemo(() => {
     if (!editedTableData) {
@@ -65,7 +69,7 @@ const TableDataRowComponent = ({
       TableRow,
       {
         className: `${TABLE_CSS_CLASSES.tableRow} ${isActive ? "active" : ""} ${rowClass}`,
-        onClick: (event) => onRowClick(event, row.original, rowId),
+        onClick: handleClick,
         "data-row-id": row.index,
         role: "row",
         tabIndex: 0,
@@ -117,7 +121,16 @@ const TableDataRow = memo(TableDataRowComponent, (prev, next) => {
     "index",
     "customExpressionColumns",
     "customColumnsRevision",
-    "columnsVersion"
+    "columnsVersion",
+    // closure-captured props — stale closure if memo skips when these change
+    "onRowClick",
+    "renderExpansionCell",
+    "hasExpansion",
+    "expansionInsertIndex",
+    "ExpandedContent",
+    "onInstanceLoad",
+    "rowExpansionConfig",
+    "totalColumns"
   ];
   return keys.every((key) => prev[key] === next[key]);
 });

package/components/data/table/components/TableHeader.js

@@ -400,7 +400,7 @@ const TableHeaderComponent = memo(
                   tabIndex: 0,
                   "data-col-field": header.column.id,
                   children: [
-                    header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                    /* @__PURE__ */ jsx("span", { className: "header-data", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
                     enablesort && !enablecolumnselection && header.column.getCanSort() && /* @__PURE__ */ jsx(
                       Box,
                       {