如何在反应虚拟化表中呈现自定义标题答案

【问题标题】：How to render custom header in react-virtualized Table如何在反应虚拟化表中呈现自定义标题
【发布时间】：2017-10-06 02:18:48
【问题描述】：

在文档中 - headerRowRenderer，但任何人都可以分享一些带有自定义标头标记的简单示例，例如自定义 title attr + 所有“默认”虚拟化功能，如可排序...

【问题讨论】：

标签： react-virtualized

【解决方案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

【讨论】：

“如何根据您的语句的其余部分呈现自定义标题单元格” - 完全正确！谢谢你的出色工作。
赞成简洁的答案，官方的反应虚拟化文档示例非常冗长。对于路过的任何人：Plnkr 脚本小提琴中的 react 和 react-dom 源已过期，只需更改它们以使其再次工作。
你是救生员！

【解决方案2】：

要呈现自定义标头，您可以通过将headerRenderer 属性传递给React-Virtualized 的Column 组件。

headerRenderer 是负责渲染单元格标题列的回调。

这是一个展示实现的示例：

通过返回JSX创建自定义头部的方法；在 render 方法之上声明。

您可以根据自己的要求返回 JSX。在这个例子中，我们返回一个段落（p 标签）。

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

在 render 方法中，react-virtualized table 被初始化。

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

此外，您可以将rowData 传递给headerRenderer，就像在cellRenderer 中所做的那样

阅读更多关于headerRendererhere的信息。

【讨论】：