# @insurup/table-adapter-vue

> Vue bindings for @insurup/table-adapter-core

Latest version **0.1.42** (published 2026-06-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @insurup/table-adapter-vue
pnpm add @insurup/table-adapter-vue
yarn add @insurup/table-adapter-vue
bun add @insurup/table-adapter-vue
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.1.42 |
| Published | 2026-06-30 |
| First published | 2026-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 152.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | InsurUp Engineering |
| Maintainers | kerem-acer |
| Keywords | tanstack-table, vue, insurup, adapter, typescript |

## Links

- npm: https://www.npmjs.com/package/@insurup/table-adapter-vue
- Repository: https://github.com/InsurUp/ts-toolkit
- Homepage: https://github.com/InsurUp/ts-toolkit#readme
- Issues: https://github.com/InsurUp/ts-toolkit/issues
- npm.io page: https://npm.io/package/@insurup/table-adapter-vue

## Dependencies (1)

- [@insurup/table-adapter-core](https://npm.io/package/@insurup/table-adapter-core.md) 0.1.42

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.42 (latest) — 2026-06-30
- 0.1.40 — 2026-06-16
- 0.1.39 — 2026-06-10
- 0.1.38 — 2026-06-10
- 0.1.37 — 2026-06-10
- 0.1.36 — 2026-06-09
- 0.1.35 — 2026-06-08
- 0.1.34 — 2026-06-06
- 0.1.33 — 2026-06-05
- 0.1.32 — 2026-06-04
- 0.1.31 — 2026-05-31
- 0.1.30 — 2026-05-31
- 0.1.29 — 2026-05-30
- 0.1.28 — 2026-05-30
- 0.1.27 — 2026-05-29
- … 24 more at https://npm.io/package/@insurup/table-adapter-vue/versions

## README

# @insurup/table-adapter-vue

Vue bindings for [@insurup/table-adapter-core](https://www.npmjs.com/package/@insurup/table-adapter-core).

## Installation

```bash
npm install @insurup/table-adapter-vue @insurup/sdk @tanstack/vue-table
```

```bash
bun add @insurup/table-adapter-vue @insurup/sdk @tanstack/vue-table
```

## Usage

```vue
<script setup lang="ts">
import { useCustomerTable } from '@insurup/table-adapter-vue';
import { FlexRender } from '@tanstack/vue-table';
import { DefaultInsurUpClient } from '@insurup/sdk';

const client = new DefaultInsurUpClient({
  baseUrl: 'https://api.insurup.com',
  tokenProvider: () => token,
});

const { state, table, adapter } = useCustomerTable({
  columns: (col) => [col.id(), col.name(), col.primaryEmail()],
  fetch: (options) => client.customers.getCustomers(options),
  autoFetch: true,
});
</script>

<template>
  <div v-if="state.isLoading">Loading...</div>
  <div v-else-if="state.error">Error: {{ state.error.message }}</div>
  <div v-else>
    <table>
      <thead>
        <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
          <th v-for="header in headerGroup.headers" :key="header.id">
            <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in table.getRowModel().rows" :key="row.id">
          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
            <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
          </td>
        </tr>
      </tbody>
    </table>

    <div>
      Page {{ table.getState().pagination.pageIndex + 1 }} of {{ state.pageCount }}
      <button @click="table.previousPage()" :disabled="!table.getCanPreviousPage()">
        Previous
      </button>
      <button @click="table.nextPage()" :disabled="!table.getCanNextPage()">Next</button>
    </div>
  </div>
</template>
```

## API

### useCustomerTable

```ts
const { state, table, adapter } = useCustomerTable(options);
```

**Returns:**

| Property  | Type                       | Description                  |
| --------- | -------------------------- | ---------------------------- |
| `state`   | `ShallowRef<AdapterState>` | Reactive adapter state       |
| `table`   | `Table`                    | TanStack Table instance      |
| `adapter` | `CustomerTable`            | Raw adapter for advanced use |

**`state` properties:**

- `rows` - Current page data
- `isLoading` - Initial loading state
- `isFetching` - Any fetch in progress
- `error` - Error if any
- `pageCount` - Total pages
- `rowCount` - Total records

**`adapter` methods:**

- `setFilter(filter)` — set the **unified** filter (filter ops + `$search`-marked entries) and refetch
- `getFilter()` — get the current unified filter
- `clearFilter()` — clear the filter and refetch
- `invalidate()` — invalidate cache and refetch
- `refetch({ force })` — refetch with optional cache bypass

The adapter exposes **one** filter API. There is no `setSearch` — fields are promoted to server-side search by adding `$search: true` to the per-field value. The adapter splits the unified value into the server's `filter:` and `search:` slots at fetch time.

```ts
// Plain filter
adapter.setFilter({ type: { eq: CustomerType.Individual } });

// Search — `$search: true` routes to `search:` and unlocks text-search ops
adapter.setFilter({ name: { $search: true, textSearch: 'ali' } });

// Mixed in one call — splits into both slots
adapter.setFilter({
  type: { eq: CustomerType.Individual },
  name: { $search: true, textSearch: { value: 'ali', score: { boost: 2 } } },
});
```

See the [`@insurup/table-adapter-core` README](https://www.npmjs.com/package/@insurup/table-adapter-core) for the full unified-filter shape (combinators, score boost/constant, runtime meta introspection).

## License

MIT

---
_Source: https://npm.io/package/@insurup/table-adapter-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._