# @insurup/table-adapter-react

> React 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-react
pnpm add @insurup/table-adapter-react
yarn add @insurup/table-adapter-react
bun add @insurup/table-adapter-react
```

## 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.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | InsurUp Engineering |
| Maintainers | kerem-acer |
| Keywords | tanstack-table, react, insurup, adapter, typescript |

## Links

- npm: https://www.npmjs.com/package/@insurup/table-adapter-react
- 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-react

## Dependencies (1)

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

## 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-react/versions

## README

# @insurup/table-adapter-react

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

## Installation

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

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

## Usage

```tsx
import { useCustomerTable } from '@insurup/table-adapter-react';
import { flexRender } from '@tanstack/react-table';
import { DefaultInsurUpClient } from '@insurup/sdk';

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

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

  if (state.isLoading) return <div>Loading...</div>;
  if (state.error) return <div>Error: {state.error.message}</div>;

  return (
    <div>
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id}>
                  {flexRender(header.column.columnDef.header, header.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

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

## API

### useCustomerTable

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

**Returns:**

| Property  | Type            | Description                                        |
| --------- | --------------- | -------------------------------------------------- |
| `state`   | `AdapterState`  | Current adapter state (loading, error, rows, etc.) |
| `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.

```tsx
// Plain filter — routed to the server's `filter:` slot
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-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._