useTable

• Category: Composables
• Relate: getTable
• Dependencies: @lark-base-open/js-sdk
• Last Changed: last week

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 { useTable, useSelection } from "@qww0302/use-bitable"
import { ref, watch } from "vue"

const { tableId } = useSelection()
const { table, pending } = useTable(tableId)
const name = ref()

watch(
  () => table.value,
  (t) => {
    name.value = null
    if (t) {
      t.getName().then(res => {
        name.value = res
      })
    }
  }
)

</script>

<template>
  <div class="tip custom-block">
    <p class="custom-block-title">
      TIP
    </p>
    <p>Choose different table</p>
  </div>
  <div>
    Table name:
    <span v-if="!pending && name">{{ name ?? "null" }}</span>
    <span v-else-if="pending || !name">loading table...</span>
  </div>
</template>

Usage

useTable returns a responsive ITable object, which changes in real time according to the parameters passed in. The passed-in value can be the id or name of the table.

TIP

This function is based on getTable, since the official API are all async functions, the update of table will be delayed. Therefore, this function provides pending to reflect the acquisition status, which is true when the table is being acquired.

import {useTable} from "@qww0302/use-bitable"
import { ref } from "vue"

const tableId = ref<string | null>(null)

const { table, pending } = useTable(tableId)

Type Declarations

import { MaybeRefOrGetter } from "vue"
import { ITable } from "@lark-base-open/js-sdk"
/**
 * Reactive table
 *
 * 响应式表格
 *
 * @param tableIdOrName
 * @returns
 */
export declare function useTable(
  tableIdOrName: MaybeRefOrGetter<string | null>,
): {
  table: import("vue").ShallowRef<ITable | null, ITable | null>
  pending: import("vue").Ref<boolean, boolean>
}