How to render custom header in react-virtualized Table

Question

In docs - headerRowRenderer, but can anyone share simple example with some custom header markup, for example with custom title attr + all 'default' virtualized features, like sortable...

score 18 · Accepted Answer · answered May 08 '17 at 15:28

Your question mentions headerRowRenderer but I think you might actually be asking about how to render a custom header cell based on the rest of your statement. Anyway, I'll show both.

// 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>
)

Here's a Plnkr example for you: https://plnkr.co/edit/eHr3Jr?p=preview

"how to render a custom header cell based on the rest of your statement" - exactly! Thank you for you awesome job. — Max P, May 08 '17 at 18:56
Upvoted for conciseness of answer, the official react-virtualized doc examples are incredibly verbose. For anyone passing by: react and react-dom sources in the Plnkr script fiddle are expired, just change them both for it to work again. — Azami, Jan 23 '19 at 13:49

score 0 · Answer 2 · answered Nov 05 '19 at 04:26

To render a custom header, you can use React-Virtualized's Column component by passing headerRenderer prop to it.

headerRenderer is a callback responsible for rendering a cell's header column.

Here is an example showing implementation:

Method to create a custom header by returning JSX; to be declared above the render method.

You can return JSX, according to your requirements. In this example we return a paragraph (p tag).

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

In the render method, where the react-virtualized table is initialized.

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

Additionally, you can pass rowData to the headerRenderer as done in the cellRenderer

How to render custom header in react-virtualized Table

2 Answers2