@dmsi/wedgekit-react 0.0.26 → 0.0.27

package/dist/components/DataGrid.js

@@ -1,49 +1,49 @@
 "use client";
 import {
   Tooltip
-} from "../chunk-YZQNTOIF.js";
+} from "../chunk-QZGUMB7T.js";
 import {
   useInfiniteScroll
 } from "../chunk-AWQSSKCK.js";
 import {
   Subheader
-} from "../chunk-ZCBSLV7U.js";
+} from "../chunk-O4M2GISS.js";
 import {
   Select
-} from "../chunk-KDEPZ6I7.js";
+} from "../chunk-2S2Z3L56.js";
 import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-GCPJH5R6.js";
+} from "../chunk-S5KPS4IQ.js";
 import {
   Menu
-} from "../chunk-L4UM372R.js";
+} from "../chunk-VC3R5EUH.js";
 import "../chunk-Z4UCFUF7.js";
 import {
   MenuOption
-} from "../chunk-YDREJNAS.js";
+} from "../chunk-PDDZ5PMY.js";
 import "../chunk-SEKKGFM6.js";
 import {
   Search
-} from "../chunk-TWP6YSFO.js";
+} from "../chunk-SKHSGGO3.js";
 import "../chunk-WVUIIBRR.js";
 import "../chunk-4T7F5BZZ.js";
 import {
   Input
-} from "../chunk-OISE6NMA.js";
+} from "../chunk-QV2EFOYF.js";
 import {
   Label
-} from "../chunk-S7R37IUP.js";
+} from "../chunk-S5K22XTH.js";
 import {
   Button
-} from "../chunk-T6HZARR7.js";
+} from "../chunk-MZJS2ZAU.js";
 import {
   Checkbox
-} from "../chunk-N32PXOA5.js";
+} from "../chunk-UT7XCBZF.js";
 import {
   Paragraph
-} from "../chunk-UIQ733QP.js";
+} from "../chunk-VG4EPHJA.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -95,6 +95,7 @@ function adaptTableStateSetter(setter) {
   };
 }
 function DataGrid({
+  id,
   data,
   columns,
   status,
@@ -139,7 +140,7 @@ function DataGrid({
     const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
     (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
   } : setLocalRowSelection;
-  const id = useId();
+  const dndId = useId();
   const containerRef = React.useRef(null);
   const [columnVisibility, setColumnVisibility] = useState(() => {
     const initialVisibility = {};
@@ -152,8 +153,8 @@ function DataGrid({
     return initialVisibility;
   });
   const toggleColumnVisibility = useCallback(
-    (id2, isVisible) => {
-      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [id2]: isVisible }));
+    (columnId, isVisible) => {
+      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [columnId]: isVisible }));
     },
     [setColumnVisibility]
   );
@@ -206,21 +207,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;
       }
