Replies: 1 comment
-
I believe that in case of Table Component all the data should be fed to it and the table should automatically do necessary pagination without the developer having to do anything at all. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
In Lowcoder, queries are returned to the browser as they're executed, regardless of how many rows are displayed in a table page (for instance). In order to improve performance, it is often necessary to paginate the SQL queries behind our applications. The exact syntax for doing this varies across DB platforms, and we'll hit two main syntax forms here.
We'll start with a table displaying the results of a simple query:
![image](https://private-user-images.githubusercontent.com/80843079/332558772-49127d67-6dfe-4e36-848c-f107c7d8fc55.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NDg2MjMsIm5iZiI6MTcyNDU0ODMyMywicGF0aCI6Ii84MDg0MzA3OS8zMzI1NTg3NzItNDkxMjdkNjctNmRmZS00ZTM2LTg0OGMtZjEwN2M3ZDhmYzU1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDAxMTIwM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA2ZDdhYzFiYzBmNDA3Yjg5NzE0MDU2NTkwNDk2ZGJlMGEwNTU4ZjhhZjI5NmE2MDY2ZmJhOGU4Mjk2ODFiYmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.gWdqsBEwGCn9n21oFqlnbpQ9c-WthcveWBq8SKyI_74)
Here we have three columns and several rows. If this were a dataset of many thousands or millions of rows, we wouldn't want to have all of that be loaded to the browser. Instead, we need a way to query just enough to fit on the page. Enter select offset/limit/fetch.
SQL Query Pagination
Using SQL offset/fetch(limit) in combination with the Lowcoder table properties pageNo and pageSize, we can generate SQL that will automatically query only the rows we need for the display. In our example here, we'll use SQL that looks like one of these examples.
Below is SQL Server and Oracle syntax, using OFFSET/FETCH:
MySQL/PostgreSQL would look similar, using LIMTI/OFFSET:
Lowcoder table properties
In addition to the SQL changes, Lowcoder also needs to know how many rows there are, total, so as to know that there will be multiple pages of data. If we don't do this, the SQL query will only ever return the number of rows that will display in first page of the table, and there will be no way to paginate through them, since Lowcoder will recognize (correctly) that it has displayed all the data from the query.
To address this, Lowcoder tables have a "Total Row Count" property that we can populate using a count(*) SQL query:
![image](https://private-user-images.githubusercontent.com/80843079/332562493-b49752d5-cb05-445b-86b2-2a8ecb11f390.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NDg2MjMsIm5iZiI6MTcyNDU0ODMyMywicGF0aCI6Ii84MDg0MzA3OS8zMzI1NjI0OTMtYjQ5NzUyZDUtY2IwNS00NDViLTg2YjItMmE4ZWNiMTFmMzkwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDAxMTIwM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY0NWM0YTk0MTcyNzFhYWI1MmMyNzAzMGZjNzIxMTcxNDBkOThlZTU4NzMxMGEwODBlMzQ3NmVmZjU1ZjdmOTUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Z_O9ECAEcgz6EfQDXXtQS__LQxaIImGypJ57bbA1YTA)
In our case, our query looks like this:
pageSize and pageNo population
One problem we will run into with default settings on these queries is that the queries may be executed before the table is populated.
This means that our pageSize and pageNo values may be null.
When this happens, we get an error like this:
This doesn't actually break the application, but it does present a message that we'd like to avoid.
There are a variety of ways of handling this, but one of the simplest is to use the JS /or/ construct in our SQL handlebars for null handling. Doing this, we can hard code offset and fetch values in our SQL for those times when the query is executed before the table is rendered.
That modified SQL looks like this, replacing null values with 0 and 5 as appropriate:
MSSQL/Oracle:
MySQL/PostgreSQL
With these changes in place, we have a responsive app that will display large datasets more efficiently.
Beta Was this translation helpful? Give feedback.
All reactions