# List

Lists are a great way to visualise a lot of content in an organised format. With Gravity Native, you can render static and interactive lists with swipe actions. You can also search, sort and filter.

## Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FZD06EDxv8X4MVhChSqzu%2Flist.png?alt=media&#x26;token=472bedc5-976e-477c-8018-8e4abc6bbff9" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="info" %}
You can find a full working example of a list inside the `/views/account/users`
{% endhint %}

## Code

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

## Props

| Prop        | Description                                                            | Required | Value                                    |
| ----------- | ---------------------------------------------------------------------- | -------- | ---------------------------------------- |
| data        | object containing data to render                                       | required | [object array](#data-format) (see below) |
| delete      | callback function to delete the item                                   | optional | function                                 |
| edit        | callback function to edit the item data                                | optional | function                                 |
| loading     | toggle the loading spinner                                             | optional | boolean                                  |
| onRefresh   | callback function to fetch the data when the user pulls to refresh     | required | function                                 |
| searchable  | show a search box                                                      | optional | boolean                                  |
| showActions | force render actions when using a mix of global and item-level actions | optional | boolean                                  |
| showItems   | array of object keys to filter which data to show from the data object | optional | string array                             |
| sort        | key to sort the data object                                            | optional | string                                   |
| titleKey    | object key to use as list item title                                   | required | string                                   |

{% hint style="info" %}
If you pass an `edit` or `delete` prop, the list will have swipe actions.
{% endhint %}

## Data Format

The data prop accepts an array of objects. These can be in any format, provided there is an ID key with a unique value. Use the `showItems` prop to filter the object and determine which items you want to show in the UI.

```javascript
[{
  id: '1cab6e3b-abc9-4738-b0d4-cfad7f308e03',
  name: 'Joseph Sandoval'
  email: 'joseph_88@example.com',
},
{
  id: '1cab6e3b-abc9-4738-b0d4-cfad7f308e03',
  name: 'Alan Reed'
  email: 'alan_reed@example.com',
}]

```

## 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.

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

###