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 } ]