useRecordIdPage

• Category: Composables
• Relate: getRecordIdList
• Dependencies: @lark-base-open/js-sdk
• Last Changed: yesterday

Notice

This function needs to use in Base, please use this website as a plugin in a Base to see the demo.

Demo

Source

Show demo code

demo.vue

<script setup lang="ts">
import { useRecordIdPage, useSelection, useTable } from "@qww0302/use-bitable";

const { tableId, viewId } = useSelection();
const { table } = useTable(tableId);
const { recordIds, pending, totalPage, curPage } = useRecordIdPage(table, {
  viewId,
  pageSize: 10,
});
const prevPage = () => {
  curPage.value -= 1;
};
const nextPage = () => {
  curPage.value += 1;
};
</script>

<template>
  <div>
    <div v-if="pending">Loading...</div>
    <div v-else>
      <div v-for="recordId in recordIds" :key="recordId">
        {{ recordId }}
      </div>
    </div>
    <div>
      <button @click="prevPage" :disabled="pending || curPage === 0">Prev</button>
      <span>{{ curPage + 1 }} / {{ totalPage }}</span>
      <button @click="nextPage" :disabled="pending || curPage === totalPage">Next</button>
    </div>
  </div>
</template>

Usage

Type Declarations

import { MaybeRef } from "vue"
import type { MaybeRefOrGetter } from "vue"
import type { ITable, ISortInfo, IFilterInfo } from "@lark-base-open/js-sdk"
/**
 * RecordId Page option
 */
interface RecordIdPageOption {
  /**
   * Per page size
   *
   * 每页大小
   *
   * @default 200
   */
  pageSize?: number
  /**
   * Filter
   *
   * 过滤条件
   */
  filter?: IFilterInfo
  /**
   * Sorts
   *
   * 排序
   */
  sort?: ISortInfo[]
  /**
   * View ID
   *
   * 视图 ID
   */
  viewId?: MaybeRef<string | null>
}
export declare function useRecordIdPage(
  table: MaybeRefOrGetter<ITable | null>,
  option: RecordIdPageOption,
): {
  total: import("vue").Ref<number, number>
  hasMore: import("vue").Ref<boolean, boolean>
  recordIds:
    | import("vue").ShallowRef<string[] | undefined>
    | import("vue").Ref<string[], string[]>
  pending: import("vue").Ref<boolean, boolean>
  curPage: import("vue").WritableComputedRef<number, number>
  totalPage: import("vue").ComputedRef<number>
}