Filterable grid

Result: the visitor filters rows without a full reload. Without JavaScript the form stays a normal GET. Requires PageBuilder Pro and capability datasources.

Before you start

1. The resource is published and the template contains [[!PageBuilder]].
2. Capability datasources is on.
3. The provider already returns rows: child resources, a table with table_key, or miniShop3.

Steps

1. Add a filterable_grid section.
2. Pick a datasource: modx-resources, pagebuilder-tables, or minishop3. For a table set the key.
3. Save the resource. On the site the form, sort, and pagination run through pagebuilder-filterable-grid.js. The address updates with history.pushState.
4. Parameters: pb_fg_{id}_search, _sort, _dir, _page, _f_{field}. DatasourceSectionEnricher writes the prefix pb_fg_{id}_ into filter_param_prefix.
5. Columns image and id are left out of filters and sorting. The filter label comes from the column label.

Field type	Operator
text	contains
number, currency	gte
color, colorpalette, yesno, toggle	eq

A page number past the last page is clamped. An empty result uses pagebuilder_fe_filter_empty. The reset button uses pagebuilder_fe_filter_clear.

Example fields

Title Catalog. Datasource pagebuilder-tables, with the same table key as on the Tables tab. Limit 12 (page size).

What to check

With JavaScript the list updates without a full reload, and the query stays in the address. Turn JavaScript off and submit the form: it is a normal GET with the same parameters.

Rollback

Delete the section.

See also

• Filterable grid
• Dynamic list