Scroller plug-in breaks info configuration

Scroller plug-in breaks info configuration

chocchoc Posts: 94Questions: 11Answers: 7
edited October 31 in Free community support

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

  • chocchoc Posts: 94Questions: 11Answers: 7

    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 and scroller.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 the rowHeight 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?

  • chocchoc Posts: 94Questions: 11Answers: 7
    edited October 31

    Find a workaround for the shrinking issue:

    Applying a CSS height to the tr can solve the shrinking issue.

    e.g., For Tailwind integration, I add a class h-12 (height: 3rem; /* 48px */) to the row in the dataTables.tailwindcss.js since I already know that my rows are at least 48px high

Sign In or Register to comment.