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...

Answer 1

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