[Solved] Creating a Container GridColumn Component

[Alice]

I've found that it doesn't seem to be possible to create a Container GridColumn component. For example:

https://stackblitz.com/edit/react-5wjdz4?file=app/main.js

Here I want to create a column which has a button that pops up an alert when clicked. When I do so with the following code, it works fine:

<Column title="Alert" width="75px" cell={(props) => <td><button onClick={() => alert('This is a message')}>Alert</button></td>} />

However, I don't want to include the cell, etc. props every time I want to include a column like this in a grid. I'd much rather create a container component I can just pass the message to:

<AlertColumn message="This is a message from a container component" />

 

With the component class code being:

class AlertColumn extends React.Component {
  render() {
    <Column title="Alert2" width="75px" cell={() => <td><button onClick={() => alert(this.props.message)}>Alert</button></td>} />
  }
}

 

However, as you can see from my posted StackBlitz, the column returned by the container component does not render. I've also tried inheriting from the GridColumn component. Is there any way around this?

[Stefan]

Hello, Alice,

Thank you for the example.

The column is not rendered, as the column itself does not have a render it only takes the properties. This is why when a column is returned from the AlertColumn, the Grid never calls its render method which will return the column.

A class AlertColumn can be made and then the desired properties can be attached to its defaultProps property. The specific in this case, that all properties have to be passed to the default props as the developer will not have access to the properties passed to the AlertColumn.

I modified the example to demonstrate this:

https://stackblitz.com/edit/react-5wjdz4-pkr1nb?file=app/main.js

Regards,
Stefan
Progress Telerik

[Alice]

Thanks Stefan. I think I can work with that. So there's no way to pass custom props to the AlertColumn component and use them in the cell JSX? It would be something that would be really nice to have.

[Stefan]

Hеllo, Alice,

I'm glad to hear that this could still be helpful at this moment.

We will keep this case in mind as it sounds like a case which can be helpful when reusing a column multiple times across the application.

Regards,
Stefan
Progress Telerik