Use a modern data format for loading the table faster!
Advanced Loading
For large tables, frontend table loading can be slow, as a large chunk of HTML code has to be loaded and parsed. The “Advanced Loading” module can make this faster by instead rendering the table from a more lightweight JSON data format.
This is ideal for tables that also use the extensive search and filter features in TablePress, like Column Filter Dropdowns, Fuzzy Search, or Inverted Filtering. Another alternative for loading very large tables faster is the Server-side Processing feature that shifts filtering and sorting from the browser to the server.
Feature description
This table, with 1,000 rows, is not loaded from HTML code but from JSON data and therefore initializes much faster. This “Advanced Loading” mechanism brings high speed and performance gains especially for large tables!
| Last Name | First Name | Birthday | Company | Phone | ZIP code | Country | Balance | Points | Rating |
|---|---|---|---|---|---|---|---|---|---|
| Banks | Travis | 05/04/1969 | Apple | 200-4324 | 64655 | Italy | $61.17 | 8 | 6.6 |
| Cain | Lawrence | 05/16/1994 | IBM | 701-3108 | 98004 | United States | $54.81 | 5 | 2.5 |
| Middleton | Dennis | 01/10/1992 | 580-9501 | 80913 | Spain | $24.83 | 4 | 5.2 | |
| Valenzuela | Lunea | 01/09/1966 | Cisco | 970-8655 | 51606 | Germany | $74.07 | 7 | 3.7 |
| Burgess | Quynn | 09/24/1988 | Mozilla | 430-8943 | 78965 | France | $16.13 | 8 | 2.9 |
| Lott | Lillith | 12/10/1978 | Dell | 587-2289 | 88178 | Australia | $30.12 | 1 | 7.9 |
| Freeman | Cheyenne | 01/28/1981 | LG | 396-5473 | 14711 | Germany | $49.82 | 1 | 6.0 |
| Houston | Jorden | 05/03/1978 | Adobe | 970-1182 | 96036 | Canada | $47.31 | 2 | 1.5 |
| Harris | Merritt | 12/29/1989 | Apple | 160-5977 | 25178 | United States | $77.33 | 6 | 0.1 |
| Gregory | Brynn | 01/13/1994 | Adobe | 663-6039 | 91558 | Spain | $90.24 | 9 | 8.2 |
Usage instructions
To use these features with your tables, activate the “Advanced Loading” feature module on the “Modules” screen of TablePress Max. Then, configure the desired options in the “Advanced Loading” section on the table’s “Edit” screen.
Configuration parameters
To configure this module’s features, you can also use these configuration parameters in the “TablePress Table” block, the Elementor widget, or in the Shortcode that you are using to embed the table:
| Module | Slug | Configuration parameter | Name | Description | Type | Default value | |
|---|---|---|---|---|---|---|---|
| Advanced Loading | datatables-advanced-loading | datatables_advanced_loading | Advanced Loading | Loads the table data from a JavaScript array instead of from HTML code, when rendering it on the frontend. This improves loading speed for bigger tables. | boolean (true or false) | false |
|
| Advanced Loading | datatables-advanced-loading | datatables_advanced_loading_html_rows | Advanced Loading HTML Rows | The number of rows that should be added as HTML code, in addition to the JavaScript array. This serves as a fallback if JavaScript is disabled. | integer | 10 |