Scroller plug-in breaks info configuration
Scroller plug-in breaks info configuration
Link to test case: https://live.datatables.net/rerizaku/2/edit?html,js,output
Description of problem: I have an info
with custom text, and works fine until I use the scroller plug-in.
The information is overwritten as long as I enable the scroller, and it also causes flickering (I guess this is due to the overwritten) when typing in the search bar (e.g., keep pressing aaaaaaaaaaaaaaaaaaaaaaa
until there's no results to show and you can see the info is flickering).
You can comment/uncomment the line scroller: true
to see the difference.
I guess this part or this part in the source code is the reason causing it.
Answers
I have another question and performance suggestion for the Scroller.
When using slot to render button in the cell for example.
https://stackblitz.com/edit/datatables-net-react-simple-w9xkn7?file=src%2FApp.tsx
When scrolling fast (I set
scroller.displayBuffer
andscroller.boundaryScale
in purpose so that the issue is easy to see)The height is shrinking before the button is rendered. Even when I use
scroller.rowHeight
. It seems that therowHeight
is not applied to the cell before/after it is fully rendered?I think it would be improvements to use fixed height (if we already know the height).
So
scroller.rowHeight
is for that. But it seems it doesn't work to set the height.I was also using TanStack Virtual before and I think it is great to use. It supports fixed height or variable height, or even dynamic height that can be used for even table.
They have virtual-core which is written in Typescript. Not sure if it's beneficial to use virtual-core. Perhaps it would be good to use in Scroller?
Find a workaround for the shrinking issue:
Applying a CSS
height
to thetr
can solve the shrinking issue.e.g., For Tailwind integration, I add a class
h-12
(height: 3rem; /* 48px */) to therow
in the dataTables.tailwindcss.js since I already know that my rows are at least 48px high