Devextreme-reactive: Update documentation on VirtualTable usage with custom formatters

[iamkobold]

I'm using ...

• [ X] React Grid
• [ ] React Chart
• [ ] React Scheduler

Description

Would like to see some updated documentation or otherwise info regarding the unexpected effect of using custom formatting of columns in conjunction with the virtual table.

There is an issue with the VirtualTable that estimatedRowHeight when used with complex formatters or editors causes the last few rows to disappear or be difficult to view depending simply how many rows there are and the offset a different a custom formatter makes in comparison to the default estimated row height.

As a simple example of the situation that should probably be documented as a side effect of using custom formatters with the virtual table in particular.

const BIgCell = ({ value }) => {
  return (
    <Typography style={{height: '64px'}} >value</Typography>
  );
};

<Grid
   rows={[/** multiple rows */]}
   getRowId={row => row.id}
   columns={[{name: 'columna' ]}
   rootComponent={Root}
   >
  <DataTypeProvider  formatterComponent={BIgCell} for={['columna']}  />
  <VirtualTable estimatedRowHieght={48} /> 
  <TableHeaderRow showSortingControls />
</Grid>

If you scroll to the bottom of the grid; usually what will happen is a big empty 'page' or something will display and a chunk of rows at the bottom will not actually be visible.

I do not consider this a bug on part of the grid component or sub-components. This was really a user/misconfiguration error. Just thinking that this is a simple situation to overlook when developing or working with complex table displays. To save a lot of googling or debugging.

[LazyLahtak]

Hi @iamkobold,

I tried to replicate your example and couldn't reproduce the behavior you described. Сould you please provide a runnable project or modify my example? This will help us solve this problem.

[iamkobold]

Let me get an example in codesandbox or something along those lines. There is definitely an issue with the VirtualTable and it's default estimated row estimate row height and the actual row height differing enough such that depending on how the scrollable height is calculated can cause rows at the bottom to be hard to view or disappear entirely.

[LazyLahtak]

I used your code, but didn't get any problem with the estimated row height. Can you provide an additional example? It will be helpful.

[iamkobold]

Here is a simple example of what I was referring to https://codesandbox.io/s/vibrant-chandrasekhar-vpwlk?fontsize=14

With no changes scrolling to the bottom of the table will/should yield the following screenshot

You will also notice that there are supposed to be 369 rows and all rows up to 340 are actually visible which means 29 rows are not even displayed to the user as the last chunk of rows are not rendered at all.

The code on line 26 forces the height of the cell to be much larger than the default estimatedRowHeight which I believe is 48 for material-ui. Now when the estimated row height is at least larger than the row heights there doesn't seem to be any issue rendering the rows

So I would just like to have a note added to the virtual table and or using custom formatters for cells can cause unexpected effects if the actual row heights are bigger than the estimated one.

[LazyLahtak]

@iamkobold,

Thank you for your response. We will add information on how the estimatedRowHeight property affects custom formatters and components.

[iamkobold]

Thank you, am happy to help. The dx grid is a great library

[LazyLahtak]

@iamkobold,

We're happy to inform you that our docs have been updated. If you have further questions or offers, feel free to open new issue.

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