@insurup/table-adapter-react

@insurup/table-adapter-react

React bindings for @insurup/table-adapter-core.

Installation

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

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

Usage

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

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.

// 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 for the full unified-filter shape (combinators, score boost/constant, runtime meta introspection).

License

MIT