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

Layout

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.

Tables

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.

Grids

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]).

Columns

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
00px
11px
44px
88px
1616px
2424px
3232px
4848px
6464px
9696px

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

Resources

Get started with Index

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