Devextreme-reactive: TableFixedColumn: Header stays fixed, column doesn't

[bcmux]

• [x] I have searched this repository's issues and believe that this is not a duplicate.
  Potentially related to: https://github.com/DevExpress/devextreme-reactive/issues/1489

I'm using ...

• [x] React Grid
• [ ] React Chart
• [ ] React Scheduler

Current Behaviour

Setting a TableFixedColumn on a column that has custom cells only keeps the column's header cell fixed, and not the remaining cells in the column. TableFixedColumns works on non-custom cells as expected. Adding a unique key to each custom cell in the column doesn't seem to help either.

Expected Behaviour

The entire column, both header and the column cells, should stay fixed.

Steps to Reproduce (for Bugs)

https://codesandbox.io/s/w7zlq80kww

Environment

• @devexpress/dx-react-core: 1.10.0
• @devexpress/dx-react-grid: 1.10.0
• react: 16.7.0
• browser: Chrome 71.0.3578.98
• material-ui: 3.9.0

[MaximKudriavtsev]

Hi @bcmux,
 
You forgot to spread all props to your custom component. You can find how to override components in the Fundamentals Guide. I've updated your example.

[bcmux]

Oh neat, that works. Thanks! I was following the Cells section of the Fundamentals Guide to achieve this setup. Now I see the Custom content in header cells example spreading all props to the custom header cell.

Out of curiosity, how would someone know when it's a good idea to spread all the props to a custom content and when not to?

[MaximKudriavtsev]

@bcmux,

Thank you for your feedback. We are going to update our documentation to describe this specificity.

As for your question, our API reference lists properties that a component provides. In case you override a component, for example, the Cell component, we recommend that you check the API reference in order not to miss any of them.
 
I suggest that you make the props option available everywhere where it is possible since almost all our components have logic that depends on this option.
 

const Cell = ({ value, ...restProps }) => (
  <Table.Cell
    {...restProps} // this should be above always
    value={`${value * 2}`}
    row={/* */} // this property overrides the `restProps`
  />
);

 
In case you are using a custom component without our built-in components, making the props option available everywhere is not necessary.

const Cell = ({ value }) => (
  <td
    value={`${value * 2}`}
  />
);

[bcmux]

Awesome, thanks for the explanation. That makes perfect sense. I'm going to close this now since all my concerns have been addressed. :)

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.