The next version of Index is here! To celebrate, take 25% off your purchase with the code 25OFF. Learn more
Index Logo

Items

Views handle the layout and display of individual items returned from a post type’s REST request. Instead of creating an entire view, this resource creates new single items in addition to settings to handle the view type, padding, and mobile customizations.

Configuring a view item

In the previous document [LINK], the ending example of adding a view item looked like this:

wp.hooks.addFilter(
	'view_my-custom-view',
	'index',
	function(view) {
		return Object.assign({}, view, {
			component: function(props) {
				return <p>I am a view item</p>
			}
		})
	}
)

In the component return function, there is a props parameter. This returns an object with the active data fields, an item from the post type REST request, and (for grids) a Select component:

// component return function
function(props) {
	var item = props.item
	var fields = props.columns
	var Select = props.Select // only applies to grids

	// rest of the function

Example

wp.hooks.addFilter(
	'view_my-custom-view',
	'index',
	function(view) {
		return Object.assign({}, view, {
			component: function(props) {
				var item = props.item
				var fields = props.columns
				
				return fields.map(function(field) {
					return item[field.id]
				})
			}
		})
	}
)

Mobile components

All custom views default to using the built-in List view item component on mobile, but you can override this with your own view item by adding another option to your Javascript filter configuration:

wp.hooks.addFilter(
	'view_my-custom-view',
	'index',
	function(view) {
		return Object.assign({}, view, {
			component: function(props) {
				return <p>I am a view item</p>
			},
			mobile_component: function(props) {
				return <p>I am a mobile view item</p>
			},
		})
	}
)

The mobile component functions exactly like a grid view item component and also handles swipe actions for you, so you don’t need to reimplement any standard functionality.

Get started with Index

See for yourself why Index is the most intuitive, beautiful interface for managing your WordPress content.