Gridview Component - fgta5js Documentation

Overview

Inheritance Notice: Class Gridview inherits all of its core state tracking, events, and rendering configurations from the abstract base class Component.

The Gridview component handles data presentation in rows and columns. It automates standard chores like creating table rows, checking checkboxes, numbering items sequentially, applying formats (like dates or currencies), and rendering "load more" action buttons at the footer of your datasets.

HTML Markup

Define your grid view inside a standard HTML <table> element, and define bindings via attributes on the template row inside the table header.

<table id="mygrid">
  <thead>
    <tr data-header="true" key="id">
      <th rowselector="true"></th>
      <th autonumber="true">No</th>
      <th binding="name" sorting="true">Name</th>
      <th binding="amount" text-align="right">Amount</th>
    </tr>
  </thead>
</table>

Instantiate and bind data in JavaScript:

const grid = new $fgta5.Gridview('mygrid');
grid.addRows([
  { id: '1', name: 'Product A', amount: 15000 },
  { id: '2', name: 'Product B', amount: 24500 }
]);

HTML Attributes

Attribute	Target Element	Description
`key`	`<tr data-header>`	Designates the unique key identifier column name inside row records (e.g., `id`).
`rowselector`	`<th>`	Marks the column to automatically render a row selector checkbox.
`autonumber`	`<th>`	Marks the column to render incremental numbers automatically.
`binding`	`<th>`	Identifies the data field property name (e.g., `name`) bound to this column.
`sorting`	`<th>`	Enables header sorting event triggers for the specific column.
`text-align`	`<th>`	Sets cell text alignment: `left`, `center`, or `right`.

Properties

Property	Type	Description
`Columns`	`Object[]`	List of column configuration metadata definitions parsed from the table headers (Read-only).
`Key`	`String`	The name of the primary key field for dataset rows.
`Criteria`	`Object`	Gets or sets custom search criteria filters for data request operations.
`CurrentRow`	`HTMLTableRowElement`	Gets or sets the currently focused active row in the grid viewport.

Methods

Method	Arguments	Description
`constructor(id)`	`(id: String)`	Binds the gridview controller to an HTML `<table>` element.
`addRow(row)`	`(row: Object)`	Appends a single structured data row to the grid tbody.
`addRows(rows)`	`(rows: Object[])`	Appends a collection of structured row records simultaneously.
`updateRow(tr, data)`	`(tr: HTMLElement, data: Object)`	Updates the content values on an existing table row element.
`removeRow(tr)`	`(tr: HTMLElement)`	Deletes a specific table row element from the grid.
`getSelected()`	`()`	Returns an array of key values from the checked rows.
`clear()`	`()`	Empties all record rows in the table body.
`setNext(nextoffset, limit)`	`(nextoffset: Number, limit: Number)`	Configures lazy loading button states inside the table footer.