Devextreme-reactive: How to remove Group

[attiqeurrehman]

• [x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

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

Current Behaviour

I have few questions regarding Grouping, Fixed Column, and VirtualTable.

1. Grouping/GroupingState adds an extra th with class p-0.
2. With TableFixedColumns group row text goes out of the view when you move the horizontal scroll.
3. VirtualTable adds an empty row(s) sometimes one and sometimes two to offset the view, how can I add some class on it.

Expected Behaviour

1. I want to remove the extra th added.
2. I want the group heading to remain fixed with the column.
3. I want to be able to add some class to these empty rows.

Steps to Reproduce

Please check out this for more detail.

Environment

• dx-react-core: 1.10.0
• react: 16.7.0
• browser: Chrome
• bootstrap: 4.0
• reactstrap: 7.1.0

[ushkal]

Hi,

1. These th and td elements are stub cells that are rendered to indent group data rows from its parent. Although you cannot prevent the Grid from rendering them, there is a workaround to hide them: set TableGroupRow.indentColumnWidth to 0.1. Would you please clarify why you need to hide these cells?
2. We have an issue with fixing a group row. It works incorrectly.
3. These rows are rendered using the VirtualTable.stubRowComponent property. You can add your class with the following code:

const StubRow = props => (
  <VirtualTable.StubRow {...props} className="custom-class" />
);
...
<VirtualTable stubRowComponent={StubRow} />

[attiqeurrehman]

Hi,

These th and td elements are stub cells that are rendered to indent group data rows from its parent. Although you cannot prevent the Grid from rendering them, there is a workaround to hide them: set TableGroupRow.indentColumnWidth to 0.1. Would you please clarify why you need to hide these cells?

Please take a look at this, I don't want to show empty space it looks wierd. It looks like it's missing something.

[attiqeurrehman]

Also, for question 3, the addition of empty rows with striped style messes up the styling and it looks like there is a slight flicker.
Is there any way I can add CSS class on rows based on even/odd?

[attiqeurrehman]

For question 2, provided reproduce code is a simple table. Are you going update it yourself?

[attiqeurrehman]

For question 3, I was able to find the example from here.

[ushkal]

@attiqeurrehman
 

For question 2, provided reproduce code is a simple table. Are you going update it yourself?
 

In this particular case it doesn't matter because the issue is reproduced with both VirtualTable and Table plugins.

[attiqeurrehman]

@ushkal for question 3, even odd messes up because of the grouping, it includes the group row in rowComponent. Following is the TableRow component:

const TableRow = ({ index, row, ...restProps }) => {
  const odd = !!(index % 2);
  return (
    <VirtualTable.Row
      {...restProps}
      className={odd ? "even" : null}
    />
  )
}

Any idea?

[ushkal]

I've modified the example above. Please take a look: https://codesandbox.io/s/zxlpw09pnm.

[attiqeurrehman]

@ushkal thanks for the sample. I have (being a newbie) a question regarding it. I am using bootstrap and is there anything to replace/ use for withStyle?

[ushkal]

@attiqeurrehman for Bootstrap 4, you can use 'style' and 'className' properties to stylize a component. Here is an updated sample.

[attiqeurrehman]

@ushkal it was perfect! Should I close it or keep it open?

[ushkal]

@attiqeurrehman I'll close the issue. Feel free to reopen it or create another issue if you have further questions.

[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.