# List Views

A list view is a list-based view of a collection entity providing features: pagination for large collections, custom data views, searching, and bulk actions.

![A collection list view](https://2059272600-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj6FmBruCSGbXJIJB2aRu%2Fuploads%2Fgit-blob-80efd5284e654fce93d1922bc113e6131745fa40%2Fpeople_listview.png?alt=media)

## Configuring a list view

The list view configuration is a sub-configuration of a [`Collection`](https://docs.umbraco.com/umbraco-ui-builder/13.latest/collections/the-basics) config builder instance and is accessed via its `ListView` method.

### **ListView(Lambda listViewConfig = null) : ListViewConfigBuilder\<TEntityType>**

Accesses the list view config of the given collection.

```csharp
// Example
collectionConfig.ListView(listViewConfig => {
    ...
});
```

## Adding a field to the list view

### **AddField(Lambda propertyExpression, Lambda fieldConfig = null) : ListViewFieldConfigBuilder\<TEntityType, TValueType>**

Adds the given property to the list view.

```csharp
// Example
listViewConfig.AddField(p => p.FirstName, fieldConfig => {
    ...
});
```

## Changing the heading of a field

### **SetHeading(string heading) : ListViewFieldConfigBuilder\<TEntityType, TValueType>**

Sets the heading for the list view field.

```csharp
// Example
fieldConfig.SetHeading("First Name");
```

## Formatting the value of a field

### **SetFormat(Lambda formatExpression) : ListViewFieldConfigBuilder\<TEntityType, TValueType>**

Sets the format expression for the list view field.

```csharp
// Example
fieldConfig.SetFormat((v, p) => $"{v} years old");
```

## Setting the view of a field

With field views, you can customize the markup the list view's field so you can show richer visualizations of the field's content. For more information you can check the [Field Views Documentation](https://docs.umbraco.com/umbraco-ui-builder/13.latest/collections/list-views/field-views).

### **SetView(string viewComponentName) : ListViewFieldConfigBuilder\<TEntityType, TValueType>**

Sets the view component for the list view field.

```csharp
// Example
fieldConfig.SetView("ImageFieldView");
```

### **SetView\<TView>() : ListViewFieldConfigBuilder\<TEntityType, TValueType>**

Sets the view component for the list view field.

```csharp
// Example
fieldConfig.SetView<ImageFieldView>();
```

## Setting the visibility of a field

### **SetVisibility(Predicate\<ListViewFieldVisibilityContext> visibilityExpression) : ListViewFieldConfigBuilder\<TEntityType, TValueType>**

Sets the runtime visibility of the list view field.

```csharp
// Example
fieldConfig.SetVisibility(ctx => ctx.UserGroups.Any(x => x.Alias == "editor"));
```

## Changing the page size

### **SetPageSize(int pageSize) : ListViewConfigBuilder\<TEntityType>**

Sets the number of items to display per page for the given list view.

```csharp
// Example
listViewConfig.SetPageSize(20);
```