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...
Add a comment
|
2 Answers
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
3 Comments
Max P
"how to render a custom header cell based on the rest of your statement" - exactly! Thank you for you awesome job.
Azami
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.
Cully
You are a life saver!
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
Read more about headerRenderer here.
