ヘッドレスUI TanStack vue-table を Vue 3 で利用する – ページング

  // ページングを行ったときの処理モデル
  getPaginationRowModel: getPaginationRowModel(),

    <div class="pagination">
      <div className="flex items-center gap-2">
        <button
          className="border rounded p-1"
          @click="() => table.setPageIndex(0)"
          :disabled="!table.getCanPreviousPage()"
        >
          {{ '<<' }}
        </button>
        <button
          className="border rounded p-1"
          @click="() => table.previousPage()"
          :disabled="!table.getCanPreviousPage()"
        >
          {{ '<' }}
        </button>
        <button
          className="border rounded p-1"
          @click="() => table.nextPage()"
          :disabled="!table.getCanNextPage()"
        >
          {{ '>' }}
        </button>
        <button
          className="border rounded p-1"
          @click="() => table.setPageIndex(table.getPageCount() - 1)"
          :disabled="!table.getCanNextPage()"
        >
          {{ '>>' }}
        </button>
        <span className="flex items-center gap-1">
          <div>Page</div>
          <strong>
            {{ table.getState().pagination.pageIndex + 1 }} of {{ ' ' }}
            {{ table.getPageCount() }}
          </strong>
        </span>
        <span className="flex items-center gap-1">
          | Go to page:
          <input
            type="number"
            :defaultValue="table.getState().pagination.pageIndex + 1"
            @change="(e: Event) => {
              table.setPageIndex((e.target as HTMLInputElement).value ? Number((e.target as HTMLInputElement).value) - 1 : 0)
            }"
            className="border p-1 rounded w-16"
          />
        </span>
        <select
          value="{table.getState().pagination.pageSize}"
          @change="(e: Event) => {
            table.setPageSize(Number((e.target as HTMLInputElement).value))
          }"
        >
          <option
            v-for="pageSize in [10, 20, 30, 40, 50]"
            :key="pageSize"
            :value="pageSize"
          >
            Show {{ pageSize }}
          </option>
        </select>
      </div>
      <div>{{ table.getRowModel().rows.length }} Rows</div>
      <pre>{{ JSON.stringify(table.getState().pagination, null, 2) }}</pre>
    </div>
    <button @click="() => (userList = makeData(3000))">Rerender</button>

import { faker } from '@faker-js/faker'

faker.locale = 'ja'

type User = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

const newUser = (): User => {
  return {
    firstName: faker.name.firstName(),
    lastName: faker.name.lastName(),
    age: faker.datatype.number(40),
    visits: faker.datatype.number(1000),
    progress: faker.datatype.number(100),
    status: faker.helpers.shuffle<User['status']>(['無効', '有向'])[0]!,
  }
}

export function makeData(lens: number) {
  const result: User[] = []
  const lists = [...Array(lens)].map((_, i) => i)
  for (let i of lists) {
    result.push(newUser())
  }
  return result
}

  get data() {
    // 表示対象
    return data.value
  },
  state: {
    get sorting() {
      return sorting.value
    },
    // 現在のページ数（pageIndex）, ページごとに表示数（pageSize） をもつオブジェクト 
    get pagination() {
      return paginationState
    },
  },
   ...
  // ページングを行ったときの処理モデル
  // 手動制御する場合は使いません
  // getPaginationRowModel: getPaginationRowModel(),

  // 総ページ数を指定
  get pageCount() {
    return pageCount.value
  },
  // 表示ページのindexが変更された際のイベントハンドラ
  onPaginationChange: setPagination,
  // 手動制御する場合はこちらを true にする（と上のgetPaginationRowMode()が使用されない）
  manualPagination: true,

// ページ数
// ページあたりの表示数
const paginationState = reactive<PaginationState>({
  pageIndex: 0,
  pageSize: 10,
})
// 総ページ数
const pageCount = ref(-1)
// ページ数変更時に更新
const setPagination = (ps: Updater<PaginationState>) => {
  if (typeof ps === 'function') {
    const newState = ps(paginationState)
    console.log(`setPagination is called: `)
    console.log(newState)
    paginationState.pageIndex = newState.pageIndex
    paginationState.pageSize = newState.pageSize
  }
}
// 実際のデータ
const data = ref<User[]>([])
// サーバからのデータ取得のダミー処理
// 
const getData = async () => {
  const { pageIndex, pageSize } = paginationState

  // 次に表示する情報の取得
  const api = () => {
    return {
      items: [...userList.value].slice(
        pageIndex * pageSize,
        pageIndex * pageSize + pageSize
      ),
      pageCount: userList.value.length / pageSize,
    }
  }
  const result = await api()

  data.value = result.items
  pageCount.value = result.pageCount
}
// マウント時
onMounted(() => getData())
// ページ変更に応じて表示データ切り替え
watch(paginationState, () => getData())