@bwp-web/components 0.11.7 → 0.13.0

package/dist/index.cjs

@@ -51,12 +51,21 @@ __export(index_exports, {
   BiampTableToolbarExport: () => BiampTableToolbarExport,
   BiampTableToolbarFilters: () => BiampTableToolbarFilters,
   BiampTableToolbarSearch: () => BiampTableToolbarSearch,
+  BiampTableTruncatedCell: () => BiampTableTruncatedCell,
   BiampWrapper: () => BiampWrapper,
   buildCsvString: () => buildCsvString,
   exportToCsv: () => exportToCsv,
   getColumnVisibilityDirtyCount: () => getColumnVisibilityDirtyCount,
   getDefaultColumnVisibility: () => getDefaultColumnVisibility,
+  getDefaultColumnVisibilityFromDefs: () => getDefaultColumnVisibilityFromDefs,
+  getDirtyColumnVisibility: () => getDirtyColumnVisibility,
+  getOrderFieldMappings: () => getOrderFieldMappings,
+  orderToSorting: () => orderToSorting,
+  rowSelectionToSelectedIds: () => rowSelectionToSelectedIds,
+  selectedIdsToRowSelection: () => selectedIdsToRowSelection,
+  sortingToOrder: () => sortingToOrder,
   toVisibilityState: () => toVisibilityState,
+  useBiampServerSideTable: () => useBiampServerSideTable,
   useDebouncedCallback: () => useDebouncedCallback
 });
 module.exports = __toCommonJS(index_exports);
