Grid - HTML UI Elements for Mobile & Web Applications | www.HtmlElements.com

Grid Rows and Columns

Smart.Grid offers a variety of ways to configure and modify the appearance and behavior of Grid Rows and Columns.

Rows and columns are represented as objects in the memory. Many methods and properties are available to be set directly to the row/column object.

Row objects are indexed members of the rows property, used to describe all rows displayed in the Grid.

More information: property rows in the Grid API documentation.

Column objects are indexed members of the columns property, used to describe all columns displayed in the Grid.

More information: property columns in the Grid API documentation.

Major features that are available:

Column Formatting

Applying format to a column allows cells to be formatted according to their data type and a pre-defined format.

Formatting is applied by setting the column object's cellsFormat property to a format string. This is applicable to cells with numbers or dates.

Number Formats

Applicable number formats are applied through the NumberRenderer object. All supported formats are described in the help topic Numeric API.

Date Formats

Applicable date formats are applied through the DateTime object. All supported formats are described in the help topic DateTime API.


An alternative way to format cell data is by applying the column formatSettings object, which has the following properties:

  • Intl - a JavaScript Intl object to format the cell values by; with higher priority than cellsFormat.
  • dateFormat - format to apply to date values (the same as setting cellsFormat).
  • decimalPlaces - decimal places to apply to numeric values.
  • decimalSeparator - decimal separator to use in numeric values.
  • thousandsSeparator - thousands separator to use in numeric values.
  • prefix - a string to add before the cell value.
  • sufix - a string to add after the cell value.
  • negativeWithBrackets - a boolean value determining whether negative numbers are to be displayed with brackets instead of minus.

Column Templates

Applying column templates allows for customization of how data is rendered in cells. Users can fine-tune the result in three different ways, by applying template:

  • formatFunction - a callback function applied to the column's object. A settings object is passed to this function with the following fields:
    • row - the object of the row the cell belongs to.
    • column - the object of the column the cell belongs to.
    • cell - the object of the cell.
    • oldValue - old cell value (if applicable).
    • value - cell value.
    • formattedValue - formatted cell value.
    • template - template to be set/modified by the callback function.
    In it, settings.template has to be set to change the rendering of cells.
  • template applied to the column's object that references an HTML template element on the page. If set to '#id' that corresponds to a template element, the content of the template will be rendered in the cell. In the template, bindings can be used, such as {{id}} or {{value}} which are substituted with the cell's actual id and value.
  • template applied to the column's object that is a string and is applied directly as cell content. In this case, {{id}} and {{value}} bindings can also be applied.

Column templates are useful for showing images or even displaying interactive elements in cells .

Frozen Rows and Columns

Rows and columns can be frozen (pinned) in order to always stay visible even when scrolling.

To freeze a row or column, set the respective object's freeze property to:

  • true or 'near' - pins rows on the top and columns on the left.
  • 'far' - pins rows on the bottom and columns on the right.

Example: Frozen first and last columns:


Example: Frozen first and last rows:

The unique background of frozen rows and columns can be controlled via the properties appearance.showFrozenRowBackground and appearance.showFrozenColumnBackground respectively.

Resizing Rows and Columns

Columns and rows can be resized by dragging the resize handler between the headers of the column/row. The resize behavior is controlled by setting the values of behavior.columnResizeMode and behavior.rowResizeMode with the following possible values:

  • 'none' - resize is disabled.
  • 'split' - grows or shrinks the resize element's size and shrinks or grows the next sibling element's size.
  • 'growAndShrink' - grows or shrinks the resize element's size only.

Resize can be disabled for a particular column/row by setting allowResize to its object to false.