diff --git a/web-app/packages/admin-lib/src/modules/admin/adminApi.ts b/web-app/packages/admin-lib/src/modules/admin/adminApi.ts
index 08114297..5a1ef867 100644
--- a/web-app/packages/admin-lib/src/modules/admin/adminApi.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/adminApi.ts
@@ -28,9 +28,10 @@ export const AdminApi = {
   },
 
   async fetchUsers(
-    params: PaginatedUsersParams
+    params: PaginatedUsersParams,
+    signal?: AbortSignal
   ): Promise<AxiosResponse<UsersResponse>> {
-    return AdminModule.httpService.get(`/app/admin/users`, { params })
+    return AdminModule.httpService.get(`/app/admin/users`, { params, signal })
   },
 
   async fetchUserByName(
@@ -73,9 +74,10 @@ export const AdminApi = {
   },
 
   async getProjects(
-    params: PaginatedAdminProjectsParams
+    params: PaginatedAdminProjectsParams,
+    signal?: AbortSignal
   ): Promise<AxiosResponse<PaginatedAdminProjectsResponse>> {
-    return AdminModule.httpService.get('/app/admin/projects', { params })
+    return AdminModule.httpService.get('/app/admin/projects', { params, signal })
   },
 
   /**
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/AccountsTable.vue b/web-app/packages/admin-lib/src/modules/admin/components/AccountsTable.vue
index 8f456d47..b52e4c35 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/AccountsTable.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/components/AccountsTable.vue
@@ -24,7 +24,7 @@
           <PInputText
             placeholder="Search accounts"
             data-cy="search-members-field"
-            v-model="searchByName"
+            v-model="search"
             class="w-full"
             @input="onSearch"
           />
@@ -44,49 +44,45 @@
           :first="(options.page - 1) * options.itemsPerPage"
           :sort-field="options.sortBy[0]"
           :sort-order="options.sortDesc[0] ? -1 : 1"
+          :rowHover="true"
           removableSort
           reorderable-columns
           @page="onPage"
-          @row-click="rowClick"
           @sort="onSort"
           data-cy="accounts-table"
         >
-          <template v-for="header in headers" :key="header.field">
-            <PColumn
-              v-if="header.field === 'username'"
-              :field="header.field"
-              :header="header.header"
-              :sortable="header.sortable"
-            >
-              <template #body="slotProps">
-                <router-link
-                  class="title-t4"
-                  :to="{
-                    name: 'account',
-                    params: { username: slotProps.data.username }
-                  }"
-                >
-                  {{ slotProps.data.username }}
-                </router-link>
-              </template>
-            </PColumn>
-            <PColumn
-              v-else-if="header.field === 'active'"
-              :header="header.header"
-              :field="header.field"
-            >
-              <template #body="slotProps">
-                <i v-if="slotProps.data.active" class="ti ti-check" />
+          <PColumn field="username" header="Username" :sortable="true">
+            <template #body="{ data }">
+              <router-link
+                :to="accountRoute(data)"
+                class="dt-row-link title-t4"
+              >
+                {{ data.username }}
+              </router-link>
+            </template>
+          </PColumn>
+          <PColumn field="email" header="Email" :sortable="true">
+            <template #body="{ data }">
+              <router-link :to="accountRoute(data)" class="dt-row-link">
+                {{ data.email }}
+              </router-link>
+            </template>
+          </PColumn>
+          <PColumn field="profile.name" header="Full name">
+            <template #body="{ data }">
+              <router-link :to="accountRoute(data)" class="dt-row-link">
+                {{ data.profile?.name }}
+              </router-link>
+            </template>
+          </PColumn>
+          <PColumn field="active" header="Active">
+            <template #body="{ data }">
+              <router-link :to="accountRoute(data)" class="dt-row-link">
+                <i v-if="data.active" class="ti ti-check" />
                 <i v-else class="ti ti-x" />
-              </template>
-            </PColumn>
-            <PColumn
-              v-else
-              :field="header.field"
-              :header="header.header"
-              :sortable="header.sortable"
-            ></PColumn>
-          </template>
+              </router-link>
+            </template>
+          </PColumn>
           <template #paginatorstart>
             <PButton
               icon="ti ti-refresh"
@@ -106,18 +102,12 @@
 <script lang="ts">
 import {
   PaginatedUsersParams,
+  useDataTableSearch,
   useDialogStore,
-  TableDataHeader,
   AppContainer,
   AppSection
 } from '@mergin/lib'
-import debounce from 'lodash/debounce'
-import { mapActions, mapState } from 'pinia'
-import {
-  DataTablePageEvent,
-  DataTableRowClickEvent,
-  DataTableSortEvent
-} from 'primevue/datatable'
+import { mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
 import { AdminRoutes } from '@/modules'
@@ -130,88 +120,52 @@ export default defineComponent({
     AppContainer,
     AppSection
   },
-  data() {
+  setup() {
+    const adminStore = useAdminStore()
+    const dialogStore = useDialogStore()
+
+    const tableSearch = useDataTableSearch({
+      defaultSortBy: 'username',
+      defaultSortDesc: false
+    })
+
+    tableSearch.setFetchFn((signal) => {
+      const { options, search } = tableSearch
+      const params: PaginatedUsersParams = {
+        page: options.page,
+        per_page: options.itemsPerPage
+      }
+      if (options.sortBy[0]) {
+        params.descending = options.sortDesc[0]
+        params.order_by = options.sortBy[0]
+      }
+      if (search.value) params.like = search.value.trim()
+      adminStore.fetchUsers({ params, signal })
+    })
+
     return {
-      options: {
-        sortBy: ['username'],
-        sortDesc: [false],
-        itemsPerPage: 20,
-        page: 1,
-        perPageOptions: [20, 50, 100]
-      },
-      searchByName: '',
-      headers: [
-        { field: 'username', header: 'Username', sortable: true },
-        { field: 'email', header: 'Email', sortable: true },
-        { field: 'profile.name', header: 'Full name' },
-        { field: 'active', header: 'Active' }
-      ] as TableDataHeader[]
+      ...tableSearch,
+      show: dialogStore.show.bind(dialogStore)
     }
   },
   computed: {
     ...mapState(useAdminStore, ['users', 'loading'])
   },
   created() {
-    this.resetPaging = debounce(this.resetPaging, 1000)
-    this.fetchUsers({ params: this.getParams() })
+    this.initFromQuery()
+    this.doFetch()
   },
   methods: {
-    ...mapActions(useAdminStore, ['fetchUsers']),
-    ...mapActions(useDialogStore, ['show']),
-
-    onSearch() {
-      this.resetPaging()
-      this.fetchUsers({ params: this.getParams() })
-    },
-
-    async resetPaging() {
-      this.options.page = 1
-    },
-
-    getParams(): PaginatedUsersParams {
-      const params = {
-        page: this.options.page,
-        per_page: this.options.itemsPerPage
-      } as PaginatedUsersParams
-      if (this.options.sortBy[0]) {
-        params.descending = this.options.sortDesc[0]
-        params.order_by = this.options.sortBy[0]
-      }
-      if (this.searchByName) {
-        params.like = this.searchByName.trim()
-      }
-      return params
-    },
-
-    onRefresh() {
-      this.fetchUsers({ params: this.getParams() })
-    },
-
-    onPage(event: DataTablePageEvent) {
-      this.options.page = event.page + 1
-      this.options.itemsPerPage = event.rows
-      this.fetchUsers({ params: this.getParams() })
-    },
-
-    onSort(event: DataTableSortEvent) {
-      this.options.sortBy[0] = event.sortField?.toString()
-      this.options.sortDesc[0] = event.sortOrder < 1
-      this.fetchUsers({ params: this.getParams() })
-    },
-
-    rowClick(event: DataTableRowClickEvent) {
-      this.$router.push({
-        name: AdminRoutes.ACCOUNT,
-        params: { username: event.data.username }
-      })
+    accountRoute(data) {
+      return { name: AdminRoutes.ACCOUNT, params: { username: data.username } }
     },
 
     createUserDialog() {
       const dialog = { maxWidth: 500, header: 'Create user' }
       const listeners = {
         success: () => {
-          this.resetPaging()
-          this.fetchUsers({ params: this.getParams() })
+          this.options.page = 1
+          this.doFetch()
         }
       }
       this.show({
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue b/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue
index 8ac2ea4f..6c268652 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue
@@ -43,124 +43,118 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           :first="(options.page - 1) * options.itemsPerPage"
           :sortField="options.sortBy[0]"
           :sortOrder="options.sortDesc[0] ? -1 : 1"
+          :rowHover="true"
+          :row-class="(data) => (data.removed_at ? 'opacity-80' : '')"
           removableSort
           reorderable-columns
           @page="onPage"
           @sort="onSort"
-          @row-click="rowClick"
           data-cy="projects-table"
-          :row-class="(data) => (data.removed_at ? 'opacity-80' : '')"
         >
-          <template v-for="header in headers" :key="header.field">
-            <PColumn
-              v-if="showNamespace && header.field === 'workspace'"
-              :field="header.field"
-              :header="header.header"
-              :sortable="header.sortable"
-            >
-              <template #body="slotProps">
-                {{ slotProps.data.workspace }}
-              </template>
-            </PColumn>
+          <PColumn
+            v-if="showNamespace"
+            field="workspace"
+            header="Workspace"
+            :sortable="true"
+          >
+            <template #body="{ data }">
+              <router-link
+                v-if="!data.removed_at"
+                :to="projectRoute(data)"
+                class="dt-row-link"
+              >
+                {{ data.workspace }}
+              </router-link>
+              <span v-else>{{ data.workspace }}</span>
+            </template>
+          </PColumn>
 
-            <PColumn
-              v-else-if="header.field === 'name'"
-              :field="header.field"
-              :header="header.header"
-              :sortable="header.sortable"
-            >
-              <template #body="slotProps">
-                <template v-if="slotProps.data.removed_at">{{
-                  slotProps.data.name
-                }}</template>
-                <router-link
-                  v-else
-                  :to="{
-                    name: 'project',
-                    params: {
-                      namespace: slotProps.data.workspace,
-                      projectName: slotProps.data.name
-                    }
-                  }"
-                  class="font-semibold"
-                >
-                  {{ slotProps.data.name }}
-                </router-link>
-              </template>
-            </PColumn>
+          <PColumn field="name" header="Name" :sortable="true">
+            <template #body="{ data }">
+              <router-link
+                v-if="!data.removed_at"
+                :to="projectRoute(data)"
+                class="dt-row-link font-semibold"
+              >
+                {{ data.name }}
+              </router-link>
+              <span v-else>{{ data.name }}</span>
+            </template>
+          </PColumn>
 
-            <PColumn
-              v-else-if="header.field === 'updated'"
-              :field="header.field"
-              :header="header.header"
-              :sortable="header.sortable"
-            >
-              <template #body="slotProps">
-                <span :title="$filters.datetime(slotProps.data.updated)">
-                  {{ $filters.timediff(slotProps.data.updated) }}
+          <PColumn field="updated" header="Last Update" :sortable="true">
+            <template #body="{ data }">
+              <router-link
+                v-if="!data.removed_at"
+                :to="projectRoute(data)"
+                class="dt-row-link"
+              >
+                <span :title="$filters.datetime(data.updated)">
+                  {{ $filters.timediff(data.updated) }}
                 </span>
-              </template>
-            </PColumn>
+              </router-link>
+              <span v-else :title="$filters.datetime(data.updated)">
+                {{ $filters.timediff(data.updated) }}
+              </span>
+            </template>
+          </PColumn>
 
-            <PColumn
-              v-else-if="header.field === 'disk_usage'"
-              :field="header.field"
-              :header="header.header"
-              :sortable="header.sortable"
-            >
-              <template #body="slotProps">
-                {{ $filters.filesize(slotProps.data.disk_usage, 'MB') }}
-              </template>
-            </PColumn>
+          <PColumn field="disk_usage" header="Size" :sortable="true">
+            <template #body="{ data }">
+              <router-link
+                v-if="!data.removed_at"
+                :to="projectRoute(data)"
+                class="dt-row-link"
+              >
+                {{ $filters.filesize(data.disk_usage, 'MB') }}
+              </router-link>
+              <span v-else>{{ $filters.filesize(data.disk_usage, 'MB') }}</span>
+            </template>
+          </PColumn>
 
-            <PColumn
-              v-else-if="header.field === 'removed_at'"
-              :field="header.field"
-              :header="header.header"
-              :sortable="header.sortable"
-            >
-              <template #body="slotProps">
-                <span
-                  :title="`Scheduled for removal at ${$filters.datetime(
-                    slotProps.data.removed_at
-                  )}`"
-                >
-                  {{ $filters.timediff(slotProps.data.removed_at) }}
-                </span>
-              </template>
-            </PColumn>
+          <PColumn
+            field="removed_at"
+            header="Scheduled removal at"
+            :sortable="true"
+          >
+            <template #body="{ data }">
+              <span
+                :title="`Scheduled for removal at ${$filters.datetime(
+                  data.removed_at
+                )}`"
+              >
+                {{ $filters.timediff(data.removed_at) }}
+              </span>
+            </template>
+          </PColumn>
+
+          <PColumn field="removed_by" header="Removed by" :sortable="true">
+            <template #body="{ data }">
+              {{ data.removed_by }}
+            </template>
+          </PColumn>
 
-            <PColumn v-else-if="header.field === 'buttons'">
-              <template #body="slotProps">
-                <div
-                  class="justify-center px-0"
-                  v-if="slotProps.data.removed_at"
-                >
-                  <div class="flex align-items-center gap-1">
-                    <PButton
-                      label="Restore"
-                      severity="secondary"
-                      size="small"
-                      @click="confirmRestore(slotProps.data)"
-                    />
-                    <PButton
-                      label="Delete"
-                      severity="danger"
-                      size="small"
-                      @click="confirmDelete(slotProps.data)"
-                    />
-                  </div>
+          <PColumn>
+            <template #body="{ data }">
+              <div class="justify-center px-0" v-if="data.removed_at">
+                <div class="flex align-items-center gap-1">
+                  <PButton
+                    label="Restore"
+                    severity="secondary"
+                    size="small"
+                    @click="confirmRestore(data)"
+                  />
+                  <PButton
+                    label="Delete"
+                    severity="danger"
+                    size="small"
+                    @click="confirmDelete(data)"
+                  />
                 </div>
-              </template>
-            </PColumn>
+              </div>
+            </template>
+          </PColumn>
 
-            <PColumn
-              v-else
-              :field="header.field"
-              :header="header.header"
-              :sortable="header.sortable"
-            ></PColumn>
-          </template>
           <template #paginatorstart>
             <PButton
               icon="ti ti-refresh"
@@ -181,20 +175,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <script lang="ts">
 import {
   ConfirmDialog,
+  useDataTableSearch,
   useDialogStore,
   useNotificationStore,
   SortingOptions,
-  TableDataHeader,
   AppSection,
   AppContainer,
   ConfirmDialogProps
 } from '@mergin/lib'
-import { mapActions, mapState } from 'pinia'
-import {
-  DataTablePageEvent,
-  DataTableRowClickEvent,
-  DataTableSortEvent
-} from 'primevue/datatable'
+import { mapState, mapActions } from 'pinia'
 import { PropType, defineComponent } from 'vue'
 
 import { AdminRoutes, useAdminStore } from '@/main'
@@ -218,87 +207,46 @@ export default defineComponent({
       })
     }
   },
-  data() {
+  setup(props) {
+    const adminStore = useAdminStore()
+    const dialogStore = useDialogStore()
+    const notificationStore = useNotificationStore()
+
+    const tableSearch = useDataTableSearch({
+      defaultSortBy: props.initialOptions.sortBy[0],
+      defaultSortDesc: props.initialOptions.sortDesc[0]
+    })
+
+    tableSearch.setFetchFn((signal) => {
+      const { options, search } = tableSearch
+      adminStore.getProjects({
+        params: { ...options, like: search.value },
+        signal
+      })
+    })
+
     return {
-      options: Object.assign({}, this.initialOptions),
-      search: ''
+      ...tableSearch,
+      showDialog: dialogStore.show.bind(dialogStore),
+      error: notificationStore.error.bind(notificationStore),
+      show: notificationStore.show.bind(notificationStore)
     }
   },
   computed: {
-    ...mapState(useAdminStore, ['projects']),
-    headers(): TableDataHeader[] {
-      return [
-        ...(this.showNamespace
-          ? [
-              {
-                header: 'Workspace',
-                field: 'workspace',
-                sortable: true
-              }
-            ]
-          : []),
-        { header: 'Name', field: 'name', sortable: true },
-        { header: 'Last Update', field: 'updated', sortable: true },
-        { header: 'Size', field: 'disk_usage', sortable: true },
-        { header: 'Scheduled removal at', field: 'removed_at', sortable: true },
-        { header: 'Removed by', field: 'removed_by', sortable: true },
-        { header: '', field: 'buttons', sortable: false }
-      ]
-    }
+    ...mapState(useAdminStore, ['projects'])
   },
   created() {
-    this.resetPaging()
-    this.fetchProjects()
+    this.initFromQuery()
+    this.doFetch()
   },
   methods: {
-    ...mapActions(useDialogStore, { showDialog: 'show' }),
-    ...mapActions(useNotificationStore, ['error', 'show']),
-    ...mapActions(useAdminStore, [
-      'getProjects',
-      'restoreProject',
-      'deleteProject'
-    ]),
-
-    paginating(options) {
-      this.options = options
-      this.fetchProjects()
-    },
-
-    async resetPaging() {
-      this.options.page = 1
-    },
+    ...mapActions(useAdminStore, ['restoreProject', 'deleteProject']),
 
-    fetchProjects() {
-      this.getProjects({ params: { ...this.options, like: this.search } })
-    },
-
-    onSearch() {
-      this.resetPaging()
-      this.fetchProjects()
-    },
-
-    onPage(event: DataTablePageEvent) {
-      this.options.page = event.page + 1
-      this.options.itemsPerPage = event.rows
-      this.fetchProjects()
-    },
-
-    onSort(event: DataTableSortEvent) {
-      this.options.sortBy[0] = event.sortField?.toString()
-      this.options.sortDesc[0] = event.sortOrder < 1
-      this.fetchProjects()
-    },
-
-    rowClick(event: DataTableRowClickEvent) {
-      if (event.data.removed_at) return
-
-      this.$router.push({
+    projectRoute(data) {
+      return {
         name: AdminRoutes.PROJECT,
-        params: {
-          namespace: event.data.workspace,
-          projectName: event.data.name
-        }
-      })
+        params: { namespace: data.workspace, projectName: data.name }
+      }
     },
 
     confirmRestore(item) {
@@ -309,7 +257,7 @@ export default defineComponent({
       const listeners = {
         confirm: async () => {
           await this.restoreProject({ projectId: item.id })
-          this.fetchProjects()
+          this.doFetch()
         }
       }
       this.showDialog({
@@ -334,17 +282,13 @@ export default defineComponent({
       const listeners = {
         confirm: async () => {
           await this.deleteProject({ projectId: item.id })
-          this.fetchProjects()
+          this.doFetch()
         }
       }
       this.showDialog({
         component: ConfirmDialog,
         params: { props, listeners, dialog: { header: 'Delete project' } }
       })
-    },
-
-    onRefresh() {
-      this.fetchProjects()
     }
   }
 })
diff --git a/web-app/packages/admin-lib/src/modules/admin/store.ts b/web-app/packages/admin-lib/src/modules/admin/store.ts
index a0544bbd..5bf5c5fa 100644
--- a/web-app/packages/admin-lib/src/modules/admin/store.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/store.ts
@@ -118,15 +118,20 @@ export const useAdminStore = defineStore('adminModule', {
       this.isServerConfigHidden = value
     },
 
-    async fetchUsers(payload: { params: PaginatedUsersParams }) {
+    async fetchUsers(payload: {
+      params: PaginatedUsersParams
+      signal?: AbortSignal
+    }) {
       const notificationStore = useNotificationStore()
 
       this.setLoading(true)
       try {
-        const response = await AdminApi.fetchUsers(payload.params)
+        const response = await AdminApi.fetchUsers(payload.params, payload.signal)
         this.setUsers(response.data)
       } catch (e) {
-        notificationStore.error({ text: errorUtils.getErrorMessage(e) })
+        if (!axios.isCancel(e)) {
+          notificationStore.error({ text: errorUtils.getErrorMessage(e) })
+        }
       } finally {
         this.setLoading(false)
       }
@@ -261,6 +266,7 @@ export const useAdminStore = defineStore('adminModule', {
 
     async getProjects(payload: {
       params: SortingOptions & Pick<PaginatedAdminProjectsParams, 'like'>
+      signal?: AbortSignal
     }) {
       const notificationStore = useNotificationStore()
 
@@ -277,13 +283,15 @@ export const useAdminStore = defineStore('adminModule', {
           params.like = payload.params.like.trim()
         }
 
-        const response = await AdminApi.getProjects(params)
+        const response = await AdminApi.getProjects(params, payload.signal)
         this.projects.items = response.data.items
         this.projects.count = response.data.count
       } catch (e) {
-        notificationStore.error({
-          text: 'Failed to fetch projects'
-        })
+        if (!axios.isCancel(e)) {
+          notificationStore.error({
+            text: 'Failed to fetch projects'
+          })
+        }
       } finally {
         this.projects.loading = false
       }
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index ccf252bb..156473c4 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -133,3 +133,12 @@ img {
   text-decoration-line: underline;
   text-decoration-style: dotted;
 }
+
+td:has(.dt-row-link) {
+  padding: 0;
+}
+
+.dt-row-link {
+  display: block;
+  padding: $tableBodyCellPadding;
+}
diff --git a/web-app/packages/lib/src/common/composables/index.ts b/web-app/packages/lib/src/common/composables/index.ts
index dd4fe405..86cca258 100644
--- a/web-app/packages/lib/src/common/composables/index.ts
+++ b/web-app/packages/lib/src/common/composables/index.ts
@@ -3,3 +3,5 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 export { default as useRouterTitle } from './use_router_title'
+export { useDataTableSearch } from './useDataTableSearch'
+export type { DataTableSearchOptions } from './useDataTableSearch'
diff --git a/web-app/packages/lib/src/common/composables/useDataTableSearch.ts b/web-app/packages/lib/src/common/composables/useDataTableSearch.ts
new file mode 100644
index 00000000..e04a2123
--- /dev/null
+++ b/web-app/packages/lib/src/common/composables/useDataTableSearch.ts
@@ -0,0 +1,104 @@
+// Copyright (C) Lutra Consulting Limited
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+
+import debounce from 'lodash/debounce'
+import { DataTablePageEvent, DataTableSortEvent } from 'primevue/datatable'
+import { ref, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export interface DataTableSearchOptions {
+  defaultSortBy?: string
+  defaultSortDesc?: boolean
+}
+
+/**
+ * Shared search/pagination/URL-sync logic for lazy-loaded admin data tables.
+ *
+ * Call setFetchFn() immediately after setup to register the table-specific
+ * fetch action; all event handlers will invoke it automatically.
+ */
+export function useDataTableSearch(opts: DataTableSearchOptions = {}) {
+  const { defaultSortBy = '', defaultSortDesc = false } = opts
+
+  const route = useRoute()
+  const router = useRouter()
+
+  const search = ref('')
+  const options = reactive({
+    sortBy: [defaultSortBy] as string[],
+    sortDesc: [defaultSortDesc] as boolean[],
+    itemsPerPage: 20,
+    page: 1,
+    perPageOptions: [20, 50, 100]
+  })
+  const abortController = ref<AbortController | null>(null)
+  const fetchFn = ref<((signal: AbortSignal) => void) | null>(null)
+
+  function setFetchFn(fn: (signal: AbortSignal) => void) {
+    fetchFn.value = fn
+  }
+
+  function initFromQuery() {
+    const q = route.query
+    if (q.q) search.value = String(q.q)
+    if (q.page) options.page = Number(q.page)
+    if (q.per_page) options.itemsPerPage = Number(q.per_page)
+    if (q.order_by) options.sortBy[0] = String(q.order_by)
+    if (q.desc) options.sortDesc[0] = q.desc === 'true'
+  }
+
+  function updateQuery() {
+    const query: Record<string, string> = {}
+    if (search.value) query.q = search.value
+    if (options.page > 1) query.page = String(options.page)
+    if (options.itemsPerPage !== 20)
+      query.per_page = String(options.itemsPerPage)
+    if (options.sortBy[0] && options.sortBy[0] !== defaultSortBy)
+      query.order_by = options.sortBy[0]
+    if (options.sortDesc[0] !== defaultSortDesc)
+      query.desc = String(options.sortDesc[0])
+    router.replace({ query })
+  }
+
+  function doFetch() {
+    abortController.value?.abort()
+    abortController.value = new AbortController()
+    updateQuery()
+    fetchFn.value?.(abortController.value.signal)
+  }
+
+  const onSearch = debounce(() => {
+    options.page = 1
+    doFetch()
+  }, 500)
+
+  function onPage(event: DataTablePageEvent) {
+    options.page = event.page + 1
+    options.itemsPerPage = event.rows
+    doFetch()
+  }
+
+  function onSort(event: DataTableSortEvent) {
+    options.sortBy[0] = event.sortField?.toString() ?? ''
+    options.sortDesc[0] = event.sortOrder < 1
+    doFetch()
+  }
+
+  function onRefresh() {
+    doFetch()
+  }
+
+  return {
+    search,
+    options,
+    abortController,
+    setFetchFn,
+    initFromQuery,
+    doFetch,
+    onSearch,
+    onPage,
+    onSort,
+    onRefresh
+  }
+}
diff --git a/web-app/packages/lib/src/mm-theme.ts b/web-app/packages/lib/src/mm-theme.ts
index 169ab5ca..8d6e8571 100644
--- a/web-app/packages/lib/src/mm-theme.ts
+++ b/web-app/packages/lib/src/mm-theme.ts
@@ -157,7 +157,7 @@ export default usePassThrough(
     } as TagPassThroughOptions,
     column: {
       bodyCell: {
-        class: 'pl-4 py-2'
+        // class: 'pl-4 py-2'
       },
       headerCell: {
         class: 'pl-4 py-1',