Table page loading speed

Hi,

thanks for your question, and sorry for the trouble.

With over 22,000 rows, you are loading a really big table. Unfortunately, TablePress does not yet offer dynamic/partial loading of tables, so that I don’t see a good way to speed this up here. :-/
You’d likely have to use a custom solution, e.g. based on the server loading feature of DataTables (see https://www.datatables.net/ ), but that can not yet be used together with TablePress.

Sorry for not having better news here.

Regards,
Tobias

Hi,

thank you for your answer, is there any rows limit? I can split table to 4×5500, if it helps.

I can take a look for other solution or let anyone create custom solution, but i like your plugin ??

Toams

Hi,

it’s not really about a row limit, it’s simply that loading that much data will take some time, especially when applying the JS functions to them.

Note that you will run into issues on the “Edit” screen as well. It will probably be unusable. I’m working to make this better, but for now, the best work around for the “Edit” screen is to only edit the table e.g. in Excel and re-import the table as a CSV file after making changes (choosing to replace the existing one).

Regards,
Tobias

I have real issues with my pages and its only 1850 or so rows. Two things I wanted to ask – if you go to https://weirwood-net.com/generalinfo

My 2 questions are –

How do I stop it loading everything and then updating to just 10? Can it not just load 10?

Also the formatting when it loads everything is almost perfect, the formatting for 10 looks awkward. Every table does this – could you please advise?

I cannot seem to make the table width cover more of the page than it already does. Your help would be hugely appreciated Tobias ??

Hi,

thanks for your question, and sorry for the trouble.

No, sorry, only loading 10 (if the other rows should still be available via pagination) is not possible. The script first needs all rows and then calculates the pagination. It also needs the other rows to be able to search them.

Can you explain what you mean with the formatting being awkward? What exactly do you want to change? We can then try to find some CSS for it.

To make table cover more width, you’ll have to turn off the integration of the sidebar. Usually, this is possible by choosing a “Full width” or “No sidebar” page template on the “Edit” screen of the page. However, I think that your theme TwentySixteen does not come with such page templates, so that you would either have to modify the theme or switch to a theme that offers a “Full width” page template.

Regards,
Tobias

Hi Tobias,

Very helpful, I will look into that tonight!

With the CSS, below is what I am using, I find that the page loads perfectly then flicks into a new style that doesn’t quite look right, squashing words or over running the space slightly. Some odd things I found was having the same row in multiple times fixed the issue and other times it did not:
‘
.tablepress-id-8 tbody td {
font-family: Tahoma;
font-size: 12px;
color: #000000;
}

.tablepress-id-9 tbody td {
font-family: Tahoma;
font-size: 15px;
color: #000000;
}

.tablepress-id-10 tbody td {
font-family: Tahoma;
font-size: 18px;
color: #000000;
}

.tablepress-id-11 tbody td {
font-family: Tahoma;
font-size: 15px;
color: #000000;
}

.tablepress-id-12 tbody td {
font-family: Tahoma;
font-size: 13px;
color: #000000;
}

.tablepress-id-8 .column-1 {
width: 100px;
padding: 3px;
}

.tablepress-id-8 .column-7 {
width: 55px;
}

.tablepress-id-9 .column-1 {
width: 100px;
}

.tablepress-id-11 .column-1 {
width: 100px;
}

.tablepress-id-12 .column-1 {
width: 90px;
}

.tablepress-id-13 .column-1 {
width: 95px;
}

.tablepress-id-13 .column-2 {
width: 95px;
}

.tablepress-id-13 .column-3 {
width: 50px;
}

.tablepress-id-13 .column-4 {
width: 95px;
}

.tablepress-id-13 .column-5 {
width: 100px;
}

.tablepress-id-13 .column-6 {
width: 100px;
}

.tablepress-id-13 .column-7 {
width: 300px;
}

.tablepress-id-13 .column-7 {
width: 300px;
}

.tablepress-id-13 tbody td {
font-family: Tahoma;
font-size: 15px;
color: #000000;
}

.tablepress {
border: 1px solid black;
}

.tablepress-id-10 .column-01 {
width: 55px;
}

.tablepress-id-10 .column-02 {
width: 55px;
}

.tablepress-id-10 .column-03 {
width: 40px;
}

.tablepress-id-10 .column-04 {
width: 55px;
}

.tablepress-id-10 .column-05 {
width: 55px;
}

.tablepress-id-10 .column-06 {
width: 55px;
}

.tablepress-id-10 .column-07 {
width: 55px;
}

.tablepress-id-10 .column-08 {
width: 55px;
}

.tablepress-id-10 .column-09 {
width: 55px;
}

.tablepress-id-10 .column-10 {
width: 55px;
}

.tablepress-id-10 .column-11 {
width: 55px;
}

.tablepress-id-12 .column-2 {
width: 60px;
}

.tablepress-id-12 .column-3 {
width: 58px;
}

.tablepress-id-12 .column-3 {
width: 62px;
}

.tablepress-id-12 .column-4 {
width: 62px;
}

.tablepress-id-12 .column-5 {
width: 35px;
}

.tablepress-id-12 .column-6 {
width: 50px;
}

.tablepress-id-12 .column-7 {
width: 50px;
}

.tablepress-id-12 .column-8 {
width: 55px;
}

.tablepress-id-12 .column-9 {
width: 48px;
}

.tablepress-id-12 .column-10 {
width: 50px;
}

.tablepress-id-12 .column-11 {
width: 50px;
}

.tablepress-id-12 .column-12 {
width: 50px;
}

.tablepress-id-12 .column-13 {
width: 50px;
}

.tablepress-id-12 .column-14 {
width: 50px;
}

.tablepress-id-12 .column-15 {
width: 50px;
}

.tablepress-id-8 .column-2 {
width: 65px;
padding: 3px;
}

.tablepress-id-8 .column-3 {
width: 65px;
padding: 3px;
}

.tablepress-id-8 .column-3 {
width: 45px;
padding: 3px;
}

.tablepress-id-8 .column-4 {
width: 65px;
padding: 3px;
}

.tablepress-id-8 .column-5 {
width: 55px;
padding: 2px;
}

.tablepress-id-8 .column-6 {
width: 65px;
padding: 3px;
}

.tablepress-id-8 .column-8 {
width: 50px;
padding: 2px;
}

.tablepress-id-8 .column-9 {
width: 50px;
padding: 2px;
}

.tablepress-id-8 .column-10 {
width: 55px;
padding: 3px;
}

.tablepress-id-8 .column-11 {
width: 65px;
padding: 3px;
}

.tablepress-id-8 .column-12 {
width: 70px;
padding: 4px;
}

.tablepress-id-9 .column-2 {
width: 65px;
}

.tablepress-id-9 .column-3 {
width: 65px;
}

.tablepress-id-9 .column-4 {
width: 65px;
}

.tablepress-id-9 .column-5 {
width: 65px;
}

.tablepress-id-9 .column-7 {
width: 65px;
}

.tablepress-id-9 .column-8 {
width: 65px;
}

.tablepress-id-9 .column-9 {
width: 65px;
}

.tablepress-id-9 .column-6 {
width: 65px;
}

.tablepress-id-9 .column-10 {
width: 65px;
}

.tablepress-id-9 .column-11 {
width: 65px;
}

.tablepress-id-13 .column-01 {
width: 85px;
}

.tablepress-id-13 .column-02 {
width: 75x;
}

.tablepress-id-13 .column-03 {
width: 50px;
}

.tablepress-id-13 .column-04 {
width: 65px;
}

.tablepress-id-13 .column-05 {
width: 65px;
}

.tablepress-id-13 .column-06 {
width: 65px;
}

.tablepress thead th,
.tablepress tfoot th {
}
‘

I hope this makes sense.

Hi,

ok, it seems that you are changing very many column widths and the padding in the cells. The latter unfortunately influences the positioning of the sorting arrows and input fields.
Additionally, there seems to be some interference by the Donation Button plugin that you have installed, as it also loads a CSS file that affects tables that use the DataTables JS library.

To find good and efficient CSS for this table (ID 8), I suggest that we start fresh.
Can you maybe temporarily remove all CSS that affects table 8 and then describe what you want to change? That should help us find much shorter CSS.

Regards,
Tobias

Thank you Tobias,

So I removed everything and the table is now far too wide for the page – I took your advice and did a full width theme to. It seems removing my CSS doesnt even affect the layout now which is handy for this test I guess.

I removed all of the CSS as none of it seemed to make a difference now – on the Skills page there is no horizontal scroll though oddly, and I noticed it is turned off on all tables yet this is the only one that doesn’t allow scrolling? Any ideas?

Hi,

great, that’s good! As a start please add this to the “Custom CSS”:

.text_filter {
    width: 100%;
}

Then, please also deactivate that “Donation Button” plugin, or check if it has a setting for turning of the loading of that CSS file.

For the horizontal scrolling, the scroll mode from https://tablepress.org/extensions/responsive-tables/ is the most reliable solution.

Regards,
Tobias

Oh my word, you’re a hero. Thank you!

That actually looks spot on now ??

My remaining problem is on the phone – I really like the concept of your collapse option but is there a simple way to make it collapse to just the first column? I like the idea that users can expand upon the name column to see the rest. There are a few complaints from our users that scrolling isn’t doing it for them ( i think it is fine)

You are a hero, I’ve spent so much time tweaking this ?? it is such a cool plug in.

Hi,

tweaking the collapse mode is not that easy, you will basically have to assign CSS classes through a “Custom Command” on the table’s “Edit” screen.
Something like this could work:

"columnDefs": [ "className": "none", targets: [ 1,2,3,4,5,6,7,8,9,10,11 ] ]

which I adapted from the DataTables Documentation at https://datatables.net/extensions/responsive/examples/column-control/init-classes.html

Regards,
Tobias

Hi Tobias, thank you I will look at that tonight perhaps but I am anxious I might break it further haha. Right now it looks so sleak I am really pleased, you’ve been a great help ??

Hi,

no problem, you are very welcome! ?? Always happy to help!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!