Сохранение данных в редактируемой таблице в базу данных

У меня есть веб-приложение, бэкенд использует Django, а фронтенд - HTML5. Restful API (Django rest framework) используется для типов данных GET, PUT, POST и DELETE.

На HTML странице у меня есть редактируемая таблица, которая должна сохранять любое отредактированное содержимое в базу данных.

Как я могу этого добиться?

HTML5 страница:

            <table id="thisTable"  contenteditable='true' class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;"
               id="bk-table"
               data-toggle="table"
               data-toolbar="#toolbar"
               data-cookie="true"
               data-cookie-id-table="materialId"
               data-show-columns="true"
               data-show-refresh="true"
               data-show-fullscreen="true"
               data-show-export="true"
               data-height="650"
                {#                   data-sticky-header="true"#}
                {#                   data-sticky-header-offset-left="7em"#}
                {#                   data-sticky-header-offset-right="7em"#}
               data-click-to-select="true"
               data-id-field="id"
               data-show-footer="true"
               data-url="/api/materials/"
               data-query-params="queryParams"
               data-remember-order="true"
               data-pagination="true"
               data-side-pagination="server"
               data-total-field="count"
               data-data-field="results">
            <thead class="thead-dark" >
            <tr contenteditable='true'>
                <!--th  data-sortable="true" >ID</th-->
                <th data-field="courseCode"  data-formatter="renderCourse">Course Code</th>
                <th data-field="type">Course Type</th>
                <th data-field="school">School</th>
                <th data-field="discipline.name">Discipline</th>
                <th data-field="discipline.hop1">HOP Name</th>
                <th data-field="discipline.hop1_email">HOP Email</th>
                <th data-field="discipline.executive">Executive Name</th>
                <th data-field="discipline.executive_email">Executive Email</th>
            </tr>
            </thead>

        </table>

rest.py:

Когда пользователь делает какую-либо редакцию в редактируемой таблице фронтенда, данные, измененные пользователем, должны автоматически обновляться в базе данных. Как я могу этого добиться?

function callback() {

const table = document.getElementById("bk-table");
// data is mutable object, but you can't do `data =` again
const data = {};
for (const x of table.querySelectorAll("[data-field]")) {

data[x.dataset.field] = x.innerText;

}

// send the API call
fetch(url, etc.)

}

(() => {
const config = { characterData: true };
for (const nodes of document.getElementById("bk-table").querySelectorAll("[data-field]")) {

const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(node, config);

}

})();