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


The built-in layout options provide full view customization without having to add custom CSS that might break with updates. Choose between grid and table layouts on desktop and optionally include a separate item component for the list layout used on mobile devices.


When creating a table style view, you only have to consider the items and active data fields (padding, grid tracks, and selection are managed by the system). Table views accept a row as the view item component, which will be repeated down the page. You must return a React.Fragment as the top level element in your item component and then loop over each active data field.


When creating a grid style view, you have complete control of the individual view items, including selection. This is because selection may need to be placed in different areas depending on the layout. A Select component is passed in as a prop for you to handle selection in your view items (learn more about the select component [LINK]).


The grid is setup for you from small to large screens. Here are the breakpoints:

  • 768px to 1280px: 2 columns
  • 1280px to 1920px: 3 columns
  • 1920px and up: 4 columns

Available grid view options

When registering your grid views in PHP you can pass additional options to handle layout styling.

gap string: 24

Configure the amount of padding between each item in the grid. There are ten values ranging from no padding to 96px between items. The default is 24px.

Passed in valueOutputted px value

padded boolean

If you would like to avoid empty areas in your grids you can add a padded option. For example if you have 14 items in a column view you would have one empty cell on the last row. This option requires that you also pass in a padded_component option in the javascript filter.

padded_component: component

Used in conjunction with the padded option. Must return a React JSX component


Get started with Index

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