Customizing table headers

[riguy724]

It appears the combination of a customized header and the 'TextFilter' results in a failed prop type warning. There doesn't seem to be any missing functionality, but just wanted to bring this to light.

bundle.js:9327 Warning: Failed prop type: Invalid prop `columnName` of type `object` supplied to `TextFilter`, expected `string`.
    in TextFilter (created by TableHeaderColumn)
    in TableHeaderColumn (created by Releases)
    in tr (created by TableHeader)
    in thead (created by TableHeader)

<TableHeaderColumn
    ref='theader_release_name'
    key='release_name'
    dataSort={true}
    dataField='release_name'
    width="250px"
    filter={{ type: 'TextFilter', placeholder: 'Release Name' }}
    dataFormat={this.reportLinkCellFormat}>
    <Tooltip label='reltooltip' placement="top" trigger={['hover']} overlay={releaseTooltip}>
        <div>Releases</div>
    </Tooltip>
</TableHeaderColumn>

[AllenFang]

ok, I know the problem probably, because in TableHeaderColumn, I use the this.props.children as a column title and use it anywhere(Include pass children to TextFilter as a columnName prop).

I'll think about how to deal with this issue. Thanks your contribution :) 👍

[batjko]

Just ran into the same issue, not knowing what caused it. This helped us pinpoint it.
We were using a span to wrap around the column title for a tooltip. For now we removed that, but it would be nice to have some flexibility around the header.

[AllenFang]

@batjko, ok, I understand. I'll try to improve it. But there's always some restriction, so I can't promise that I can improve this issue. thanks

[gabrielecorda]

I have the same problem. I have a filtered column which has a div as header.
Thanks

[guntherlaurijssens]

Running into the same issue, anyone found a workaround?

[AllenFang]

Sorry, I'll fix on v4.0.0 and v4.0.0 will be released in this weekend officially.

[batjko]

Looks like #1534 has been merged, but a fix for this ticket wasn't included. Is it being moved into a post-v4 release?

[AllenFang]

@batjko thanks your remind :)

Actually, it was fixed before, if you have custom header(TableHeaderColumn), now it will work as expected, but please remember to add headerText on TableHeaderColumn !!!

<TableHeaderColumn dataField='xxx' headerText='product'>{ ... }</TableHeaderColumn>

Let me know if there's still any bug when you have customization header, thanks 👍

[Rclass93]

Hey, i came across this problem today. I have icons in the columns headers and if i set up the filter, it shows this message. If i delete the filter, it doesn't show anymore.
Here's the code:

<TableHeaderColumn dataField='selected_option' dataSort dataAlign="center"
columnClassName={ this.columnClassNameFormat }
filter={{ type: 'TextFilter', delay: 500, placeholder:"Procure"}}
width='16%'> Ação