Generate an object describing a table row and cells (with `colspan` an `rowspan` support) from a text representing cells like CSS grid areas.

areaToTableSpec.ts

interface ITableCellSpec {
  id: string;
  rows: number;
  columns: number;
  origin: { rowIndex: number; cellIndex: number };
}

const areaToTableSpec = (arr: string[][]) => {
  const output: ITableCellSpec[][] = [];

  arr.forEach((row, rowIndex) => {
    output[rowIndex] = [];

    return row.forEach((cell, cellIndex) => {
      const d = output.flat().find((i: ITableCellSpec) => i.id === cell);
      if (!d) {
        output[rowIndex].push({
          id: cell,
          columns: 1,
          rows: 1,
          origin: { rowIndex, cellIndex },
        });
      } else {
        if (rowIndex + 1 - d.origin.rowIndex > d.rows) d.rows++;
        if (cellIndex + 1 - d.origin.cellIndex > d.columns) d.columns++;
      }
    });
  });

  return output;
}

usage-example.ts

const unitDetailsOrder = [
  ['postcode', 'postcode', 'postcode', 'postcode', 'postcode'],
  ['locationname', 'locationname', 'avenue', 'avenue', 'avenue'],
  ['buildingname', 'buildingname', 'plate', 'level', 'unit'],
];

const unitDetailsOrdered = areaToTableSpec(unitDetailsOrder);

output would be like this:

[
    [
        {
            "id": "postcode",
            "columns": 5,
            "rows": 1,
            "origin": {
                "rowIndex": 0,
                "cellIndex": 0
            }
        }
    ],
    [
        {
            "id": "locationname",
            "columns": 2,
            "rows": 1,
            "origin": {
                "rowIndex": 1,
                "cellIndex": 0
            }
        },
        {
            "id": "avenue",
            "columns": 3,
            "rows": 1,
            "origin": {
                "rowIndex": 1,
                "cellIndex": 2
            }
        }
    ],
    [
        {
            "id": "buildingname",
            "columns": 2,
            "rows": 1,
            "origin": {
                "rowIndex": 2,
                "cellIndex": 0
            }
        },
        {
            "id": "plate",
            "columns": 1,
            "rows": 1,
            "origin": {
                "rowIndex": 2,
                "cellIndex": 2
            }
        },
        {
            "id": "level",
            "columns": 1,
            "rows": 1,
            "origin": {
                "rowIndex": 2,
                "cellIndex": 3
            }
        },
        {
            "id": "unit",
            "columns": 1,
            "rows": 1,
            "origin": {
                "rowIndex": 2,
                "cellIndex": 4
            }
        }
    ]
]