refactor: replace table options with sort/pagination properties (#7934)

frontend/app/src/components/accounts/balances/NonFungibleBalances.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Section } from '@/types/status';
-import type { DataTableColumn, DataTableSortData } from '@rotki/ui-library-compat';
+import type { DataTableColumn } from '@rotki/ui-library-compat';
 import type { ActionStatus } from '@/types/action';
 import type { IgnoredAssetsHandlingType } from '@/types/asset';
 import type { Module } from '@/types/modules';
@@ -29,11 +29,6 @@ const extraParams = computed(() => ({
   ignoredAssetsHandling: get(ignoredAssetsHandling),
 }));
 
-const sort = ref<DataTableSortData>({
-  column: 'lastPrice',
-  direction: 'desc',
-});
-
 const tableHeaders = computed<DataTableColumn[]>(() => [
   {
     label: t('common.name'),
@@ -87,9 +82,9 @@ const {
   state: balances,
   isLoading,
   fetchData,
-  options,
+  sort,
   setPage,
-  setTableOptions,
+  pagination,
 } = usePaginationFilters<
   NonFungibleBalance,
   NonFungibleBalancesRequestPayload,
@@ -254,7 +249,7 @@ watch(loading, async (isLoading, wasLoading) => {
         :collection="balances"
         @set-page="setPage($event)"
       >
-        <template #default="{ data, itemLength, totalUsdValue }">
+        <template #default="{ data, totalUsdValue }">
           <RuiDataTable
             v-model="selected"
             row-attr="id"
@@ -264,16 +259,10 @@ watch(loading, async (isLoading, wasLoading) => {
             :rows="data"
             :sort.sync="sort"
             :sort-modifiers="{ external: true }"
-            :options="options"
-            :pagination="{
-              limit: options.itemsPerPage,
-              page: options.page,
-              total: itemLength,
-            }"
+            :pagination.sync="pagination"
             :pagination-modifiers="{ external: true }"
             :loading="isLoading"
             show-select
-            @update:options="setTableOptions($event)"
           >
             <template #item.name="{ row }">
               <NftDetails :identifier="row.id" />

frontend/app/src/components/address-book-manager/AddressBookManagement.vue

@@ -31,20 +31,18 @@ const editMode = ref<boolean>(false);
 const formPayload = ref<AddressBookPayload>(emptyForm());
 const errorMessages = ref<{ address?: string[]; name?: string[] }>({});
 
-const { getAddressBook, addAddressBook, updateAddressBook }
-  = useAddressesNamesStore();
+const { getAddressBook, addAddressBook, updateAddressBook } = useAddressesNamesStore();
 const { setMessage } = useMessageStore();
 
 const {
   filters,
   matchers,
   state,
   isLoading,
-  options,
   fetchData,
   setFilter,
-  setPage,
-  setTableOptions,
+  sort,
+  pagination,
 } = usePaginationFilters<
   AddressBookEntry,
   AddressBookRequestPayload,
@@ -219,11 +217,10 @@ watch(formPayload, ({ blockchain }, { blockchain: oldBlockchain }) => {
               :collection="state"
               :location="loc"
               :loading="isLoading"
-              :options="options"
+              :sort.sync="sort"
+              :pagination.sync="pagination"
               :blockchain="selectedChain"
               @edit="openForm($event)"
-              @update:page="setPage($event)"
-              @update:options="setTableOptions($event)"
               @refresh="fetchData()"
             />
           </template>

frontend/app/src/components/address-book-manager/AddressBookTable.vue

@@ -6,44 +6,69 @@ import {
 } from '@rotki/common/lib/messages';
 import type {
   DataTableColumn,
-  DataTableOptions,
   DataTableSortData,
+  TablePaginationData,
 } from '@rotki/ui-library-compat';
 import type {
   AddressBookEntry,
   AddressBookLocation,
 } from '@/types/eth-names';
 import type { Collection } from '@/types/collection';
-import type { TablePagination } from '@/types/pagination';
 
 const props = defineProps<{
   collection: Collection<AddressBookEntry>;
   location: AddressBookLocation;
   loading: boolean;
-  options: TablePagination<AddressBookEntry>;
+  sort: DataTableSortData;
+  pagination: TablePaginationData;
 }>();
 
 const emit = defineEmits<{
   (e: 'edit', item: AddressBookEntry): void;
-  (e: 'update:page', page: number): void;
-  (e: 'update:options', pagination: DataTableOptions): void;
+  (e: 'update:sort', sort: DataTableSortData): void;
+  (e: 'update:pagination', pagination: TablePaginationData): void;
   (e: 'refresh'): void;
 }>();
 
+const { location } = toRefs(props);
+
 const { t } = useI18n();
 
-function setPage(page: number) {
-  emit('update:page', page);
-}
+const paginationModel = useVModel(props, 'pagination', emit);
+const sortModel = useVModel(props, 'sort', emit);
 
-function updatePagination(pagination: DataTableOptions) {
-  return emit('update:options', pagination);
-}
+const cols = computed<DataTableColumn[]>(() => [
+  {
+    label: t('common.address'),
+    key: 'address',
+    sortable: true,
+  },
+  {
+    label: t('common.name'),
+    key: 'name',
+    sortable: true,
+  },
+  {
+    label: '',
+    key: 'actions',
+  },
+]);
 
 function refresh() {
   emit('refresh');
 }
 
+function edit(item: AddressBookEntry) {
+  emit('edit', item);
+}
+
+function setPage(page: number) {
+  set(paginationModel, {
+    ...get(paginationModel),
+    page,
+  });
+}
+
 function addressBookDeletion(location: Ref<AddressBookLocation>) {
   const { show } = useConfirmStore();
   const { notify } = useNotificationsStore();
@@ -91,34 +116,6 @@ function addressBookDeletion(location: Ref<AddressBookLocation>) {
   };
 }
 
-const { location } = toRefs(props);
-
-function edit(item: AddressBookEntry) {
-  emit('edit', item);
-}
-
-const sort: Ref<DataTableSortData> = ref({
-  column: 'name',
-  direction: 'asc' as const,
-});
-
-const tableHeaders = computed<DataTableColumn[]>(() => [
-  {
-    label: t('common.address').toString(),
-    key: 'address',
-    sortable: true,
-  },
-  {
-    label: t('common.name').toString(),
-    key: 'name',
-    sortable: true,
-  },
-  {
-    label: '',
-    key: 'actions',
-  },
-]);
-
 const { showDeleteConfirmation } = addressBookDeletion(location);
 </script>
 
@@ -128,25 +125,18 @@ const { showDeleteConfirmation } = addressBookDeletion(location);
       :collection="collection"
       @set-page="setPage($event)"
     >
-      <template #default="{ data, itemLength }">
+      <template #default="{ data }">
         <RuiDataTable
           :rows="data"
-          :cols="tableHeaders"
+          :cols="cols"
           :loading="loading"
-          :options="options"
-          :pagination="{
-            limit: options.itemsPerPage,
-            page: options.page,
-            total: itemLength,
-          }"
+          :pagination.sync="paginationModel"
           :pagination-modifiers="{ external: true }"
-          :sort.sync="sort"
+          :sort.sync="sortModel"
           :sort-modifiers="{ external: true }"
-          row-attr=""
+          row-attr="address"
           outlined
           dense
-          :server-items-length="itemLength"
-          @update:options="updatePagination($event)"
         >
           <template #item.address="{ row }">
             <AccountDisplay

frontend/app/src/components/asset-manager/cex-mapping/ManageCexMappingContent.vue

@@ -25,10 +25,8 @@ const {
   state,
   isLoading: loading,
   editableItem,
-  options,
   fetchData,
-  setTableOptions,
-  setPage,
+  pagination,
 } = usePaginationFilters<
   CexMapping,
   CexMappingRequestPayload,
@@ -132,10 +130,8 @@ const dialogTitle = computed<string>(() =>
         :location.sync="selectedLocation"
         :symbol.sync="selectedSymbol"
         :loading="loading"
-        :options="options"
+        :pagination.sync="pagination"
         @refresh="fetchData()"
-        @update:options="setTableOptions($event)"
-        @update:page="setPage($event)"
         @edit="edit($event)"
         @delete="showDeleteConfirmation($event)"
       />

frontend/app/src/components/asset-manager/cex-mapping/ManageCexMappingTable.vue

@@ -1,22 +1,20 @@
 <script setup lang="ts">
 import type { CexMapping } from '@/types/asset';
 import type { Collection } from '@/types/collection';
-import type { DataTableColumn, DataTableOptions } from '@rotki/ui-library-compat';
-import type { TablePagination } from '@/types/pagination';
+import type { DataTableColumn, TablePaginationData } from '@rotki/ui-library-compat';
 
 const props = withDefaults(defineProps<{
   collection: Collection<CexMapping>;
   location: string;
   symbol?: string;
   loading: boolean;
-  options: TablePagination<CexMapping>;
+  pagination: TablePaginationData;
 }>(), { symbol: undefined });
 
 const emit = defineEmits<{
   (e: 'update:location', location: string): void;
   (e: 'update:symbol', symbol?: string): void;
-  (e: 'update:page', page: number): void;
-  (e: 'update:options', options: DataTableOptions): void;
+  (e: 'update:pagination', pagination: TablePaginationData): void;
   (e: 'edit', mapping: CexMapping): void;
   (e: 'delete', mapping: CexMapping): void;
 }>();
@@ -48,18 +46,18 @@ const tableHeaders = computed<DataTableColumn[]>(() => [
 ]);
 
 const locationModel = useVModel(props, 'location', emit);
-
-function setPage(page: number) {
-  emit('update:page', page);
-}
-
-function updatePagination(options: DataTableOptions) {
-  emit('update:options', options);
-}
+const paginationModel = useVModel(props, 'pagination', emit);
 
 const edit = (mapping: CexMapping) => emit('edit', mapping);
 const deleteMapping = (mapping: CexMapping) => emit('delete', mapping);
 const onSymbolChange = useDebounceFn((value?: string) => emit('update:symbol', value), 500);
+
+function setPage(page: number) {
+  set(paginationModel, {
+    ...get(paginationModel),
+    page,
+  });
+}
 </script>
 
 <template>
@@ -94,23 +92,18 @@ const onSymbolChange = useDebounceFn((value?: string) => emit('update:symbol', v
       :collection="collection"
       @set-page="setPage($event)"
     >
-      <template #default="{ data, found }">
+      <template #default="{ data }">
         <RuiDataTable
           :rows="data"
           dense
           striped
           :loading="loading"
           :cols="tableHeaders"
-          :pagination="{
-            limit: options.itemsPerPage,
-            page: options.page,
-            total: found,
-          }"
+          :pagination.sync="paginationModel"
           :pagination-modifiers="{ external: true }"
           :sticky-offset="64"
           row-attr=""
           outlined
-          @update:options="updatePagination($event)"
         >
           <template #item.location="{ row }">
             <div

frontend/app/src/components/asset-manager/custom/CustomAssetContent.vue

@@ -55,12 +55,12 @@ const {
   filters,
   expanded,
   matchers,
-  options,
   fetchData,
   setFilter,
-  setTableOptions,
   isLoading: loading,
   editableItem,
+  pagination,
+  sort,
 } = usePaginationFilters<
   CustomAsset,
   CustomAssetRequestPayload,
@@ -175,10 +175,10 @@ watch(identifier, (assetId) => {
       :filters="filters"
       :matchers="matchers"
       :expanded.sync="expanded"
-      :options="options"
+      :pagination.sync="pagination"
+      :sort.sync="sort"
       @edit="edit($event)"
       @delete-asset="showDeleteConfirmation($event)"
-      @update:options="setTableOptions($event)"
       @update:filters="setFilter($event)"
     />
     <CustomAssetFormDialog