react-virtualized - 如何在 react 虚拟化表中呈现自定义 header

Question

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

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