Paging buttons issue

mdellanave83

Hi,
I'm facing an issue regarding the paging buttons, sometimes, if the dataTable is not visible in dom, the buttons do not render as expected.

In this example there are 14 items as ajax dataSource and a pageLength of 5.
https://codesandbox.io/p/sandbox/datatable-scroll-body-forked-2f47h6

The paging buttons should be 1,2 and 3 but if you try to refresh the preview page, sometime just the button 1 appears.

I use tables in wizard steps, so this kind of issue force me to do a table.draw on each steps that contains a table.

is it possible to fix it somehow?

kthorngren

I wonder if using columns.adjust() in this event handler will solve the issue:

document.querySelector("button[data-show]")?.addEventListener("click", (e) => {
  document.querySelector(".table-responsive")?.classList.remove("d-none");
});

Use it after the table is made visible. I don't believe you need to use draw() with columns.adjust(). I would try it but I don't have an account on that platform to make changes.

Kevin

mdellanave83

Hi Kevin, yes it works also with table.columns.adjust()

I was wandering if it can be solved internally in dataTables instead of call any kind of function on the table.

I think it's a matter of width size, if the element in the dom is not visible, the paging can't calculate the available space to draw the buttons correctly, maybe using a ResizeObserver in dataTable could help to resolve?

allan

OMG! I wasn't aware of ResizeObserver. I've tried rather hacky experiments with object and iframe before to do resize calculations automatically, but I've never liked them enough to integrate them into DataTables core.

Now that you've let me know about this (which is slightly embarrassing since it appears to have been in Chrome since 64 and Firefox from 69!) this is going into DataTables 2.2 - no question. I'm very tempted to implement this next week and release what was going to be 2.1.9 as 2.2.0 in fact. Let me think on that a little. But yeah, that's going in.

Allan

mdellanave83

nice to hear you allan!
I appreciate your enthusiasm for the little things :-)

also for me ResizeObserver was a big surprise when I discovered it because, as you know, managing resizing was a mess before.

enjoy it and thanks again for your interest and support

plus: take a look also to the MutationObserver, just in case

allan

MutationObserver I was aware of, but haven't do anything with it yet. I prefer to have data changes for DataTables done through the API. Maybe in future something will come up.

Certainly feeling inclined to do a 2.2.0 release with this soon. Just need to get the time to do it!

Allan

allan

Committed here .

One of the unit tests is failing due to the error "ResizeObserver loop completed with undelivered notifications. thrown" which I've been unable to reproduce in the browser manually.

I'd welcome some external testing on the nightly build if yourself or anyone else would like to take the changes for a spin!

Allan

choc

@allan

Thanks for this new commit!

I have tested with this demo. The columns seem to resize quite nicely.

I wonder if this works with React Slot? I tried with this demo from my previous discussion. But with the same issue that the initial rendering causes a misalignment.
Looks like I still need to use columns.adjust() manually in this case?

