Listing Grid

An advanced data iteration widget with built-in layout options and pagination. The Listing Grid is the go-to widget for displaying searchable, paginated data sets.

Properties

Property	Type	Default	Description
limit	number	12	Number of items per page.
layout	select	'grid'	Layout mode: grid, list, or table.
columns	number	3	Number of grid columns (applies to grid layout only).
paginationType	select	'numbered'	Pagination style: numbered (page numbers), load-more (button to load next batch), or none (no pagination).
noResultsMessage	text	'No results found.'	Message shown when the data source returns zero rows.
tableColumns	text	''	Column definitions for table layout. Format: field_name:Label, field_name:Label, ...

Events

• onClick -- Fires when an item is clicked. The clicked row's data is available in the action context.

Container

This widget is a container for grid and list layouts. Drag child widgets inside to define the item template. For table layout, columns are defined via the tableColumns property instead.

Example

Grid layout

A product catalog with 3-column grid and pagination:

limit: 12
layout: grid
columns: 3
paginationType: numbered
noResultsMessage: No products found.

Inside the Listing Grid, add:

• Image -- src: { {row.image_url}}
• Heading -- content: { {row.name}}, level: 3
• Text -- content: ${ {row.price}}

Table layout

A data table with column headers:

limit: 25
layout: table
paginationType: numbered
tableColumns: name:Name, email:Email, status:Status, created_at:Joined

The table layout renders a <table> element with headers and rows automatically. No child widgets are needed.

List layout

A vertical list:

limit: 10
layout: list
paginationType: load-more

Add child widgets just like the grid layout. Each item renders as a full-width row.

Automatic Context Forwarding

For grid and list layouts, the Listing Grid automatically forwards the current row's data as context to any backend event inside each item. This works the same way as the Repeater's automatic context forwarding:

• Each <div class="nxs-listing-item"> wrapper carries a data-nxs-context attribute with the serialized row JSON.
• Backend actions triggered by widgets inside a listing item automatically receive the row data -- no manual "Get Context -> Set Context" pipeline needed.
• This applies to grid and list layouts only. For table layout, use the row click event which already provides row context.

Tips

• Pair with filter form widgets (e.g., Text Input, Select) as siblings in the same container to create a searchable, filterable data view.
• The table layout is the fastest way to show structured data -- just define tableColumns and the widget generates headers and rows from your data.
• Use load-more pagination for infinite-scroll-style interfaces.
• The noResultsMessage appears when filters produce zero matches -- customize it for your use case.
• For grid layouts, adjust columns per breakpoint using responsive styles (e.g., 3 columns on desktop, 1 on mobile).