@@ -268,7 +271,7 @@ function DataGrid({
   return /* @__PURE__ */ jsx(
     DndContext,
     {
-      id,
+      id: dndId,
       collisionDetection: closestCenter,
       modifiers: [restrictToHorizontalAxis],
       onDragEnd: handleDragEnd,
@@ -278,207 +281,229 @@ function DataGrid({
         {
           items: columnOrder,
           strategy: horizontalListSortingStrategy,
-          children: /* @__PURE__ */ 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__ */ jsx(
-              "div",
-              {
-                className: "overflow-auto scrollbar-thin relative contain-paint will-change-transform",
-                ref: containerRef,
-                children: /* @__PURE__ */ jsxs("table", { className: "min-w-full grid", children: [
-                  /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 grid", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs("tr", { className: "flex w-full", children: [
-                    virtualPaddingLeft ? (
-                      // fake empty column to the left for virtualization scroll padding
-                      /* @__PURE__ */ 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__ */ jsxs(
-                          DraggableCellHeader,
-                          {
-                            header,
-                            locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
-                            center: centerHeader,
-                            width: customHeaderWidth,
-                            className: clsx(
-                              header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                              "group"
-                            ),
-                            children: [
-                              /* @__PURE__ */ 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__ */ jsx(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                              !((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked) && /* @__PURE__ */ jsx(
-                                "div",
+          children: /* @__PURE__ */ 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__ */ jsx(
+                  "div",
+                  {
+                    className: "overflow-auto scrollbar-thin relative contain-paint will-change-transform",
+                    ref: containerRef,
+                    children: /* @__PURE__ */ jsxs("table", { className: "min-w-full grid", children: [
+                      /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 grid", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs("tr", { className: "flex w-full", children: [
+                        virtualPaddingLeft ? (
+                          // fake empty column to the left for virtualization scroll padding
+                          /* @__PURE__ */ 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__ */ 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: clsx(
+                                  header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                                  "group"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ 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__ */ jsx(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                                  !((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked) && /* @__PURE__ */ 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__ */ jsx(React.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ 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__ */ 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__ */ jsx(React.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ jsx(
-                        DataGridCell,
-                        {
-                          type: "header",
-                          component: "checkbox",
-                          locked: (_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.locked,
-                          children: /* @__PURE__ */ jsx(
-                            Checkbox,
+                            }
+                          ) : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          ) }, header.id);
+                        }),
+                        virtualPaddingRight ? (
+                          //fake empty column to the right for virtualization scroll padding
+                          /* @__PURE__ */ jsx(
+                            "th",
                             {
-                              checked: allSelectedAcrossPages,
-                              indeterminate: someSelectedAcrossPages,
-                              onChange: toggleSelectAllAcrossPages
+                              style: { display: "flex", width: virtualPaddingRight }
                             }
                           )
-                        }
-                      ) : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      ) }, header.id);
-                    }),
-                    virtualPaddingRight ? (
-                      //fake empty column to the right for virtualization scroll padding
+                        ) : null,
+                        enableColumnSelector && /* @__PURE__ */ jsx(
+                          ColumnSelectorHeaderCell,
+                          {
+                            id: id ? `${id}-column-selector` : void 0,
+                            table,
+                            toggleColumnVisibility,
+                            resetColumnVisibility
+                          }
+                        )
+                      ] }, headerGroup.id)) }),
                       /* @__PURE__ */ jsx(
-                        "th",
+                        TableBody,
                         {
-                          style: { display: "flex", width: virtualPaddingRight }
+                          id,
+                          columnVirtualizer,
+                          table,
+                          tableContainerRef: containerRef,
+                          virtualPaddingLeft,
+                          virtualPaddingRight,
+                          pagination,
+                          isLoadingMore,
+                          hasMore,
+                          showFilterRow,
+                          enableColumnSelector
                         }
                       )
-                    ) : null,
-                    enableColumnSelector && /* @__PURE__ */ jsx(
-                      ColumnSelectorHeaderCell,
-                      {
-                        table,
-                        toggleColumnVisibility,
-                        resetColumnVisibility
-                      }
-                    )
-                  ] }, headerGroup.id)) }),
-                  /* @__PURE__ */ jsx(
-                    TableBody,
-                    {
-                      columnVirtualizer,
-                      table,
-                      tableContainerRef: containerRef,
-                      virtualPaddingLeft,
-                      virtualPaddingRight,
-                      pagination,
-                      isLoadingMore,
-                      hasMore,
-                      showFilterRow,
-                      enableColumnSelector
-                    }
-                  )
-                ] })
-              }
-            ),
-            table.getRowModel().rows.length === 0 && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: clsx(
-                  NO_RESULTS_HEIGHT,
-                  "flex flex-col items-center justify-center",
-                  componentGap,
-                  componentPadding
+                    ] })
+                  }
+                ),
+                table.getRowModel().rows.length === 0 && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: clsx(
+                      NO_RESULTS_HEIGHT,
+                      "flex flex-col items-center justify-center",
+                      componentGap,
+                      componentPadding
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(Subheader, { color: "text-secondary-normal", children: "No Results" }),
+                      /* @__PURE__ */ jsx(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
+                    ]
+                  }
                 ),
