DataTable on just-the-docs github page

AngledLuffa

Our group is using a DataTable on a github.io page generated with just-the-docs to display a large report of our tool's performance. Here is the page:

https://stanfordnlp.github.io/stanza/performance.html#system-performance-on-ud-treebanks

In order to get just-the-docs to configure our tables as a DataTable, we use some css & js in the header:

including datatables in the just-the-docs:
https://github.com/stanfordnlp/stanza/blob/4589a7112b430e6830f2e3b903c8876fcf5b6cc7/_includes/head.html#L42

using the datatable:
https://github.com/stanfordnlp/stanza/blob/4589a7112b430e6830f2e3b903c8876fcf5b6cc7/_pages/performance.md?plain=1#L137

The problem I am running into is that I would like to make the header a FixedHeader. The simple approach I tried was to add FixedHeader to our bundle, then set the fixedheader:true flag when making the DataTable.

https://github.com/stanfordnlp/stanza/commit/4589a7112b430e6830f2e3b903c8876fcf5b6cc7

This works on my phone, but not on my laptop browser. On my phone, there are no frames (or div elements masquerading as frames), and the header sticks to the top as expected. On Chrome, it scrolls right past the header with no effect.

If you have access to both mobile and laptop/desktop, you can hopefully see the same difference.

Is the layout of the page, with the left and right half, causing the DataTables issue? I think it is putting the left and right halves into div elements, and I read that years ago this was not functional with FixedHeader. Is that still a limitation? If so, is there any good solution, or any potential for a change to FixedHeader which would allow it to work inside a div?

One thing I can consider is scrollY instead of the long table:

https://datatables.net/examples/basic_init/scroll_y.html

Thanks!

allan

Interesting one this. As you say it is because of the CSS framework performing the scrolling, so FixedHeader's listener on the document for the scroll event is never triggered.

There is a workaround though - call fixedHeader.adjust() when the scroll happens on the scrolling div:

$('div.main-content-wrap').on('scroll', function () {
  $('#conll18-results').DataTable().fixedHeader.adjust();
});

It isn't optimal in that it will perform more calculations that necessary, but it will allow it to work on that page.

Regards,
Allan

AngledLuffa

Thanks, that works perfectly!

For reference for anyone else who gets here, we updated that to $('.datatable') to catch all the datatables on a given page.

AngledLuffa

One last followup (hopefully):

The attempt to generalize with $('.datatable') actually resulted in too many DataTable objects being created. The result was visually apparent because an empty second table would be overlaid on top of the first one, saying "No data available" etc.

I got around this by adding the callback as part of the construction of the DataTable:

        $('table.plain-datatable').each(function() {
            let table = $(this).DataTable({
                paging: false,
                fixedColumns: true,
                fixedHeader: true,
                scrollX: true,
                stateSave: true
            });

            $('div.main-content-wrap').on('scroll', function () {
                table.fixedHeader.adjust();
            });
        });

Thanks again for the initial tip. Wouldn't have been able to figure that out on my own