asma-ui-table 1.1.14 → 1.1.15

package/dist/asma-ui-table.es.js

@@ -7987,7 +7987,31 @@ const usePersistedColumnOrder = (persistColumnOrderKey) => {
   }, [persistColumnOrderKey]);
   return persistedColumnOrder;
 };
+const pageSizeStorageKeySuffix = ":page-size";
+const getPersistedPageSizeKey = (uniqueKey) => {
+  if (!uniqueKey)
+    return void 0;
+  return `${uniqueKey}${pageSizeStorageKeySuffix}`;
+};
+const usePersistedPageSize = (uniqueKey) => {
+  const persistedPageSize = useMemo(() => {
+    const storageKey = getPersistedPageSizeKey(uniqueKey);
+    if (!storageKey)
+      return void 0;
+    try {
+      const raw = localStorage.getItem(storageKey);
+      if (!raw)
+        return void 0;
+      const parsed = JSON.parse(raw);
+      return Number.isInteger(parsed) && parsed > 0 ? parsed : void 0;
+    } catch {
+      return void 0;
+    }
+  }, [uniqueKey]);
+  return persistedPageSize;
+};
 const useStyledTable = (props) => {
+  var _a;
   const {
     columns,
     data,
@@ -7997,16 +8021,18 @@ const useStyledTable = (props) => {
     tableInstanceRef,
     locale,
     persistColumnOrderKey,
+    uniqueKey,
     ...rest
   } = props;
   const columnOrder = usePersistedColumnOrder(persistColumnOrderKey);
+  const persistedPageSize = usePersistedPageSize(uniqueKey);
   const table = useReactTable({
     _features: [ExpandedRowsFeature, FocusedRowsFeature, OrderColumnsFeature],
     columns,
     data,
     meta: { locale: locale ?? "en" },
     initialState: {
-      pagination: { pageIndex: 0, pageSize: pageSize || 50 },
+      pagination: { pageIndex: 0, pageSize: persistedPageSize ?? pageSize ?? 50 },
       columnVisibility: {
         ...initialState == null ? void 0 : initialState.columnVisibility,
         [SELECT_COLUMN_ID]: false
@@ -8031,6 +8057,17 @@ const useStyledTable = (props) => {
     tableInstanceRef.current = table;
   }
   usePersistColumnOrder(table, persistColumnOrderKey);
+  const pageSizeState = (_a = table.getState().pagination) == null ? void 0 : _a.pageSize;
+  useEffect(() => {
+    const storageKey = getPersistedPageSizeKey(uniqueKey);
+    if (!storageKey || !pageSizeState)
+      return;
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(pageSizeState));
+    } catch (e) {
+      console.error(e);
+    }
+  }, [pageSizeState, uniqueKey]);
   return { table };
 };
 const CheckboxWrapper = "_CheckboxWrapper_1b4zf_1";
@@ -9820,7 +9857,7 @@ const outlined = "_outlined_gteum_141";
 const text = "_text_gteum_255";
 const textGray = "_textGray_gteum_369";
 const textWhite = "_textWhite_gteum_426";
-const style$4 = {
+const style$3 = {
   "asma-core-ui-button": "_asma-core-ui-button_gteum_1",
   contained,
   common: common$2,
@@ -9834,16 +9871,16 @@ const style$4 = {
   textWhite
 };
 const BtnStyles = {
-  contained: style$4["contained"],
-  outlined: style$4["outlined"],
-  text: style$4["text"],
-  textGray: style$4["textGray"],
-  textWhite: style$4["textWhite"],
-  large: style$4["large"],
-  small: style$4["small"],
-  medium: style$4["medium"],
-  error: style$4["error"],
-  common: style$4["common"]
+  contained: style$3["contained"],
+  outlined: style$3["outlined"],
+  text: style$3["text"],
+  textGray: style$3["textGray"],
+  textWhite: style$3["textWhite"],
+  large: style$3["large"],
+  small: style$3["small"],
+  medium: style$3["medium"],
+  error: style$3["error"],
+  common: style$3["common"]
 };
 const StyledButton = ({
   variant = "contained",
@@ -9864,7 +9901,7 @@ const StyledButton = ({
     {
       ...otherProps,
       className: clsx(
-        style$4["asma-core-ui-button"],
+        style$3["asma-core-ui-button"],
         BtnStyles[variant],
         BtnStyles[color2],
         BtnStyles[size],
@@ -10702,7 +10739,7 @@ function getStyleValue(themeMapping, transform, propValueFinal, userValue = prop
   }
   return value;
 }
-function style$3(options) {
+function style$2(options) {
   const {
     prop,
     cssProperty = options.prop,
@@ -10850,12 +10887,12 @@ function resolveCssProperty(props, keys, prop, transformer) {
   const propValue = props[prop];
   return handleBreakpoints(props, propValue, styleFromPropValue);
 }
-function style$2(props, keys) {
+function style$1(props, keys) {
   const transformer = createUnarySpacing(props.theme);
   return Object.keys(props).map((prop) => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
 }
 function margin(props) {
-  return style$2(props, marginKeys);
+  return style$1(props, marginKeys);
 }
 margin.propTypes = process.env.NODE_ENV !== "production" ? marginKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
@@ -10863,7 +10900,7 @@ margin.propTypes = process.env.NODE_ENV !== "production" ? marginKeys.reduce((ob
 }, {}) : {};
 margin.filterProps = marginKeys;
 function padding(props) {
-  return style$2(props, paddingKeys);
+  return style$1(props, paddingKeys);
 }
 padding.propTypes = process.env.NODE_ENV !== "production" ? paddingKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
@@ -10921,48 +10958,48 @@ function borderTransform(value) {
   }
   return `${value}px solid`;
 }
-const border = style$3({
+const border = style$2({
   prop: "border",
   themeKey: "borders",
   transform: borderTransform
 });
-const borderTop = style$3({
+const borderTop = style$2({
   prop: "borderTop",
   themeKey: "borders",
   transform: borderTransform
 });
-const borderRight = style$3({
+const borderRight = style$2({
   prop: "borderRight",
   themeKey: "borders",
   transform: borderTransform
 });
-const borderBottom = style$3({
+const borderBottom = style$2({
   prop: "borderBottom",
   themeKey: "borders",
   transform: borderTransform
 });
-const borderLeft = style$3({
+const borderLeft = style$2({
   prop: "borderLeft",
   themeKey: "borders",
   transform: borderTransform
 });
-const borderColor = style$3({
+const borderColor = style$2({
   prop: "borderColor",
   themeKey: "palette"
 });
-const borderTopColor = style$3({
+const borderTopColor = style$2({
   prop: "borderTopColor",
   themeKey: "palette"
 });
-const borderRightColor = style$3({
+const borderRightColor = style$2({
   prop: "borderRightColor",
   themeKey: "palette"
 });
-const borderBottomColor = style$3({
+const borderBottomColor = style$2({
   prop: "borderBottomColor",
   themeKey: "palette"
 });
-const borderLeftColor = style$3({
+const borderLeftColor = style$2({
   prop: "borderLeftColor",
   themeKey: "palette"
 });
@@ -11023,31 +11060,31 @@ rowGap.propTypes = process.env.NODE_ENV !== "production" ? {
   rowGap: responsivePropType$1
 } : {};
 rowGap.filterProps = ["rowGap"];
-const gridColumn = style$3({
+const gridColumn = style$2({
   prop: "gridColumn"
 });
-const gridRow = style$3({
+const gridRow = style$2({
   prop: "gridRow"
 });
-const gridAutoFlow = style$3({
+const gridAutoFlow = style$2({
   prop: "gridAutoFlow"
 });
-const gridAutoColumns = style$3({
+const gridAutoColumns = style$2({
   prop: "gridAutoColumns"
 });
-const gridAutoRows = style$3({
+const gridAutoRows = style$2({
   prop: "gridAutoRows"
 });
-const gridTemplateColumns = style$3({
+const gridTemplateColumns = style$2({
   prop: "gridTemplateColumns"
 });
-const gridTemplateRows = style$3({
+const gridTemplateRows = style$2({
   prop: "gridTemplateRows"
 });
-const gridTemplateAreas = style$3({
+const gridTemplateAreas = style$2({
   prop: "gridTemplateAreas"
 });
-const gridArea = style$3({
+const gridArea = style$2({
   prop: "gridArea"
 });
 compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
@@ -11057,18 +11094,18 @@ function paletteTransform(value, userValue) {
   }
   return value;
 }
-const color = style$3({
+const color = style$2({
   prop: "color",
   themeKey: "palette",
   transform: paletteTransform
 });
-const bgcolor = style$3({
+const bgcolor = style$2({
   prop: "bgcolor",
   cssProperty: "backgroundColor",
   themeKey: "palette",
   transform: paletteTransform
 });
-const backgroundColor = style$3({
+const backgroundColor = style$2({
   prop: "backgroundColor",
   themeKey: "palette",
   transform: paletteTransform
@@ -11077,7 +11114,7 @@ compose(color, bgcolor, backgroundColor);
 function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
-const width = style$3({
+const width = style$2({
   prop: "width",
   transform: sizingTransform
 });
@@ -11095,33 +11132,33 @@ const maxWidth = (props) => {
   return null;
 };
 maxWidth.filterProps = ["maxWidth"];
-const minWidth = style$3({
+const minWidth = style$2({
   prop: "minWidth",
   transform: sizingTransform
 });
-const height = style$3({
+const height = style$2({
   prop: "height",
   transform: sizingTransform
 });
-const maxHeight = style$3({
+const maxHeight = style$2({
   prop: "maxHeight",
   transform: sizingTransform
 });
-const minHeight = style$3({
+const minHeight = style$2({
   prop: "minHeight",
   transform: sizingTransform
 });
-style$3({
+style$2({
   prop: "size",
   cssProperty: "width",
   transform: sizingTransform
 });
-style$3({
+style$2({
   prop: "size",
   cssProperty: "height",
   transform: sizingTransform
 });
-const boxSizing = style$3({
+const boxSizing = style$2({
   prop: "boxSizing"
 });
 compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
@@ -13105,7 +13142,7 @@ const selected = "_selected_cs6m8_190";
 const shadowed = "_shadowed_cs6m8_210";
 const resizer = "_resizer_cs6m8_243";
 const isResizing = "_isResizing_cs6m8_255";
-const style$1 = {
+const style = {
   "asma-ui-table-styled-table": "_asma-ui-table-styled-table_cs6m8_1",
   "table-wrapper": "_table-wrapper_cs6m8_22",
   "table-shell": "_table-shell_cs6m8_29",
@@ -13227,12 +13264,12 @@ function TableHeaderCell({
       ref,
       colSpan: header.colSpan,
       className: clsx(
-        style$1["t-cell"],
-        hideHeader && style$1["hide-header"],
+        style["t-cell"],
+        hideHeader && style["hide-header"],
         // *
         //  sticky actions
-        header.column.id === ACTIONS_COLUMN_ID && style$1["t-cell__actions"],
-        isFixed2 && style$1["t-cell__fixed"]
+        header.column.id === ACTIONS_COLUMN_ID && style["t-cell__actions"],
+        isFixed2 && style["t-cell__fixed"]
       ),
       style: {
         ...getTableHeaderStyle({ enableResizing, header, element: ref.current, tableWidth }),
@@ -13243,8 +13280,8 @@ function TableHeaderCell({
         {
           className: clsx(
             "flex items-center justify-left",
-            hideHeader ? style$1["hide-table-header"] : style$1["show-table-header"],
-            header.column.getCanSort() && style$1["sortable-column"],
+            hideHeader ? style["hide-table-header"] : style["show-table-header"],
+            header.column.getCanSort() && style["sortable-column"],
             header.column.columnDef.className
           ),
           onClick: (e) => {
@@ -13257,8 +13294,8 @@ function TableHeaderCell({
           children: [
             flexRender(header.column.columnDef.header, header.getContext()),
             {
-              asc: /* @__PURE__ */ jsxRuntimeExports.jsx(DropUpIcon, { className: style$1["sort-icon"] }),
-              desc: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownIcon, { className: style$1["sort-icon"] })
+              asc: /* @__PURE__ */ jsxRuntimeExports.jsx(DropUpIcon, { className: style["sort-icon"] }),
+              desc: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownIcon, { className: style["sort-icon"] })
             }[header.column.getIsSorted()] ?? null,
             tableCanResize && (!enableResizing ? header.id !== (lastColumn == null ? void 0 : lastColumn.id) : true) && header.column.getCanResize() && !INTERNAL_COLUMN_IDS.includes(header.column.id) && /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
@@ -13283,7 +13320,7 @@ function TableHeaderCell({
                       () => handleMouseUp({ styledTableProps, header })
                     );
                   },
-                  className: `${style$1["resizer"]} ${header.column.getIsResizing() ? style$1["isResizing"] : ""}`
+                  className: `${style["resizer"]} ${header.column.getIsResizing() ? style["isResizing"] : ""}`
                 }
               }
             )
@@ -13330,8 +13367,8 @@ function TableHeader({
     "thead",
     {
       className: cn(
-        style$1["table-header"],
-        stickyHeader && style$1["table-header--sticky"],
+        style["table-header"],
+        stickyHeader && style["table-header--sticky"],
         styledTableProps.tableHeaderClassName
       ),
       style: styles2,
@@ -13532,18 +13569,18 @@ function TableRow({
         "td",
         {
           className: clsx(
-            style$1["t-cell"],
+            style["t-cell"],
             hasRowClickHandler && "cursor-pointer",
             tdClassName,
-            isActionsCell && style$1["action-cell"],
-            isActionsCell && Boolean(actions) && leftCells.length && style$1["shadowed"],
-            isActionsCell && ((getRowClassName == null ? void 0 : getRowClassName(row)) ? getRowClassName == null ? void 0 : getRowClassName(row) : style$1["action-cell-default-background"]),
-            isFixed2 && style$1["fixed-cell"],
-            isLastFixedCell && style$1["shadowed"],
-            row.getIsSelected() && style$1["selected"],
-            isFixed2 && ((getRowClassName == null ? void 0 : getRowClassName(row)) ? getRowClassName == null ? void 0 : getRowClassName(row) : style$1["fixed-cell-default-background"]),
-            isExpandedRow && style$1["expanded_row"],
-            (singleSelection || row.isFocused()) && style$1["single-selection"]
+            isActionsCell && style["action-cell"],
+            isActionsCell && Boolean(actions) && leftCells.length && style["shadowed"],
+            isActionsCell && ((getRowClassName == null ? void 0 : getRowClassName(row)) ? getRowClassName == null ? void 0 : getRowClassName(row) : style["action-cell-default-background"]),
+            isFixed2 && style["fixed-cell"],
+            isLastFixedCell && style["shadowed"],
+            row.getIsSelected() && style["selected"],
+            isFixed2 && ((getRowClassName == null ? void 0 : getRowClassName(row)) ? getRowClassName == null ? void 0 : getRowClassName(row) : style["fixed-cell-default-background"]),
+            isExpandedRow && style["expanded_row"],
+            (singleSelection || row.isFocused()) && style["single-selection"]
           ),
           style: { left: isFixed2 ? cell.left : void 0 },
           children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -13589,7 +13626,7 @@ function TableRow({
         "data-index": index,
         "data-test": row.id,
         id: row.id,
-        className: clsx(style$1["t-row"], loading && style$1["is-loading"], getRowClassName == null ? void 0 : getRowClassName(row)),
+        className: clsx(style["t-row"], loading && style["is-loading"], getRowClassName == null ? void 0 : getRowClassName(row)),
         style: {
           height: rowHeight ? `${rowHeight}px` : "inherit",
           ...enableDnd && dndStyle
@@ -13623,7 +13660,7 @@ function TableRow({
             "td",
             {
               "aria-hidden": true,
-              className: style$1["t-cell"],
+              className: style["t-cell"],
               style: {
                 width: String(paddingLeft) + "px",
                 minWidth: String(paddingLeft) + "px",
@@ -13638,7 +13675,7 @@ function TableRow({
             "td",
             {
               "aria-hidden": true,
-              className: style$1["t-cell"],
+              className: style["t-cell"],
               style: {
                 width: String(paddingRight) + "px",
                 minWidth: String(paddingRight) + "px",
@@ -13699,12 +13736,12 @@ function TableBody({
   const { columns, data, loading, enableDnd, rowHeight } = styledTableProps;
   const colSpan = table.getAllLeafColumns().length || columns.length || 1;
   if (loading && data.length === 0) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: style$1["tbody"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableSkeleton, { colSpan, rowHeight }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: style["tbody"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableSkeleton, { colSpan, rowHeight }) });
   }
   if (data.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: style$1["tbody"], children: enableDnd ? /* @__PURE__ */ jsxRuntimeExports.jsx(SortableContext, { items: data, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableRows, { table, styledTableProps, columnWindow }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(TableRows, { table, styledTableProps, columnWindow }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: style["tbody"], children: enableDnd ? /* @__PURE__ */ jsxRuntimeExports.jsx(SortableContext, { items: data, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableRows, { table, styledTableProps, columnWindow }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(TableRows, { table, styledTableProps, columnWindow }) });
 }
 function LoadingIcon(props) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: [
@@ -13730,18 +13767,18 @@ function LoadingIcon(props) {
   ] });
 }
 const Fetching = ({ fetching = false }) => {
-  return fetching ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-10 bg-white/40 left-0 top-0 right-0 bottom-0 flex items-center justify-center ", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingIcon, { className: style$1["loading-icon"], width: 50, height: 50 }) }) : null;
+  return fetching ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-10 bg-white/40 left-0 top-0 right-0 bottom-0 flex items-center justify-center ", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingIcon, { className: style["loading-icon"], width: 50, height: 50 }) }) : null;
 };
-function ChevronRightIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z" }) });
-}
-const style = {
+const paginationStyle = {
   "table-pagination": "_table-pagination_pu6mb_1",
   "table-pagination__pages-list": "_table-pagination__pages-list_pu6mb_11",
   "table-pagination__pages-list__page": "_table-pagination__pages-list__page_pu6mb_16",
   "page-selected": "_page-selected_pu6mb_27",
   "check-icon": "_check-icon_pu6mb_30"
 };
+function ChevronRightIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z" }) });
+}
 function ChevronLeftIcon(props) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z" }) });
 }
@@ -13774,19 +13811,11 @@ const StyledMenuItem = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     ]
   }
 );
-const amountOfRows = [10, 20, 50];
 function TablePagination({
   table,
-  showRowSelect,
   locale
 }) {
   const { anchorEl, open, handleClose, handleOpen } = useToggleMenuVisibility();
-  const {
-    anchorEl: anchorElRows,
-    open: openRows,
-    handleClose: handleCloseRows,
-    handleOpen: handleOpenRows
-  } = useToggleMenuVisibility();
   const tablePaginationRef = useRef(null);
   const isNo = locale === "no";
   const popoverOrigin = useMemo(
@@ -13798,10 +13827,10 @@ function TablePagination({
   );
   const scrollToTop = useCallback(() => {
     var _a;
-    const asmaTableClass = style$1["asma-ui-table-styled-table"];
+    const asmaTableClass = style["asma-ui-table-styled-table"];
     const tableContainer = (_a = tablePaginationRef.current) == null ? void 0 : _a.closest(`.${asmaTableClass}`);
     const scrollContainer = tableContainer == null ? void 0 : tableContainer.querySelector(
-      `.${style$1["table-scroll"]}, .${style$1["table-wrapper"]}`
+      `.${style["table-scroll"]}, .${style["table-wrapper"]}`
     );
     if (scrollContainer) {
       scrollContainer.scrollTo({ top: 0, behavior: "smooth" });
@@ -13810,11 +13839,6 @@ function TablePagination({
   const pagesLength = table.getPageCount() || 1;
   const currentPage = table.getState().pagination.pageIndex + 1;
   const pages = useMemo(() => Array.from({ length: pagesLength }, (_, index) => index + 1), [pagesLength]);
-  const pageSize = table.getState().pagination.pageSize;
-  const amountOfRowsOptions = useMemo(() => {
-    const optionsSet = /* @__PURE__ */ new Set([...amountOfRows, pageSize]);
-    return Array.from(optionsSet).sort((a, b) => a - b);
-  }, []);
   const handlePageChange = useCallback(
     (page) => {
       table.setPageIndex(page - 1);
@@ -13823,76 +13847,8 @@ function TablePagination({
     },
     [table, handleClose, scrollToTop]
   );
-  const handleRowsChange = useCallback(
-    (size) => {
-      table.setPageSize(size);
-      handleCloseRows();
-    },
-    [table, handleCloseRows]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: tablePaginationRef, className: style["table-pagination"], children: [
-    showRowSelect && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        StyledButton,
-        {
-          dataTest: "table-rows-count-button",
-          variant: "outlined",
-          size: "large",
-          onClick: handleOpenRows,
-          endIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ChevronDownIcon,
-            {
-              className: `${openRows ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
-              height: 24,
-              width: 24
-            }
-          ),
-          children: [
-            pageSize,
-            " ",
-            isNo ? "rader" : "rows"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Popover,
-        {
-          open: openRows,
-          anchorEl: anchorElRows,
-          slotProps: {
-            paper: {
-              sx: {
-                width: anchorElRows ? anchorElRows.clientWidth : void 0,
-                maxHeight: 288,
-                overflowY: "auto"
-              }
-            }
-          },
-          onClose: handleCloseRows,
-          anchorOrigin: popoverOrigin.anchorOrigin,
-          transformOrigin: popoverOrigin.transformOrigin,
-          classes: { paper: "border border-solid border-delta-200 py-2" },
-          children: amountOfRowsOptions.map((size) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            StyledMenuItem,
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                handleRowsChange(size);
-              },
-              selected: pageSize === size,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-delta-700 text-sm font-normal", children: [
-                size,
-                " ",
-                isNo ? "rader" : "rows"
-              ] })
-            },
-            size
-          ))
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTooltip, { title: isNo ? "Nåværende side" : "Current Page", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTooltip, { title: isNo ? "Nåværende side" : "Current Page", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: tablePaginationRef, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       StyledButton,
       {
         dataTest: "current-page-button",
@@ -13985,43 +13941,130 @@ function TablePagination({
     ) }) })
   ] });
 }
+const rowCountOptions = [5, 10, 20, 50, 100];
+function TableRowCountSelect({
+  table,
+  locale
+}) {
+  const { anchorEl, open, handleClose, handleOpen } = useToggleMenuVisibility();
+  const pageSize = table.getState().pagination.pageSize;
+  const isNo = locale === "no";
+  const popoverOrigin = useMemo(
+    () => ({
+      anchorOrigin: { vertical: -5, horizontal: "center" },
+      transformOrigin: { vertical: "bottom", horizontal: "center" }
+    }),
+    []
+  );
+  const amountOfRowsOptions = useMemo(() => {
+    const optionsSet = /* @__PURE__ */ new Set([...rowCountOptions, pageSize]);
+    return Array.from(optionsSet).sort((a, b) => a - b);
+  }, [pageSize]);
+  const handleRowsChange = useCallback(
+    (size) => {
+      table.setPageSize(size);
+      handleClose();
+    },
+    [handleClose, table]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      StyledButton,
+      {
+        dataTest: "table-rows-count-button",
+        variant: "outlined",
+        size: "large",
+        onClick: handleOpen,
+        endIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ChevronDownIcon,
+          {
+            className: `${open ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
+            height: 24,
+            width: 24
+          }
+        ),
+        children: [
+          pageSize,
+          " ",
+          isNo ? "rader" : "rows"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Popover,
+      {
+        open,
+        anchorEl,
+        slotProps: {
+          paper: {
+            sx: {
+              width: anchorEl ? anchorEl.clientWidth : void 0,
+              maxHeight: 288,
+              overflowY: "auto"
+            }
+          }
+        },
+        onClose: handleClose,
+        anchorOrigin: popoverOrigin.anchorOrigin,
+        transformOrigin: popoverOrigin.transformOrigin,
+        classes: { paper: "border border-solid border-delta-200 py-2" },
+        children: amountOfRowsOptions.map((size) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          StyledMenuItem,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handleRowsChange(size);
+            },
+            selected: pageSize === size,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-delta-700 text-sm font-normal", children: [
+              size,
+              " ",
+              isNo ? "rader" : "rows"
+            ] })
+          },
+          size
+        ))
+      }
+    )
+  ] });
+}
+const MIN_ROWS_FOR_FOOTER = 5;
 function TableFooter({
   table,
   styledTableProps,
   canShowStickyFooter
 }) {
-  var _a, _b, _c;
-  if (styledTableProps.hideFooter || styledTableProps.data.length === 0)
-    return null;
-  const paginationAlignLeft = styledTableProps.paginationAlignLeft;
-  const pageSize = table.getState().pagination.pageSize;
-  const totalRows = table.getFilteredRowModel().rows.length;
-  const isManualPagination = !!table.options.manualPagination;
-  const pagesLength = table.getPageCount() || 1;
-  const shouldShowPagination = isManualPagination ? pagesLength > 1 : totalRows > pageSize;
+  var _a;
+  const totalRowCount = table.getRowCount();
+  const pageCount = table.getPageCount() || 1;
   const footerNode = (_a = styledTableProps.footer) == null ? void 0 : _a.call(styledTableProps, table);
   const hasFooterNode = footerNode !== null && footerNode !== void 0 && footerNode !== false;
-  const hasAnythingToRender = hasFooterNode || shouldShowPagination;
+  const locale = styledTableProps.locale || "en";
+  const hasEnoughRowsForFooter = totalRowCount >= MIN_ROWS_FOR_FOOTER;
+  if (styledTableProps.hideFooter || !hasEnoughRowsForFooter)
+    return null;
+  const paginationAlignLeft = styledTableProps.paginationAlignLeft;
+  const shouldShowRowCountSelect = !styledTableProps.hideRowCountSelect;
+  const shouldShowPagination = pageCount > 1;
+  const shouldShowControls = shouldShowRowCountSelect || shouldShowPagination;
+  const hasAnythingToRender = hasFooterNode || shouldShowControls;
   if (!hasAnythingToRender)
     return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: canShowStickyFooter ? style$1["table-footer--sticky"] : style$1["table-footer--inline"],
+      className: canShowStickyFooter ? style["table-footer--sticky"] : style["table-footer--inline"],
       style: paginationAlignLeft && {
         justifyContent: "flex-start"
       } || {},
       children: [
-        !paginationAlignLeft && ((_b = styledTableProps.footer) == null ? void 0 : _b.call(styledTableProps, table)),
-        shouldShowPagination && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          TablePagination,
-          {
-            table,
-            showRowSelect: !!styledTableProps.showRowCountSelect,
-            locale: styledTableProps.locale || "en"
-          }
-        ),
-        paginationAlignLeft && ((_c = styledTableProps.footer) == null ? void 0 : _c.call(styledTableProps, table))
+        !paginationAlignLeft && footerNode,
+        shouldShowControls && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: paginationStyle["table-pagination"], children: [
+          shouldShowRowCountSelect && /* @__PURE__ */ jsxRuntimeExports.jsx(TableRowCountSelect, { table, locale }),
+          shouldShowPagination && /* @__PURE__ */ jsxRuntimeExports.jsx(TablePagination, { table, locale })
+        ] }),
+        paginationAlignLeft && footerNode
       ]
     }
   );
@@ -15182,9 +15225,9 @@ const StyledTable = (props) => {
   const isShortTable = !canShowStickyFooter && visibleRows > 0 && visibleRows <= rowsFit;
   const shouldExpandEmptyBody = !canShowStickyFooter && showNoRowsOverlay;
   const tableWrapperClass = cn(
-    canShowStickyFooter ? style$1["table-wrapper"] : isShortTable || shouldExpandEmptyBody ? style$1["table-wrapper--proxy-bottom"] : style$1["table-wrapper--proxy"],
-    fetching && style$1["table-wrapper-fetching"],
-    showNoRowsOverlay && style$1["table-wrapper--no-rows"],
+    canShowStickyFooter ? style["table-wrapper"] : isShortTable || shouldExpandEmptyBody ? style["table-wrapper--proxy-bottom"] : style["table-wrapper--proxy"],
+    fetching && style["table-wrapper-fetching"],
+    showNoRowsOverlay && style["table-wrapper--no-rows"],
     className
   );
   const scrollRef = canShowStickyFooter ? wrapperRef : tableScrollRef;
@@ -15209,7 +15252,7 @@ const StyledTable = (props) => {
       clearHeight();
     };
   }, [showNoRowsOverlay, noRowsOverlayTop]);
-  const TableMarkup = /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: style$1["styled-table"], style: { width: table.getTotalSize(), minWidth: "100%" }, children: [
+  const TableMarkup = /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: style["styled-table"], style: { width: table.getTotalSize(), minWidth: "100%" }, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       TableHeader,
       {
@@ -15223,32 +15266,32 @@ const StyledTable = (props) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(Fetching, { fetching: !!fetching }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(TableBody, { table, styledTableProps: options, columnWindow })
   ] });
-  const NoRowsOverlay = showNoRowsOverlay ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style$1["no-rows-overlay-container"], style: { top: noRowsOverlayTop }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: noRowsContentRef, className: style$1["no-rows-overlay-content"], children: noRowsOverlay }) }) : null;
+  const NoRowsOverlay = showNoRowsOverlay ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style["no-rows-overlay-container"], style: { top: noRowsOverlayTop }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: noRowsContentRef, className: style["no-rows-overlay-content"], children: noRowsOverlay }) }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(RootContextProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DndProvider, { enabled: !!enableDnd, data, setData, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       ref: containerRef,
-      className: cn(style$1["asma-ui-table-styled-table"], tableClassName),
+      className: cn(style["asma-ui-table-styled-table"], tableClassName),
       "data-x-overflow": hasInternalOverflow ? "true" : "false",
       style: { height: height2 },
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(OverlayShell, { enabled: canShowStickyFooter, className: style$1["table-shell"], children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: wrapperRef, className: tableWrapperClass, children: [
-          canShowStickyFooter ? TableMarkup : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: tableScrollRef, className: cn(style$1["table-scroll"]), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(OverlayShell, { enabled: canShowStickyFooter, className: style["table-shell"], children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: wrapperRef, className: tableWrapperClass, children: [
+          canShowStickyFooter ? TableMarkup : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: tableScrollRef, className: cn(style["table-scroll"]), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
                 ref: tableXRef,
-                className: cn(style$1["table-x"], !isShortTable && style$1["table-x--fill-height"]),
+                className: cn(style["table-x"], !isShortTable && style["table-x--fill-height"]),
                 children: TableMarkup
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: hScrollRef, className: style$1["table-hscroll"], children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: hScrollContentRef, className: style$1["table-hscroll__content"] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: hScrollRef, className: style["table-hscroll"], children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: hScrollContentRef, className: style["table-hscroll__content"] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
                 className: cn(
-                  style$1["table-bottom"],
-                  isShortTable && style$1["table-bottom--sticky"]
+                  style["table-bottom"],
+                  isShortTable && style["table-bottom--sticky"]
                 ),
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   TableFooter,

package/dist/src/components/table-footer/TablePagination.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { Table } from '@tanstack/react-table';
-export declare function TablePagination<TData>({ table, showRowSelect, locale, }: {
+export declare function TablePagination<TData>({ table, locale, }: {
     locale: 'en' | 'no';
-    showRowSelect: boolean;
     table: Table<TData>;
 }): JSX.Element;

package/dist/src/components/table-footer/TableRowCountSelect.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Table } from '@tanstack/react-table';
+export declare function TableRowCountSelect<TData>({ table, locale, }: {
+    locale: 'en' | 'no';
+    table: Table<TData>;
+}): JSX.Element;

package/dist/src/hooks/usePersistedPageSize.d.ts

@@ -0,0 +1,2 @@
+export declare const getPersistedPageSizeKey: (uniqueKey?: string) => string | undefined;
+export declare const usePersistedPageSize: (uniqueKey?: string) => number | undefined;

package/dist/src/types.d.ts

@@ -92,7 +92,6 @@ export type StyledTableProps<TData, TCustomData> = {
     }) => ReactElement | null;
     getRowSelectionIds?: (ids: string[]) => void;
     hideHeader?: boolean;
-    showRowCountSelect?: boolean;
     pageSize?: number;
     enableResizing?: boolean;
     enableDnd?: boolean;
@@ -104,6 +103,7 @@ export type StyledTableProps<TData, TCustomData> = {
     singleSelectionRow?: boolean;
     rowActionsState?: (row: Row<TData>) => RowActionsState | undefined;
     stickyFooter?: boolean;
+    hideRowCountSelect?: boolean;
     /**
      * @info A unique identifier for the table. This name is used to store the table's state in localStorage,
      * ensuring that the table state is persisted across sessions for the specific table instance.

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "1.1.14",
+    "version": "1.1.15",
     "type": "module",
     "files": [
         "dist/**/*",