Created
July 31, 2021 18:36
-
-
Save mhsattarian/2aadcf648349eed94b8fd2324d77256c to your computer and use it in GitHub Desktop.
Generate an object describing a table row and cells (with `colspan` an `rowspan` support) from a text representing cells like CSS grid areas.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const unitDetailsOrder = [ | |
['postcode', 'postcode', 'postcode', 'postcode', 'postcode'], | |
['locationname', 'locationname', 'avenue', 'avenue', 'avenue'], | |
['buildingname', 'buildingname', 'plate', 'level', 'unit'], | |
]; | |
const unitDetailsOrdered = areaToTableSpec(unitDetailsOrder); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
output would be like this: