Vue reactive data sources and data tiers

Choose Vue frontend or server data sources, reactive refs and headless controllers with host-owned fetching and query state.

Use a source when you want to own fetching or share a table’s query state with other UI. The source is a readonly shallow ref. In script, read source.value; a top-level ref is unwrapped automatically in a Vue template.

import { shallowRef } from "vue";
import { useDataTable, useFrontendData } from "@adapttable/vue";
import type { ColumnDef } from "@adapttable/vue";

interface Person {
  id: string;
  name: string;
}

// Run inside setup() or an explicitly owned effectScope().
const rows = shallowRef<readonly Person[]>([{ id: "ada", name: "Ada" }]);
const columns: ColumnDef<Person>[] = [{ key: "name", sortable: true }];
const source = useFrontendData({ data: rows, columns, urlSync: false });
const table = useDataTable({
  source,
  columns,
  rowKey: (row: Person) => row.id,
});
const { rows: visibleRows, searchValue, setSearchValue } = table;

setSearchValue("Ada"); // Debounced input; table.setSearch commits immediately.
// visibleRows and searchValue remain reactive after destructuring.

Pass this source to the native table as :source="source", or render your own surface with useDataTable. A supplied source wins over data and owns query state; the native table’s fallback data source does not claim its URL namespace.

Reactive value inputs accept a plain value, a ref or a getter. Optional inputs also accept refs/getters whose current value is undefined. Callbacks such as rowKey, getSearchText, refetch and onQueryChange remain callbacks. To replace callback identities reactively, pass a getter for the whole options object. Never wrap a renderer in a getter just to make it reactive.

For remote rows, choose useServerData when the host performs requests and publishes rows/total, or useQuerySource when an existing query composable owns fetching and cancellation. See source contracts for request cancellation and query-library lifecycle rules.

Server query ownership

useServerData accepts reactive rows, total, loading and error, and an onQueryChange callback. The host fetches or computes a response and publishes it through those refs. Use the callback context’s abort signal to avoid applying replies after a newer query or disposal. Declare only the server capabilities your endpoint actually implements.

The complete signatures are in the Vue API; the server query contract describes query parameters and endpoint ownership. The live demo uses a simulated server for its Server mode. It does not provision a backend.