@frollo/frollo-web-ui 8.0.4 → 8.1.1

package/frollo-web-ui.esm.js

@@ -7016,6 +7016,10 @@ var script$m = defineComponent({
     required: {
       type: Boolean,
       "default": false
+    },
+    centerAlignInput: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
@@ -7066,11 +7070,11 @@ var _hoisted_10$5 = {
   key: 0,
   "class": "text-left text-sm font-medium mt-2 min-h-[21px]"
 };
-var _hoisted_11$2 = {
+var _hoisted_11$3 = {
   key: 0,
   "class": "text-error"
 };
-var _hoisted_12$2 = {
+var _hoisted_12$3 = {
   key: 1
 };
 function render$17(_ctx, _cache, $props, $setup, $data, $options) {
@@ -7110,7 +7114,9 @@ function render$17(_ctx, _cache, $props, $setup, $data, $options) {
         "class": ["border-blue-500", [{
           'pl-10': !!_ctx.$slots.prefix,
           'pr-20': !!_ctx.$slots.suffix
-        }, (errorMessage || errors[0]) && meta.touched ? 'border-error text-error' : 'border-grey-40', _ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded']]
+        }, (errorMessage || errors[0]) && meta.touched ? 'border-error text-error' : 'border-grey-40', _ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded', {
+          'text-center': _ctx.centerAlignInput
+        }]]
       }), null, 16, _hoisted_8$9), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_9$8, [renderSlot(_ctx.$slots, "suffix", {
         "class": "h-full"
       })])) : createCommentVNode("", true)]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_10$5, [createVNode(Transition, {
@@ -7118,7 +7124,7 @@ function render$17(_ctx, _cache, $props, $setup, $data, $options) {
         mode: "out-in"
       }, {
         "default": withCtx(function () {
-          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_11$2, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_12$2, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
+          return [(errorMessage || errors[0]) && meta.touched ? (openBlock(), createElementBlock("span", _hoisted_11$3, toDisplayString(errorMessage || errors[0]), 1)) : _ctx.hint ? (openBlock(), createElementBlock("span", _hoisted_12$3, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true)];
         }),
         _: 2
       }, 1024)])) : createCommentVNode("", true)])];
