如何在 react-virtualized Table 中呈现自定义 header

Question

在文档中 - headerRowRenderer，但是任何人都可以分享带有一些自定义 header 标记的简单示例，例如自定义 title attr + 所有 'default' 虚拟化功能，喜欢排序...

Answer 1

您的问题提到了 headerRowRenderer，但我认为您实际上可能是在询问如何根据您陈述的其余部分呈现自定义 header 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

Answer 2

要呈现自定义 header，您可以通过将 headerRenderer 属性传递给它来使用 React-Virtualized 的 Column 组件。

headerRenderer 是负责呈现单元格的 header 列的回调。

这是一个显示实现的例子：

通过 returning JSX 创建自定义 header 的方法；在 render 方法之上声明。

你可以returnJSX，根据你的要求。在这个例子中我们return一个段落（p标签）。

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

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

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

此外，您可以像 cellRenderer

中那样将 rowData 传递给 headerRenderer

详细了解 headerRenderer here。

如何在 react-virtualized Table 中呈现自定义 header

How to render custom header in react-virtualized Table

react-virtualized