# Grid View ## Overview The Grid View component is used to display a collection of items. By default, it contains an image field and a caption which can be replaced with the required components.\ If you need to create a custom layout, you can add the necessary components to the first list item. The added components are replicated for the other grid view items.

### Properties

Name	Type	Description
`name`	`string`	Component name
`pageSize`	`number`	Number of items displayed per page
`pageCount`	`number`	Total number of pages
`activePageIndex`	`number`	Current active page index
`paginationOffset`	`number`	Offset used for pagination
`afterCursor`	`string`	Cursor for paginated data fetching
`value`	`value[]`	Current component value
`valid`	`boolean`	Indicates if the component is valid
`children`	`GridViewItemApi[]`	Child grid items inside the grid view

### Methods

Name	Parameters	Returns	Description
`setPage`	`index: number`	`void`	Navigate to a specific page within the grid view
`setPageSize`	`size: number`	`void`	Sets the number of items displayed per page in the grid view
`setValue`	`data: object`	`void`	Set component data. Data is an `object[]` with arbitrary structure
`resetValue`	–	`void`	Reset component to the initial value
`validate`	–	`void`	Trigger form validation
`resetValidation`	–	`void`	Clear validation errors

### Triggers

Name	Description
On Init	Triggered when the component is initialized
On Page Change	Triggered when the grid page changes
On Items Per Page Change	Triggered when the grid page item changes

## Working with the component Gird View supports both static and dynamic data. To display data dynamically from your action, select the action you need in the *Data* property dropdown of the component.

### Accessing Grid items You can access any grid item by referencing it as `{{item}}`, for example, `{{item.first_name}}`. To reference the index of the item, you can use the `{{index}}` variable.

### Keeping Grid items in sync If you need to display Checkbox or Input components, for example, and monitor their values corresponding to the Grid items, you can configure it in UI Bakery. Check out the flow below:point\_down: 1. Start by creating a state variable (App scope) that will contain the list of items to be displayed in the Grid View - select the *Array* type. {% hint style="success" %} Refer to [this article](https://docs.uibakery.io/concepts/app-state-variables#creating-a-state-variable) if you need a reminder of how to create state variables. {% endhint %}

2. Next, create a new action of the *JavaScript Code* type to load the data into the variable: ```javascript const list = [ { id: 1, name: 'USA', selected: false, }, { id: 2, name: 'Canada', selected: false, }, { id: 3, name: 'France', selected: false, }, ]; {{state.setValue('list', list)}} ``` {% hint style="info" %} Each item must have a unique id for later identification purposes. Also, note that each item includes the `selected` attribute - it indicates whether the checkbox has been selected or not. {% endhint %} 3. Now, connect the variable to the Grid view component and the inner Checkbox component inside the Grid: 1. **Grid View** - assign the state variable to the component's *Data* property.\ ![](https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FFOH9GUUUVNEAYX8CAbbT%2FCleanShot%202025-08-01%20at%2016.41.01%402x-min.png?alt=media\&token=38e30da1-40d2-4e34-a2e6-8dfa404c9b9e) 2. **Checkbox** - set the item name in the component's *Label* field and the `selected` property in the *Value* field.\ Now, if we change the **list** variable values and set some items to be selected, the changes will be reflected on the UI.\ ![](https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FzbqZEFljBgooqZqJ1Hy2%2FCleanShot%202025-08-01%20at%2016.43.24%402x-min.png?alt=media\&token=8caa7567-a8ac-4938-aac9-6ab2df89827e) 4. Finally, create another action of the *JavaScript Code* type to track checkbox value changes and update the `selected` value inside the **list** variable: ```javascript const updatedList = {{state.list}}.map((item) => { if (item.id === {{params.id}}) { // reverse value return { ...item, selected: !item.selected, }; } // unchanged return item; }); {{state.setValue('list', updatedList)}}; ``` 5. Now, assign this action to the Checkbox's *On Change* trigger and add the id of the current grid item to the *Action Arguments* field - `{ id: {{item.id}} }`.\ This will indicate which checkbox has changed its value.

That's it! This way, you will keep your Grid checkbox items in sync with the data model and you can use this data to send all updated values to the server. ### Server-side pagination If you have a large dataset, you may find it useful to use server-side pagination. You will find details on how to set it up in the article below:point\_down: {% content-ref url="../../concepts/components/work-with-components/table-server-side-pagination" %} [table-server-side-pagination](https://docs.uibakery.io/concepts/components/work-with-components/table-server-side-pagination) {% endcontent-ref %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.uibakery.io/reference/working-with-components/grid-view.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.