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

<List
data={ users }
searchable
sort={ 'name' }
loading={ loading }
onRefresh={ fetch }
showItems={['name', 'email']}
edit={ edit }
delete={ delete }
/>

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.

[{
id: '1cab6e3b-abc9-4738-b0d4-cfad7f308e03',
name: 'Joseph Sandoval'
},
{
id: '1cab6e3b-abc9-4738-b0d4-cfad7f308e03',
name: 'Alan Reed'
}]

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.

{ delete: deleteInvite, custom: [{ icon: 'mail', func: resendInvite }]}