Skip to content

Commit

Permalink
fix: Server-side Searching on Table (#1785)
Browse files Browse the repository at this point in the history
## Checklist
I have:
- [x] run the content through Grammarly
- [ ] linked to sample apps when relevant
- [x] added the meta description for each page in the PR
- [ ] minimized the callouts and added only when necessary
- [ ] added the `queryString` parameter to the Tabs (if used)
- [ ] masked PII in images. For example, login credentials, account
details, and more
- [ ] added images only when necessary
- [ ] deleted the images that are no longer used for the updated pages
in the PR
- [ ] followed the image file naming convention while renaming or adding
new images. (Use lowercase letters, dashes between words, and be as
descriptive as possible)
- [ ] used the `<figure/>` tag instead of a markdown representation for
images
- [ ] added the `<figcaption/>` tag to add a caption to the image
- [ ] added the `alt` attribute in the `<img/>` tag
- [ ] verified and updated the cross-references or created redirect
rules for the changed or removed content
- [ ] reviewed and applied the style changes for UI formatting. For
example, Bold the UI elements(Buttons on screen) used in the doc.
  • Loading branch information
harshilp24 authored Oct 10, 2023
1 parent 5620cb0 commit 0e5c6ac
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 11 deletions.
Original file line number Diff line number Diff line change
@@ -1,23 +1,68 @@
# Setup Server-side Searching on Table
---
description: This page shows you how to set up server-side searching on the Table widget, which allows you to refine query results based on specific search terms, without relying on the client-side.
---
# Setup Server-side Searching on Table

Server-side searching is a technique of searching for specific records from the server using search terms, without relying on the client-side. To enable the search bar in the table header for server-side searching, you can turn on the **Allow Searching** property.
This page shows you how to set up server-side searching on the Table widget, which allows you to refine query results based on specific search terms, without relying on the client-side.

The `searchText` reference property can be used to filter records displayed in a table based on the user's search terms. When the user types into the search bar, the `onSearchTextChange` event of the table is triggered, which can be configured to query the table's datasource for the matching results.
If you are using the one-click binding feature to connect data, Appsmith automatically generates a server-side searching query for you. However, if you prefer to manually configure the server-side setup, you can do so by following the instructions in this guide.

To use the server-side search with the Table widget, follow these steps:
<figure>
<img src="/img/server-search-table.gif" style= {{width:"700px", height:"auto"}} alt="Setup Server-side Searching on Table"/>
<figcaption align = "center"><i>Server-side Searching on Table</i></figcaption>
</figure>

1. Create a SQL query using the `searchText` reference property:

```sql
SELECT * FROM users WHERE name LIKE {{"%" + Table1.searchText + "%"}} ORDER BY id LIMIT 10;
```

You can also pass the `searchText` property as a URL parameter in an API request:
## Prerequisites

A [Table widget](/reference/widgets/table) connected to a query.


## Configure query

Most databases and APIs support server-side searching, although the methods of implementation can vary.

Configure the query to fetch data using the [searchText](/reference/widgets/table#searchtext-string) reference property.

<dd>

*Example:* if you want to search data based on user names:

* For PostgreSQL, you can configure the query as follows:


```sql
SELECT * FROM users WHERE name LIKE '%{{Table1.searchText}}%' ORDER BY id LIMIT 10;
```

This SQL query fetches rows from the `users` table where the `name` column partially matches the `searchText` input.

:::note
Ensure that you turn off prepared statements in the query editor for this configuration. For more details, see [Prepared Statements](/connect-data/concepts/how-to-use-prepared-statements).
:::

* For the REST API, configure the query parameter as shown in the URL:


```
https://mock-api.appsmith.com/users?name={{Table1.searchText}}
```

2. Set the table widget's **onSearchTextChange** event to run the query.

Watch this video to learn how to set up [server-side search](https://www.youtube.com/watch?v=3ayioaw5uj8) for the Table widget.
</dd>


## Configure Table widget

Follow these steps to configure the Table widget to display fetched data, and implement server-side searching:

1. Connect the query to the [**Table data**](/reference/widgets/table#table-data-arrayobject).

2. Enable the [**Allow searching**](/reference/widgets/table#allow-searching-boolean) property.

3. Set the [**onSearchTextChange**](/reference/widgets/table#onsearchtextchanged) event to run the query.

After completing these steps, you can search for specific terms using the Table widget's search box.


Binary file added website/static/img/server-search-table.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

1 comment on commit 0e5c6ac

@vercel
Copy link

@vercel vercel bot commented on 0e5c6ac Oct 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.