Filters

PreviousNext

複数のフィルタータイプ、演算子、視覚的インジケーターを持つ包括的なフィルタリングシステム。

Status
Priority
[
  {
    "id": "1781458149022-bo6f80we0",
    "field": "status",
    "operator": "is_any_of",
    "values": [
      "in_progress",
      "todo"
    ]
  },
  {
    "id": "1781458149022-objaqt0yf",
    "field": "priority",
    "operator": "is_any_of",
    "values": [
      "high",
      "urgent"
    ]
  }
]
"use client"

import { useState } from "react"

インストール

pnpm dlx shadcn@latest add https://ui.tyap.me/r/styles/base/filters.json

使い方

import {
  createFilter,
  Filters,
  type Filter,
  type FilterFieldConfig,
} from "@/components/ui/filters"
const [filters, setFilters] = useState<Filter[]>([
  createFilter("status", "is_any_of", ["todo", "in_progress"]),
])
 
const fields: FilterFieldConfig[] = [
  {
    key: "status",
    label: "Status",
    type: "multiselect",
    options: [
      { value: "todo", label: "Todo" },
      { value: "in_progress", label: "In Progress" },
      { value: "done", label: "Done" },
    ],
  },
]
 
return <Filters filters={filters} fields={fields} onChange={setFilters} />

サンプル

バリデーション

pattern または validation を指定すると、テキスト入力に検証ルールを追加できます。

Email
"use client"

import { useState } from "react"

トリガーボタン

trigger で「フィルター追加」メニューを開く要素を差し替えられます。

Status
"use client"

import { useState } from "react"

Small サイズ

Status
"use client"

import { useState } from "react"

Large サイズ

Status
Priority
"use client"

import { useState } from "react"

多言語対応

i18n でラベルや演算子をローカライズできます。

ステータス
"use client"

import { useState } from "react"

API リファレンス

Filters

アクティブなフィルターの集合を表示・管理するメインコンポーネント。

PropTypeDefaultDescription
filtersFilter<T>[]-Required. アクティブなフィルターの配列。
fieldsFilterFieldsConfig<T>-Required. 利用可能なフィールドの定義。
onChange(filters: Filter<T>[]) => void-Required. 追加・更新・削除時に呼ばれるコールバック。
size"sm" | "default" | "lg""default"フィルター項目とコントロールのサイズ。
radius"default" | "full""default"フィルター項目の角丸。
triggerReactNode-「フィルター追加」メニューを開くカスタム要素。
showSearchInputbooleantrue追加メニューに検索入力を表示するか。
allowMultiplebooleantrue同じフィールドに複数のフィルターを許可するか。
enableShortcutbooleanfalseメニューを開くショートカットを有効にするか。
shortcutKeystring"f"ショートカットに使うキー。
i18nPartial<FilterI18nConfig>-ラベルや演算子のローカライズ設定。
classNamestring-コンテナへの追加クラス。
menuPopupClassNamestring-ドロップダウンメニューへの追加クラス。

FilterFieldConfig

フィルター可能な個々のフィールドの定義。

PropertyTypeDescription
keystringRequired. フィールドの一意な識別子。
labelstringRequired. フィールドの表示名。
type"text" | "select" | "multiselect" | "custom" | "separator"入力タイプ。
iconReactNodeラベル横に表示するアイコン。
optionsFilterOption<T>[]select / multiselect の選択肢。
operatorsFilterOperator[]このフィールド専用の演算子。
defaultOperatorstringフィルター追加時の既定の演算子。
placeholderstringテキスト入力のプレースホルダー。
searchableboolean選択肢を検索可能にするか。
maxSelectionsnumbermultiselect で選択できる最大数。
patternstringテキスト入力検証用の正規表現。
validation(value) => boolean | objectカスタム検証関数。
customRenderer(props) => ReactNode値セレクターのカスタムレンダラー。
customValueRenderer(values, options) => ReactNodeアクティブな値表示のカスタムレンダラー。
classNamestringフィールドへの追加クラス。

Filter

アクティブなフィルターオブジェクトの構造。

PropertyTypeDescription
idstringフィルターインスタンスの一意な識別子。
fieldstring対応するフィールドの key。
operatorstring選択中の演算子(例: "is", "contains")。
valuesT[]現在の値。

Helpers

FunctionSignatureDescription
createFilter(field, operator?, values?) => Filter一意な ID 付きのフィルターを生成する。
createFilterGroup(id, label, fields, initialFilters?) => FilterGroupフィルターグループ定義を生成する。