如何在react-virtualized中呈現自定義表格

Question

在文檔-headerRowRenderer中，但任何人都可以與一些自定義標題標記共享簡單示例，例如自定義title attr +所有「默認」虛擬化功能，如可排序...

Answer 1

你的問題提到headerRowRenderer但我想你可能實際上正在詢問如何根據你的聲明的其餘部分呈現自定義標頭cell。無論如何，我會展示兩者。

// 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