-                children: [
-                  /* @__PURE__ */ jsx(Subheader, { color: "text-secondary-normal", children: "No Results" }),
-                  /* @__PURE__ */ jsx(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
-                ]
-              }
-            ),
-            !hideStatusBar && /* @__PURE__ */ jsxs("div", { className: "p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]", children: [
-              pagination && /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 w-min", children: [
-                  /* @__PURE__ */ 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__ */ jsx(Menu, __spreadProps(__spreadValues({}, props), { onClick: () => props.setShow(false), children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx(
-                        MenuOption,
+                !hideStatusBar && /* @__PURE__ */ jsxs("div", { className: "p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]", children: [
+                  pagination && /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 w-min", children: [
+                      /* @__PURE__ */ 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__ */ jsx(Label, { className: "whitespace-nowrap", children: "Per Page" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      iconOnly: true,
-                      leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" }),
-                      onClick: () => pagination.onPageChange(pagination.pageIndex - 1),
-                      variant: "tertiary",
-                      disabled: pagination.pageIndex === 0
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(Paragraph, { children: [
-                    pagination.pageIndex * pagination.pageSize + 1,
-                    " -",
-                    " ",
-                    Math.min(
-                      (pagination.pageIndex + 1) * pagination.pageSize,
-                      pagination.total
-                    ),
-                    " ",
-                    "of ",
-                    pagination.total
+                          renderMenu: (props) => /* @__PURE__ */ jsx(
+                            Menu,
+                            __spreadProps(__spreadValues({}, props), {
+                              id: id ? `${id}-pagesize-menu` : void 0,
+                              children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ 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__ */ jsx(Label, { children: "Per Page" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          id: id ? `${id}-prev-page-button` : void 0,
+                          iconOnly: true,
+                          leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" }),
+                          onClick: () => pagination.onPageChange(pagination.pageIndex - 1),
+                          variant: "tertiary",
+                          disabled: pagination.pageIndex === 0
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(Paragraph, { children: [
+                        pagination.pageIndex * pagination.pageSize + 1,
+                        " -",
+                        " ",
+                        Math.min(
+                          (pagination.pageIndex + 1) * pagination.pageSize,
+                          pagination.total
+                        ),
+                        " ",
+                        "of ",
+                        pagination.total
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          id: id ? `${id}-next-page-button` : void 0,
+                          iconOnly: true,
+                          leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" }),
+                          onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
+                          variant: "tertiary",
+                          disabled: (pagination.pageIndex + 1) * pagination.pageSize >= pagination.total
+                        }
+                      )
+                    ] })
                   ] }),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      iconOnly: true,
-                      leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" }),
-                      onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
-                      variant: "tertiary",
-                      disabled: (pagination.pageIndex + 1) * pagination.pageSize >= pagination.total
-                    }
-                  )
+                  status && /* @__PURE__ */ jsx(Paragraph, { children: status })
                 ] })
-              ] }),
-              status && /* @__PURE__ */ jsx(Paragraph, { children: status })
-            ] })
-          ] })
+              ]
+            }
+          )
         }
       )
     }
