@bwp-web/components 0.11.7 → 0.13.0

package/dist/index.js

@@ -465,8 +465,9 @@ function BiampLayout({
 
 // src/BiampTable/BiampTable.tsx
 import {
-  Box as Box3,
+  Box as Box4,
   Checkbox,
+  IconButton,
   Table as MuiTable,
   TableBody,
   TableCell,
@@ -476,11 +477,12 @@ import {
   TableSortLabel
 } from "@mui/material";
 import {
+  ChevronRightIcon,
   DropdownChevronDownIcon,
   DropdownChevronUpIcon
 } from "@bwp-web/assets";
 import { flexRender } from "@tanstack/react-table";
-import { useRef as useRef2 } from "react";
+import { useRef as useRef3 } from "react";
 
 // src/BiampTable/BiampTableEmptyState.tsx
 import { NoResultsIcon } from "@bwp-web/assets";
@@ -496,7 +498,7 @@ function BiampTableStatusMessage({
   children,
   ...stackProps
 }) {
-  return /* @__PURE__ */ jsxs4(Stack5, { alignItems: "center", gap: 2, ...stackProps, children: [
+  return /* @__PURE__ */ jsxs4(Stack5, { alignItems: "center", gap: 1.5, ...stackProps, children: [
     cloneElement(icon, {
       "aria-hidden": true,
       sx: { width: 56, height: 56, ...icon.props.sx }
@@ -536,11 +538,56 @@ function BiampTableErrorState({
   return /* @__PURE__ */ jsx6(BiampTableStatusMessage, { role: "alert", icon, title, ...rest });
 }
 
+// src/BiampTable/BiampTableTruncatedCell.tsx
+import { Box as Box3, Tooltip } from "@mui/material";
+import { useCallback, useRef, useState } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function BiampTableTruncatedCell({
+  children
+}) {
+  const textRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const handleMouseEnter = useCallback(() => {
+    const el = textRef.current;
+    if (el && el.scrollWidth > el.clientWidth) {
+      setOpen(true);
+    }
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setOpen(false);
+  }, []);
+  return /* @__PURE__ */ jsx7(
+    Tooltip,
+    {
+      title: children,
+      open,
+      arrow: true,
+      placement: "top",
+      disableInteractive: true,
+      children: /* @__PURE__ */ jsx7(
+        Box3,
+        {
+          ref: textRef,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          sx: {
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            minWidth: 0
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
 // src/BiampTable/useLoadingDelay.ts
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
 function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
-  const [status, setStatus] = useState("idle");
-  const timeoutRef = useRef(null);
+  const [status, setStatus] = useState2("idle");
+  const timeoutRef = useRef2(null);
   function clearPending() {
     if (timeoutRef.current !== null) {
       clearTimeout(timeoutRef.current);
@@ -568,7 +615,39 @@ function useLoadingDelay(loading, { delay = 150, minDuration = 500 } = {}) {
 }
 
 // src/BiampTable/BiampTable.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "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,
@@ -577,7 +656,9 @@ function BiampTable({
   error,
   empty,
   enableRowSelection = false,
+  enableExpanding = false,
   hideSelectAll,
+  selectChildrenWithParent = false,
   getRowLabel,
   sx,
   ...boxProps
@@ -589,15 +670,16 @@ function BiampTable({
     },
     enableRowSelection ? 48 : 0
   );
-  const containerRef = useRef2(null);
+  const containerRef = useRef3(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__ */ jsxs5(
     TableContainer,
     {
-      component: Box3,
+      component: Box4,
       ...boxProps,
       ref: containerRef,
       sx: {
@@ -616,8 +698,8 @@ function BiampTable({
             "aria-busy": showLoading || void 0,
             sx: { minWidth: tableMinWidth, tableLayout: "auto" },
             children: [
-              /* @__PURE__ */ jsx7(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(TableRow, { children: [
-                enableRowSelection && /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(TableRow, { children: [
+                enableRowSelection && /* @__PURE__ */ jsx8(
                   TableCell,
                   {
                     padding: "checkbox",
@@ -627,7 +709,7 @@ function BiampTable({
                       zIndex: 3,
                       bgcolor: "background.paper"
                     },
-                    children: !hideSelectAll && /* @__PURE__ */ jsx7(
+                    children: !hideSelectAll && /* @__PURE__ */ jsx8(
                       Checkbox,
                       {
                         checked: table.getIsAllPageRowsSelected(),
@@ -641,7 +723,7 @@ function BiampTable({
                 ),
                 headerGroup.headers.map((header) => {
                   const sticky = header.column.columnDef.meta?.sticky;
-                  return /* @__PURE__ */ jsx7(
+                  return /* @__PURE__ */ jsx8(
                     TableCell,
                     {
                       "data-sticky": sticky || void 0,
@@ -649,19 +731,12 @@ function BiampTable({
                       ...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__ */ jsx7(
+                      sx: cellSx(
+                        sticky,
+                        header.column.columnDef.meta?.minWidth,
+                        3
+                      ),
+                      children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx8(
                         TableSortLabel,
                         {
                           active: !!header.column.getIsSorted(),
@@ -684,7 +759,7 @@ function BiampTable({
                   );
                 })
               ] }, headerGroup.id)) }),
-              /* @__PURE__ */ jsx7(TableBody, { sx: { opacity: showLoading ? 0.3 : 1 }, children: !showError && rows.map((row) => {
+              /* @__PURE__ */ jsx8(TableBody, { sx: { opacity: showLoading ? 0.3 : 1 }, children: !showError && rows.map((row) => {
                 const clickable = onRowClick ? isRowClickable ? isRowClickable(row.original) : true : false;
                 return /* @__PURE__ */ jsxs5(
                   TableRow,
@@ -702,7 +777,7 @@ function BiampTable({
                       }
                     } : void 0,
                     children: [
-                      enableRowSelection && /* @__PURE__ */ jsx7(
+                      enableRowSelection && /* @__PURE__ */ jsx8(
                         TableCell,
                         {
                           padding: "checkbox",
@@ -715,12 +790,14 @@ function BiampTable({
                               bgcolor: ({ palette }) => palette.mode === "dark" ? palette.grey[800] : palette.grey[100]
                             }
                           },
-                          children: /* @__PURE__ */ jsx7(
+                          children: /* @__PURE__ */ jsx8(
                             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: {
@@ -732,31 +809,66 @@ function BiampTable({
                           )
                         }
                       ),
-                      row.getVisibleCells().map((cell) => {
+                      row.getVisibleCells().map((cell, cellIndex, cells) => {
                         const sticky = cell.column.columnDef.meta?.sticky;
-                        return /* @__PURE__ */ jsx7(
+                        const isExpandCell = enableExpanding && !sticky && cellIndex === cells.findIndex(
+                          (c) => !c.column.columnDef.meta?.sticky
+                        );
+                        return /* @__PURE__ */ jsx8(
                           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 = flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext()
+                              );
+                              if (sticky) return content;
+                              const truncated = /* @__PURE__ */ jsx8(BiampTableTruncatedCell, { children: content });
+                              if (!isExpandCell) return truncated;
+                              const rowLabel = getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`;
+                              return /* @__PURE__ */ jsxs5(
+                                Box4,
+                                {
+                                  sx: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    pl: `${row.depth * 12}px`
+                                  },
+                                  children: [
+                                    row.getCanExpand() ? /* @__PURE__ */ jsx8(
+                                      IconButton,
+                                      {
+                                        variant: "none",
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                          row.toggleExpanded();
+                                        },
+                                        "aria-label": row.getIsExpanded() ? `Collapse ${rowLabel}` : `Expand ${rowLabel}`,
+                                        "aria-expanded": row.getIsExpanded(),
+                                        children: /* @__PURE__ */ jsx8(
+                                          ChevronRightIcon,
+                                          {
+                                            variant: "xs",
+                                            sx: {
+                                              color: ({ palette }) => palette.text.secondary,
+                                              transition: "transform 150ms ease",
+                                              transform: row.getIsExpanded() ? "rotate(90deg)" : "rotate(0deg)"
+                                            }
+                                          }
+                                        )
+                                      }
+                                    ) : hasExpandableRows ? /* @__PURE__ */ jsx8(Box4, { sx: { width: 28 } }) : null,
+                                    truncated
+                                  ]
                                 }
-                              }
-                            },
-                            children: flexRender(
-                              cell.column.columnDef.cell,
-                              cell.getContext()
-                            )
+                              );
+                            })()
                           },
                           cell.id
                         );
@@ -769,46 +881,14 @@ function BiampTable({
             ]
           }
         ),
-        showError && /* @__PURE__ */ jsx7(
-          Box3,
-          {
-            sx: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              pointerEvents: "none"
-            },
-            children: error === true ? /* @__PURE__ */ jsx7(BiampTableErrorState, { sx: { pointerEvents: "auto" } }) : error instanceof Error ? /* @__PURE__ */ jsx7(
-              BiampTableErrorState,
-              {
-                description: error.message,
-                sx: { pointerEvents: "auto" }
-              }
-            ) : error
-          }
-        ),
-        showEmpty && /* @__PURE__ */ jsx7(
-          Box3,
+        showError && /* @__PURE__ */ jsx8(Box4, { sx: overlaySx, children: error === true ? /* @__PURE__ */ jsx8(BiampTableErrorState, { sx: { pointerEvents: "auto" } }) : error instanceof Error ? /* @__PURE__ */ jsx8(
+          BiampTableErrorState,
           {
-            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__ */ jsx7(BiampTableEmptyState, { sx: { pointerEvents: "auto" } })
+            description: error.message,
+            sx: { pointerEvents: "auto" }
           }
-        )
+        ) : error }),
+        showEmpty && /* @__PURE__ */ jsx8(Box4, { sx: overlaySx, children: empty && empty !== true ? empty : /* @__PURE__ */ jsx8(BiampTableEmptyState, { sx: { pointerEvents: "auto" } }) })
       ]
     }
   );
@@ -816,7 +896,7 @@ function BiampTable({
 
 // src/BiampTable/BiampTableContainer.tsx
 import { Stack as Stack6 } from "@mui/material";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function BiampTableContainer({
   withBorderTop = true,
   withBorderBottom = false,
@@ -824,7 +904,7 @@ function BiampTableContainer({
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     Stack6,
     {
       direction: "column",
@@ -843,18 +923,18 @@ function BiampTableContainer({
 }
 
 // src/BiampTable/BiampTableCellActionButton.tsx
-import { IconButton, Tooltip } from "@mui/material";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { IconButton as IconButton2, Tooltip as Tooltip2 } from "@mui/material";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function BiampTableCellActionButton({ label, icon, ...props }) {
-  return /* @__PURE__ */ jsx9(
-    Tooltip,
+  return /* @__PURE__ */ jsx10(
+    Tooltip2,
     {
       title: label,
       placement: "top",
       enterDelay: 500,
       enterNextDelay: 500,
       disableInteractive: true,
-      children: /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9(IconButton, { "aria-label": label, ...props, children: icon }) })
+      children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(IconButton2, { "aria-label": label, ...props, children: icon }) })
     }
   );
 }
@@ -862,7 +942,7 @@ function BiampTableCellActionButton({ label, icon, ...props }) {
 // src/BiampTable/BiampTableColumnVisibility.tsx
 import {
   alpha as alpha2,
-  Box as Box4,
+  Box as Box5,
   Checkbox as Checkbox2,
   Divider,
   List,
@@ -870,7 +950,7 @@ import {
   Popover as Popover2,
   Typography as Typography3
 } from "@mui/material";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function toVisibilityState(visibility) {
   return visibility;
 }
@@ -913,8 +993,7 @@ function BiampTableColumnVisibility({
   ...popoverProps
 }) {
   const allVisible = table.getAllLeafColumns().every((col) => col.getIsVisible());
-  const someVisible = table.getAllLeafColumns().some((col) => col.getIsVisible());
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Popover2,
     {
       anchorEl,
@@ -939,47 +1018,53 @@ function BiampTableColumnVisibility({
         /* @__PURE__ */ jsxs6(
           ListItem,
           {
+            dense: true,
             sx: columnListItemSx,
             onClick: () => table.toggleAllColumnsVisible(!allVisible),
             children: [
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(
                 Checkbox2,
                 {
                   checked: allVisible,
-                  indeterminate: !allVisible && someVisible,
-                  size: "small",
                   slotProps: { input: { "aria-label": `${showAllLabel} columns` } }
                 }
               ),
-              /* @__PURE__ */ jsx10(Typography3, { variant: "caption", children: showAllLabel })
+              /* @__PURE__ */ jsx11(Typography3, { variant: "caption", fontWeight: 600, children: showAllLabel })
             ]
           }
         ),
-        /* @__PURE__ */ jsx10(Divider, {}),
-        /* @__PURE__ */ jsx10(Box4, { sx: { maxHeight: 340, overflow: "auto" }, children: table.getAllLeafColumns().map((column) => {
-          const columnName = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
-          return /* @__PURE__ */ jsxs6(
-            ListItem,
-            {
-              sx: columnListItemSx,
-              onClick: column.getToggleVisibilityHandler(),
-              children: [
-                /* @__PURE__ */ jsx10(
-                  Checkbox2,
-                  {
-                    checked: column.getIsVisible(),
-                    size: "small",
-                    slotProps: {
-                      input: { "aria-label": `Show ${columnName}` }
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx10(Typography3, { variant: "caption", children: columnName })
-              ]
-            },
-            column.id
-          );
-        }) })
+        /* @__PURE__ */ jsx11(Divider, {}),
+        /* @__PURE__ */ jsx11(
+          Box5,
+          {
+            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__ */ jsxs6(
+                ListItem,
+                {
+                  dense: true,
+                  sx: columnListItemSx,
+                  onClick: column.getToggleVisibilityHandler(),
+                  children: [
+                    /* @__PURE__ */ jsx11(
+                      Checkbox2,
+                      {
+                        checked: column.getIsVisible(),
+                        sx: { py: 1 },
+                        slotProps: {
+                          input: { "aria-label": `Show ${columnName}` }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx11(Typography3, { variant: "caption", children: columnName })
+                  ]
+                },
+                column.id
+              );
+            })
+          }
+        )
       ] })
     }
   );
@@ -987,14 +1072,14 @@ function BiampTableColumnVisibility({
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
 import { ColumnsIcon } from "@bwp-web/assets";
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 
 // src/BiampTable/BiampTableToolbarActionButton.tsx
 import {
   Badge,
-  IconButton as IconButton2
+  IconButton as IconButton3
 } from "@mui/material";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function BiampTableToolbarActionButton({
   label,
   icon,
@@ -1002,12 +1087,12 @@ function BiampTableToolbarActionButton({
   ...props
 }) {
   const showBadge = badgeContent != null && badgeContent !== 0;
-  return /* @__PURE__ */ jsx11(
-    IconButton2,
+  return /* @__PURE__ */ jsx12(
+    IconButton3,
     {
       "aria-label": showBadge ? `${label} (${badgeContent})` : label,
       ...props,
-      children: showBadge ? /* @__PURE__ */ jsx11(
+      children: showBadge ? /* @__PURE__ */ jsx12(
         Badge,
         {
           badgeContent,
@@ -1031,20 +1116,20 @@ function BiampTableToolbarActionButton({
 }
 
 // src/BiampTable/BiampTableToolbarColumnVisibility.tsx
-import { Fragment, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function BiampTableToolbarColumnVisibility({
   table,
-  icon = /* @__PURE__ */ jsx12(ColumnsIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ jsx13(ColumnsIcon, { variant: "xs" }),
   label = "Columns",
   defaultColumnVisibility,
   showAllLabel,
   ...actionButtonProps
 }) {
-  const [anchorEl, setAnchorEl] = useState2(null);
+  const [anchorEl, setAnchorEl] = useState3(null);
   const defaults = defaultColumnVisibility ?? getDefaultColumnVisibility(table);
   const dirtyCount = getColumnVisibilityDirtyCount(table, defaults);
   return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       BiampTableToolbarActionButton,
       {
         label,
@@ -1054,7 +1139,7 @@ function BiampTableToolbarColumnVisibility({
         ...actionButtonProps
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       BiampTableColumnVisibility,
       {
         table,
@@ -1067,9 +1152,9 @@ function BiampTableToolbarColumnVisibility({
 }
 
 // src/BiampTable/BiampTablePagination.tsx
-import { useRef as useRef3 } from "react";
+import { useEffect as useEffect2, useRef as useRef4 } from "react";
 import { TablePagination } from "@mui/material";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var positionMap = {
   left: "flex-start",
   center: "center",
@@ -1085,18 +1170,20 @@ function BiampTablePagination({
   ...paginationProps
 }) {
   const rowCount = table.getRowCount();
-  const lastRowCountRef = useRef3(rowCount);
+  const lastRowCountRef = useRef4(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);
-  }
+  useEffect2(() => {
+    if (!loading && pageIndex > maxPage) {
+      table.setPageIndex(maxPage);
+    }
+  }, [loading, pageIndex, maxPage, table]);
   if (autoHide && (!stableCount || stableCount <= pageSize)) return null;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     TablePagination,
     {
       component: "div",
@@ -1128,15 +1215,15 @@ function BiampTablePagination({
 }
 
 // src/BiampTable/BiampTableToolbar.tsx
-import { Box as Box5 } from "@mui/material";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { Box as Box6 } from "@mui/material";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function BiampTableToolbar({
   children,
   sx,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
-    Box5,
+  return /* @__PURE__ */ jsx15(
+    Box6,
     {
       role: "toolbar",
       display: "flex",
@@ -1154,14 +1241,14 @@ function BiampTableToolbar({
 }
 
 // src/BiampTable/BiampTableToolbarActions.tsx
-import { Box as Box6 } from "@mui/material";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { Box as Box7 } from "@mui/material";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function BiampTableToolbarActions({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
-    Box6,
+  return /* @__PURE__ */ jsx16(
+    Box7,
     {
       display: "flex",
       alignItems: "center",
@@ -1177,19 +1264,19 @@ function BiampTableToolbarActions({
 // src/BiampTable/BiampTableToolbarExport.tsx
 import { CircularProgress } from "@mui/material";
 import { DownloadIcon } from "@bwp-web/assets";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function BiampTableToolbarExport({
   onExport,
   loading,
-  icon = /* @__PURE__ */ jsx16(DownloadIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ jsx17(DownloadIcon, { variant: "xs" }),
   label = "Export",
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     BiampTableToolbarActionButton,
     {
       label: loading ? `${label}, loading` : label,
-      icon: loading ? /* @__PURE__ */ jsx16(CircularProgress, { size: 20, color: "inherit" }) : icon,
+      icon: loading ? /* @__PURE__ */ jsx17(CircularProgress, { size: 20, color: "inherit" }) : icon,
       disabled: loading,
       onClick: onExport,
       ...props
@@ -1200,22 +1287,22 @@ function BiampTableToolbarExport({
 // src/BiampTable/BiampTableToolbarFilters.tsx
 import {
   Badge as Badge2,
-  Box as Box7,
+  Box as Box8,
   Button,
   Divider as Divider2,
   Drawer,
-  IconButton as IconButton3,
+  IconButton as IconButton4,
   Typography as Typography4
 } from "@mui/material";
 import { CloseIcon, FilterIcon } from "@bwp-web/assets";
-import { useId, useState as useState3 } from "react";
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useId, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 function BiampTableToolbarFilters({
   activeFilterCount,
   children,
   onReset,
   onApply,
-  icon = /* @__PURE__ */ jsx17(FilterIcon, { variant: "xs" }),
+  icon = /* @__PURE__ */ jsx18(FilterIcon, { variant: "xs" }),
   title = "Filters",
   resetLabel = "Clear filters",
   applyLabel = "Apply",
@@ -1223,14 +1310,14 @@ function BiampTableToolbarFilters({
   buttonLabel = "Filters",
   DrawerProps: drawerProps
 }) {
-  const [open, setOpen] = useState3(false);
+  const [open, setOpen] = useState4(false);
   const titleId = useId();
   function handleClose() {
     onApply?.();
     setOpen(false);
   }
   return /* @__PURE__ */ jsxs8(Fragment2, { children: [
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       BiampTableToolbarActionButton,
       {
         label: buttonLabel,
@@ -1239,7 +1326,7 @@ function BiampTableToolbarFilters({
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       Drawer,
       {
         anchor: "right",
@@ -1252,16 +1339,16 @@ function BiampTableToolbarFilters({
           ...drawerProps?.PaperProps
         },
         children: /* @__PURE__ */ jsxs8(
-          Box7,
+          Box8,
           {
             height: "100%",
             display: "flex",
             flexDirection: "column",
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ jsxs8(Box7, { children: [
+              /* @__PURE__ */ jsxs8(Box8, { children: [
                 /* @__PURE__ */ jsxs8(
-                  Box7,
+                  Box8,
                   {
                     display: "flex",
                     justifyContent: "space-between",
@@ -1271,7 +1358,7 @@ function BiampTableToolbarFilters({
                     children: [
                       /* @__PURE__ */ jsxs8(Typography4, { id: titleId, variant: "h2", children: [
                         title,
-                        /* @__PURE__ */ jsx17(
+                        /* @__PURE__ */ jsx18(
                           Badge2,
                           {
                             badgeContent: activeFilterCount,
@@ -1280,21 +1367,21 @@ function BiampTableToolbarFilters({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx17(
-                        IconButton3,
+                      /* @__PURE__ */ jsx18(
+                        IconButton4,
                         {
                           size: "medium",
                           onClick: handleClose,
                           "aria-label": closeLabel,
-                          children: /* @__PURE__ */ jsx17(CloseIcon, {})
+                          children: /* @__PURE__ */ jsx18(CloseIcon, {})
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx17(Divider2, {}),
-                /* @__PURE__ */ jsx17(
-                  Box7,
+                /* @__PURE__ */ jsx18(Divider2, {}),
+                /* @__PURE__ */ jsx18(
+                  Box8,
                   {
                     role: "group",
                     "aria-label": "Filter options",
@@ -1307,8 +1394,8 @@ function BiampTableToolbarFilters({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs8(Box7, { display: "flex", children: [
-                /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsxs8(Box8, { display: "flex", children: [
+                /* @__PURE__ */ jsx18(
                   Button,
                   {
                     variant: "overlay",
@@ -1319,7 +1406,7 @@ function BiampTableToolbarFilters({
                     children: resetLabel
                   }
                 ),
-                /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx18(
                   Button,
                   {
                     variant: "overlay",
@@ -1340,30 +1427,30 @@ function BiampTableToolbarFilters({
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
 import {
-  Box as Box8,
+  Box as Box9,
   Collapse,
-  IconButton as IconButton4,
+  IconButton as IconButton5,
   InputAdornment as InputAdornment2,
   InputBase,
   TextField as TextField2,
   useMediaQuery
 } from "@mui/material";
 import { CloseIcon as CloseIcon2, SearchIcon as SearchIcon2 } from "@bwp-web/assets";
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 
 // src/BiampTable/useDebouncedCallback.ts
-import { useCallback, useEffect as useEffect2, useRef as useRef4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef5 } from "react";
 var BIAMP_TABLE_DEBOUNCE_DELAY = 300;
 function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
-  const timeoutRef = useRef4(null);
-  const callbackRef = useRef4(callback);
+  const timeoutRef = useRef5(null);
+  const callbackRef = useRef5(callback);
   callbackRef.current = callback;
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     };
   }, []);
-  return useCallback(
+  return useCallback2(
     (...args) => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(
@@ -1376,7 +1463,7 @@ function useDebouncedCallback(callback, delay = BIAMP_TABLE_DEBOUNCE_DELAY) {
 }
 
 // src/BiampTable/BiampTableToolbarSearch.tsx
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var searchFieldSx = {
   "& .MuiInputBase-root": {
     height: "36px !important",
@@ -1401,10 +1488,10 @@ function BiampTableToolbarSearch({
   ...textFieldProps
 }) {
   const isMobile = useMediaQuery((t) => t.breakpoints.down("md"));
-  const [inputValue, setInputValue] = useState4(defaultValue);
-  const [isExpanded, setIsExpanded] = useState4(false);
+  const [inputValue, setInputValue] = useState5(defaultValue);
+  const [isExpanded, setIsExpanded] = useState5(false);
   const debouncedOnChange = useDebouncedCallback(onChange, debounceDelay);
-  useEffect3(() => {
+  useEffect4(() => {
     setInputValue(defaultValue);
   }, [defaultValue]);
   const handleChange = (e) => {
@@ -1420,17 +1507,17 @@ function BiampTableToolbarSearch({
       setIsExpanded(false);
     }
   };
-  const clearButton = inputValue ? /* @__PURE__ */ jsx18(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx18(
-    IconButton4,
+  const clearButton = inputValue ? /* @__PURE__ */ jsx19(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx19(
+    IconButton5,
     {
       size: "small",
       onClick: handleClear,
       "aria-label": clearLabel,
       sx: { mr: 0.5 },
-      children: /* @__PURE__ */ jsx18(CloseIcon2, { variant: "xs", sx: { width: 20, height: 20 } })
+      children: /* @__PURE__ */ jsx19(CloseIcon2, { variant: "xs", sx: { width: 20, height: 20 } })
     }
   ) }) : null;
-  const textField = /* @__PURE__ */ jsx18(
+  const textField = /* @__PURE__ */ jsx19(
     TextField2,
     {
       name: "search",
@@ -1439,7 +1526,7 @@ function BiampTableToolbarSearch({
       slotProps: {
         htmlInput: { maxLength, "aria-label": placeholder },
         input: {
-          startAdornment: /* @__PURE__ */ jsx18(InputAdornment2, { position: "start", sx: { ml: 1 }, children: /* @__PURE__ */ jsx18(
+          startAdornment: /* @__PURE__ */ jsx19(InputAdornment2, { position: "start", sx: { ml: 1 }, children: /* @__PURE__ */ jsx19(
             SearchIcon2,
             {
               variant: "xs",
@@ -1465,9 +1552,9 @@ function BiampTableToolbarSearch({
     }
   );
   if (isMobile && enableMobileView) {
-    return /* @__PURE__ */ jsxs9(Box8, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
-      /* @__PURE__ */ jsx18(SearchIcon2, { sx: { width: 16, height: 16 } }),
-      /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsxs9(Box9, { display: "flex", alignItems: "center", width: "100%", pr: 1, gap: 1, children: [
+      /* @__PURE__ */ jsx19(SearchIcon2, { sx: { width: 16, height: 16 } }),
+      /* @__PURE__ */ jsx19(
         InputBase,
         {
           name: "search",
@@ -1489,14 +1576,14 @@ function BiampTableToolbarSearch({
     ] });
   }
   if (expandable) {
-    return /* @__PURE__ */ jsxs9(Box8, { display: "flex", alignItems: "center", minWidth: 28, children: [
-      /* @__PURE__ */ jsx18(
-        IconButton4,
+    return /* @__PURE__ */ jsxs9(Box9, { display: "flex", alignItems: "center", minWidth: 28, children: [
+      /* @__PURE__ */ jsx19(
+        IconButton5,
         {
           "aria-label": expandLabel ?? placeholder,
           onClick: () => setIsExpanded(true),
           sx: { display: isExpanded || inputValue ? "none" : "flex" },
-          children: /* @__PURE__ */ jsx18(
+          children: /* @__PURE__ */ jsx19(
             SearchIcon2,
             {
               variant: "xs",
@@ -1506,7 +1593,7 @@ function BiampTableToolbarSearch({
           )
         }
       ),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         Collapse,
         {
           in: isExpanded || !!inputValue,
@@ -1520,6 +1607,158 @@ function BiampTableToolbarSearch({
   return textField;
 }
 
+// src/BiampTable/useBiampServerSideTable.ts
+import {
+  getCoreRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useMemo } from "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 = getCoreRowModel();
+function useBiampServerSideTable({
+  data,
+  columns,
+  getRowId = (row) => row.id,
+  order,
+  onOrderChange,
+  page,
+  rowsPerPage,
+  onPageChange,
+  rowCount,
+  columnVisibility,
+  onColumnVisibilityChange,
+  selectedRowIds,
+  onSelectedRowIdsChange,
+  enableRowSelection
+}) {
+  const defaultColumnVisibility = useMemo(
+    () => getDefaultColumnVisibilityFromDefs(columns),
+    [columns]
+  );
+  const { columnIdToField, fieldToColumnId } = useMemo(
+    () => getOrderFieldMappings(columns),
+    [columns]
+  );
+  const sorting = useMemo(
+    () => orderToSorting(order, fieldToColumnId),
+    [order, fieldToColumnId]
+  );
+  const hasPagination = page != null && rowsPerPage != null;
+  const pagination = useMemo(
+    () => hasPagination ? { pageIndex: page, pageSize: rowsPerPage } : void 0,
+    [hasPagination, page, rowsPerPage]
+  );
+  const hasSelection = selectedRowIds != null;
+  const rowSelection = useMemo(
+    () => hasSelection ? selectedIdsToRowSelection(selectedRowIds) : void 0,
+    [hasSelection, selectedRowIds]
+  );
+  const mergedVisibility = useMemo(
+    () => toVisibilityState({
+      ...defaultColumnVisibility,
+      ...columnVisibility
+    }),
+    [defaultColumnVisibility, columnVisibility]
+  );
+  return 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);
@@ -1587,12 +1826,21 @@ export {
   BiampTableToolbarExport,
   BiampTableToolbarFilters,
   BiampTableToolbarSearch,
+  BiampTableTruncatedCell,
   BiampWrapper,
   buildCsvString,
   exportToCsv,
   getColumnVisibilityDirtyCount,
   getDefaultColumnVisibility,
+  getDefaultColumnVisibilityFromDefs,
+  getDirtyColumnVisibility,
+  getOrderFieldMappings,
+  orderToSorting,
+  rowSelectionToSelectedIds,
+  selectedIdsToRowSelection,
+  sortingToOrder,
   toVisibilityState,
+  useBiampServerSideTable,
   useDebouncedCallback
 };
 //# sourceMappingURL=index.js.map