@@ -8294,8 +8300,8 @@ var _hoisted_9$6 = {
 var _hoisted_10$4 = {
   "class": ""
 };
-var _hoisted_11$1 = ["aria-labelledby"];
-var _hoisted_12$1 = ["onClick"];
+var _hoisted_11$2 = ["aria-labelledby"];
+var _hoisted_12$2 = ["onClick"];
 var _hoisted_13$1 = {
   "class": "flex items-center gap-x-2"
 };
@@ -8362,8 +8368,8 @@ function render$p(_ctx, _cache, $props, $setup, $data, $options) {
           key: 0,
           src: option.image_url,
           "class": "w-[20px] h-[20px]"
-        }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_14$1, [createElementVNode("span", null, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_15$1, toDisplayString(option.description), 1)) : createCommentVNode("", true)])])], 10, _hoisted_12$1);
-      }), 128))], 10, _hoisted_11$1), [[vShow, _ctx.isOpen]])];
+        }, null, 8, ["src"])) : createCommentVNode("", true), createElementVNode("div", _hoisted_14$1, [createElementVNode("span", null, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_15$1, toDisplayString(option.description), 1)) : createCommentVNode("", true)])])], 10, _hoisted_12$2);
+      }), 128))], 10, _hoisted_11$2), [[vShow, _ctx.isOpen]])];
     }),
     _: 1
   }), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_16$1, [createVNode(Transition, {
@@ -9556,11 +9562,15 @@ var __default__$6 = defineComponent({
   components: {
     ArrowSortSvg: render$B,
     ArrowDownSvg: render$A,
-    FwLoadingBar: script$k
+    ChevronLeftSvg: render$O,
+    ChevronRightSvg: render$P,
+    FwLoadingBar: script$k,
+    FwButton: script$f
   },
   emits: [/** Fired when a row is clicked with row data */
   'rowClicked', /** Fired when a column is sorted */
-  'columnSorted'],
+  'columnSorted', /** Fired when a page number or arrow is clicked */
+  'pageChanged'],
   props: {
     items: {
       type: Array,
@@ -9584,6 +9594,16 @@ var __default__$6 = defineComponent({
     },
     autoSortColumn: {
       type: Number
+    },
+    enablePagination: {
+      type: Boolean,
+      "default": false
+    },
+    totalAmount: {
+      type: Number
+    },
+    pageSize: {
+      type: Number
     }
   },
   setup: function setup(props, ctx) {
@@ -9593,10 +9613,15 @@ var __default__$6 = defineComponent({
     var sortBy = ref('');
     var sortDirection = ref('asc');
     var currentSortedColumn = ref('');
+    var currentPage = ref(1);
+    var maxPageAmount = ref();
     onMounted(function () {
       if (Number(props.autoSortColumn) >= 0) {
         sortColumn(columns.value[Number(props.autoSortColumn)], false);
       }
+      if (props.totalAmount && props.pageSize) {
+        maxPageAmount.value = Math.ceil(props.totalAmount / props.pageSize);
+      }
     });
     var _useColours = useColours(),
       bgHoverColor = _useColours.primaryFade5;
@@ -9666,6 +9691,10 @@ var __default__$6 = defineComponent({
     var rowClicked = function rowClicked(row) {
       if (props.clickableRows) ctx.emit('rowClicked', row);
     };
+    var pageArrowClick = function pageArrowClick(next) {
+      currentPage.value = currentPage.value + (next ? 1 : -1);
+      ctx.emit('pageChanged', next);
+    };
     return {
       columns: columns,
       sortBy: sortBy,
@@ -9678,14 +9707,17 @@ var __default__$6 = defineComponent({
       isColumnSortable: isColumnSortable,
       isDisabled: isDisabled,
       rowClicked: rowClicked,
-      bgHoverColor: bgHoverColor
+      bgHoverColor: bgHoverColor,
+      currentPage: currentPage,
+      maxPageAmount: maxPageAmount,
+      pageArrowClick: pageArrowClick
     };
   }
 });
 var __injectCSSVars__$5 = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "d606643a": _ctx.bgHoverColor
+      "11c7ec1c": _ctx.bgHoverColor
     };
   });
 };
@@ -9696,42 +9728,52 @@ __default__$6.setup = __setup__$5 ? function (props, ctx) {
 } : __injectCSSVars__$5;
 
 var _withScopeId$4 = function _withScopeId(n) {
-  return pushScopeId("data-v-46577d1a"), n = n(), popScopeId(), n;
+  return pushScopeId("data-v-b7ffd9d4"), n = n(), popScopeId(), n;
+};
+var _hoisted_1$p = {
+  "class": "flex flex-col"
 };
-var _hoisted_1$p = ["aria-busy"];
-var _hoisted_2$n = {
+var _hoisted_2$n = ["aria-busy"];
+var _hoisted_3$j = {
   "class": "text-p2 border-b border-grey-40"
 };
-var _hoisted_3$j = ["tabindex", "onKeydown", "onClick"];
-var _hoisted_4$a = {
+var _hoisted_4$a = ["tabindex", "onKeydown", "onClick"];
+var _hoisted_5$8 = {
   "class": "flex flex-row items-center"
 };
-var _hoisted_5$8 = {
+var _hoisted_6$6 = {
   key: 0,
   "class": "ml-1 flex items-center justify-center w-5"
 };
-var _hoisted_6$6 = {
+var _hoisted_7$5 = {
   "class": "text-p2 bg-white font-light"
 };
-var _hoisted_7$5 = {
+var _hoisted_8$4 = {
   key: 0,
   "class": "py-4 pl-5 pr-3 text-left"
 };
-var _hoisted_8$4 = {
+var _hoisted_9$3 = {
   key: 0,
   "class": "py-4 pl-5 pr-3 text-left"
 };
-var _hoisted_9$3 = ["onClick", "tabindex", "onKeydown"];
-var _hoisted_10$1 = ["innerHTML"];
+var _hoisted_10$1 = ["onClick", "tabindex", "onKeydown"];
+var _hoisted_11$1 = ["innerHTML"];
+var _hoisted_12$1 = {
+  key: 0,
+  "class": "flex flex-row justify-center h-[44px] mt-8 space-x-2 mb-[40px]"
+};
 function render$f(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ArrowSortSvg = resolveComponent("ArrowSortSvg");
   var _component_ArrowDownSvg = resolveComponent("ArrowDownSvg");
   var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
-  return openBlock(), createElementBlock("table", {
-    "class": normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card", _ctx.loading ? 'cursor-wait' : '']),
+  var _component_ChevronLeftSvg = resolveComponent("ChevronLeftSvg");
+  var _component_FwButton = resolveComponent("FwButton");
+  var _component_ChevronRightSvg = resolveComponent("ChevronRightSvg");
+  return openBlock(), createElementBlock("div", _hoisted_1$p, [createElementVNode("table", {
+    "class": normalizeClass(["fw-table table-auto table-responsive rounded-md shadow-card flex-1", _ctx.loading ? 'cursor-wait' : '']),
     "aria-live": "polite",
     "aria-busy": _ctx.loading
-  }, [createElementVNode("thead", _hoisted_2$n, [createElementVNode("tr", null, [_ctx.$slots.preHead ? renderSlot(_ctx.$slots, "preHead", {
+  }, [createElementVNode("thead", _hoisted_3$j, [createElementVNode("tr", null, [_ctx.$slots.preHead ? renderSlot(_ctx.$slots, "preHead", {
     key: 0
   }) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, thKey) {
     return openBlock(), createElementBlock(Fragment, {
@@ -9746,9 +9788,9 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: function onClick($event) {
         return _ctx.sortColumn(column);
       }
-    }, [createElementVNode("div", _hoisted_4$a, [createElementVNode("span", {
+    }, [createElementVNode("div", _hoisted_5$8, [createElementVNode("span", {
       "class": normalizeClass(_ctx.sortedIcon('asc', column) || _ctx.sortedIcon('desc', column) ? 'text-primary' : '')
-    }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_5$8, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
+    }, toDisplayString(column), 3), _ctx.isColumnSortable(column) ? (openBlock(), createElementBlock("span", _hoisted_6$6, [!_ctx.sortedIcon('asc', column) && !_ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowSortSvg, {
       key: 0,
       "class": "inline-block w-full text-grey-base"
     })) : createCommentVNode("", true), _ctx.sortedIcon('asc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
@@ -9757,10 +9799,10 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("", true), _ctx.sortedIcon('desc', column) ? (openBlock(), createBlock(_component_ArrowDownSvg, {
       key: 2,
       "class": "inline-block w-4 text-primary"
-    })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_3$j)) : createCommentVNode("", true)], 64);
+    })) : createCommentVNode("", true)])) : createCommentVNode("", true)])], 42, _hoisted_4$a)) : createCommentVNode("", true)], 64);
   }), 128)), _ctx.$slots.head ? renderSlot(_ctx.$slots, "head", {
     key: 1
-  }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_6$6, [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
+  }) : createCommentVNode("", true)])]), createElementVNode("tbody", _hoisted_7$5, [_ctx.loading ? (openBlock(true), createElementBlock(Fragment, {
     key: 0
   }, renderList(_ctx.sortedData, function (row, trKey) {
     return openBlock(), createElementBlock("tr", {
@@ -9768,10 +9810,10 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
     }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, function (column, colKey) {
       return openBlock(), createElementBlock(Fragment, {
         key: colKey
-      }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", _hoisted_7$5, [createVNode(_component_FwLoadingBar, {
+      }, [!_ctx.isDisabled(column) ? (openBlock(), createElementBlock("td", _hoisted_8$4, [createVNode(_component_FwLoadingBar, {
         "class": "w-full h-7"
       })])) : createCommentVNode("", true)], 64);
-    }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_8$4, [createVNode(_component_FwLoadingBar, {
+    }), 128)), _ctx.$slots.row ? (openBlock(), createElementBlock("td", _hoisted_9$3, [createVNode(_component_FwLoadingBar, {
       "class": "w-full h-7"
     })])) : createCommentVNode("", true)]);
   }), 128)) : (openBlock(true), createElementBlock(Fragment, {
@@ -9797,20 +9839,51 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "class": "py-2 pl-5 pr-3 text-left",
         innerHTML: _ctx.formattedText(row, column)
-      }, null, 8, _hoisted_10$1)) : createCommentVNode("", true)], 64);
+      }, null, 8, _hoisted_11$1)) : createCommentVNode("", true)], 64);
     }), 128)), _ctx.$slots.row ? renderSlot(_ctx.$slots, "row", {
       key: 1,
       row: row
-    }) : createCommentVNode("", true)], 42, _hoisted_9$3);
-  }), 128))])], 10, _hoisted_1$p);
+    }) : createCommentVNode("", true)], 42, _hoisted_10$1);
+  }), 128))])], 10, _hoisted_2$n), _ctx.enablePagination ? (openBlock(), createElementBlock("div", _hoisted_12$1, [createVNode(_component_FwButton, {
+    variant: 'tertiary',
+    disabled: _ctx.currentPage === 1,
+    size: "sm",
+    "class": "border-grey-40",
+    onClick: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.pageArrowClick(false);
+    })
+  }, {
+    "default": withCtx(function () {
+      return [createVNode(_component_ChevronLeftSvg, {
+        "class": "h-4 w-4",
+        "stroke-width": "3"
+      })];
+    }),
+    _: 1
+  }, 8, ["disabled"]), renderSlot(_ctx.$slots, "page"), createVNode(_component_FwButton, {
+    variant: 'tertiary',
+    disabled: _ctx.currentPage === _ctx.maxPageAmount,
+    size: "sm",
+    "class": "border-grey-40",
+    onClick: _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.pageArrowClick(true);
+    })
+  }, {
+    "default": withCtx(function () {
+      return [createVNode(_component_ChevronRightSvg, {
+        "class": "h-4 w-4"
+      })];
+    }),
+    _: 1
+  }, 8, ["disabled"])])) : createCommentVNode("", true)]);
 }
 