@@ -514,10 +523,10 @@ function BiampLayout({
 }
 
 // src/BiampTable/BiampTable.tsx
-var import_material6 = require("@mui/material");
+var import_material7 = require("@mui/material");
 var import_assets5 = require("@bwp-web/assets");
 var import_react_table = require("@tanstack/react-table");
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/BiampTable/BiampTableEmptyState.tsx
 var import_assets3 = require("@bwp-web/assets");
@@ -533,7 +542,7 @@ function BiampTableStatusMessage({
   children,
   ...stackProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.Stack, { alignItems: "center", gap: 2, ...stackProps, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.Stack, { alignItems: "center", gap: 1.5, ...stackProps, children: [
     (0, import_react.cloneElement)(icon, {
       "aria-hidden": true,
       sx: { width: 56, height: 56, ...icon.props.sx }
@@ -573,18 +582,63 @@ function BiampTableErrorState({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BiampTableStatusMessage, { role: "alert", icon, title, ...rest });
 }
 
-// src/BiampTable/useLoadingDelay.ts
+// src/BiampTable/BiampTableTruncatedCell.tsx
+var import_material6 = require("@mui/material");
 var import_react2 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function BiampTableTruncatedCell({
+  children
+}) {
+  const textRef = (0, import_react2.useRef)(null);
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const handleMouseEnter = (0, import_react2.useCallback)(() => {
+    const el = textRef.current;
+    if (el && el.scrollWidth > el.clientWidth) {
+      setOpen(true);
+    }
+  }, []);
+  const handleMouseLeave = (0, import_react2.useCallback)(() => {
+    setOpen(false);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_material6.Tooltip,
+    {
+      title: children,
+      open,
+      arrow: true,
+      placement: "top",
+      disableInteractive: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_material6.Box,
+        {
+          ref: textRef,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          sx: {
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            minWidth: 0
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/BiampTable/useLoadingDelay.ts
+var import_react3 = require("react");
 function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
-  const [status, setStatus] = (0, import_react2.useState)("idle");
-  const timeoutRef = (0, import_react2.useRef)(null);
+  const [status, setStatus] = (0, import_react3.useState)("idle");
+  const timeoutRef = (0, import_react3.useRef)(null);
   function clearPending() {
     if (timeoutRef.current !== null) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
   }
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (loading && status === "idle") {
       clearPending();
       timeoutRef.current = setTimeout(() => {
@@ -600,12 +654,44 @@ function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
       setStatus("idle");
     }
   }, [loading, delay, minDuration, status]);
-  (0, import_react2.useEffect)(() => clearPending, []);
+  (0, import_react3.useEffect)(() => clearPending, []);
   return status === "loading" || status === "ending";
 }
 
 // src/BiampTable/BiampTable.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var overlaySx = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none"
+};
+var stickyHoverBg = {
+  ".MuiTableRow-hover:hover > &, .Mui-selected > &": {
+    bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
+  }
+};
+function cellSx(sticky, minWidth, zIndex) {
+  if (sticky) {
+    return {
+      position: "sticky",
+      [sticky]: 0,
+      zIndex,
+      width: 0,
+      whiteSpace: "nowrap",
+      textAlign: "center",
+      bgcolor: "background.paper",
+      ...zIndex < 3 && stickyHoverBg
+    };
+  }
+  const mw = minWidth ?? 40;
+  return { minWidth: mw, maxWidth: mw };
+}
 function BiampTable({
   table,
   onRowClick,
@@ -614,7 +700,9 @@ function BiampTable({
   error,
   empty,
   enableRowSelection = false,
+  enableExpanding = false,
   hideSelectAll,
+  selectChildrenWithParent = false,
   getRowLabel,
   sx,
   ...boxProps
@@ -626,15 +714,16 @@ function BiampTable({
     },
     enableRowSelection ? 48 : 0
   );
-  const containerRef = (0, import_react3.useRef)(null);
+  const containerRef = (0, import_react4.useRef)(null);
   const showLoading = useLoadingDelay(!!loading);
   const rows = table.getRowModel().rows;
+  const hasExpandableRows = enableExpanding && rows.some((r) => r.getCanExpand());
   const showError = !!error && !loading;
   const showEmpty = !showError && !loading && rows.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    import_material6.TableContainer,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_material7.TableContainer,
     {
-      component: import_material6.Box,
+      component: import_material7.Box,
       ...boxProps,
       ref: containerRef,
       sx: {
@@ -647,15 +736,15 @@ function BiampTable({
         ...sx
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-          import_material6.Table,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          import_material7.Table,
           {
             "aria-busy": showLoading || void 0,
             sx: { minWidth: tableMinWidth, tableLayout: "auto" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.TableRow, { children: [
-                enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  import_material6.TableCell,
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material7.TableRow, { children: [
+                enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  import_material7.TableCell,
                   {
                     padding: "checkbox",
                     sx: {
@@ -664,8 +753,8 @@ function BiampTable({
                       zIndex: 3,
                       bgcolor: "background.paper"
                     },
-                    children: !hideSelectAll && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      import_material6.Checkbox,
+                    children: !hideSelectAll && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      import_material7.Checkbox,
                       {
                         checked: table.getIsAllPageRowsSelected(),
                         indeterminate: table.getIsSomePageRowsSelected(),
@@ -678,28 +767,21 @@ function BiampTable({
                 ),
                 headerGroup.headers.map((header) => {
                   const sticky = header.column.columnDef.meta?.sticky;
-                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    import_material6.TableCell,
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    import_material7.TableCell,
                     {
                       "data-sticky": sticky || void 0,
                       sortDirection: header.column.getIsSorted() || false,
                       ...header.column.getCanSort() && {
                         "aria-sort": header.column.getIsSorted() ? header.column.getIsSorted() === "asc" ? "ascending" : "descending" : "none"
                       },
-                      sx: {
-                        minWidth: sticky ? void 0 : header.column.columnDef.meta?.minWidth ?? 40,
-                        ...sticky && {
-                          position: "sticky",
-                          [sticky]: 0,
-                          zIndex: 3,
-                          width: 0,
-                          whiteSpace: "nowrap",
-                          textAlign: "center",
-                          bgcolor: "background.paper"
-                        }
-                      },
-                      children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                        import_material6.TableSortLabel,
+                      sx: cellSx(
+                        sticky,
+                        header.column.columnDef.meta?.minWidth,
+                        3
+                      ),
+                      children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        import_material7.TableSortLabel,
                         {
                           active: !!header.column.getIsSorted(),
                           direction: header.column.getIsSorted() || "asc",
@@ -721,10 +803,10 @@ function BiampTable({
                   );
                 })
               ] }, headerGroup.id)) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.TableBody, { sx: { opacity: showLoading ? 0.3 : 1 }, children: !showError && rows.map((row) => {
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.TableBody, { sx: { opacity: showLoading ? 0.3 : 1 }, children: !showError && rows.map((row) => {
                 const clickable = onRowClick ? isRowClickable ? isRowClickable(row.original) : true : false;
-                return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                  import_material6.TableRow,
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  import_material7.TableRow,
                   {
                     hover: clickable,
                     selected: enableRowSelection ? row.getIsSelected() : void 0,
@@ -739,8 +821,8 @@ function BiampTable({
                       }
                     } : void 0,
                     children: [
-                      enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                        import_material6.TableCell,
+                      enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        import_material7.TableCell,
                         {
                           padding: "checkbox",
                           sx: {
@@ -752,12 +834,14 @@ function BiampTable({
                               bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
                             }
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                            import_material6.Checkbox,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            import_material7.Checkbox,
                             {
                               checked: row.getIsSelected(),
                               disabled: !row.getCanSelect(),
-                              onChange: row.getToggleSelectedHandler(),
+                              onChange: (e) => row.toggleSelected(e.target.checked, {
+                                selectChildren: selectChildrenWithParent
+                              }),
                               onClick: (e) => e.stopPropagation(),
                               sx: !row.getCanSelect() ? { visibility: "hidden" } : void 0,
                               slotProps: {
@@ -769,31 +853,66 @@ function BiampTable({
                           )
                         }
                       ),
-                      row.getVisibleCells().map((cell) => {
+                      row.getVisibleCells().map((cell, cellIndex, cells) => {
                         const sticky = cell.column.columnDef.meta?.sticky;
-                        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          import_material6.TableCell,
+                        const isExpandCell = enableExpanding && !sticky && cellIndex === cells.findIndex(
+                          (c) => !c.column.columnDef.meta?.sticky
+                        );
+                        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          import_material7.TableCell,
                           {
                             "data-sticky": sticky || void 0,
-                            sx: {
-                              minWidth: sticky ? void 0 : cell.column.columnDef.meta?.minWidth ?? 40,
-                              ...sticky && {
-                                position: "sticky",
-                                [sticky]: 0,
-                                zIndex: 2,
-                                width: 0,
-                                whiteSpace: "nowrap",
-                                textAlign: "center",
-                                bgcolor: "background.paper",
-                                ".MuiTableRow-hover:hover > &, .Mui-selected > &": {
-                                  bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
+                            sx: cellSx(
+                              sticky,
+                              cell.column.columnDef.meta?.minWidth,
+                              2
+                            ),
+                            children: (() => {
+                              const content = (0, import_react_table.flexRender)(
+                                cell.column.columnDef.cell,
+                                cell.getContext()
+                              );
+                              if (sticky) return content;
+                              const truncated = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BiampTableTruncatedCell, { children: content });
+                              if (!isExpandCell) return truncated;
+                              const rowLabel = getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`;
+                              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                                import_material7.Box,
+                                {
+                                  sx: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    pl: `${row.depth * 12}px`
+                                  },
+                                  children: [
+                                    row.getCanExpand() ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                      import_material7.IconButton,
+                                      {
+                                        variant: "none",
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          row.toggleExpanded();
+                                        },
+                                        "aria-label": row.getIsExpanded() ? `Collapse ${rowLabel}` : `Expand ${rowLabel}`,
+                                        "aria-expanded": row.getIsExpanded(),
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                          import_assets5.ChevronRightIcon,
+                                          {
+                                            variant: "xs",
+                                            sx: {
+                                              color: ({ palette }) => palette.text.secondary,
+                                              transition: "transform 150ms ease",
+                                              transform: row.getIsExpanded() ? "rotate(90deg)" : "rotate(0deg)"
+                                            }
+                                          }
+                                        )
+                                      }
+                                    ) : hasExpandableRows ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Box, { sx: { width: 28 } }) : null,
+                                    truncated
+                                  ]
                                 }
-                              }
-                            },
-                            children: (0, import_react_table.flexRender)(
-                              cell.column.columnDef.cell,
-                              cell.getContext()
-                            )
+                              );
+                            })()
                           },
                           cell.id
                         );
@@ -806,54 +925,22 @@ function BiampTable({
             ]
           }
         ),
-        showError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_material6.Box,
+        showError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Box, { sx: overlaySx, children: error === true ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BiampTableErrorState, { sx: { pointerEvents: "auto" } }) : error instanceof Error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          BiampTableErrorState,
           {
-            sx: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              pointerEvents: "none"
-            },
-            children: error === true ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BiampTableErrorState, { sx: { pointerEvents: "auto" } }) : error instanceof Error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              BiampTableErrorState,
-              {
-                description: error.message,
-                sx: { pointerEvents: "auto" }
-              }
-            ) : error
+            description: error.message,
+            sx: { pointerEvents: "auto" }
           }
-        ),
-        showEmpty && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_material6.Box,
-          {
-            sx: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              pointerEvents: "none"
-            },
-            children: empty && empty !== true ? empty : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BiampTableEmptyState, { sx: { pointerEvents: "auto" } })
-          }
-        )
+        ) : error }),
+        showEmpty && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Box, { sx: overlaySx, children: empty && empty !== true ? empty : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BiampTableEmptyState, { sx: { pointerEvents: "auto" } }) })
       ]
     }
   );
 }
 
 // src/BiampTable/BiampTableContainer.tsx
-var import_material7 = require("@mui/material");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_material8 = require("@mui/material");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function BiampTableContainer({
   withBorderTop = true,
   withBorderBottom = false,
@@ -861,8 +948,8 @@ function BiampTableContainer({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_material7.Stack,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_material8.Stack,
     {
       direction: "column",
       height: "100%",
@@ -880,25 +967,25 @@ function BiampTableContainer({
 }
 
 // src/BiampTable/BiampTableCellActionButton.tsx
-var import_material8 = require("@mui/material");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_material9 = require("@mui/material");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function BiampTableCellActionButton({ label, icon, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_material8.Tooltip,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_material9.Tooltip,
     {
       title: label,
       placement: "top",
       enterDelay: 500,
       enterNextDelay: 500,
       disableInteractive: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material8.IconButton, { "aria-label": label, ...props, children: icon }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.IconButton, { "aria-label": label, ...props, children: icon }) })
     }
   );
 }
 
 // src/BiampTable/BiampTableColumnVisibility.tsx
-var import_material9 = require("@mui/material");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_material10 = require("@mui/material");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function toVisibilityState(visibility) {
   return visibility;
 }
@@ -941,9 +1028,8 @@ function BiampTableColumnVisibility({
   ...popoverProps
 }) {
   const allVisible = table.getAllLeafColumns().every((col) => col.getIsVisible());
-  const someVisible = table.getAllLeafColumns().some((col) => col.getIsVisible());
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_material9.Popover,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_material10.Popover,
     {
       anchorEl,
       open: Boolean(anchorEl),
@@ -956,58 +1042,64 @@ function BiampTableColumnVisibility({
             borderRadius: "6px",
             backgroundImage: "none",
             border: `0.6px solid ${palette.dividers.secondary}`,
-            boxShadow: `0px 1px 1px 0px ${(0, import_material9.alpha)(palette.common.black, 0.05)}`,
+            boxShadow: `0px 1px 1px 0px ${(0, import_material10.alpha)(palette.common.black, 0.05)}`,
             minWidth: "150px"
           }),
           ...slotProps?.paper ?? {}
         }
       },
       ...popoverProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material9.List, { dense: true, disablePadding: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-          import_material9.ListItem,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_material10.List, { dense: true, disablePadding: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          import_material10.ListItem,
           {
+            dense: true,
             sx: columnListItemSx,
             onClick: () => table.toggleAllColumnsVisible(!allVisible),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                import_material9.Checkbox,
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                import_material10.Checkbox,
                 {
                   checked: allVisible,
-                  indeterminate: !allVisible && someVisible,
-                  size: "small",
                   slotProps: { input: { "aria-label": `${showAllLabel} columns` } }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Typography, { variant: "caption", children: showAllLabel })
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material10.Typography, { variant: "caption", fontWeight: 600, children: showAllLabel })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Box, { sx: { maxHeight: 340, overflow: "auto" }, children: table.getAllLeafColumns().map((column) => {
-          const columnName = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
-          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-            import_material9.ListItem,
-            {
-              sx: columnListItemSx,
-              onClick: column.getToggleVisibilityHandler(),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_material9.Checkbox,
-                  {
-                    checked: column.getIsVisible(),
-                    size: "small",
-                    slotProps: {
-                      input: { "aria-label": `Show ${columnName}` }
-                    }
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Typography, { variant: "caption", children: columnName })
-              ]
-            },
-            column.id
-          );
-        }) })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material10.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_material10.Box,
+          {
+            sx: { maxHeight: 340, overflow: "auto", overscrollBehavior: "none" },
+            children: table.getAllLeafColumns().map((column) => {
+              const columnName = column.columnDef.meta?.columnLabel ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
+              return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                import_material10.ListItem,
+                {
+                  dense: true,
+                  sx: columnListItemSx,
+                  onClick: column.getToggleVisibilityHandler(),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      import_material10.Checkbox,
+                      {
+                        checked: column.getIsVisible(),
+                        sx: { py: 1 },
+                        slotProps: {
+                          input: { "aria-label": `Show ${columnName}` }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material10.Typography, { variant: "caption", children: columnName })
+                  ]
+                },
+                column.id
+              );
+            })
+          }
+        )
       ] })
     }
   );
@@ -1015,11 +1107,11 @@ function BiampTableColumnVisibility({
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
 var import_assets6 = require("@bwp-web/assets");
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/BiampTable/BiampTableToolbarActionButton.tsx
-var import_material10 = require("@mui/material");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_material11 = require("@mui/material");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function BiampTableToolbarActionButton({
   label,
   icon,
@@ -1027,13 +1119,13 @@ function BiampTableToolbarActionButton({
   ...props
 }) {
   const showBadge = badgeContent != null && badgeContent !== 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_material10.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_material11.IconButton,
     {
       "aria-label": showBadge ? `${label} (${badgeContent})` : label,
       ...props,
-      children: showBadge ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        import_material10.Badge,
+      children: showBadge ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_material11.Badge,
         {
           badgeContent,
           color: "info",
@@ -1056,20 +1148,20 @@ function BiampTableToolbarActionButton({
 }
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function BiampTableToolbarColumnVisibility({
   table,
-  icon = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_assets6.ColumnsIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_assets6.ColumnsIcon, { variant: "xs" }),
   label = "Columns",
   defaultColumnVisibility,
   showAllLabel,
   ...actionButtonProps
 }) {
-  const [anchorEl, setAnchorEl] = (0, import_react4.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react5.useState)(null);
   const defaults = defaultColumnVisibility ?? getDefaultColumnVisibility(table);
   const dirtyCount = getColumnVisibilityDirtyCount(table, defaults);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       BiampTableToolbarActionButton,
       {
         label,
@@ -1079,7 +1171,7 @@ function BiampTableToolbarColumnVisibility({
         ...actionButtonProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       BiampTableColumnVisibility,
       {
         table,
@@ -1092,9 +1184,9 @@ function BiampTableToolbarColumnVisibility({
 }
 
 // src/BiampTable/BiampTablePagination.tsx
-var import_react5 = require("react");
-var import_material11 = require("@mui/material");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_material12 = require("@mui/material");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var positionMap = {
   left: "flex-start",
   center: "center",
@@ -1110,19 +1202,21 @@ function BiampTablePagination({
   ...paginationProps
 }) {
   const rowCount = table.getRowCount();
-  const lastRowCountRef = (0, import_react5.useRef)(rowCount);
+  const lastRowCountRef = (0, import_react6.useRef)(rowCount);
   if (!loading && rowCount >= 0) {
     lastRowCountRef.current = rowCount;
   }
   const stableCount = loading ? lastRowCountRef.current : rowCount;
   const { pageSize, pageIndex } = table.getState().pagination;
   const maxPage = Math.max(0, Math.ceil(stableCount / pageSize) - 1);
-  if (!loading && pageIndex > maxPage) {
-    table.setPageIndex(maxPage);
-  }
+  (0, import_react6.useEffect)(() => {
+    if (!loading && pageIndex > maxPage) {
+      table.setPageIndex(maxPage);
+    }
+  }, [loading, pageIndex, maxPage, table]);
   if (autoHide && (!stableCount || stableCount <= pageSize)) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_material11.TablePagination,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_material12.TablePagination,
     {
       component: "div",
       count: stableCount,
@@ -1153,15 +1247,15 @@ function BiampTablePagination({
 }
 
 // src/BiampTable/BiampTableToolbar.tsx
-var import_material12 = require("@mui/material");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_material13 = require("@mui/material");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function BiampTableToolbar({
   children,
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_material12.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_material13.Box,
     {
       role: "toolbar",
       display: "flex",
@@ -1179,14 +1273,14 @@ function BiampTableToolbar({
 }
 
 // src/BiampTable/BiampTableToolbarActions.tsx
-var import_material13 = require("@mui/material");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_material14 = require("@mui/material");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function BiampTableToolbarActions({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_material13.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_material14.Box,
     {
       display: "flex",
       alignItems: "center",
@@ -1200,21 +1294,21 @@ function BiampTableToolbarActions({
 }
 
 // src/BiampTable/BiampTableToolbarExport.tsx
-var import_material14 = require("@mui/material");
+var import_material15 = require("@mui/material");
 var import_assets7 = require("@bwp-web/assets");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function BiampTableToolbarExport({
   onExport,
   loading,
-  icon = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_assets7.DownloadIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_assets7.DownloadIcon, { variant: "xs" }),
   label = "Export",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     BiampTableToolbarActionButton,
     {
       label: loading ? `${label}, loading` : label,
-      icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material14.CircularProgress, { size: 20, color: "inherit" }) : icon,
+      icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material15.CircularProgress, { size: 20, color: "inherit" }) : icon,
       disabled: loading,
       onClick: onExport,
       ...props
@@ -1223,16 +1317,16 @@ function BiampTableToolbarExport({
 }
 
 // src/BiampTable/BiampTableToolbarFilters.tsx
-var import_material15 = require("@mui/material");
+var import_material16 = require("@mui/material");
 var import_assets8 = require("@bwp-web/assets");
-var import_react6 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function BiampTableToolbarFilters({
   activeFilterCount,
   children,
   onReset,
   onApply,
-  icon = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_assets8.FilterIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_assets8.FilterIcon, { variant: "xs" }),
   title = "Filters",
   resetLabel = "Clear filters",
   applyLabel = "Apply",
@@ -1240,14 +1334,14 @@ function BiampTableToolbarFilters({
   buttonLabel = "Filters",
   DrawerProps: drawerProps
 }) {
-  const [open, setOpen] = (0, import_react6.useState)(false);
-  const titleId = (0, import_react6.useId)();
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const titleId = (0, import_react7.useId)();
   function handleClose() {
     onApply?.();
     setOpen(false);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       BiampTableToolbarActionButton,
       {
         label: buttonLabel,
@@ -1256,8 +1350,8 @@ function BiampTableToolbarFilters({
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_material15.Drawer,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_material16.Drawer,
       {
         anchor: "right",
         open,
@@ -1268,17 +1362,17 @@ function BiampTableToolbarFilters({
           sx: { width: { xs: "100%", sm: 480 } },
           ...drawerProps?.PaperProps
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-          import_material15.Box,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          import_material16.Box,
           {
             height: "100%",
             display: "flex",
             flexDirection: "column",
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material15.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                  import_material15.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_material16.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                  import_material16.Box,
                   {
                     display: "flex",
                     justifyContent: "space-between",
@@ -1286,10 +1380,10 @@ function BiampTableToolbarFilters({
                     px: 3.5,
                     py: 2.5,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material15.Typography, { id: titleId, variant: "h2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_material16.Typography, { id: titleId, variant: "h2", children: [
                         title,
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                          import_material15.Badge,
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                          import_material16.Badge,
                           {
                             badgeContent: activeFilterCount,
                             color: "secondary",
@@ -1297,21 +1391,21 @@ function BiampTableToolbarFilters({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                        import_material15.IconButton,
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                        import_material16.IconButton,
                         {
                           size: "medium",
                           onClick: handleClose,
                           "aria-label": closeLabel,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_assets8.CloseIcon, {})
+                          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_assets8.CloseIcon, {})
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material15.Divider, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  import_material15.Box,
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material16.Divider, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  import_material16.Box,
                   {
                     role: "group",
                     "aria-label": "Filter options",
@@ -1324,9 +1418,9 @@ function BiampTableToolbarFilters({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material15.Box, { display: "flex", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  import_material15.Button,
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_material16.Box, { display: "flex", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  import_material16.Button,
                   {
                     variant: "overlay",
                     color: "secondary",
@@ -1336,8 +1430,8 @@ function BiampTableToolbarFilters({
                     children: resetLabel
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  import_material15.Button,
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  import_material16.Button,
                   {
                     variant: "overlay",
                     color: "primary",
@@ -1356,23 +1450,23 @@ function BiampTableToolbarFilters({
 }
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
-var import_material16 = require("@mui/material");
+var import_material17 = require("@mui/material");
 var import_assets9 = require("@bwp-web/assets");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/BiampTable/useDebouncedCallback.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var BIAMP_TABLE_DEBOUNCE_DELAY = 300;
 function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
-  const timeoutRef = (0, import_react7.useRef)(null);
-  const callbackRef = (0, import_react7.useRef)(callback);
+  const timeoutRef = (0, import_react8.useRef)(null);
+  const callbackRef = (0, import_react8.useRef)(callback);
   callbackRef.current = callback;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     return () => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     };
   }, []);
-  return (0, import_react7.useCallback)(
+  return (0, import_react8.useCallback)(
     (...args) => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(
@@ -1385,7 +1479,7 @@ function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
 }
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var searchFieldSx = {
   "& .MuiInputBase-root": {
     height: "36px !important",
@@ -1409,11 +1503,11 @@ function BiampTableToolbarSearch({
   sx,
   ...textFieldProps
 }) {
-  const isMobile = (0, import_material16.useMediaQuery)((t) => t.breakpoints.down("md"));
-  const [inputValue, setInputValue] = (0, import_react8.useState)(defaultValue);
-  const [isExpanded, setIsExpanded] = (0, import_react8.useState)(false);
+  const isMobile = (0, import_material17.useMediaQuery)((t) => t.breakpoints.down("md"));
+  const [inputValue, setInputValue] = (0, import_react9.useState)(defaultValue);
+  const [isExpanded, setIsExpanded] = (0, import_react9.useState)(false);
   const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     setInputValue(defaultValue);
   }, [defaultValue]);
   const handleChange = (e) => {
@@ -1429,18 +1523,18 @@ function BiampTableToolbarSearch({
       setIsExpanded(false);
     }
   };
-  const clearButton = inputValue ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material16.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_material16.IconButton,
+  const clearButton = inputValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material17.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_material17.IconButton,
     {
       size: "small",
       onClick: handleClear,
       "aria-label": clearLabel,
       sx: { mr: 0.5 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_assets9.CloseIcon, { variant: "xs", sx: { width: 20, height: 20 } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_assets9.CloseIcon, { variant: "xs", sx: { width: 20, height: 20 } })
     }
   ) }) : null;
-  const textField = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_material16.TextField,
+  const textField = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_material17.TextField,
     {
       name: "search",
       type: "text",
@@ -1448,7 +1542,7 @@ function BiampTableToolbarSearch({
       slotProps: {
         htmlInput: { maxLength, "aria-label": placeholder },
         input: {
-          startAdornment: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material16.InputAdornment, { position: "start", sx: { ml: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          startAdornment: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material17.InputAdornment, { position: "start", sx: { ml: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             import_assets9.SearchIcon,
             {
               variant: "xs",
@@ -1474,10 +1568,10 @@ function BiampTableToolbarSearch({
     }
   );
   if (isMobile && enableMobileView) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_material16.Box, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_assets9.SearchIcon, { sx: { width: 16, height: 16 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_material16.InputBase,
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material17.Box, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_assets9.SearchIcon, { sx: { width: 16, height: 16 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_material17.InputBase,
         {
           name: "search",
           type: "text",
@@ -1498,14 +1592,14 @@ function BiampTableToolbarSearch({
     ] });
   }
   if (expandable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_material16.Box, { display: "flex", alignItems: "center", minWidth: 28, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_material16.IconButton,
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material17.Box, { display: "flex", alignItems: "center", minWidth: 28, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_material17.IconButton,
         {
           "aria-label": expandLabel ?? placeholder,
           onClick: () => setIsExpanded(true),
           sx: { display: isExpanded || inputValue ? "none" : "flex" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             import_assets9.SearchIcon,
             {
               variant: "xs",
@@ -1515,8 +1609,8 @@ function BiampTableToolbarSearch({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_material16.Collapse,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_material17.Collapse,
         {
           in: isExpanded || !!inputValue,
           orientation: "horizontal",
@@ -1529,6 +1623,155 @@ function BiampTableToolbarSearch({
   return textField;
 }
 
+// src/BiampTable/useBiampServerSideTable.ts
+var import_react_table2 = require("@tanstack/react-table");
+var import_react10 = require("react");
+
+// src/BiampTable/serverSideTableUtils.ts
+function orderToSorting(order, fieldToColumnId) {
+  if (!order) return [];
+  const id = fieldToColumnId?.[order.field] ?? order.field;
+  return [{ id, desc: order.desc ?? false }];
+}
+function sortingToOrder(sorting, columnIdToField) {
+  if (sorting.length === 0) return void 0;
+  const { id, desc } = sorting[0];
+  const field = columnIdToField?.[id] ?? id;
+  return { field, desc };
+}
+function selectedIdsToRowSelection(ids) {
+  const state = {};
+  for (const id of ids) {
+    state[id] = true;
+  }
+  return state;
+}
+function rowSelectionToSelectedIds(selection) {
+  return Object.keys(selection).filter((key) => selection[key]);
+}
+function getOrderFieldMappings(columns) {
+  const columnIdToField = {};
+  const fieldToColumnId = {};
+  for (const col of columns) {
+    const orderField = col.meta?.orderField;
+    if (col.id && orderField) {
+      columnIdToField[col.id] = orderField;
+      fieldToColumnId[orderField] = col.id;
+    }
+  }
+  return { columnIdToField, fieldToColumnId };
+}
+function getDefaultColumnVisibilityFromDefs(columns) {
+  const defaults = {};
+  for (const col of columns) {
+    if (col.id != null && col.meta?.defaultVisible !== void 0) {
+      defaults[col.id] = col.meta.defaultVisible;
+    }
+  }
+  return defaults;
+}
+function getDirtyColumnVisibility(visibility, defaults) {
+  const dirty = {};
+  for (const [id, visible] of Object.entries(visibility)) {
+    if (visible !== (defaults[id] ?? true)) {
+      dirty[id] = visible;
+    }
+  }
+  return dirty;
+}
+
+// src/BiampTable/useBiampServerSideTable.ts
+var coreRowModel = (0, import_react_table2.getCoreRowModel)();
+function useBiampServerSideTable({
+  data,
+  columns,
+  getRowId = (row) => row.id,
+  order,
+  onOrderChange,
+  page,
+  rowsPerPage,
+  onPageChange,
+  rowCount,
+  columnVisibility,
+  onColumnVisibilityChange,
+  selectedRowIds,
+  onSelectedRowIdsChange,
+  enableRowSelection
+}) {
+  const defaultColumnVisibility = (0, import_react10.useMemo)(
+    () => getDefaultColumnVisibilityFromDefs(columns),
+    [columns]
+  );
+  const { columnIdToField, fieldToColumnId } = (0, import_react10.useMemo)(
+    () => getOrderFieldMappings(columns),
+    [columns]
+  );
+  const sorting = (0, import_react10.useMemo)(
+    () => orderToSorting(order, fieldToColumnId),
+    [order, fieldToColumnId]
+  );
+  const hasPagination = page != null && rowsPerPage != null;
+  const pagination = (0, import_react10.useMemo)(
+    () => hasPagination ? { pageIndex: page, pageSize: rowsPerPage } : void 0,
+    [hasPagination, page, rowsPerPage]
+  );
+  const hasSelection = selectedRowIds != null;
+  const rowSelection = (0, import_react10.useMemo)(
+    () => hasSelection ? selectedIdsToRowSelection(selectedRowIds) : void 0,
+    [hasSelection, selectedRowIds]
+  );
+  const mergedVisibility = (0, import_react10.useMemo)(
+    () => toVisibilityState({
+      ...defaultColumnVisibility,
+      ...columnVisibility
+    }),
+    [defaultColumnVisibility, columnVisibility]
+  );
+  return (0, import_react_table2.useReactTable)({
+    data,
+    columns,
+    getCoreRowModel: coreRowModel,
+    getRowId,
+    // Sorting — always manual for server-side tables
+    manualSorting: true,
+    sortDescFirst: false,
+    state: {
+      sorting,
+      ...pagination && { pagination },
+      columnVisibility: mergedVisibility,
+      ...rowSelection && { rowSelection }
+    },
+    onSortingChange: onOrderChange ? (updater) => {
+      const next = typeof updater === "function" ? updater(sorting) : updater;
+      onOrderChange(sortingToOrder(next, columnIdToField));
+    } : void 0,
+    // Pagination — only when page/rowsPerPage are provided
+    ...hasPagination && {
+      manualPagination: true,
+      rowCount: rowCount ?? 0,
+      onPaginationChange: onPageChange ? (updater) => {
+        const next = typeof updater === "function" ? updater(pagination) : updater;
+        onPageChange(next.pageIndex);
+      } : void 0
+    },
+    // Column visibility
+    onColumnVisibilityChange: onColumnVisibilityChange ? (updater) => {
+      const next = typeof updater === "function" ? updater(mergedVisibility) : updater;
+      onColumnVisibilityChange(
+        getDirtyColumnVisibility(next, defaultColumnVisibility)
+      );
+    } : void 0,
+    // Row selection — only when selectedRowIds is provided
+    ...hasSelection && {
+      enableRowSelection: enableRowSelection ?? true,
+      onRowSelectionChange: onSelectedRowIdsChange ? (updater) => {
+        const next = typeof updater === "function" ? updater(rowSelection) : updater;
+        onSelectedRowIdsChange(rowSelectionToSelectedIds(next));
+      } : void 0
+    }
+  });
+}
+
 // src/BiampTable/exportCsv.ts
 function exportToCsv(rows, columns, filename = "export") {
   const csvContent = buildCsvString(rows, columns);
@@ -1597,12 +1840,21 @@ function downloadCsv(csvContent, filename) {
   BiampTableToolbarExport,
   BiampTableToolbarFilters,
   BiampTableToolbarSearch,
+  BiampTableTruncatedCell,
   BiampWrapper,
   buildCsvString,
   exportToCsv,
   getColumnVisibilityDirtyCount,
   getDefaultColumnVisibility,
+  getDefaultColumnVisibilityFromDefs,
+  getDirtyColumnVisibility,
+  getOrderFieldMappings,
+  orderToSorting,
+  rowSelectionToSelectedIds,
+  selectedIdsToRowSelection,
+  sortingToOrder,
   toVisibilityState,
+  useBiampServerSideTable,
   useDebouncedCallback
 });
 //# sourceMappingURL=index.cjs.map