useRecordsPage

• Category: Composables
• Relate: getRecords
• 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 {
  useRecordsPage,
  useTable,
  useSelection,
  useFieldMetaList,
} from "@qww0302/use-bitable";
import { ElButton, ElTableV2, vLoading } from "element-plus";
import { computed } from "vue";

const { tableId, viewId } = useSelection();
const { table } = useTable(tableId);
const { records, total, curPage, totalPage, pending } = useRecordsPage(table, {
  pageSize: 10,
  viewId: viewId,
});
const { fieldMetaList } = useFieldMetaList(table);
const columns = computed(() =>
  fieldMetaList.value.map((fieldMeta) => ({
    title: fieldMeta.name,
    prop: fieldMeta.id,
    key: fieldMeta.id,
    dataKey: fieldMeta.id,
    width: 150,
  })),
);
const rows = computed(() =>
  records.value.map((record) => {
    const row: Record<string, any> = {};
    fieldMetaList.value.forEach((fieldMeta) => {
      row[fieldMeta.id] = JSON.stringify(record.fields[fieldMeta.id]);
    });
    row.id = record.recordId;
    return row;
  }),
);
const next = () => {
  curPage.value += 1;
};
const prev = () => {
  curPage.value -= 1;
};
</script>

<template>
  <div>
    <p>Total: {{ total }}</p>
    <p>Pending: {{ pending }}</p>
    <p>Current page: {{ curPage + 1 }} / {{ totalPage }}</p>
    <ElButton @click="prev" :disabled="curPage === 0">Prev</ElButton>
    <ElButton @click="next">Next</ElButton>
    <ElTableV2
      :columns="columns"
      :data="rows"
      :width="400"
      :height="400"
      v-loading="pending"
      fixed
    />
  </div>
</template>

Usage

Type Declarations

Show Type Declarations

import { MaybeRef } from "vue"
import type { MaybeRefOrGetter } from "vue"
import type {
  ITable,
  IFilterInfo,
  ISortInfo,
  IRecord,
} from "@lark-base-open/js-sdk"
/**
 * Page option
 */
interface RecordsPageOption {
  /**
   * Per page size
   *
   * 每页大小
   *
   * @default 200
   */
  pageSize: number
  /**
   * Filter
   *
   * 过滤条件
   */
  filter?: IFilterInfo
  /**
   * Sorts
   *
   * 排序
   */
  sort?: ISortInfo[]
  /**
   * View ID
   *
   * 视图 ID
   */
  viewId?: MaybeRef<string | null>
  /**
   * Whether to get shallow records
   *
   * @default false
   */
  shallow?: boolean
}
/**
 * Reactive Records Page
 *
 * 响应式记录分页
 *
 * @param table
 * @param option
 * @returns
 */
export declare function useRecordsPage(
  table: MaybeRefOrGetter<ITable | null>,
  option?: RecordsPageOption,
): {
  /**
   * Total number of records
   */
  total: import("vue").Ref<number, number>
  records: import("vue").Ref<
    {
      recordId: string
      fields: {
        [fieldId: string]: import("@lark-base-open/js-sdk").IOpenCellValue
      }
    }[],
    | IRecord[]
    | {
        recordId: string
        fields: {
          [fieldId: string]: import("@lark-base-open/js-sdk").IOpenCellValue
        }
      }[]
  >
  totalPage: import("vue").ComputedRef<number>
  /**
   * Current page number, starting from 0
   */
  curPage: import("vue").WritableComputedRef<number, number>
  pending: import("vue").Ref<boolean, boolean>
  hasMore: import("vue").Ref<boolean, boolean>
}