-var css_248z$a = ".fw-table-head--sortable[data-v-46577d1a]:hover{background-color:var(--d606643a)}.fw-table-row[data-v-46577d1a]:hover{background-color:var(--d606643a)}";
-var stylesheet$a = ".fw-table-head--sortable[data-v-46577d1a]:hover{background-color:var(--d606643a)}.fw-table-row[data-v-46577d1a]:hover{background-color:var(--d606643a)}";
+var css_248z$a = ".fw-table-head--sortable[data-v-b7ffd9d4]:hover{background-color:var(--11c7ec1c)}.fw-table-row[data-v-b7ffd9d4]:hover{background-color:var(--11c7ec1c)}";
+var stylesheet$a = ".fw-table-head--sortable[data-v-b7ffd9d4]:hover{background-color:var(--11c7ec1c)}.fw-table-row[data-v-b7ffd9d4]:hover{background-color:var(--11c7ec1c)}";
 styleInject(css_248z$a);
 
 __default__$6.render = render$f;
-__default__$6.__scopeId = "data-v-46577d1a";
+__default__$6.__scopeId = "data-v-b7ffd9d4";
 
 var script$9 = defineComponent({
   name: 'FwTableHead'

package/index.d.ts

@@ -123,6 +123,10 @@ declare const _default$m: vue.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    centerAlignInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     uuid: string;
     inputBaseClass: vue.Ref<string>;
@@ -225,6 +229,10 @@ declare const _default$m: vue.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    centerAlignInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -235,6 +243,7 @@ declare const _default$m: vue.DefineComponent<{
     tabindex: string;
     rounded: boolean;
     enableErrors: boolean;
+    centerAlignInput: boolean;
 }, {}>;
 
 declare const _default$l: vue.DefineComponent<{
@@ -1282,6 +1291,9 @@ declare interface FwTableProps {
     loading?: boolean;
     clickableRows?: boolean;
     autoSortColumn?: number;
+    enablePagination?: boolean;
+    totalAmount?: number;
+    pageSize?: number;
 }
 
 declare interface FwAccordionProps {
@@ -1509,6 +1521,16 @@ declare const __default__$5: vue.DefineComponent<{
     autoSortColumn: {
         type: NumberConstructor;
     };
+    enablePagination: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    totalAmount: {
+        type: NumberConstructor;
+    };
+    pageSize: {
+        type: NumberConstructor;
+    };
 }, {
     columns: vue.ComputedRef<string[]>;
     sortBy: vue.Ref<string>;
@@ -1522,7 +1544,10 @@ declare const __default__$5: vue.DefineComponent<{
     isDisabled: (column: string) => boolean;
     rowClicked: (row: FwTableItem) => void;
     bgHoverColor: string;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("rowClicked" | "columnSorted")[], "rowClicked" | "columnSorted", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    currentPage: vue.Ref<number>;
+    maxPageAmount: vue.Ref<number | undefined>;
+    pageArrowClick: (next: boolean) => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("rowClicked" | "columnSorted" | "pageChanged")[], "rowClicked" | "columnSorted" | "pageChanged", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     items: {
         type: PropType<FwTableItem[]>;
         required: true;
@@ -1546,12 +1571,24 @@ declare const __default__$5: vue.DefineComponent<{
     autoSortColumn: {
         type: NumberConstructor;
     };
+    enablePagination: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    totalAmount: {
+        type: NumberConstructor;
+    };
+    pageSize: {
+        type: NumberConstructor;
+    };
 }>> & {
     onRowClicked?: ((...args: any[]) => any) | undefined;
     onColumnSorted?: ((...args: any[]) => any) | undefined;
+    onPageChanged?: ((...args: any[]) => any) | undefined;
 }, {
     loading: boolean;
     clickableRows: boolean;
+    enablePagination: boolean;
 }, {}>;
 
 declare const _default$c: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "8.0.4",
+  "version": "8.1.1",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",

package/types/components/fw-input/fw-input.vue.d.ts

@@ -98,6 +98,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    centerAlignInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     uuid: string;
     inputBaseClass: import("vue").Ref<string>;
@@ -200,6 +204,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    centerAlignInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -210,5 +218,6 @@ declare const _default: import("vue").DefineComponent<{
     tabindex: string;
     rounded: boolean;
     enableErrors: boolean;
+    centerAlignInput: boolean;
 }, {}>;
 export default _default;

package/types/components/fw-table/fw-table.vue.d.ts

@@ -24,6 +24,16 @@ declare const __default__: import("vue").DefineComponent<{
     autoSortColumn: {
         type: NumberConstructor;
     };
+    enablePagination: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    totalAmount: {
+        type: NumberConstructor;
+    };
+    pageSize: {
+        type: NumberConstructor;
+    };
 }, {
     columns: import("vue").ComputedRef<string[]>;
     sortBy: import("vue").Ref<string>;
@@ -37,7 +47,10 @@ declare const __default__: import("vue").DefineComponent<{
     isDisabled: (column: string) => boolean;
     rowClicked: (row: FwTableItem) => void;
     bgHoverColor: string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("rowClicked" | "columnSorted")[], "rowClicked" | "columnSorted", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    currentPage: import("vue").Ref<number>;
+    maxPageAmount: import("vue").Ref<number | undefined>;
+    pageArrowClick: (next: boolean) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("rowClicked" | "columnSorted" | "pageChanged")[], "rowClicked" | "columnSorted" | "pageChanged", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<FwTableItem[]>;
         required: true;
@@ -61,11 +74,23 @@ declare const __default__: import("vue").DefineComponent<{
     autoSortColumn: {
         type: NumberConstructor;
     };
+    enablePagination: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    totalAmount: {
+        type: NumberConstructor;
+    };
+    pageSize: {
+        type: NumberConstructor;
+    };
 }>> & {
     onRowClicked?: ((...args: any[]) => any) | undefined;
     onColumnSorted?: ((...args: any[]) => any) | undefined;
+    onPageChanged?: ((...args: any[]) => any) | undefined;
 }, {
     loading: boolean;
     clickableRows: boolean;
+    enablePagination: boolean;
 }, {}>;
 export default __default__;

package/types/components/fw-table/index.types.d.ts

@@ -13,4 +13,7 @@ export declare interface FwTableProps {
     loading?: boolean;
     clickableRows?: boolean;
     autoSortColumn?: number;
+    enablePagination?: boolean;
+    totalAmount?: number;
+    pageSize?: number;
 }