Gravity
Search…
List
Lists are a great way to visualise a lot of content in an organised format. With Gravity Native, you can render both static and interactive lists with swipe actions. You can also search, sort and filter lists.
You can find a full working example of a list inside the /views/account/users
1
<List
2
data={ users }
3
searchable
4
sort={ 'name' }
5
loading={ loading }
6
onRefresh={ fetch }
7
showItems={['name', 'email']}
8
edit={ edit }
9
delete={ delete }
10
/>
Copied!

Props

prop
description
value
data
object containing data to render
object array (see below)
sort
key to sort the data object (optional)
string
searchable
show a search box and let the user search the list (optional)
true or false
edit
callback function to edit the item data (optional)
function
delete
callback function to delete the item (optional)
function
showItems
array of object keys to filter which data to show from the data object (optional)
string array
loading
toggle a loading spinner
true or false
onRefresh
callback function to fetch the data when the user pulls to refresh (optional)
function
titleKey
object key to use as list item title
string
showActions
force render actions (when using a mix of global and item-level actions
true or false
If you pass an edit or delete prop, the list will have swipe actions.

Data Format

The data prop accepts an array of objects. These can be in any format you like providing there is an id key with a unique value. Use the showItems prop to filter the object and determine which items you'd like to show in the UI.
1
[{
2
id: '1cab6e3b-abc9-4738-b0d4-cfad7f308e03',
3
name: 'Joseph Sandoval'
4
5
},
6
{
7
id: '1cab6e3b-abc9-4738-b0d4-cfad7f308e03',
8
name: 'Alan Reed'
9
10
}]
11
Copied!

Edit & Delete Items

If you provide an edit or delete prop, the user can swipe the list item and tap one of the swipe actions. This will execute a callback function to manage editing or deleting the data in the parent component. You can find a working example in /views/accounts/users.

Item Actions

In addition to global edit and delete actions, you can pass a bespoke action to each list item using the following format. You can also over-ride the edit and delete actions at the item level.
1
{ delete: deleteInvite, custom: [{ icon: 'mail', func: resendInvite }]}
Copied!

Last modified 6mo ago