Future and support for the extension "ScrollResize"
Future and support for the extension "ScrollResize"
fester
Posts: 3Questions: 1Answers: 0
We've been evaluating quite a few different grids to use in a new product and not really found anything suitable. I really like this grid component, but there's a key extension that brought it to my attention, which is a key requirement, namely the "scrollResize" extension which automatically fits the rows to the parent container.
Our new product is being implemented in React, and I saw that there is a React package available, which I've been testing, but this extension is not included in the repo.
My question is about the long term support for this extension, it's not mentioned in the docs and not part of the npm distribution, and whether it is suitable in a React app using Tailwind for styling (the docs mention support for this is incomplete)
I downloaded a copy of the source into a test app, it runs without runtime error, but as soon as the grid appears it starts reducing the grid height down constantly one pixel at a time until it has zero height. Quite amusing to watch to be honest, it's almost like a problem with precision in the calculations. This keeps firing constantly from the dataTables object:
dt.on('draw.scrollResize', function () {
that._size();
});
What's notable is that this seems to be affected by the display device resolution, drag it onto my other screen and this does not happen, but "scrollResize" doesn't fire and the grid dimensions just remain static. Wondering if Tailwind is messing it up, quite likely.
I do have a test app, but it's just using the example React application from the web site, with the scrollResize extension enabled.
We're locked into React and Tailwind, so perhaps should look for another alternative, which would be a shame as the feature set is very attractive.
Answers
So three points here:
Combining them all together, isn't something I've seen done before, but that's no surprise. There must be billions of combinations for the DataTables options, features, plugins, extensions, integrations, etc.
If you have a minimal git repo showing your setup I can take a look at what is happening.
I do plan to improve the Tailwind support, and also to bring the ScrollResize plug-in in line with my "modern" plugins. I'm not certain when that will be - I'm currently neck deep in switching DataTables core to Typescript for the next major version.
Allan
Allan,
Thank you for the quick response it is much appreciated. We're heavily invested in Typescript only development, so that's very good news in that respect.
Like yourself, our time is limited, and I have limited time to evaluate this option, but It's been fascinating to trace through how this extension works, I'd love to know what's causing the issue, so I'll post the example on StackBlitz, at the very least it might help someone else in the future.
Rob
Allan,
Here is the example React app using "scrollResize" :
https://stackblitz.com/edit/vitejs-vite-phbvbdpv?file=src%2Fscrollresize.ts
The strange constant resizing down to 0 doesn't happen with this StackBlitz version, but it's not got Tailwind installed as with my local version.
However, it doesn't resize at all.
thanks,
Rob.
Hi Rob,
Many thanks for that. I've added a couple of styles to the child of your resize wrapper:
https://stackblitz.com/edit/vitejs-vite-pdvnoxgl?
The first is needed due to the DataTables React component adding a div container, and just making sure it goes full height.
The second is because of the margin on the layout rows which ScrollResize is not correctly taking into account. I need to look into what is causing that.
Allan