## Add Table Component
Before performing the serverside pagination, lets setup the **Table** component and populate it with the data:
1. Drag a **Table** component from right component library to the canvas.
2. Select the data source and create a new query from the query panel at the bottom. (Refer to [data source](/docs/data-sources/overview) docs for more details)
We are going to use ToolJet’s Sample data source (Postgres) in this guide.
Add the following query to fetch the data from database:
```sql
SELECT * FROM public.sample_data_orders
LIMIT 100
```
3. Set the value of the **Data** property of the **Table** to `{{queries.
.data}}` to populate the **Table** with relevant data.
## Serverside Pagination
Follow the following steps to perform server side pagination on **Table**:
1. Enable Server Side Pagination under the **Table** properties.
2. Create a new query to find total number of records on server side
```sql
SELECT COUNT(*) FROM public.sample_data_orders
```
3. Navigate to the table's properties under Pagination section, in Total record server side enter `{{queries.countOrders.data[0].count}}`
Make sure to change *countOrders* with your query name create in the last step.
4. Edit the query, as follow:
```sql
SELECT * FROM public.sample_data_orders
LIMIT 100 OFFSET {{(components.table1.pageIndex-1)*100}}
```
**Note**: Make sure to replace *table1* with your **Table** name.
5. Add Event Handler in **Table**:
Event: **Page changed**
Action: **Run Query**
Query: **Select Your Query**
This will run the query and fetch the data every time the page is changed.
6. Disable the next page button on the last page, navigate to the **Table** properties under Pagination section. Click on the **fx** icon next to Ebable next page button and enter `{{components.table1.pageIndex
7. Add Loading State, navigate to the table's properties under Additional Actions. Click on the **fx** icon next to Loading State and enter `{{queries.getOrders.isLoading}}` in the field.
**Note**: Make sure to replace *getOrders* with your query name.
This is how serverside pagination is implemented in ToolJet's **Table** component. When pagination is used, the query is executed on the server, retrieving only the relevant set of records for the current page. This ensures that data is fetched efficiently from the server, rather than loading the entire dataset at once, improving performance and scalability.