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

Selection

A selection component is passed into every custom grid item to handle item selection. It abstracts checking and requesting item selection, verifying permissions, and even handling dark mode. Included are customization options to make your views as flexible as possible.

How to use

All grid view items are passed in a Select prop, which is a React JSX component. You can use the Select prop anywhere in your view item but the easiest method is to wrap all of your code in it:

function customViewItem(props) {
	var Select = props.Select

	return(
		<Select item={props.item}>
			{
				function(props) {
					// return your item display code here
				}
			}
		</Select>
	)
}

Accepted props

These props can be passed into the Select component during instantiation:

item object

The item prop passed into your view item component. (required)

selectionColor string

A hex color for the checkbox when it’s selected (optional, defaults to blue)


Render props

These props are passed back to you in the render function:

disabled boolean

Denotes if the item is selectable

locked boolean

Denotes if the item is currently being edited by someone else

selected boolean

Denotes if the item is currently selected

selectable boolean

Denotes if selection is turned off globally for the post type or not. Useful if you have UI that should only show if selection is enabled at all.

onChange function

Change the selection state. Useful if you want a wrapper element to also change selection state.

renderItem component

A wrapped component that handles displaying a checkbox along with selection and selected, disabled, and locked state values.


Example

<Select item={item}>
	{
		function(props) {
			var renderItem = props.renderItem

			return(
				<div>
					{ //... your other code here }
					{renderItem()}
				</div>
			)
		}
	}
</Select>

Resources

Get started with Index

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