Wednesday, 20 October 2021

In angular mat-table insert data based on rowIndex and columnIndex

I'm trying to create a table with response as below having number of rows & number of columns.

In this table I have an array of objects with a row index number and column index number which I'm trying to display accordingly into the Angular Material Table component

{
 "Table": [
    {
      "NumCols": 4,
      "NumRows": 10,
      "TableData": [
        {
          "Id": "1",
          "ColumnIndex": 1,
          "ColumnSpan": 0,
          "RowIndex": 2,
          "RowSpan": 0,
          "Cell": "Data 1"
        },
        {
          "Id": "2",
          "ColumnIndex": 2,
          "ColumnSpan": 0,
          "RowIndex": 1,
          "RowSpan": 0,
          "Cell": "Data 2"
        },
        {
          "Id": "3",
          "ColumnIndex": 3,
          "ColumnSpan": 0,
          "RowIndex": 5,
          "RowSpan": 0,
          "Cell": "Data 3"
        },
        {
          "Id": "4",
          "ColumnIndex": 4,
          "ColumnSpan": 0,
          "RowIndex": 3,
          "RowSpan": 0,
          "Cell": "Data 4"
        },
        {
          "Id": "5",
          "ColumnIndex": 1,
          "ColumnSpan": 0,
          "RowIndex": 4,
          "RowSpan": 0,
          "Cell": "Data 5"
        },
        {
          "Id": "6",
          "ColumnIndex": 2,
          "ColumnSpan": 0,
          "RowIndex": 6,
          "RowSpan": 0,
          "Cell": "Data 6"
        },
        {
          "Id": "7",
          "ColumnIndex": 3,
          "ColumnSpan": 0,
          "RowIndex": 7,
          "RowSpan": 0,
          "Cell": "Data 7"
        },
        {
          "Id": "8",
          "ColumnIndex": 2,
          "ColumnSpan": 0,
          "RowIndex": 8,
          "RowSpan": 0,
          "Cell": "Data 8"
        },
        {
          "Id": "9",
          "ColumnIndex": 3,
          "ColumnSpan": 0,
          "RowIndex": 9,
          "RowSpan": 0,
          "Cell": "Data 9"
        },
        {
          "Id": "10",
          "ColumnIndex": 4,
          "ColumnSpan": 0,
          "RowIndex": 10,
          "RowSpan": 0,
          "Cell": "Data 10"
        }
      ]
    }
  ]
}

Similar to this without any headers(Column1 etc...) enter image description here



from In angular mat-table insert data based on rowIndex and columnIndex

No comments:

Post a Comment