Using a script for filtering/sorting list in React Studio

React Studio
Feb 15 · 2 min read

List/Grid element has now a new script feature for manipulating the list data source array directly in the Studio’s UI.

Traditional ToDo-demo in browser and in React Studio

Here is a live demo of an example project with list filtering implemented with a script. Download the example React Studio project file here.

How do I add the script?

Simply select List/Grid element from design canvas and click “”Edit script” button from the inspector panel on the right. Editor has variable named “items” which contains all items for list data. You can then e.g. filter the list based on Data slot value or arrange the list or even add or remove items from the list data source. When you’re ready click save and run the app in browser.

Example script for filtering list based on value in Data slot.

In this code we take value from Data slot (ds_filter) to variable and check if the list item’s “todo” property contains the filter string. If string is found then the item is added to new array which is returned in the end of the code snippet.

Adding filtering to chat app

P.S. Scripts are handy for prototyping or manipulating list data in client side. When using a real backend you should consider doing the filtering in the API instead of downloading all rows and filtering in client side.

Download React Studio from www.reactstudio.com

React Studio

Written by

The premium app design tool for the most advanced JavaScript UI library — React JS www.neonto.com/reactstudio