React-table: [Feature] Renderers as components

[dmtrKovalenko]

First of all thanks for awesome table management solution!
But I have experienced that custom renderers, that passed to columns rendered not as components but pure functions.

So I cannot create custom component, like a class and pass it to column

class UserCell extends Component<CellProps<User>>{
  render() {
      .....
   }
}

If I need to pass it to the column I need to do

{
  Header: 'User',
  Cell: (props: CellProps<User>) => <UserCell {...props} />
}

It would be more convenient to have an ability just pass a class (or stateless component) directly to column and do not need to render them from funciton. Also its more performance friendly solutions -> because react would optimize rendering of components, itstead of pure functions that just returns jsx.

[gary-menzel]

You appear to be using some sort of type system. ReactTable is pure javascript and has no direct support for Flow Type or TypeScript (any of that support is external to ReactTable).

[dmtrKovalenko]

@gary-menzel
Its no matter that I am using typesystem, Its about Cell prop, which is actually pure function, but would be better if it would be a component.
You are rendering Cell as column.Cell(props), but you can render it like

const { Cell } = columnt
return <Cell {...props} />

[GuillaumeJasmin]

I have the same issue. I fixed it with export default of a function, which return my component:

{
  Header: 'Name',
  Cell: InputCell
}

InputCell.jsx:

class CellInput extends React.Component {
  ...
  render() {
    const { value } = this.props.row;
    return (
      <input value={value} />
    );
  }
}

export default row => <InputCell row={row} />;

But it would be more simple to only export a class

[gabriellet]

^ This was really helpful, thank you. It would be nice if this was added to the documentation, showing that you can supply a custom cell formatter in this manner.