One thing to note: if I resize the page (e.g. open the dev tool and resize it, or use the divider in the middle of the page), the column remains misaligned if the table is overflow! However, as soon as there is no overflow, the column is aligned immediately! (It doesn't have to be completely no overflow, see below)

Note the direction of resizing! If you use the dev tool, the column will not align if you resize towards the left, but if you resize towards the right, it will align!

On the other hand, if you use the divider in the middle of the page, the column will not align if you resize towards the right, but if you resize towards the left, it will align!

allan

That's - yes I can see the issue with the initial load as well in your demo there. Thanks for putting that together. I'll investigate more fully when I get into the office. It might be that the React components are rendering after the DataTable has done its width calculations which would throw things off. Disappointing that, I'd hoped it would solve that error as well.

Interestingly the demo won't load in Firefox but does in Chrome. I need to look into that as well.

Allan

choc

@allan I'm thinking that since now we have the access of the meta arguemnt in slot. And we know the number (the row count) will be rendered, e.g., 10 rows if pageLength is 10. So we could use useRef to track when the render is finished(?

But the problem now is that if we enable autoWidth (default is true), slots will render all rows instead of current page rows only which is very time-consuming.
So I disabled it for now.

I made a demo example quickly to fullfil the idea, see: https://stackblitz.com/edit/datatables-net-react-simple-cx1zs6q8?file=src%2FApp.tsx

(P.S. I use the DT nightly build imported in index.html not from npm)

It seems works fine! Although still manually call columns.adjust().

Any thoughts?

allan

Without having gone through it in detail yet (apologies - I'll make time for doing so later), the disadvantage is that the column widths can jump around a bit when flicking through pages since the data in the other rows hasn't had a width calculated for them. That may or may not be an issue depending on the application - as you've seen DataTables plays it safe by assuming a worst case and determining which cell is the "widest" from the table. That is more time consuming when using React components in the table.

Allan

choc

@allan I just wanted to let you know that I may managed to solve the React render issue for DT 2.2.0 using ResizeObserver (from this commit). This should be much more efficient than my previous comment using useRef.

See the new demo example: https://stackblitz.com/edit/datatables-net-react-simple-qzaaqyqo?file=src%2Fcomponents%2FDataTable%2Findex.tsx,src%2FApp.tsx

(I don't know Typescript, so I wrote in JavaScript in index.tsx. Sorry about that.)

Here, again, disable the autoWidth, as it tries to render all rows! But disable it will also disable the column width calculation (source code)

So, the hack is to re-apply the ResizeObserver again in datatables.net-react!

Very rough and hack way, but it works (hopefully, as it is not thoroughly tested)

(I didn't put too many codes in the demo as you did in this part, just a proof of concept.

choc

@allan I found a bug in the DT 2.2.0 with the ResizeObserver.

The new implementation will cause unwanted horizontal overflow on the table if resized.
In this example, a bit complicate to describe, please see the GIF below:

After resizing, the table is overflowed.

This is due to the use of scrollX: true. BUT, if it is removed, there will be more serious misalignment problems!
In this example, scrollX is removed, please see the GIF below for the issue:

allan

Thanks for letting me know about this. Yes I see it as well. I'll look into it shortly and post back (hopefully with a solution).

Allan

allan

That's DataTables 2.2.1 now available

Allan

choc

Thank you Allan, I can see that the examples I made earlier now work as expected.

allan

Whoohoo - time for a beer

sharanainapurapu

I see the issue still persists when the accordion is expanded and when we try to resize the window the error is still reproducible with 2.2.1

import React from 'react';
import './App.css';
import { useState } from 'react';
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-bs5';
import 'datatables.net-responsive-bs5';
DataTable.use(DT);

function App() {
const [tableData, setTableData] = useState(
[{ "id": 1, "first_name": "Alberta", "last_name": "Sumbler", "email": "asumbler0@auda.org.au", "gender": "Female", "ip_address": "175.161.238.129" },
{ "id": 2, "first_name": "Lucienne", "last_name": "Latham", "email": "llatham1@hatena.ne.jp", "gender": "Female", "ip_address": "115.57.126.226" },
{ "id": 3, "first_name": "Enriqueta", "last_name": "Miliffe", "email": "emiliffe2@fotki.com", "gender": "Female", "ip_address": "181.86.53.16" },
{ "id": 4, "first_name": "Sharlene", "last_name": "McIlwreath", "email": "smcilwreath3@skype.com", "gender": "Non-binary", "ip_address": "192.226.206.138" },
{ "id": 5, "first_name": "Eolanda", "last_name": "Vaskin", "email": "evaskin4@zdnet.com", "gender": "Female", "ip_address": "117.170.54.17" },
{ "id": 6, "first_name": "Hollie", "last_name": "Hellin", "email": "hhellin5@europa.eu", "gender": "Female", "ip_address": "18.220.42.142" },
{ "id": 7, "first_name": "Cherye", "last_name": "Tomicki", "email": "ctomicki6@dmoz.org", "gender": "Female", "ip_address": "138.150.13.11" },
{ "id": 8, "first_name": "Stewart", "last_name": "Chartre", "email": "schartre7@merriam-webster.com", "gender": "Male", "ip_address": "129.180.135.85" },
{ "id": 9, "first_name": "Leonerd", "last_name": "Chalcroft", "email": "lchalcroft8@trellian.com", "gender": "Male", "ip_address": "158.215.30.203" },
{ "id": 10, "first_name": "Kakalina", "last_name": "McCutcheon", "email": "kmccutcheon9@pagesperso-orange.fr", "gender": "Female", "ip_address": "8.129.9.196" },
{ "id": 11, "first_name": "Isador", "last_name": "Petigrew", "email": "ipetigrewa@blogger.com", "gender": "Male", "ip_address": "212.34.255.219" },
{ "id": 12, "first_name": "Viola", "last_name": "Tallboy", "email": "vtallboyb@cmu.edu", "gender": "Female", "ip_address": "112.33.72.101" },
{ "id": 13, "first_name": "Shirlee", "last_name": "Philpots", "email": "sphilpotsc@stanford.edu", "gender": "Genderfluid", "ip_address": "185.232.240.8" },
{ "id": 14, "first_name": "Stacie", "last_name": "Haig", "email": "shaigd@toplist.cz", "gender": "Female", "ip_address": "251.217.111.126" },
{ "id": 15, "first_name": "Lorita", "last_name": "Geratasch", "email": "lgeratasche@walmart.com", "gender": "Female", "ip_address": "214.38.100.27" },
{ "id": 16, "first_name": "Onfre", "last_name": "Poyle", "email": "opoylef@umn.edu", "gender": "Genderfluid", "ip_address": "190.45.179.167" },
{ "id": 17, "first_name": "Tanitansy", "last_name": "MacNulty", "email": "tmacnultyg@globo.com", "gender": "Female", "ip_address": "27.203.231.208" },
{ "id": 18, "first_name": "Clair", "last_name": "Tubble", "email": "ctubbleh@mapquest.com", "gender": "Genderfluid", "ip_address": "208.132.178.172" },
{ "id": 19, "first_name": "Waylen", "last_name": "Surman-Wells", "email": "wsurmanwellsi@paypal.com", "gender": "Genderqueer", "ip_address": "176.100.45.169" },
{ "id": 20, "first_name": "Eleonora", "last_name": "Lancaster", "email": "elancasterj@paginegialle.it", "gender": "Female", "ip_address": "227.223.49.253" },
{ "id": 21, "first_name": "Shea", "last_name": "Bolley", "email": "sbolleyk@mlb.com", "gender": "Male", "ip_address": "7.72.90.196" },
{ "id": 22, "first_name": "Carissa", "last_name": "Fagg", "email": "cfaggl@bloglovin.com", "gender": "Female", "ip_address": "186.169.89.139" }]
);
const columns = [
{
data: "id",
title: "ID",
createdCell: (td: HTMLTableCellElement,cellData:any)=> {
return td?(td.setAttribute('data-title', "ID"),td.setAttribute('title', cellData)) :td;

  }
},
{
  data: "first_name",
  title: "Firstname",
  createdCell: (td: HTMLTableCellElement,cellData:any)=> {
    return td?(td.setAttribute('data-title', "Firstname"),td.setAttribute('title', cellData)):td;
  }     
},
{
  data: "last_name",
  title: "Lastname",
  createdCell: (td: HTMLTableCellElement,cellData:any)=> {
    return td?(td.setAttribute('data-title', "Lastname"),td.setAttribute('title', cellData)):td;
  }
},
{
  data: "email",
  title: "Email",
  createdCell: (td: HTMLTableCellElement,cellData:any)=> {
    return td?(td.setAttribute('data-title', "Email"),td.setAttribute('title', cellData)):td;
  }
},
{
  data: "gender",
  title: "Gender",
  createdCell: (td: HTMLTableCellElement,cellData:any)=> {
    return td?(td.setAttribute('data-title', "Gender"),td.setAttribute('title', cellData)):td;
  }
},
{
  data: "ip_address",
  title: "IP Address",
  createdCell: (td: HTMLTableCellElement,cellData:any)=> {
    return td?(td.setAttribute('data-title', "IP Address"),td.setAttribute('title', cellData)):td;
  }
}];

// const options = {}
const options = {responsive: true}
return (

<></>

);
}

export default App;

sharanainapurapu

I am still able to reproduce the issue with 2.2.1 when the accordion is expanded and the browser is resized.

I am using following packages:
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-bs5';
import 'datatables.net-responsive-bs5';
DataTable.use(DT);

Please find SS for reference

allan

Can you link to a test case showing the error please? Unfortunately I can't debug a screenshot .

The ResizeObserver error, is actually more of a warning than an actual error (according to the MDN docs), but still it shouldn't happen. A test case showing the problem will let me debug and hopefully resolve the issue.

Allan

allan

For what it is worth, I haven't been able to reproduce that error in the Responsive example.

Allan

sharanainapurapu

Code looks like below
`import React from 'react';
import './App.css';
import { useState } from 'react';
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-bs5';
import 'datatables.net-responsive-bs5';
DataTable.use(DT);

// DT.Responsive.bootstrap(bootstrap);
// import pdfmake from 'pdfmake';
// import 'datatables.net-buttons/js/buttons.html5.mjs';

function App() {
const [tableData, setTableData] = useState(
[{ "id": 1, "first_name": "Alberta", "last_name": "Sumbler", "email": "asumbler0@auda.org.au", "gender": "Female", "ip_address": "175.161.238.129" },
{ "id": 2, "first_name": "Lucienne", "last_name": "Latham", "email": "llatham1@hatena.ne.jp", "gender": "Female", "ip_address": "115.57.126.226" },
{ "id": 3, "first_name": "Enriqueta", "last_name": "Miliffe", "email": "emiliffe2@fotki.com", "gender": "Female", "ip_address": "181.86.53.16" },
{ "id": 4, "first_name": "Sharlene", "last_name": "McIlwreath", "email": "smcilwreath3@skype.com", "gender": "Non-binary", "ip_address": "192.226.206.138" },
{ "id": 5, "first_name": "Eolanda", "last_name": "Vaskin", "email": "evaskin4@zdnet.com", "gender": "Female", "ip_address": "117.170.54.17" },
{ "id": 6, "first_name": "Hollie", "last_name": "Hellin", "email": "hhellin5@europa.eu", "gender": "Female", "ip_address": "18.220.42.142" },
{ "id": 7, "first_name": "Cherye", "last_name": "Tomicki", "email": "ctomicki6@dmoz.org", "gender": "Female", "ip_address": "138.150.13.11" },
{ "id": 8, "first_name": "Stewart", "last_name": "Chartre", "email": "schartre7@merriam-webster.com", "gender": "Male", "ip_address": "129.180.135.85" },
{ "id": 9, "first_name": "Leonerd", "last_name": "Chalcroft", "email": "lchalcroft8@trellian.com", "gender": "Male", "ip_address": "158.215.30.203" },
{ "id": 10, "first_name": "Kakalina", "last_name": "McCutcheon", "email": "kmccutcheon9@pagesperso-orange.fr", "gender": "Female", "ip_address": "8.129.9.196" },
{ "id": 11, "first_name": "Isador", "last_name": "Petigrew", "email": "ipetigrewa@blogger.com", "gender": "Male", "ip_address": "212.34.255.219" },
{ "id": 12, "first_name": "Viola", "last_name": "Tallboy", "email": "vtallboyb@cmu.edu", "gender": "Female", "ip_address": "112.33.72.101" },
{ "id": 13, "first_name": "Shirlee", "last_name": "Philpots", "email": "sphilpotsc@stanford.edu", "gender": "Genderfluid", "ip_address": "185.232.240.8" },
{ "id": 14, "first_name": "Stacie", "last_name": "Haig", "email": "shaigd@toplist.cz", "gender": "Female", "ip_address": "251.217.111.126" },
{ "id": 15, "first_name": "Lorita", "last_name": "Geratasch", "email": "lgeratasche@walmart.com", "gender": "Female", "ip_address": "214.38.100.27" },
{ "id": 16, "first_name": "Onfre", "last_name": "Poyle", "email": "opoylef@umn.edu", "gender": "Genderfluid", "ip_address": "190.45.179.167" }]
);
const columns = [
{
data: "id",
title: "ID",
createdCell: (td: HTMLTableCellElement,cellData:any)=> {
return td?(td.setAttribute('data-title', "ID"),td.setAttribute('title', cellData)) :td;

  }
},
{
  data: "first_name",
  title: "Firstname",
  createdCell: (td: HTMLTableCellElement,cellData:any)=> {
    return td?(td.setAttribute('data-title', "Firstname"),td.setAttribute('title', cellData)):td;
  }     
},
{
  data: "last_name",
  title: "Lastname",
  createdCell: (td: HTMLTableCellElement,cellData:any)=> {
    return td?(td.setAttribute('data-title', "Lastname"),td.setAttribute('title', cellData)):td;
  }
},
{
  data: "email",
  title: "Email",
  createdCell: (td: HTMLTableCellElement,cellData:any)=> {
    return td?(td.setAttribute('data-title', "Email"),td.setAttribute('title', cellData)):td;
  }
},
{
  data: "gender",
  title: "Gender",
  createdCell: (td: HTMLTableCellElement,cellData:any)=> {
    return td?(td.setAttribute('data-title', "Gender"),td.setAttribute('title', cellData)):td;
  }
},
{
  data: "ip_address",
  title: "IP Address",
  createdCell: (td: HTMLTableCellElement,cellData:any)=> {
    return td?(td.setAttribute('data-title', "IP Address"),td.setAttribute('title', cellData)):td;
  }
}];

// const options = {}
const options = {responsive: true}
return (

<></>

);
}

export default App;
`

allan

Can you link to an minimal example git repo, or StackBltiz showing the issue so I can debug it please?

Allan