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

Data fields

Data fields can be added to Index’s field selection list for use in any view. They are displayed as columns in table views and line items in grid views. Data fields are registered (and deregistered) in PHP and can be enhanced further in Javascript. Be aware that data fields need to still be added to individual views in the settings panel after being registered.

Registering a field

Each set of labels is tied to a specific post type:

// replace {$type} with the post type name
add_filter('index_register_{$type}_data_fields', function($fields) {
	$fields['my-field'] = [
		// [key => value] pairs here
	];

	return $fields;
});

Outputting a field

// replace {$type} with the post type name
add_action('index_output_{$type}_data_fields', function($field, $post_id) {
	if($field === 'my-field') {
		echo 'my value here';
	}
});

Required values

admin_label string

The label used in the settings panel, since outputted labels are customizable

label string

The default label used for the field if it’s not changed in settings


Optional values

Format string: null

Quickly format values. Options are:

idexample
price_us40.99
price_international40,99
dateOctober 30, 2030
datetimeOctober 30, 2030 at 1:00pm
date_international30 October, 2030
datetime_internationalOctober 30, 2030 at 13:00
linkhttps://indexforwp.com
htmlFormatted html
image[add small unsplash image here]
booleantrue

Prepend string: null

Add characters to the beginning of your value

Append string: null

Add characters to the end of your value

sortable boolean: false

Allows sorting of the field. Please note that if you enable this, you must handle sorting yourself with a REST query hook. Learn more [LINK]

width string: 75px

Used in table views to ensure field columns are only as wide as necessary. Can be any valid CSS grid column value.


Example

add_filter('index_register_post_data_fields', function($fields) {
	$fields['my-field'] = [
		'admin_label' => 'My field',
		'label' => 'My field',
		'sortable' => false,
		'width' => '150px',
		'format' => 'price_us',
		'prepend' => '$',
	];

	return $fields;
});

add_action('index_output_post_data_fields', function($field, $post_id) {
	if($field === 'my-field') {
		echo '49';
	}
});

// output: $49.00
add_filter('index_register_post_data_fields', function($fields) {
	$fields['my-field'] = [
		'admin_label' => 'My field',
		'label' => 'My field',
		'sortable' => false,
		'width' => '150px',
		'format' => 'price_us',
		'prepend' => '$',
	];

	return $fields;
});

add_action('index_output_post_data_fields', function($field, $post_id) {
	if($field === 'my-field') {
		echo '49';
	}
});

// output: $49.00

Javascript

Any active data field can be enhanced to use React components, with the Javascript filter. Each active data field will check for a matching filter based on the post type and field id:

wp.hooks.addFilter(
	`${post_type}_data_field_${field_id}`,
	'index',
	function(field) {
		return Object.assign({}, field, {
			component: function({ item, field }) {
				// add your component logic here
			}
		})
	}
)

Optional values

Component react component

The component parameter must return a React JSX component. A props parameter is passed back with the full item contents and the current data field information.

Note that all custom data fields are added to the item under the custom_columns section.

// example item object
{
	...item,
	custom_columns: {
		"my-field" : "my-value",
		// other custom data fields 
	}
}

Resources

Get started with Index

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