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