@querry-kit/nuxt GitHub

Table

The headless table composable owns Query Kit request state, but consumers retain their table renderer, router, and storage adapters.

UseTableOptions

interface UseTableOptions<
  TItem extends Record<string, unknown>,
  TColumn extends TableColumnInput<TItem, object> = TableColumnInput<TItem>,
> {
  api: AxiosInstance;
  endpoint: string;
  persistenceKey?: string;
  name?: string;
  columns: Ref<readonly TColumn[]>;
  staticFields?: string[];
  staticInclude?: Record<string, unknown>;
  staticFilter?: MaybeRef<Record<string, unknown> | undefined>;
  isArchived?: boolean;
  defaultItemsPerPage?: number;
  storage?: StorageLike;
  routePage?: RoutePageRef;
  identityKey?: keyof TItem & string;
  onInitialized?: () => void | Promise<void>;
  onRefreshed?: (items: TItem[]) => void | Promise<void>;
  onError?: (error: unknown) => void | Promise<void>;
}
PropertyPurpose
api, endpoint, columnsRequired client, endpoint, and reactive renderer-aware column definitions.
persistenceKey / nameNamespace local table preferences; name is retained for compatibility.
staticFields, staticInclude, staticFilter, isArchivedFields and conditions merged into every Query Kit request.
defaultItemsPerPage, storage, routePageInitial size and optional persistence/URL adapters.
identityKeyRow property used by updateRow; defaults to id.
onInitialized, onRefreshed, onErrorLifecycle callbacks for the initial request, latest successful request, and latest failure.

useTable

function useTable<
  TItem extends Record<string, unknown>,
  TColumn extends TableColumnInput<TItem, object> = TableColumnInput<TItem>,
>(options: UseTableOptions<TItem, TColumn>): TableState<TItem, TColumn>;

Creates portable, headless state for a remote Query Kit table. A new request version is assigned on every refresh, so an older response cannot overwrite newer data.

const table = useTable<Book>({
  api,
  endpoint: 'books',
  persistenceKey: 'books',
  columns,
  routePage,
});

await table.initialize();
Returned valueMeaning
page, itemsPerPageCurrent pagination; page can be synchronized through routePage.
sorting, filteringPersisted Query Kit UI state.
columnOrder, columnVisibility, columnPinningPersisted renderer metadata.
columns, fields, queryParamsDerived visible columns, fields projection, and outgoing request.
items, totalItems, totalPages, loading, errorCurrent response and request state.
initialize()Syncs the initial page, fetches, then runs onInitialized.
refresh()Fetches the current request; only the latest response is accepted.
updateRow(row)Shallow-merges the matching row without refetching.