convert JS object to HTML table. explanation and example at https://hsing.org/gists/ in a few hours

object-table.js

function objectTable(object) {
    const coerceEntry = v => typeof v === 'undefined' ? '' : String(v)
    const surround = (start, end) => (firstStart, firstEnd) => (v, i = true) => i ? start + v + end : firstStart + v + firstEnd
    
    const dataSurround = surround('<td>','</td>')('<th>','</th>')
    const rowSurround = surround('<tr>','</tr>')('<thead><tr>','</th></thead>')
    const tableSurround = surround('<table>','</table>')()

    const rows = Object.keys(object).sort()
    const columns = [...new Set(rows.map(v => Object.keys(object[v])).flat())].sort()

    const innerData = rows.map(v => columns.map(w => object[v][w]))
    const innerTable = [[undefined, ...columns], ...innerData.map((v, i) => [rows[i], ...v])]
        .map((v, i) => v.map(coerceEntry).map((v, j) => dataSurround(v, i * j)).join(''))
        .map(rowSurround).join('')
    return tableSurround(innerTable)
}

function sinkShallowValues(src) {
    
    // does not work with BigInt
    // const obj = JSON.parse(JSON.stringify(src)) 
    
    // does not work with functions or Symbols
    // const obj = structuredClone(src) 
    
    // this will mutate src, be careful
    const obj = src

    Object.keys(obj).forEach(key => {
        if (typeof obj[key] !== 'object') {
            const temp = obj[key]
            obj[key] = {}
            // can also use ~value because it is near the end of ascii
            obj[key]['_value'] = temp
        }
    })

    return obj
}

const testObj = {
    'row1' : {
        'column1': 'cell1',
        'column2': 35.7,
        12: 'cell3',
        12.125: 'cell4',
        'column 5': false,
    },

    'row2' : {
        'column1': null,
        'column2': [1, 2, undefined],
        12: undefined,
        12.125: '',
        'column 5': true,
    },

    3 : {
        'column1': false,
        'column2': 35.7,
        12: Symbol(),
        12.125: {a: 'b', c: 'd'},
        'column 5': Number.NaN,
        'extra column': 'test',
    },

    3.5 : {
        'column1': x => x + 5,
        'column2': 2n,
        12: Function.prototype,
        12.125: {a: 'b', c: 'd'},
        'column 5': Number.NaN,
    },

    'value': 123,
    'value 2': Number.NaN,
    // 'unfriendly value': null,
    // 'unfriendly value 2': undefined,
}

document.getElementById('test1').innerHTML = objectTable(testObj)
document.getElementById('test2').innerHTML = objectTable(sinkShallowValues(testObj))