New Feature Request

[singharpit94]

Hi,

I would like to add some features in fixed-data-table-2. Currently I am planning to add the following two features

1. Enhance Touch Scroll: I would like to make it possible that on touch scroll , whenever the user stops the touch scroll , we always show complete columns. For this feature to exist the width of each column in the grid should be equal.

2. Add summary row in fixed-data-table-2: I would like to add fixed summary row in grid which can be used for various purpose.

So the motive of this request is that if you are willing to add these features in the grid, I will be having to contribute and send PRs for the same.

Let me know in case of any queries.

Thanks

[wcjordan]

Hey, thanks for reaching out. We definitely appreciate PRs for new functionality. For cases like these, I suggest we attempt to build the functionality with the existing APIs and then add examples which demonstrate how others can do the same.

1. I think we can tackle this using the onScrollEnd and scrollLeft props. We may need to add some additional details around whether the scroll was a touch scroll and how far the scroll moved in the onScrollEnd API to get a good UX though. Could you investigate and see if this can be accomplished with those APIs?

2. There's currently a Footer feature which may be able to do this. Try using the footerHeight prop on the table and the footer prop on the individual columns to add a summary footer to the grid. Let me know if there are any issues achieving what you want with that.

The docs and more details on the recommended APIs can be found here: http://schrodinger.github.io/fixed-data-table-2/getting-started.html

[singharpit94]

Hi,

Thanks for the response, I would like to add some more points on the feature request.

1. With reference to this ticket touch-events-react, it seems that we may not be able to call event.preventDefault in the touch events, which I think is not correct as we would like to disable the page scroll , when we are scrolling in the grid. One solution will be to add the touch events directly to the grid container instead of document node.

2. Regarding the summary row ,for some use case , it will be good to show the fixed summary row just after the header row which I think is not supported currently. This can be a minor addition of adding a Fixed-data-table row similar to the header and the footer.

[wcjordan]

For 1, you can add

.fixedDataTableLayout_rowsContainer {
    touch-action: none;
}

to your CSS to prevent page scroll when touching the grid. We can add that CSS into the library on the v1 branch, but not production since it would be a breaking change. I'm happy to explore your suggested solution of adding touch events to grid, but I believe that may require breaking from React, which I wouldn't accept.

For 2, you can support this using 2 tables and synchronizing them using the scroll APIs I mentioned above. We use this at Schrodinger to support grids with pinned rows.