![]() But wherever you decide to put it, this is a super intuitive user interface for all types of users.įor this tutorial, we have a search input bar that searches the ‘client’ and ‘company name’ columns of a database for similar strings of text, a multi-select to give the option to select one or multiple owners for this client, a dropdown to select a single company type or status, a checkbox, and a range slider to select a range of contract values. We’ve opted to include it in the app header, but you can also place it above the table, so that we can create a dynamic show/hide function (we’ll explain this later!). You can design this as a side panel or even a modal if this suits the layout of your app, but we prefer to create a bar across the top of the table for clarity and ease of use. To get started, pull a container into your app. Note: This tutorial uses a small dataset - if you are using server-side pagination, you will need to apply these filters in the query data itself, and this depends on the resource you are using and whether it uses SQL or not (which is unfortunately outside of the scope of this tutorial!). Hopefully, your end product will look a little something like this, allowing users to quickly search through different columns and categories using dropdowns, a value range slider, multi-select component and the text input search bar, as well as a checkbox for any boolean values: In this tutorial we will take you through a detailed step-by-step process of creating an advanced filter container (particularly aimed at non-developers), using the following Retool components: This UI session will focus on setting up a filter container with a bespoke UI to help your users sort and find data in tables more effectively and with fewer clicks - a perfect exercise for beginners trying their hand at Retool!įor those just starting out with SQL and looking to get an explanation written for non-software-engineers, we highly recommend that you read Technically’s overview. Using Retool’s “Query JSON with SQL” query, and a couple Retool components, we can create a filter panel that streamlines the experience for the end user and allows for customization to better fit the tool’s needs. The built-in filter for Retool’s table component can be a fast way to search for data in your table using conditional logic, however for quick searches it can end up taking a bit too much time, only filters the frontend and requires a bit too much clicking.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |