Table in Vue3/TS

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { UserType, GetUsers } from '@api/User'

import { ElInput, ElTable, ElTableColumn } from 'element-plus'
import { takeLeft } from 'fp-ts/Array'
import * as O from 'fp-ts/Option'

export default defineComponent({
  components: {
    ElInput,
    ElTable,
    ElTableColumn,
  },
  setup() {
    const totalUsers = ref<UserType[]>([]) // baseline of all users
    const displayableUsers = ref<UserType[]>([]) // users affected by filter
    const displayedUsers = ref<UserType[]>([]) // users affected by filter, paginated
    const chunks = ref<number>(0)

    const inactivityDate = new Date() // limited to defining imperative
    inactivityDate.setMonth(inactivityDate.getMonth() - 3)

    const appendChunk = () => {
      chunks.value += 1
      displayedUsers.value = takeLeft(chunks.value * 1)(displayableUsers.value)
    }

    const filterUsers = (filter: 'active' | 'inactive' | 'all' = 'all') => {
      chunks.value = 0 // reset chunks

      // Update displayableUsers
      switch (filter) {
        case 'active':
          displayableUsers.value = totalUsers.value.filter(
            (x) => new Date(O.toNullable(x.lastAccess)) > inactivityDate
          )
          break
        case 'inactive':
          displayableUsers.value = totalUsers.value.filter(
            (x) => new Date(O.toNullable(x.lastAccess)) < inactivityDate
          )
          break
        default:
          displayableUsers.value = totalUsers.value
      }

      appendChunk() // display first chunk
    }

    // Search ignores pagination, going through displayableUsers instead of displayedUsers
    function searchDisplayable(search: string) {
      return search
        ? displayableUsers.value.filter(
            (data) =>
              !search || data.email.toLowerCase().includes(search.toLowerCase())
          )
        : displayedUsers.value
    }

    onMounted(async () => {
      totalUsers.value = await GetUsers() // baseline of all users
      displayableUsers.value = totalUsers.value // users affected by filter
      appendChunk() // display first chunk
    })

    return {
      search: ref<string>(''), // search string, only for template
      searchDisplayable,
      displayedUsers,
      displayableUsers,
      appendChunk,
      filterUsers,
      aestheticFilter: ref<number>(0), // radio display, only for template
      toNullable: O.toNullable,
    }
  },
})
</script>

<template>
  <button class="ontario-button--primary mt-0 float-end">
    Create Microservice
  </button>
  <div class="clearfix"></div>

  <h2 class="h4 mt-5">All Users</h2>

  <router-link :to="{ name: 'usercreate' }" class="a_no_line">
    <button type="button">Create User</button>
  </router-link>

  <div>
    <el-input v-model="search" placeholder="Type to search" />
    <input
      id="all"
      v-model="aestheticFilter"
      type="radio"
      value="0"
      @click="filterUsers('all')"
    />
    <label for="all">All users</label>
    <input
      id="active"
      v-model="aestheticFilter"
      type="radio"
      value="1"
      @click="filterUsers('active')"
    />
    <label for="all">Active</label>
    <input
      id="inactive"
      v-model="aestheticFilter"
      type="radio"
      value="2"
      @click="filterUsers('inactive')"
    />
    <label for="all">Inactive</label>

    <el-table :data="searchDisplayable(search)" style="width: 100%">
      <el-table-column prop="email" label="User" width="180" sortable>
        <template #default="scope">
          <router-link
            :to="{ name: 'useredit', params: { id: scope.row.id } }"
            class="a_no_line"
            >{{ scope.row.email }}</router-link
          >
        </template>
      </el-table-column>
      <el-table-column label="Last Accessed" width="180" sortable>
        <template #default="scope">
          <p>
            {{
              new Date(toNullable(scope.row.lastAccess))
                .toJSON()
                .slice(0, 10)
                .split('-')
                .reverse()
                .join('/')
            }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="Microservice - Role - Ministry">
        <template #default="scope">
          <template
            v-for="microservice in scope.row.microservices"
            :key="microservice.microserviceName"
          >
            <p>{{ microservice.microserviceName }}</p>
            <template v-for="role in microservice.roles" :key="role.roleName">
              <p>{{ role.roleName }} - {{ role.ministryName.join(', ') }}</p>
            </template>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="Actions">
        <div class="dropdown">
          <button
            :id="`dropdownMenu`"
            class="btn btn-secondary dropdown-toggle"
            type="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            Actions
          </button>
          <ul class="dropdown-menu" :aria-labelledby="`dropdownMenu`">
            <li><a class="dropdown-item" href="#">Edit User</a></li>
            <li><a class="dropdown-item" href="#">Reset Password</a></li>
            <li><a class="dropdown-item" href="#">Resend 2FA</a></li>
            <li><a class="dropdown-item" href="#">Reset 2FA</a></li>
            <li><a class="dropdown-item" href="#">Activate/Deactivate</a></li>
          </ul>
        </div>
      </el-table-column>
    </el-table>
    <button
      v-if="!search.length && displayedUsers.length !== displayableUsers.length"
      @click.prevent="appendChunk"
    >
      Load More
    </button>
  </div>
</template>