react-virtualized - 反応仮想化テーブルでカスタム ヘッダーをレンダリングする方法

Question

ドキュメントでは - headerRowRenderertitleですが、カスタムattr + sortable などのすべての「デフォルト」の仮想化機能など、カスタム ヘッダー マークアップを使用して簡単な例を誰でも共有できます...

Answer 1

カスタム ヘッダーをレンダリングするには、prop を渡してReact-Virtualizedのコンポーネントを使用できます。ColumnheaderRenderer

headerRendererセルのヘッダー列のレンダリングを担当するコールバックです。

実装を示す例を次に示します。

JSX を返すことによってカスタム ヘッダーを作成するメソッド。render メソッドの上で宣言します。

要件に応じて、JSX を返すことができます。この例では、段落 (p タグ) を返します。

formatCheckboxHeader = () => {
    return (
        <p>Custom Header</p>
    )
}

反応仮想化テーブルが初期化されるrenderメソッド。

<Column
    width={100}
    headerRenderer={this.formatCheckboxHeader}
    label='#'
    dataKey='id'
    cellRenderer={({ rowData }) => this.formatIdColumn(rowData)}
/>

さらに、で行われたようににrowData渡すことができますheaderRenderercellRenderer

詳しくはheaderRenderer こちらをご覧ください。