Search code examples
javascripthtmlcss

Creating a control like Microsoft Office Word's table generator in HTML

enter image description here

Is it possible to create a control like this using HTML5 or Javascript? I found the following link where they create something like a graph using just CSS.

$trans: transparent;
$block: #00004f;
$line: #19465b;
$gridSize: 60px;
$subdivisions: 1;
$lineAlpha: .1;
$sublineAlpha: 1;
$gridHeight : 120px;

body {
  background-color: $block;
  background-image:
    linear-gradient(rgba($line,$sublineAlpha) 1px, $trans 1px), /*sub horiz*/
    linear-gradient($line 1px, $trans 1px), /*main horiz*/
    linear-gradient(90deg, rgba($line,$sublineAlpha) 1px, $trans 1px), /*sub vert*/
    linear-gradient(90deg, rgba($line,$lineAlpha) 1px, $trans 1px), /*main vert*/
    linear-gradient($trans 3px, $block 3px, $block $gridSize - 2, $trans $gridSize - 2), /*nub horiz*/
    linear-gradient(90deg, rgba($line,$lineAlpha) 3px, $trans 3px, $trans $gridHeight - 2, rgba($line,$lineAlpha) $gridSize - 2) /*nub vert*/
    ;
  background-size:    
    $gridHeight / $subdivisions $gridSize / $subdivisions;        
}

I'm quite new to JavaScript development. Is there any third party libraries that are available that will do this for me?

Solution

  • Here is a little implementation you could use:

    // Promisify addEventListener:
const whenEvent = (elem, eventName) => new Promise(resolve =>
    elem.addEventListener(eventName, resolve, { once: true })
);

// Demo feature: use the table picker upon click and display picked sizes
document.body.addEventListener("click", async (e) => {
    const [colCount, rowCount] = await tablePicker(e.clientX, e.clientY);
    console.log(JSON.stringify({colCount, rowCount}));
});

function getRowCol(td) {
    td = td.closest("TD,TABLE");
    return td?.tagName === "TD" ? [td.cellIndex + 1, td.parentNode.rowIndex + 1] : [0, 0];
}

// Create popup table and respond to hovering and selection
async function tablePicker(x, y) {
    document.querySelector("#tblpck")?.remove();
    const popup = document.createElement("div");
    popup.setAttribute("id", "tblpck");
    popup.innerHTML = `<style>
        #tblpck>div{background:#ccc;font-family:Verdana;text-align:right}
        #tblpck table{background:#f8f8f8;border-collapse:collapse;}
        #tblpck td div{border:1px solid #888;width:16px;height:16px;margin:0.5px;box-sizing:border-box;}
        #tblpck .tblpckhighlight{border:2px solid orange;}
        #tblpck {position:absolute;border:1px solid #ccc;left:${x}px;top:${y}px;}
    <\/style><div>0x0 Table<\/div>
    <table>${`<tr>${`<td><div></div><\/td>`.repeat(10)}<\/tr>`.repeat(10)}<\/table>`;
    document.body.appendChild(popup);
    const [, message, table] = popup.children;
    const squares = table.querySelectorAll("div");

    popup.addEventListener("mouseover", e => {
        const [col, row] = getRowCol(e.target);
        squares.forEach(({classList: c}, i) => c.toggle("tblpckhighlight", i<row*10 && i%10<col));
        message.textContent = `${col}x${row} Table`;
        return false;
    });
    const sizes = getRowCol((await whenEvent(popup, "mousedown")).target);
    popup.remove();
    return sizes;
}
    body { height: 100vh; margin: 0 }
    Click to get popup at cursor position...