## Add Table Component
Before performing the search operation, 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 Search
Follow the following steps to perform server side search operation on **Table**:
1. Enable Server Side Search under the **Table** properties.
2. Edit the query, as follow:
```sql
SELECT * FROM public.sample_data_orders
WHERE city ILIKE '%{{components.table1.searchText}}%' OR
country ILIKE '%{{components.table1.searchText}}%' OR
state ILIKE '%{{components.table1.searchText}}%'
LIMIT 100
```
The above query searches for the searched text in city, state and country column on server side and return the data.
**Note**: Make sure to replace *table1* with your **Table** name.
3. Add Event Handler in **Table**:
Event: **Search**
Action: **Run Query**
Query: **Select Your Query**
This will run the query and fetch the data every time something is searched.
4. Add Loading State, navigate to the **Table** 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 search operation is implemented in ToolJet's **Table** component. Now when a search is performed in the **Table**, the query is executed on the server, allowing the search to be applied across the entire dataset.