# 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="/files/5VOhsOZYQ73xhRzyusSZ" 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](/gravity-native/components/list.md#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 }]}
```

###


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-native/components/list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.