JSFiddle - React, Tailwind, and code Playground

HTML

<div class=container>
    <input type=text placeholder="id" data-text-field="id" /> </br>
    <input type=text placeholder="firstname" data-text-field="first_name" /> </br>
    <input type=text placeholder="lastname" data-text-field="last_name" /> </br>
    <input type=text placeholder="birthday" data-text-field="date_of_birth" /> </br>
    <input type=text placeholder="gender" data-text-field="gender" /> </br>
    <button data-bind="click: save">sync</button>
</div>

JavaScript

var viewModel = kendo.observable({
 dataSource: new kendo.data.DataSource({
 transport: {
  read:{ url: "http://127.0.0.1:8000/api/v1/person/", type: "GET" , dataType:"json"},
create:{ url: "http://127.0.0.1:8000/api/v1/person/", contentType: "application.json; charset=utf-8"},
     parameterMap: function(data, operation) {
         if(operation !=="read") {
             return kendo.stringify(data);   
         }
       }         
     },
     serverSorting: true,
     batch: false,
     schema: {
         data:"objects",
         model: {
             id: "id",
             fields: {
                     id: { editable: false, nullable: true},
                     last_name: { editable: true },    
                     first_name: {editable: true},
                     date_of_birth: {editable: true},
                     gender: {editable: true}             
       }
      } 
     }         
  }),
    hasChanges: false,
    save: function() {
       this.dataSource.sync()  
    },
    change: function() {
       this.set("hasChanges" , true );         
   }
});