Search code examples
javascriptreactjsjsxwrapperdevextreme

How to create custom wrapper for devextreme column in datagrid?

I have an issue to wrap Column in my DataGrid. I want to create a custom component that returns a Column with proper formatting. For example, I need to create ColumnDate that adds my date formatting and I want to use it everywhere I need it so I don't need to copy the formatting string to every component.

const ColumnDate = (props) => {
  const dateFormat = "y-MM-dd";
  return <Column format={dateFormat} dataType="date" {...props} />;
};

I am using it in my DataGrid like that

<DataGrid>
  <ColumnDate dataField="date"/>
</DataGrid>

This won't work because this column is not visible in the grid. Using React Dev Tools there is a DataGrid->ColumnDate->Column and probably there should be DataGrid->Column instead (other columns directly below DataGrid are shown). Is there any way to make it work?

I create a sandbox to make it more clear what I want to achieve. You can find it here.

Solution

  • The problem is in the way you're calling your functional component. You want it to behave as function and yet you're calling it as component.

    Igor Bykov describes it perfectly in this article.

    When a functional component is used as <Component /> it will have a lifecycle and can have a state.

    To avoid that you need to call it as {Component()} .

    As Igor said:

    If you have to declare a function that returns JSX inside a functional component (for instance, due to tightly coupled logic), directly calling it as {Component()} could be a better choice than using it as <Component />.

    Hope it helps :)