Warning when react virtualized column is subclassed

Question

When I inherit/subclass the 'Column' component, it throws Warning: Failed prop type: Table only accepts children of type Column

This is how I subclassed Column

import React, {Component, PropTypes} from 'react';
import * as RV from 'react-virtualized';

class Column extends Component {
    constructor() {
        super();
    }

    render() {
        return (
            <RVC.Column {...this.props} type="Column" />
        )
    }
}

Column.defaultProps = RV.Column.defaultProps;
Column.propTypes = RV.Column.propTypes;

export default Column;

It works very well but how can I avoid from that warning?

score 1 · Accepted Answer · edited Sep 26 '16 at 22:30

1

I don't think there's any benefit to subclassing Column. I assume your real intent is to set default values or DRY up your project in which case, I'd suggest just using a factory-function for columns like so:

import { Column, Table } from 'react-virtualized'

export default function CustomColumn (columnProps) {
  const customProps = {
    // Set any default props here ...
  }

  return (
    <Column
      {...customProps}
      {...columnProps}          
    />
  )
}

function ExampleTable (tableProps) {
  return (
    <Table {...tableProps}>
      {CustomColumn({
        dataKey: 'foo',
        width: 100
      })}
      {CustomColumn({
        dataKey: 'bar',
        width: 100
      })}
    </Table>
  )
}

For what it's worth, I've done this on Production projects and it works nicely. If you think you have a strong use-case for subclassing Column though let me know and I will consider adding support for it.

edited Sep 26 '16 at 22:30

brsbilgic

11,613
16
64
94

answered Sep 26 '16 at 19:01

bvaughn

13,300
45
46

I added a `CustomColumn` method as you suggested and easily implemented a proper `headerRenderer`. Thanks! However, there is another challenge that I'm facing now which is adding a custom button to column header to reset column sorting. I'm able to add a button to the header but I'm not sure how I can handle `onClick` event properly. For example, I can't disable `onHeaderClick` when that inner button is clicked. Ideally, I'd like to add a new props to table like onColumnRemoveSortClicked but not sure how to pass this props to the component rendered in column's `headerRenderer` – brsbilgic Sep 27 '16 at 10:42
You can directly pass parameters (eg the `sort` callback) to your `headerRenderer` so I would suggest just having it call that method directly rather than use the `onHeaderClick`. – bvaughn Sep 27 '16 at 15:12

score 0 · Answer 2 · answered Sep 26 '16 at 18:49

I'm afraid you are not subclassing RV.Column at all, you are still subclassing React.Component, just that the name of your component is Column. React will still show the error because your self-defined Column !== RVC.Column.

Why do you want to subclass it in the first place? What does type="Column" do?

Warning when react virtualized column is subclassed

2 Answers2