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

发布时间：2020-12-15 20:17:11 所属栏目：百科来源：网络整理

导读：在docs – headerRowRenderer中,但任何人都可以与一些自定义标题标记共享简单示例,例如使用自定义标题attr所有“默认”虚拟化功能,例如可排序… 解决方法您的问题提到了headerRowRenderer,但我认为您可能实际上在询问如何根据语句的其余部分呈现自定义标题

在docs – headerRowRenderer中,但任何人都可以与一些自定义标题标记共享简单示例,例如使用自定义标题attr所有“默认”虚拟化功能,例如可排序…

解决方法

您的问题提到了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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!