@@ -486,6 +511,7 @@ function DataGrid({
 }
 DataGrid.displayName = "DataGrid";
 function TableBody({
+  id,
   columnVirtualizer,
   table,
   tableContainerRef,
@@ -534,6 +560,7 @@ function TableBody({
                 return /* @__PURE__ */ 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,
@@ -543,6 +570,7 @@ function TableBody({
                     })) != null ? _e : /* @__PURE__ */ 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 : "",
@@ -562,6 +590,7 @@ function TableBody({
           return /* @__PURE__ */ jsx(
             TableBodyRow,
             {
+              id,
               columnVirtualizer,
               row,
               rowVirtualizer,
@@ -584,7 +613,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__ */ jsx(LoadingCell, { column: column.columnDef }, column.id))
+            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx(LoadingCell, { id, column: column.columnDef }, column.id))
           }
         )
       ]
@@ -592,6 +621,7 @@ function TableBody({
   );
 }
 function TableBodyRow({
+  id,
   columnVirtualizer,
   row,
   // rowVirtualizer,
@@ -627,15 +657,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__ */ jsx(React.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ jsx(DragAlongCell, { cell, children: /* @__PURE__ */ jsx(
-            Tooltip,
+          return ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.useCustomRenderer) ? /* @__PURE__ */ jsx(React.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ jsx(
+            DragAlongCell,
             {
-              showOnTruncation: true,
-              message: cell.getValue(),
-              position: "bottom",
-              children: /* @__PURE__ */ jsx(Paragraph, { addOverflow: true, tall: true, children: cell.getValue() })
-            }
-          ) }, cell.id);
+              id: id ? `${id}-cell-${cell.id}` : void 0,
+              cell,
+              children: /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  id: id ? `${id}-tooltip-${cell.id}` : void 0,
+                  showOnTruncation: true,
+                  message: cell.getValue(),
+                  position: "bottom",
+                  children: /* @__PURE__ */ jsx(Paragraph, { addOverflow: true, tall: true, children: cell.getValue() })
+                }
+              )
+            },
+            cell.id
+          );
         }),
         virtualPaddingRight ? (
           // fake empty column to the right for virtualization scroll padding
@@ -648,25 +687,36 @@ function TableBodyRow({
   );
 }
 var LoadingCell = ({
+  id,
   column
 }) => {
   const key = `loading-${column.id}`;
   if (column.cell === "checkbox") {
-    return /* @__PURE__ */ jsx(DataGridCell, { children: /* @__PURE__ */ jsx(Checkbox, { disabled: true }) }, key);
+    return /* @__PURE__ */ jsx(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ jsx(Checkbox, { id: id ? `${id}-${key}-checkbox` : void 0, disabled: true }) }, key);
   }
   if (column.cell === "input") {
-    return /* @__PURE__ */ jsx(DataGridCell, { component: "input", children: /* @__PURE__ */ jsx(
-      Input,
+    return /* @__PURE__ */ jsx(
+      DataGridCell,
       {
-        align: "left",
-        disabled: true,
-        wrapperClassName: "!rounded-none !border-0"
-      }
-    ) }, key);
+        id: id ? `${id}-${key}` : void 0,
+        component: "input",
+        children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: id ? `${id}-${key}-input` : void 0,
+            align: "left",
+            disabled: true,
+            wrapperClassName: "!rounded-none !border-0"
+          }
+        )
+      },
+      key
+    );
   }
-  return /* @__PURE__ */ jsx(DataGridCell, { children: /* @__PURE__ */ 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__ */ jsx(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ 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
@@ -676,6 +726,7 @@ function ColumnSelectorHeaderCell({
   return /* @__PURE__ */ jsxs(
     DataGridCell,
     {
+      id,
       width: "48",
       type: "header",
       color: "text-secondary-normal",
@@ -684,6 +735,7 @@ function ColumnSelectorHeaderCell({
         /* @__PURE__ */ jsx(
           Button,
           {
+            id: id ? `${id}-button` : void 0,
             onClick: () => setShow((prev) => !prev),
             variant: "navigation",
             iconOnly: true,
@@ -693,6 +745,7 @@ function ColumnSelectorHeaderCell({
         /* @__PURE__ */ jsxs(
           Menu,
           {
+            id: id ? `${id}-menu` : void 0,
             positionTo: ref,
             position: "bottom-right",
             show,
@@ -701,6 +754,7 @@ function ColumnSelectorHeaderCell({
               /* @__PURE__ */ jsx(
                 Button,
                 {
+                  id: id ? `${id}-reset-button` : void 0,
                   variant: "tertiary",
                   onClick: () => {
                     resetColumnVisibility();
@@ -715,6 +769,7 @@ function ColumnSelectorHeaderCell({
               }).map((column) => /* @__PURE__ */ jsx(
                 ColumnSelectorMenuOption,
                 {
+                  id: id ? `${id}-option-${column.id}` : void 0,
                   column,
                   toggleColumnVisibility
                 },
@@ -728,14 +783,16 @@ function ColumnSelectorHeaderCell({
   );
 }
 function ColumnSelectorMenuOption({
+  id,
   column,
   toggleColumnVisibility
 }) {
   const [isVisible, setIsVisible] = useState(column.getIsVisible());
   const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
-  return /* @__PURE__ */ jsx(MenuOption, { selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(MenuOption, { id, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ jsx(
     Checkbox,
     {
+      id: id ? `${id}-checkbox` : void 0,
       label: label != null ? label : "Unknown",
       checked: isVisible,
       onChange: (e) => {