@dmsi/wedgekit-react 0.0.25 → 0.0.27

package/dist/components/DataGrid.cjs

@@ -214,7 +214,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -227,7 +228,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -317,6 +319,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -324,7 +327,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -379,7 +382,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -388,12 +392,15 @@ var Paragraph = (_a) => {
     "tall",
     "addOverflow",
     "children",
-    "as"
+    "as",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Element,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx4.default)(
         typography.paragraph,
         className,
@@ -424,7 +431,8 @@ var Checkbox = (_a) => {
     checked,
     onChange,
     indeterminate,
-    paragraphClassName
+    paragraphClassName,
+    id
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -433,7 +441,8 @@ var Checkbox = (_a) => {
     "checked",
     "onChange",
     "indeterminate",
-    "paragraphClassName"
+    "paragraphClassName",
+    "id"
   ]);
   const selected = indeterminate || checked;
   const normalClassName = (0, import_clsx5.default)(
@@ -461,6 +470,8 @@ var Checkbox = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "label",
     {
+      id,
+      htmlFor: `${id}-input`,
       className: (0, import_clsx5.default)(
         "flex items-center",
         componentGap,
@@ -472,12 +483,12 @@ var Checkbox = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",
             __spreadValues({
+              id: id ? `${id}-input` : void 0,
               type: "checkbox",
               className: "sr-only peer",
               disabled,
               checked: selected,
               onChange: handleOnChange,
-              id: props.id,
               "data-indeterminate": indeterminate
             }, props)
           ),
@@ -503,6 +514,7 @@ var Checkbox = (_a) => {
         label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Paragraph,
           {
+            id: id ? `${id}-label` : void 0,
             as: "span",
             padded: true,
             className: (0, import_clsx5.default)(
@@ -597,18 +609,21 @@ var Label = (_a) => {
     padded,
     className,
     color,
-    align
+    align,
+    id
   } = _b, props = __objRest(_b, [
     "as",
     "padded",
     "className",
     "color",
-    "align"
+    "align",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx6.default)(
         typography.label,
         align === "left" && "text-left",
@@ -663,6 +678,7 @@ function formatCurrencyDisplay(value) {
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -679,6 +695,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -700,6 +717,7 @@ var InputBase = (_a) => {
     "data-focus": focus || null
   };
   const inputRef = (0, import_react2.useRef)(null);
+  const inputId = `${id}-input`;
   (0, import_react2.useEffect)(() => {
     var _a2;
     const input = inputRef.current;
@@ -740,6 +758,8 @@ var InputBase = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "label",
     {
+      id,
+      htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx7.default)(
         "w-full flex flex-col",
@@ -753,6 +773,7 @@ var InputBase = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Label,
             {
+              id: id ? `${id}-label` : void 0,
               className: (0, import_clsx7.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
@@ -789,7 +810,7 @@ var InputBase = (_a) => {
                   type,
                   required
                 }, props), attributes), {
-                  id: props.id,
+                  id: inputId,
                   className: (0, import_clsx7.default)(
                     "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
                     "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -807,7 +828,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -821,7 +842,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -830,7 +852,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = (0, import_react2.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react2.useState)("");
@@ -856,7 +879,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+    const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+      id
+    }), getDecimalPlaceholder(decimals)), {
       value: propValue
     });
     switch (variant) {
@@ -903,6 +928,7 @@ var Input = (_a) => {
         return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Icon,
           {
+            id: id ? `${id}-clear-button` : void 0,
             name: "close",
             onClick: handleSearchReset,
             className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
@@ -1034,23 +1060,23 @@ Percentage.displayName = "Percentage";
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Search = (_a) => {
   var _b = _a, {
+    id,
     label,
     error,
     children,
     readOnly,
     renderMenu,
     onClick,
-    className,
     wrapperClassName,
     removeRoundness
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "error",
     "children",
     "readOnly",
     "renderMenu",
     "onClick",
-    "className",
     "wrapperClassName",
     "removeRoundness"
   ]);
@@ -1073,6 +1099,7 @@ var Search = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Input,
       __spreadValues({
+        id,
         variant: "search",
         inputContainerRef,
         ref: inputRef,
@@ -1096,10 +1123,14 @@ var Search = (_a) => {
           setShow(true);
           if (["ArrowUp", "ArrowDown"].includes(e.key)) {
             e.preventDefault();
-            const menu = document.querySelector(`[data-menu="${searchMenuName}"]`);
+            const menu = document.querySelector(
+              `[data-menu="${searchMenuName}"]`
+            );
             const selectedMenuOption = menu == null ? void 0 : menu.querySelector("[data-selected]");
             if (selectedMenuOption) {
-              const allMenuOptions = Array.from((menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []);
+              const allMenuOptions = Array.from(
+                (menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []
+              );
               const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
               let targetOption;
               if (e.key === "ArrowDown") {
@@ -1109,7 +1140,9 @@ var Search = (_a) => {
               }
               targetOption == null ? void 0 : targetOption.focus();
             } else {
-              const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector('[role="menuitem"]:last-child');
+              const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector(
+                '[role="menuitem"]:last-child'
+              );
               toFocusMenuOption == null ? void 0 : toFocusMenuOption.focus();
             }
           }
@@ -1121,6 +1154,7 @@ var Search = (_a) => {
       }, props)
     ),
     renderMenu ? renderMenu({
+      id: `${id}-menu`,
       positionTo: inputContainerRef,
       show,
       setShow,
@@ -1478,6 +1512,7 @@ function findDocumentRoot(element) {
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var Menu = (_a) => {
   var _b = _a, {
+    id,
     children,
     className,
     ref,
@@ -1494,6 +1529,7 @@ var Menu = (_a) => {
     autoFocusOff,
     menuName
   } = _b, props = __objRest(_b, [
+    "id",
     "children",
     "className",
     "ref",
@@ -1573,6 +1609,7 @@ var Menu = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       __spreadProps(__spreadValues({
+        id,
         ref: setRefs,
         className: (0, import_clsx8.default)(
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
@@ -1707,6 +1744,7 @@ var import_clsx9 = __toESM(require("clsx"), 1);
 var import_react7 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var MenuOption = ({
+  id,
   children,
   disabled = false,
   variant = "normal",
@@ -1778,6 +1816,7 @@ var MenuOption = ({
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       __spreadProps(__spreadValues({
+        id,
         ref: actualRef,
         className: (0, import_clsx9.default)(
           "flex items-center cursor-pointer w-full text-left relative outline-none",
@@ -1818,7 +1857,15 @@ var MenuOption = ({
         onMouseLeave: handleMouseLeave,
         "data-submenu-parent": menuId.current,
         "data-menu-level": subMenuLevel + 1,
-        children: subMenu({ menuId: menuId.current, positionTo: actualRef, mobilePositionTo, position: "right", subMenuLevel, mobileBackMenuOption, mobileHide: isMobile && activeMenu !== menuId.current })
+        children: subMenu({
+          menuId: menuId.current,
+          positionTo: actualRef,
+          mobilePositionTo,
+          position: "right",
+          subMenuLevel,
+          mobileBackMenuOption,
+          mobileHide: isMobile && activeMenu !== menuId.current
+        })
       }
     )
   ] });
@@ -1837,6 +1884,7 @@ var MenuOption = ({
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       MenuOption,
       {
+        id: id ? `${id}-back` : void 0,
         onClick: () => {
           closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
         },
@@ -1852,7 +1900,10 @@ function highlightMatch(text, searchValue) {
   if (!searchValue || !searchValue.trim()) {
     return text;
   }
-  const regex = new RegExp(`(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+  const regex = new RegExp(
+    `(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
+    "gi"
+  );
   const parts = text.split(regex);
   return parts.map(
     (part, index) => regex.test(part) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-bold", children: part }, index) : part
@@ -1864,6 +1915,7 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var DataGridCell = (0, import_react8.memo)(
   (_a) => {
     var _b = _a, {
+      id,
       type = "default",
       component = "static",
       children,
@@ -1879,6 +1931,7 @@ var DataGridCell = (0, import_react8.memo)(
       center,
       width
     } = _b, props = __objRest(_b, [
+      "id",
       "type",
       "component",
       "children",
@@ -1960,6 +2013,7 @@ var DataGridCell = (0, import_react8.memo)(
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Element,
       __spreadProps(__spreadValues({
+        id,
         className: (0, import_clsx10.default)("flex", !width && "flex-1"),
         style: { width }
       }, props), {
@@ -1987,11 +2041,13 @@ function DraggableCellHeader(_a) {
   var _b = _a, {
     header,
     children,
-    locked = false
+    locked = false,
+    id
   } = _b, props = __objRest(_b, [
     "header",
     "children",
-    "locked"
+    "locked",
+    "id"
   ]);
   var _a2;
   const { attributes, isDragging, listeners, setNodeRef, transform, node } = (0, import_sortable.useSortable)({
@@ -2029,6 +2085,7 @@ function DraggableCellHeader(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     DataGridCell,
     __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
+      id,
       locked,
       type: "header",
       component: "header",
@@ -2044,6 +2101,7 @@ function DraggableCellHeader(_a) {
         header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Menu,
           {
+            id: id ? `${id}-menu` : void 0,
             ref: menuRootRef,
             positionTo: node,
             show: showMenu,
@@ -2051,12 +2109,16 @@ function DraggableCellHeader(_a) {
             mobileHide,
             children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               MenuOption,
-              __spreadProps(__spreadValues({}, subMenuListeners), {
+              __spreadProps(__spreadValues({
+                id: id ? `${id}-filter-option` : void 0
+              }, subMenuListeners), {
                 subMenu: (_b2) => {
                   var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
                   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     Menu,
-                    __spreadProps(__spreadValues({}, props2), {
+                    __spreadProps(__spreadValues({
+                      id: id ? `${id}-filter-submenu` : void 0
+                    }, props2), {
                       show: isMenuActive(menuId, subMenuLevel),
                       ref: (el) => {
                         registerSubMenu(menuId, el);
@@ -2065,6 +2127,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_clsx10.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           Search,
                           {
+                            id: id ? `${id}-filter-search` : void 0,
                             onChange: (event) => {
                               setFilter(event.target.value);
                             },
@@ -2079,6 +2142,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           MenuOption,
                           {
+                            id: id ? `${id}-filter-contains` : void 0,
                             onClick: handleFilterFnChange,
                             before: menuOptionIcon("includesString"),
                             children: "Contains"
@@ -2087,6 +2151,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           MenuOption,
                           {
+                            id: id ? `${id}-filter-startswith` : void 0,
                             onClick: handleFilterFnChange,
                             before: menuOptionIcon("startsWith"),
                             children: "Starts with"
@@ -2095,6 +2160,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           MenuOption,
                           {
+                            id: id ? `${id}-filter-endswith` : void 0,
                             onClick: handleFilterFnChange,
                             before: menuOptionIcon("endsWith"),
                             children: "Ends with"
@@ -2171,6 +2237,7 @@ var import_clsx11 = __toESM(require("clsx"), 1);
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Select = (_a) => {
   var _b = _a, {
+    id,
     label,
     error,
     children,
@@ -2183,6 +2250,7 @@ var Select = (_a) => {
     displayValue,
     value
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "error",
     "children",
@@ -2211,6 +2279,7 @@ var Select = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       InputBase,
       __spreadProps(__spreadValues({
+        id,
         inputContainerRef,
         ref: inputRef,
         label,
@@ -2250,6 +2319,7 @@ var Select = (_a) => {
       })
     ),
     renderMenu ? renderMenu({
+      id: `${id}-menu`,
       positionTo: inputContainerRef,
       show,
       setShow,
@@ -2269,19 +2339,22 @@ var Subheader = (_a) => {
     as = "span",
     align,
     color,
-    tall
+    tall,
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "align",
     "color",
-    "tall"
+    "tall",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx12.default)(
         typography.subheader,
         className,
@@ -2306,6 +2379,7 @@ var import_react10 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Tooltip = ({
+  id,
   message,
   position = "top",
   children,
@@ -2314,7 +2388,6 @@ var Tooltip = ({
 }) => {
   const ref = (0, import_react10.useRef)(null);
   const tooltipRef = (0, import_react10.useRef)(null);
-  const [isTruncated, setIsTruncated] = (0, import_react10.useState)(false);
   const [tooltipPosition, setTooltipPosition] = (0, import_react10.useState)({ top: 0, left: 0 });
   const [isVisible, setIsVisible] = (0, import_react10.useState)(false);
   const [removeOpacity, setRemoveOpacity] = (0, import_react10.useState)(false);
@@ -2372,6 +2445,7 @@ var Tooltip = ({
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
+      id,
       ref,
       className: "relative inline-grid grid-cols-[auto_1fr] items-center",
       onMouseEnter: handleMouseEnter,
@@ -2382,6 +2456,7 @@ var Tooltip = ({
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
+              id: id ? `${id}-message` : void 0,
               ref: tooltipRef,
               style: {
                 position: "fixed",
@@ -2407,9 +2482,8 @@ var Tooltip = ({
     if (showOnTruncation && ref.current) {
       const paragraph = ref.current.querySelector("p");
       if (paragraph) {
-        const isTruncated2 = paragraph.scrollWidth > paragraph.clientWidth;
-        setIsTruncated(isTruncated2);
-        return isTruncated2;
+        const isTruncated = paragraph.scrollWidth > paragraph.clientWidth;
+        return isTruncated;
       }
     }
     return false;
@@ -2462,6 +2536,7 @@ function adaptTableStateSetter(setter) {
   };
 }
 function DataGrid({
+  id,
   data,
   columns,
   status,
@@ -2506,7 +2581,7 @@ function DataGrid({
     const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
     (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
   } : setLocalRowSelection;
-  const id = (0, import_react12.useId)();
+  const dndId = (0, import_react12.useId)();
   const containerRef = import_react12.default.useRef(null);
   const [columnVisibility, setColumnVisibility] = (0, import_react12.useState)(() => {
     const initialVisibility = {};
@@ -2519,8 +2594,8 @@ function DataGrid({
     return initialVisibility;
   });
   const toggleColumnVisibility = (0, import_react12.useCallback)(
-    (id2, isVisible) => {
-      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [id2]: isVisible }));
+    (columnId, isVisible) => {
+      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [columnId]: isVisible }));
     },
     [setColumnVisibility]
   );
@@ -2573,21 +2648,23 @@ function DataGrid({
     { length: totalRowCount != null ? totalRowCount : data.length },
     (_, i) => String(i + 1)
   );
-  const allSelectedAcrossPages = allRowIds.every((id2) => rowSelection[id2]);
-  const someSelectedAcrossPages = !allSelectedAcrossPages && allRowIds.some((id2) => rowSelection[id2]);
+  const allSelectedAcrossPages = allRowIds.every(
+    (rowId) => rowSelection[rowId]
+  );
+  const someSelectedAcrossPages = !allSelectedAcrossPages && allRowIds.some((rowId) => rowSelection[rowId]);
   const toggleSelectAllAcrossPages = () => {
     setRowSelection((prev) => {
       const isSelecting = !allSelectedAcrossPages;
       if (isSelecting) {
         const newSelection = {};
-        for (const id2 of allRowIds) {
-          newSelection[id2] = true;
+        for (const rowId of allRowIds) {
+          newSelection[rowId] = true;
         }
         return __spreadValues(__spreadValues({}, prev), newSelection);
       } else {
         const updatedSelection = __spreadValues({}, prev);
-        for (const id2 of allRowIds) {
-          delete updatedSelection[id2];
+        for (const rowId of allRowIds) {
+          delete updatedSelection[rowId];
         }
         return updatedSelection;
       }
@@ -2635,7 +2712,7 @@ function DataGrid({
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_core.DndContext,
     {
-      id,
+      id: dndId,
       collisionDetection: import_core.closestCenter,
       modifiers: [import_modifiers.restrictToHorizontalAxis],
       onDragEnd: handleDragEnd,
@@ -2645,204 +2722,226 @@ function DataGrid({
         {
           items: columnOrder,
           strategy: import_sortable2.horizontalListSortingStrategy,
-          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "div",
-              {
-                className: "overflow-auto scrollbar-thin relative contain-paint will-change-transform",
-                ref: containerRef,
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "min-w-full grid", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { className: "flex w-full", children: [
-                    virtualPaddingLeft ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                      "th",
-                      {
-                        style: { display: "flex", width: virtualPaddingLeft }
-                      }
-                    ) : null,
-                    virtualColumns.map((virtualColumn) => {
-                      var _a2, _b2, _c2, _d2, _e2;
-                      const header = headerGroup.headers[virtualColumn.index];
-                      if (typeof header.column.columnDef.header === "string") {
-                        const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
-                        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-                          DraggableCellHeader,
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "div",
+            {
+              id,
+              className: "flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "div",
+                  {
+                    className: "overflow-auto scrollbar-thin relative contain-paint will-change-transform",
+                    ref: containerRef,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "min-w-full grid", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { className: "flex w-full", children: [
+                        virtualPaddingLeft ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                          "th",
                           {
-                            header,
-                            locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
-                            center: centerHeader,
-                            width: customHeaderWidth,
-                            className: (0, import_clsx14.default)(
-                              header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                              "group"
-                            ),
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
-                              getSortIcon(header.column.getIsSorted()),
-                              !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
-                                header.column.getNextSortingOrder(),
-                                true
-                              ),
-                              header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                              !((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                                "div",
+                            style: { display: "flex", width: virtualPaddingLeft }
+                          }
+                        ) : null,
+                        virtualColumns.map((virtualColumn) => {
+                          var _a2, _b2, _c2, _d2, _e2;
+                          const header = headerGroup.headers[virtualColumn.index];
+                          if (typeof header.column.columnDef.header === "string") {
+                            const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
+                            return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                              DraggableCellHeader,
+                              {
+                                id: id ? `${id}-header-${header.id}` : void 0,
+                                header,
+                                locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
+                                center: centerHeader,
+                                width: customHeaderWidth,
+                                className: (0, import_clsx14.default)(
+                                  header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                                  "group"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                  getSortIcon(header.column.getIsSorted()),
+                                  !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
+                                    header.column.getNextSortingOrder(),
+                                    true
+                                  ),
+                                  header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                                  !((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                                    "div",
+                                    {
+                                      onDoubleClick: (e) => {
+                                        e.stopPropagation();
+                                        header.column.resetSize();
+                                      },
+                                      onMouseDown: (e) => {
+                                        e.stopPropagation();
+                                        header.getResizeHandler()(e);
+                                      },
+                                      onTouchStart: (e) => {
+                                        e.stopPropagation();
+                                        header.getResizeHandler()(e);
+                                      },
+                                      className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                                    }
+                                  )
+                                ]
+                              },
+                              header.id
+                            );
+                          }
+                          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            DataGridCell,
+                            {
+                              id: id ? `${id}-header-${header.id}` : void 0,
+                              type: "header",
+                              component: "checkbox",
+                              locked: (_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.locked,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                                Checkbox,
                                 {
-                                  onDoubleClick: (e) => {
-                                    e.stopPropagation();
-                                    header.column.resetSize();
-                                  },
-                                  onMouseDown: (e) => {
-                                    e.stopPropagation();
-                                    header.getResizeHandler()(e);
-                                  },
-                                  onTouchStart: (e) => {
-                                    e.stopPropagation();
-                                    header.getResizeHandler()(e);
-                                  },
-                                  className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                                  id: id ? `${id}-select-all-checkbox` : void 0,
+                                  checked: allSelectedAcrossPages,
+                                  indeterminate: someSelectedAcrossPages,
+                                  onChange: toggleSelectAllAcrossPages
                                 }
                               )
-                            ]
-                          },
-                          header.id
-                        );
-                      }
-                      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                        DataGridCell,
-                        {
-                          type: "header",
-                          component: "checkbox",
-                          locked: (_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.locked,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                            Checkbox,
+                            }
+                          ) : (0, import_react_table.flexRender)(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          ) }, header.id);
+                        }),
+                        virtualPaddingRight ? (
+                          //fake empty column to the right for virtualization scroll padding
+                          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            "th",
                             {
-                              checked: allSelectedAcrossPages,
-                              indeterminate: someSelectedAcrossPages,
-                              onChange: toggleSelectAllAcrossPages
+                              style: { display: "flex", width: virtualPaddingRight }
                             }
                           )
-                        }
-                      ) : (0, import_react_table.flexRender)(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      ) }, header.id);
-                    }),
-                    virtualPaddingRight ? (
-                      //fake empty column to the right for virtualization scroll padding
+                        ) : null,
+                        enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                          ColumnSelectorHeaderCell,
+                          {
+                            id: id ? `${id}-column-selector` : void 0,
+                            table,
+                            toggleColumnVisibility,
+                            resetColumnVisibility
+                          }
+                        )
+                      ] }, headerGroup.id)) }),
                       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                        "th",
+                        TableBody,
                         {
-                          style: { display: "flex", width: virtualPaddingRight }
+                          id,
+                          columnVirtualizer,
+                          table,
+                          tableContainerRef: containerRef,
+                          virtualPaddingLeft,
+                          virtualPaddingRight,
+                          pagination,
+                          isLoadingMore,
+                          hasMore,
+                          showFilterRow,
+                          enableColumnSelector
                         }
                       )
-                    ) : null,
-                    enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                      ColumnSelectorHeaderCell,
-                      {
-                        table,
-                        toggleColumnVisibility,
-                        resetColumnVisibility
-                      }
-                    )
-                  ] }, headerGroup.id)) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                    TableBody,
-                    {
-                      columnVirtualizer,
-                      table,
-                      tableContainerRef: containerRef,
-                      virtualPaddingLeft,
-                      virtualPaddingRight,
-                      pagination,
-                      isLoadingMore,
-                      hasMore,
-                      showFilterRow,
-                      enableColumnSelector
-                    }
-                  )
-                ] })
-              }
-            ),
-            table.getRowModel().rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-              "div",
-              {
-                className: (0, import_clsx14.default)(
-                  NO_RESULTS_HEIGHT,
-                  "flex flex-col items-center justify-center",
-                  componentGap,
-                  componentPadding
+                    ] })
+                  }
                 ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Subheader, { color: "text-secondary-normal", children: "No Results" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
-                ]
-              }
-            ),
-            !hideStatusBar && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]", children: [
-              pagination && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1 w-min", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                    Select,
-                    {
-                      wrapperClassName: "!w-20",
-                      value: pagination.pageSize.toString(),
-                      onChange: (e) => {
-                        var _a2;
-                        return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, Number(e.target.value));
-                      },
-                      renderMenu: (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Menu, __spreadProps(__spreadValues({}, props), { onClick: () => props.setShow(false), children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                        MenuOption,
+                table.getRowModel().rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                  "div",
+                  {
+                    className: (0, import_clsx14.default)(
+                      NO_RESULTS_HEIGHT,
+                      "flex flex-col items-center justify-center",
+                      componentGap,
+                      componentPadding
+                    ),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Subheader, { color: "text-secondary-normal", children: "No Results" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
+                    ]
+                  }
+                ),
+                !hideStatusBar && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]", children: [
+                  pagination && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between items-center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1 w-min", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        Select,
                         {
-                          selected: pagination.pageSize === option,
-                          onClick: () => {
+                          id: id ? `${id}-pagesize-select` : void 0,
+                          wrapperClassName: "!w-20",
+                          value: pagination.pageSize.toString(),
+                          onChange: (e) => {
                             var _a2;
-                            return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, option);
+                            return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, Number(e.target.value));
                           },
-                          children: option
-                        },
-                        option
-                      )) }))
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Label, { className: "whitespace-nowrap", children: "Per Page" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                    Button,
-                    {
-                      iconOnly: true,
-                      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "chevron_left" }),
-                      onClick: () => pagination.onPageChange(pagination.pageIndex - 1),
-                      variant: "tertiary",
-                      disabled: pagination.pageIndex === 0
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Paragraph, { children: [
-                    pagination.pageIndex * pagination.pageSize + 1,
-                    " -",
-                    " ",
-                    Math.min(
-                      (pagination.pageIndex + 1) * pagination.pageSize,
-                      pagination.total
-                    ),
-                    " ",
-                    "of ",
-                    pagination.total
+                          renderMenu: (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            Menu,
+                            __spreadProps(__spreadValues({}, props), {
+                              id: id ? `${id}-pagesize-menu` : void 0,
+                              children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                                MenuOption,
+                                {
+                                  id: id ? `${id}-pagesize-option-${option}` : void 0,
+                                  selected: pagination.pageSize === option,
+                                  onClick: () => {
+                                    var _a2;
+                                    return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, option);
+                                  },
+                                  children: option
+                                },
+                                option
+                              ))
+                            })
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Label, { children: "Per Page" })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        Button,
+                        {
+                          id: id ? `${id}-prev-page-button` : void 0,
+                          iconOnly: true,
+                          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "chevron_left" }),
+                          onClick: () => pagination.onPageChange(pagination.pageIndex - 1),
+                          variant: "tertiary",
+                          disabled: pagination.pageIndex === 0
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Paragraph, { children: [
+                        pagination.pageIndex * pagination.pageSize + 1,
+                        " -",
+                        " ",
+                        Math.min(
+                          (pagination.pageIndex + 1) * pagination.pageSize,
+                          pagination.total
+                        ),
+                        " ",
+                        "of ",
+                        pagination.total
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        Button,
+                        {
+                          id: id ? `${id}-next-page-button` : void 0,
+                          iconOnly: true,
+                          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "chevron_right" }),
+                          onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
+                          variant: "tertiary",
+                          disabled: (pagination.pageIndex + 1) * pagination.pageSize >= pagination.total
+                        }
+                      )
+                    ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                    Button,
-                    {
-                      iconOnly: true,
-                      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "chevron_right" }),
-                      onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
-                      variant: "tertiary",
-                      disabled: (pagination.pageIndex + 1) * pagination.pageSize >= pagination.total
-                    }
-                  )
+                  status && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { children: status })
                 ] })
-              ] }),
-              status && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { children: status })
-            ] })
-          ] })
+              ]
+            }
+          )
         }
       )
     }
@@ -2850,6 +2949,7 @@ function DataGrid({
 }
 DataGrid.displayName = "DataGrid";
 function TableBody({
+  id,
   columnVirtualizer,
   table,
   tableContainerRef,
@@ -2898,6 +2998,7 @@ function TableBody({
                 return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   DragAlongCell,
                   {
+                    id: id ? `${id}-filter-cell-${header.id}` : void 0,
                     noPadding: true,
                     cell: header,
                     width: (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth,
@@ -2907,6 +3008,7 @@ function TableBody({
                     })) != null ? _e : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                       Search,
                       {
+                        id: id ? `${id}-filter-search-${header.id}` : void 0,
                         removeRoundness: true,
                         onChange: (e) => header.column.setFilterValue(e.target.value),
                         value: (_d = header.column.getFilterValue()) != null ? _d : "",
@@ -2926,6 +3028,7 @@ function TableBody({
           return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             TableBodyRow,
             {
+              id,
               columnVirtualizer,
               row,
               rowVirtualizer,
@@ -2948,7 +3051,7 @@ function TableBody({
               transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`
             },
             className: "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
-            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LoadingCell, { column: column.columnDef }, column.id))
+            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LoadingCell, { id, column: column.columnDef }, column.id))
           }
         )
       ]
@@ -2956,6 +3059,7 @@ function TableBody({
   );
 }
 function TableBodyRow({
+  id,
   columnVirtualizer,
   row,
   // rowVirtualizer,
@@ -2991,15 +3095,24 @@ function TableBodyRow({
         virtualColumns.map((virtualColumn) => {
           var _a;
           const cell = visibleCells[virtualColumn.index];
-          return ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DragAlongCell, { cell, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            Tooltip,
+          return ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            DragAlongCell,
             {
-              showOnTruncation: true,
-              message: cell.getValue(),
-              position: "bottom",
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { addOverflow: true, tall: true, children: cell.getValue() })
-            }
-          ) }, cell.id);
+              id: id ? `${id}-cell-${cell.id}` : void 0,
+              cell,
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                Tooltip,
+                {
+                  id: id ? `${id}-tooltip-${cell.id}` : void 0,
+                  showOnTruncation: true,
+                  message: cell.getValue(),
+                  position: "bottom",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { addOverflow: true, tall: true, children: cell.getValue() })
+                }
+              )
+            },
+            cell.id
+          );
         }),
         virtualPaddingRight ? (
           // fake empty column to the right for virtualization scroll padding
@@ -3012,25 +3125,36 @@ function TableBodyRow({
   );
 }
 var LoadingCell = ({
+  id,
   column
 }) => {
   const key = `loading-${column.id}`;
   if (column.cell === "checkbox") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Checkbox, { disabled: true }) }, key);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Checkbox, { id: id ? `${id}-${key}-checkbox` : void 0, disabled: true }) }, key);
   }
   if (column.cell === "input") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { component: "input", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      Input,
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      DataGridCell,
       {
-        align: "left",
-        disabled: true,
-        wrapperClassName: "!rounded-none !border-0"
-      }
-    ) }, key);
+        id: id ? `${id}-${key}` : void 0,
+        component: "input",
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Input,
+          {
+            id: id ? `${id}-${key}-input` : void 0,
+            align: "left",
+            disabled: true,
+            wrapperClassName: "!rounded-none !border-0"
+          }
+        )
+      },
+      key
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
 };
 function ColumnSelectorHeaderCell({
+  id,
   table,
   toggleColumnVisibility,
   resetColumnVisibility
@@ -3040,6 +3164,7 @@ function ColumnSelectorHeaderCell({
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     DataGridCell,
     {
+      id,
       width: "48",
       type: "header",
       color: "text-secondary-normal",
@@ -3048,6 +3173,7 @@ function ColumnSelectorHeaderCell({
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Button,
           {
+            id: id ? `${id}-button` : void 0,
             onClick: () => setShow((prev) => !prev),
             variant: "navigation",
             iconOnly: true,
@@ -3057,6 +3183,7 @@ function ColumnSelectorHeaderCell({
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           Menu,
           {
+            id: id ? `${id}-menu` : void 0,
             positionTo: ref,
             position: "bottom-right",
             show,
@@ -3065,6 +3192,7 @@ function ColumnSelectorHeaderCell({
               /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 Button,
                 {
+                  id: id ? `${id}-reset-button` : void 0,
                   variant: "tertiary",
                   onClick: () => {
                     resetColumnVisibility();
@@ -3079,6 +3207,7 @@ function ColumnSelectorHeaderCell({
               }).map((column) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 ColumnSelectorMenuOption,
                 {
+                  id: id ? `${id}-option-${column.id}` : void 0,
                   column,
                   toggleColumnVisibility
                 },
@@ -3092,14 +3221,16 @@ function ColumnSelectorHeaderCell({
   );
 }
 function ColumnSelectorMenuOption({
+  id,
   column,
   toggleColumnVisibility
 }) {
   const [isVisible, setIsVisible] = (0, import_react12.useState)(column.getIsVisible());
   const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuOption, { selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuOption, { id, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Checkbox,
     {
+      id: id ? `${id}-checkbox` : void 0,
       label: label != null ? label : "Unknown",
       checked: isVisible,
       onChange: (e) => {