Filter フィルター ^1.0.0 Beta

Filter は組み込みの列ヘッダーフィルターコンポーネントです。列ヘッダーのフィルターアイコンをクリックするとフィルターパネルが表示されます。手動でオプションを指定する方法と、データから自動的にオプションを抽出する方法をサポートしています。

基本的な使い方

createFilterCell ファクトリ関数で Filter コンポーネントを作成し、customHeaderCell として使用します。

オプションの自動抽出

autoOptions: true を設定すると、Filter は現在の列のデータから重複を除いた値を自動的に抽出し、フィルターオプションとして使用します。

{
    title: t('city'),
    dataIndex: 'city',
    customHeaderCell: Filter({
        autoOptions: true, // データから自動的にオプションを抽出
    }),
}

局限性

autoOptions は少量のデータで開発するのに便利です。大量のデータの場合、全量走査が必要でパフォーマンスの問題が発生する可能性があります。
オプションの順序は固定ではありません。

autoOptions のキャッシュ更新タイミング

autoOptions は抽出結果をキャッシュします。props.dataSource の参照が変更されると（例：sort-remote 场景で親コンポーネントがフィルタリング済みのデータを dataSource として戻す場合）、キャッシュはクリアされ、次にドロップダウンを開いた時に新しいデータからオプションが再抽出されます。これによりオプションが減少する可能性があります。オプションを安定させるには、options で固定のオプションリストを手動指定してください。

フィルターロジックのカスタマイズ

filter パラメータを使用して、フィルターロジックをカスタマイズできます：

{
    title: t('age'),
    dataIndex: 'age',
    customHeaderCell: Filter({
        options: [
            { label: '30歳未満', value: 'young' },
            { label: '30歳以上', value: 'old' },
        ],
        filter: ({ row, cellValue, filterValues }) => {
            return filterValues.some(v => {
                if (v === 'young') return cellValue < 30;
                if (v === 'old') return cellValue >= 30;
                return false;
            });
        },
    }),
}

createFilterCell オプション

createFilterCell ファクトリ関数は設定オブジェクトを受け取ります：

interface CreateFilterCellOption {
    /** リモートフィルタリングを使用するかどうか、デフォルト false */
    remote?: boolean;
    /** フィルター状態が変更されたときにトリガーされます */
    onChange?: (data: { colKey: UniqKey; status: FilterStatus }) => void;
}

プロパティ	型	デフォルト	説明
remote	`boolean`	`false`	リモートフィルタリングを使用するかどうか、true に設定すると自動データフィルタリングはトリガーされません
onChange	`(data) => void`	-	フィルター状態が変更されたときのコールバック、パラメータには `colKey`（列キー）と `status`（現在の列フィルター状態）が含まれます

設定オプション

FilterComponent は設定オブジェクトを受け取ります：

interface FilterComponentConfig {
    options?: FilterOption[];       // フィルターオプションリスト
    filter?: (args) => boolean;     // カスタムフィルター関数
    autoOptions?: boolean;          // データから自動的にオプションを抽出するかどうか、デフォルト false
}

interface FilterOption {
    label: string;     // 表示テキスト
    value: any;        // フィルター値
    selected?: boolean; // デフォルトで選択されているかどうか
}

FilterStatus 型

interface FilterStatus {
    /** 現在選択されているフィルター値の配列 */
    value: any[];
    /** カスタムフィルターロジック関数 */
    filter?: (args: { row: any; cellValue: any; filterValues: any[] }) => boolean;
}

リモートソートの競合に関する注意

sort-remote リモートソートモードでは、@sort-change イベントの3番目のパラメータ data はテーブルの現在の作業データコピーです。もしアクティブなフィルター条件がある場合、このデータはフィルター後の行のみを含み、完全な元の props.dataSource ではありません。

もし直接この data を dataSource に代入すると、フィルターで除外された行が永久に失われます。

正しい方法

リモートソート時、親コンポーネントは常に自分が管理する元のデータソースに基づいてソートすべきであり、sort-change イベントの data パラメータを使用すべきではありません。

// ✘ 間違い：data はすでにフィルター済みの可能性があり、直接代入するとデータが失われます
function handleSortChange(col, order, data) {
    dataSource.value = data;
}

// ✔ 正しい：元のデータソースに基づいてソート
function handleSortChange(col, order) {
    // originalData = dataSource.value
    dataSource.value = sortMyData(originalData, col, order);
}

Filter フィルター ^1.0.0 Beta ​

基本的な使い方 ​

オプションの自動抽出 ​

フィルターロジックのカスタマイズ ​

createFilterCell オプション ​

設定オプション ​

FilterStatus 型 ​

リモートソートの競合に関する注意 ​