useFusionTable

Fusion table helper with pagination and search state.

Import

import { useFusionTable } from '@kamod-ch/hooks'

Live demo

Basic demo

Fusion table helper with pagination and search state.

Page: 1

import { useFusionTable } from '@kamod-ch/hooks'

async function service({ current, pageSize }: { current: number; pageSize: number }) {
  await new Promise((resolve) => window.setTimeout(resolve, 200))
  const total = 30
  const start = (current - 1) * pageSize
  return { total, list: Array.from({ length: pageSize }, (_, index) => ({ id: start + index + 1, name: 'Fusion row ' + (start + index + 1) })) }
}

export default function UseFusionTableDemo() {
  const table = useFusionTable(service)

  return (
    <div>
      <p><strong>Page:</strong> {table.pagination.current}</p>
      <ul>{table.tableProps.dataSource.map((row) => <li key={row.id}>{row.name}</li>)}</ul>
      <div class="demo-actions">
        <button type="button" onClick={() => table.pagination.changeCurrent(Math.max(1, table.pagination.current - 1))}>Previous</button>
        <button type="button" onClick={() => table.pagination.changeCurrent(table.pagination.current + 1)}>Next</button>
      </div>
    </div>
  )
}

API

TypeScript signature

import type { Data, Params, Service } from '../useAntdTable/types.js';
import type { FusionTableOptions, FusionTableResult } from './types.js';
declare const useFusionTable: <TData extends Data, TParams extends Params>(service: Service<TData, TParams>, options?: FusionTableOptions<TData, TParams>) => FusionTableResult<TData, TParams>;
export default useFusionTable;
/

SSR considerations

This hook is safe to import during SSR. If your effect body touches the DOM, keep that work inside the effect callback.

Browser compatibility

Works in any modern browser supported by Preact.