DataGrid Component

The PacemDataGridElement is a convenient component for tabled data.
At first, you can build it up via declarative PacemDataColumnComponent children plus a referred datasource, like in the tiny example below.

DataColumn Metadata

The PacemDataGridElement also accepts a referred metadata array of DataColumnMetadata items.
Every DataColumnMetadata item provides a comprehensive set of information and customization for each data column.

Explore the sorting capabilities of the datacolumns and the rescalability of the first two datacolumns in the following example:

[ { "prop": "capitalCity", "headCell": { "name": "Capital City" }, "dataCell": {"selectMode": "row"}, "isSortable": true, "width": 1, "order": 2, "hide": false }, { "prop": "name", "headCell": { "name": "Region" }, "isSortable": true, "isRescalable": true, "minPixelWidth": 80, "width": 2, "order": 1, "dataCell": {"selectMode": "row", "textEllipsis": true, "verticalAlign": "middle" } }, { "prop": "seaCoasts", "headCell": { "name": "Coastal" }, "dataCell": { "horizontalAlign": "center", "cssClass": [ "text-primary" ] }, "dataType": "boolean", "width": "auto", "order": 3 }, { "prop": "istatCode", "headCell": { "name": "Code", "description": "Administrative classification code (known as Codice ISTAT)", "tooltip": "md", "textEllipsis": true, "horizontalAlign": "right" }, "dataType": "number", "dataCell": { "format": { "minimumIntegerDigits": 2 }, "autoTooltip": false, "textEllipsis": true, "selectMode": "row", "verticalAlign": "middle", "horizontalAlign": "right" }, "isSortable": true, "isRescalable": true, "minPixelWidth": 40, "width": "auto", "order": 0 } ]

Custom Events

The PacemDataGridElement fires the following noteworthy custom events:

• databind: occurs when datasource property changes. The detail property of the DataGridBindEvent is of type { keepRowSelection: boolean, datasource: any[] }.
  It might be handy to override the default keepRowSelection behavior (false) and maintain the current selection state, when a datasource change is only a "refresh".

• datarowselectionchange: occurs when the user changes the grid row selection. The detail property of the DataRowSelectChangeEvent is of type { selectedRows: { item: any, index: number }[] }.