BlueAI useListFilter
検索・ステータスフィルタ・ページネーションを一括管理するフック。リスト画面の定型パターンを1行で導入できる。
|
import { useListFilter } from "@blueai/ui"Examples
SearchInput + FilterTabs + DataTable
| タスク名 | 担当者 | ステータス |
|---|---|---|
| LP デザイン | 田中 | 完了 |
| API 設計 | 佐藤 | 進行中 |
| DB マイグレーション | 鈴木 | 未着手 |
| 認証機能実装 | 田中 | 進行中 |
| テスト作成 | 佐藤 | 未着手 |
8 件中 5 件表示
const {
search, setSearch,
statusFilter, setStatusFilter,
page, setPage,
paginated, filtered, totalPages,
} = useListFilter({
items: tasks,
searchFields: ["name", "assignee"],
perPage: 20,
});
<SearchInput value={search} onChange={setSearch} />
<FilterTabs items={statusItems} activeKey={statusFilter} onChange={setStatusFilter} />
<DataTable
columns={columns}
data={paginated}
pagination={{ perPage: 20, page, onPageChange: setPage }}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | T[] | — | フィルタ対象の全件配列 |
| searchFields | (keyof T)[] | — | テキスト検索対象のフィールド名配列 |
| perPage | number | — | 1ページあたりの件数（デフォルト: 20） |
Types
返り値
{ search, setSearch, statusFilter, setStatusFilter, page, setPage, filtered, paginated, totalPages }