diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue index 2ee38f9d..46c3799b 100644 --- a/playground/app/pages/components/table.vue +++ b/playground/app/pages/components/table.vue @@ -143,6 +143,8 @@ const data = ref([{ amount: 567 }]) +const currentID = ref(4601) + const columns: TableColumn[] = [{ id: 'select', header: ({ table }) => h(UCheckbox, { @@ -277,8 +279,19 @@ const pagination = ref({ pageSize: 10 }) +function addElement() { + data.value.unshift({ + id: currentID.value.toString(), + date: new Date().toISOString(), + status: 'paid', + email: 'new@example.com', + amount: Math.random() * 1000 + }) + currentID.value++ +} + function randomize() { - data.value = [...data.value].sort(() => Math.random() - 0.5) + data.value = data.value.sort(() => Math.random() - 0.5) } function onSelect(row: TableRow) { @@ -303,6 +316,7 @@ onMounted(() => { /> + -import type { Ref } from 'vue' +import type { Ref, WatchOptions } from 'vue' import type { AppConfig } from '@nuxt/schema' import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core' import type { @@ -97,6 +97,13 @@ export interface TableProps extends TableOptions { * @defaultValue 'carousel' */ loadingAnimation?: Table['variants']['loadingAnimation'] + /** + * Use the `watchOptions` prop to customize reactivity (for ex: disable deep watching for changes in your data or limiting the max traversal depth). This can improve performance by reducing unnecessary re-renders, but it should be used with caution as it may lead to unexpected behavior if not managed properly. + * @link [API Docs](https://vuejs.org/api/options-state.html#watch) + * @link [Guide](https://vuejs.org/guide/essentials/watchers.html) + * @defaultValue { deep: true } + */ + watchOptions?: WatchOptions /** * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options) * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering) @@ -175,7 +182,7 @@ export type TableSlots = {