web-dev-qa-db-ja.com

Antdテーブルコンポーネントにデフォルトのソーターとフィルターを設定するにはどうすればよいですか？

私はant-design反応コンポーネントを使用してダッシュボードを作成し、 テーブルコンポーネント を使用しました。ここで、データが入力された後のフィルターとソーターの方法を定義できます。

dashboard table page

ID列と環境列にデフォルトのソート（降順）を適用する必要がある場合、prodをデフォルトで選択します（デフォルトでは製品アラートのみを表示します）。私はant-design Webサイトで 使用方法について質問できません なので、誰かがそれを知っていて、これを手伝ってくれるかどうか知りたいと思いました。あなたが共有できるなら、私は別のアプローチを受け入れます。

function onChange(pagination, filters, sorter) {
    console.log('params', pagination, filters, sorter);

    let order_by = sorter.field;
    if (sorter.order == 'descend'){
        order_by = `-${order_by}`;
        console.log(order_by);
    }

    let offset = ((pagination.current - 1) * pagination.pageSize);
    let url = `${baseUrl}&offset=${offset}&ordering=${order_by}`;
    this.fetchResults(url);
}

console.logの出力

>>> params Object { showQuickJumper: true, pageSize: 20, current: 1, total: 301 } Object { env: Array['prod'], incident_type: Array['loadChk'] } Object {  }
reactjsantd
9
Manjit Kumar

デフォルトのsortOrder値を渡すことができます。これはascend、descendまたはfalseにすることができます。これにより、デフォルトのソート順を設定できます。

https://ant.design/components/table/#Column

デフォルトのフィルターに関する限り、@ Pantherが前述したように、filteredValueプロップを設定する必要があります。

4
Sanjay

defaultSortOrderをdefaultSortOrder: 'descend'のように使用します

0
Pavel Kulesha