I’m working on a project that requires creating a table view where users can insert items into cells with varying column spans and row spans. This functionality is crucial for a storage management application, where users need to place items within a grid layout.

While the concept seems straightforward, implementing such a feature can be complex. Are there any existing JavaScript libraries or frameworks that provide robust solutions for interactive table views with dynamic item placement? I’m particularly interested in features like drag-and-drop support, dynamic resizing, and flexible item placement.

Basically, the whole point of this is to allow user to add their own layout instead of us programmer need to add them manually cause it would be troublesome if the layout changes everytime. Is there any plugins I could use for my case for web-based system?

Below is the example that I created but it seems lacking a lot which I not sure what do for this. Need the community help on this, thanks.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexible Table</title>
  <style>
    /* Add your custom CSS styles here */
    .table {
      width: 100%;
      border-collapse: collapse;
    }
    .table td, .table th {
      border: 1px solid black;
      font-size: 1;
      padding: 8px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
    }
    .selected {
      background-color: lightblue; /* Add any styling for selected cells */
    }
  </style>
</head>
<body>

  <div>
    <label for="rows">Number of Rows:</label>
    <input type="number" id="rows" value="10">
    <label for="columns">Number of Columns:</label>
    <input type="number" id="columns" value="10">
    <button onclick="generateTable()">Generate Table</button>
    <button onclick="enableInsertMode()">Insert Mode</button>
  </div>

  <div id="tableContainer"></div>
  <div id="clickedCellInfo"></div>

  <script>
    var selectedCells = [];
    var insertMode = false;

    function generateTable() {
      var rows = parseInt(document.getElementById('rows').value);
      var columns = parseInt(document.getElementById('columns').value);
      var tableHTML = '<table class="table" id="myTable">';
      
      // Add header row for columns
      tableHTML += '<tr><th></th>';
      for (var j = 0; j < columns; j++) {
        tableHTML += '<th>Col ' + (j + 1) + '</th>';
      }
      tableHTML += '</tr>';
      
      // Add rows with headers for rows
      for (var i = 0; i < rows; i++) {
        tableHTML += '<tr>';
        tableHTML += '<th>Row ' + (i + 1) + '</th>';
        for (var j = 0; j < columns; j++) {
          tableHTML += '<td onclick="handleCellClick(this, ' + i + ', ' + j + ')"></td>';
        }
        tableHTML += '</tr>';
      }
      tableHTML += '</table>';
      document.getElementById('tableContainer').innerHTML = tableHTML;
      insertMode = false; // Disable insert mode when generating a new table
    }

    function handleCellClick(cell, row, col) {
      if (insertMode && cell.textContent.trim() === '') {
        var label = prompt('Enter label for the cell:');
        if (label !== null && label !== '') {
          var colspan = parseInt(prompt('Enter column span (default: 1):')) || 1;
          var rowspan = parseInt(prompt('Enter row span (default: 1):')) || 1;
          var newCell = '<td colspan="' + colspan + '" rowspan="' + rowspan + '">' + label + '</td>';
          cell.outerHTML = newCell;
          insertMode = false;
        }
      }
    }

    function enableInsertMode() {
      insertMode = true;
      alert('Click on an empty cell to insert content.');
    }

    // Generate initial table on page load
    generateTable();
  </script>

</body>
</html>