Skip to content Skip to footer navigation
Light theme Dark theme

Grid Fieldtype

The grid fieldtype is a meta fieldtype, a fieldtype that serves as a container for more fieldtypes. Any fieldtypes. Think of Grid as a spreadsheet, where each column contains any fieldtype, including another Grid. We lovingly refer to these as Inception Grids. Let's go deeper.

Screenshot of Grid
The Grid Fieldtype in action!

Fieldtypes

You can use any fieldtypes inside a Grid. Just remember that because you can doesn't mean you should. Your UI experience will vary greatly. Make sure to compare the experience with the other meta-fields: Replicator and Bard.

Data Structure

The Grid field creates a YAML collection (associative array).

Templating

The example below would have the following data which can be looped through as a tag pair with access to the column data as variables.

cast:
  -
    actor: Mark Hamill
    character: Luke Skywalker
  -
    actor: Harrison Ford
    character: Han Solo
<h3>Star Wars Cast</h3>
<ul>
    {{ cast }}
        <li>{{ character }} played by {{ actor }}</li>
    {{ /cast }}
</ul>
<h3>Star Wars Cast</h3>
<ul>
    @foreach ($cast as $role)
    <li>{{ $role->character }} played by {{ $role->actor }}</li>
    @endforeach
</ul>
<h3>Star Wars Cast</h3>
<ul>
    <li>Luke Skywalker played by Mark Hamill</li>
    <li>Han Solo played by Harrison Ford</li>
</ul>

Options

min_rows

integer *0*

The minimum number of required rows.

max_rows

integer

The maximum number of rows allowed. Once reached the Add Row button will disappear.

fields

array

A list of fields, each of which create their own column.

mode

string *table*

The Grid is displayed as a table by default. If you have a large number of columns it can get pretty crowded. Choose stacked mode to group rows similar to Replicator. When Sneak Peek is enabled, Grids automatically toggle into stacked mode.

add_row

string

The Add Row button's label.

reorderable

string

Enable row reordering. Default: true.