反応仮想化テーブルのカスタムヘッダーのレンダリング方法

Question

docs-headerRowRendererでは、カスタムattr + sortableのようなすべての 'デフォルト'の仮想化機能など、いくつかのカスタムヘッダーマークアップで単純な例を共有することができます。

Answer 1

あなたの質問にはheaderRowRendererが記載されていますが、実際にカスタムヘッダをレンダリングする方法について質問していると思います。セル残りのステートメントに基づいています。とにかく、私は両方を見せます。

// This is a custom header row rendered 
// You should used all of the specified params, 
// But you can also add your own decorated behavior. 
const headerRowRenderer = ({ 
    className, 
    columns, 
    style 
}) => (
    <div 
    className={className} 
    role='row' 
    style={style} 
    > 
    {columns} 
    </div> 
) 

// This is a custom header example for a single cell 
// You have access to all of the named params, 
// But you don't necessarily need to use them all. 
const headerRenderer = ({ 
    columnData, 
    dataKey, 
    disableSort, 
    label, 
    sortBy, 
    sortDirection 
}) => (
    <div>#</div> 
) 

const renderTable = (props) => (
    <Table 
    {...props} 
    headerRowRenderer={headerRowRenderer} 
    > 
    <Column 
     dataKey='number' 
     headerRenderer={headerRenderer} 
     width={100} 
    /> 
    <Column 
     dataKey='name' 
     label='Name' 
     width={200} 
    /> 
    </Table> 
) 

はここであなたのためのPlnkrの例です：https://plnkr.co/edit/eHr3Jr?p=preview