react-virtualized - 如何在反应虚拟化表中呈现自定义标题

Question

在 docs - headerRowRenderer中，但任何人都可以使用一些自定义标头标记共享简单示例，例如自定义titleattr + 所有“默认”虚拟化功能，如可排序...

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

Answer 2

要呈现自定义标头，您可以通过将prop 传递给它来使用React-Virtualized'组件。ColumnheaderRenderer

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

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

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

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

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

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

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

此外，您可以传递rowData给headerRenderercellRenderer

阅读更多关于headerRenderer 这里。