wc.widgets.Grid

The Grid widget is used to display product tables in various pages. The Grid widget helps to easily build a responsive table.

Sample Output

Example

<div data-widget-type="wc.Grid" data-widget-options=“{‘columnCountByWidth’: {‘0’:1,’301’:2}}”></div>

Options

columnCount

(Integer) The number of columns in the grid. Default is 1. You do not have to specify columnCount if rowCount or columnCountByWidth is specified.

rowCount

(Integer) The number of rows in the grid. You do not have to specify rowCount if columnCount or columnCountByWidth is specified.

columnCountByWidth

Determines the column count based on the screen width for building a responsive table. For example, if screen width is 1000 pixels and columnCountByWidth is {"300": 2, "500": 3: "800": 4}, the column count is set to 4 since the screen width is greater than 800.

elementSelector

(String) The elements in the grid. Default is "div.grid-element".

useColumnWrapper

(Boolean) Determines whether wrappers are used.

columnWrapperClass

(String) Determines the CSS class to add to the column wrapper div elements. The default value is "grid-column-wrapper".

Related reference
wc.widgets.Carousel
wc.widget.RefreshArea
wc.widget.ScrollablePane
wc.widgets.Select
wc.widgets.ValidationTextbox
wc.widgets.wcTooltip
wc.widgets.WCDialog