@soybeanjs/hooks

Some useful hooks for Vue 3.

Features

• TypeScript — Written in TypeScript with full type support
• useTable — A composable for managing table data, including pagination, column visibility, and async data fetching

Installation

# npm
npm install @soybeanjs/hooks

# pnpm
pnpm add @soybeanjs/hooks

# yarn
yarn add @soybeanjs/hooks

Note: Vue 3 is a peer dependency. Make sure it is installed in your project.

Usage

useTable

A composable for managing table data with support for pagination, column checks, and async fetching.

import { useTable } from '@soybeanjs/hooks';

const { loading, empty, data, columns, columnChecks, reloadColumns, getData } = useTable({
  api: fetchTableData,
  pagination: true,
  transform: response => response.data,
  columns: () => rawColumns,
  getColumnChecks: cols =>
    cols.map(col => ({
      key: col.key,
      title: col.title,
      checked: true,
      hidden: false,
      fixed: false
    })),
  getColumns: (cols, checks) =>
    cols.filter(col => {
      const check = checks.find(c => c.key === col.key);
      return check?.checked;
    })
});

API

useTable(options)

Options

| Property | Type | Default | Description | | ----------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------- | | api | () => Promise<ResponseData> | — | API function to fetch table data | | pagination | boolean | — | Whether to enable pagination mode | | transform | (response: ResponseData) => ApiData[] | PaginationResult<ApiData> | — | Transform API response to table data | | columns | () => Column[] | — | Factory function that returns raw column config | | getColumnChecks | (columns: Column[]) => TableColumnCheck[] | — | Derive column check state from columns | | getColumns | (columns: Column[], checks: TableColumnCheck[]) => Column[] | — | Derive rendered columns from columns + checks | | onFetched | (data) => void \| Promise<void> | — | Callback invoked after data is fetched | | immediate | boolean | true | Whether to fetch data immediately on mount |

Returns

| Property | Type | Description | | --------------- | ------------------------- | ------------------------------------------------------------ | | loading | ShallowRef<boolean> | Whether data is being fetched | | empty | ShallowRef<boolean> | Whether the current data list is empty | | data | Ref<ApiData[]> | Current table row data | | columns | ComputedRef<Column[]> | Columns derived from getColumns (reacts to columnChecks) | | columnChecks | Ref<TableColumnCheck[]> | Column visibility and pin state | | reloadColumns | () => void | Reset columns while preserving current check state | | getData | () => Promise<void> | Manually trigger a data fetch |

Types

interface PaginationResult<T> {
  page: number;
  pageSize: number;
  total: number;
  list: T[];
}

type TableColumnCheck = {
  key: string;
  title: VNode | Component | string;
  checked: boolean;
  hidden: boolean;
  fixed: boolean | 'right';
};

License

MIT License © 2026-PRESENT Soybean