Creating a dynamic table on the basis of values i put in a child table

Question

I am working on frappe framework. I have created a child table By the name of size and added one field inside that table by the name of size.

As I am adding values inside the size table

What I want to do? After adding the values inside this table. The new table should be created by the column name as the values I put in Size table

Table should be created like this

I did try with front-end code. I created a Html field and applied js code and the table is created just like i wanted. But the data inside this table is not saving.

`

frappe.ui.form.on('Order Sheet', {
    refresh: function(frm) {
        var htmlField = frm.fields_dict['size_chart'];

        // Clear existing HTML content in the size_chart field
        htmlField.$wrapper.empty();

        // Fixed columns
        var fixedColumns = [
            'PO NO',
            'Store',
            'Col. Cd',
            'Col. Name',
            'Qty',
            'Delivery Date',
            'Intercomes',
            'Forex Rate'
        ];

        // Get the values entered in the "Size" child table
        var sizeValues = frm.doc.size.map(row => row.size).filter(Boolean);

        // Merge fixed columns with dynamic columns
        var allColumns = fixedColumns.concat(sizeValues);

        // Insert 'Qty' column after 'Col. Name'
        var qtyIndex = fixedColumns.indexOf('Col. Name') + 1;
        fixedColumns.splice(qtyIndex, 0, 'Qty');

        // Create the dynamic HTML table with all columns
        if (allColumns.length > 0) {
            var htmlTable = document.createElement('table');
            htmlTable.setAttribute('border', '1');
            htmlTable.style.width = '100%'; // Set table width to 100% to prevent overflow

            // Create the table header (thead) with all columns
            var thead = document.createElement('thead');
            var headerRow = document.createElement('tr');
            allColumns.forEach(function(columnName) {
                var headerCell = document.createElement('th');
                headerCell.textContent = columnName;
                headerRow.appendChild(headerCell);
            });
            thead.appendChild(headerRow);
            htmlTable.appendChild(thead);

            // Create the table body (tbody) with editable input fields
            var tbody = document.createElement('tbody');
            // Initial rows
            var initialRows = 3;
            addRows(tbody, initialRows, allColumns);
            htmlTable.appendChild(tbody);

            // Apply CSS styles for the table container
            var tableContainer = document.createElement('div');
            tableContainer.style.overflow = 'auto'; // Add scroll bar when necessary
            tableContainer.style.maxHeight = '300px'; // Adjust the height as needed
            tableContainer.appendChild(htmlTable);

            // Append the dynamically generated HTML table to the size_chart field
            htmlField.$wrapper.append(tableContainer);

            // Pass the dynamic column names to the updateFormData function
            var columns = allColumns.filter(col => !fixedColumns.includes(col)); // Exclude fixed columns
            frm.custom_columns = columns;

            // Add button to add rows dynamically
            var addButton = document.createElement('button');
            addButton.textContent = 'Add Row';
            addButton.addEventListener('click', function() {
                addRows(tbody, 1, allColumns);
            });
            htmlField.$wrapper.append(addButton);
        }
    }
});

// Function to update form data when input changes
function updateFormData(frm, inputElement) {
    var rowNumber = parseInt(inputElement.getAttribute('data-row'));
    var colName = inputElement.getAttribute('data-size');
    frm.doc.table_data = frm.doc.table_data || [];
    frm.doc.table_data[rowNumber] = frm.doc.table_data[rowNumber] || {};
    frm.doc.table_data[rowNumber][colName] = inputElement.value;
    frm.refresh_field('table_data'); // Refresh the field to reflect changes
}

// Function to add rows to the table dynamically
function addRows(tbody, count, columns) {
    for (var i = 0; i < count; i++) {
        var row = document.createElement('tr');
        columns.forEach(function(columnName) {
            var cell = document.createElement('td');
            var input = document.createElement('input');
            input.setAttribute('type', 'text');
            input.setAttribute('data-row', tbody.childElementCount); // Add a data attribute to identify the row
            input.setAttribute('data-column', columnName); // Add a data attribute to identify the column
            input.addEventListener('change', function() {
                // Update form data when input changes
                updateFormData(cur_frm, this);
            });
            cell.appendChild(input);
            row.appendChild(cell);
        });
        tbody.appendChild(row);
    }
}
`

But as this table is not a part of my database, I am not able save this. How can I save this data inside the database? What is the correct way of doing this?