In this tutorial we are creating spreadsheet website like Google Sheets and save data into database .We are using syncfusion spreadsheet library which is really cool , simple & free , they also have paid plans with more features .

First create django project & app.

Open models.py file

Create Sheet model to save spreadsheet data

from django.db import models

class Sheet(models.Model):
name = models.CharField(max_length=200)
data = models.TextField(blank=True,null=True)


def __str__(self):
return self.name

Now Run migrations & Create Super User
Run these commands to make migrations & create superuser
1. python manage.py makemigrations
2. python manage.py migrate
3. python manage.py createsuperuser

Now lets create our homepage , here we can create & open our sheets .

Open (App) views.py file and create homepage view .
Import Sheet Model & Json

from django.shortcuts import render
from .models import Sheet
import json

def homepage(request):

if request.method == 'POST':
name = request.POST.get('name')
Sheet.objects.create(name=name).save()

data = dict()
sheets = Sheet.objects.all()
data['sheets'] = sheets
return render(request,'homepage.html',data)

Now lets create our template for homepage

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SpreadSheet</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center" style="background-color: white">
<h1>Create Sheet </h1>
</div>
<div class="container">

<div class="row">

<div class="col-sm-6">
<form method="post">{% csrf_token %}
<div class="form-group">
<label for="username_email">Enter the name of sheet</label>
<input required type="text" name="name" class="form-control" id="username_email">
</div>
<button type="submit" class="btn btn-primary">Create Sheet</button>

</form>

</div>
<div class="col-sm-6">
{% if sheets %}
{% for sheet in sheets %}
<p><a href="{% url 'sheet' sheet.id %}">{{ sheet.name }}</a> </p>
{% endfor %}
{% else %}
<p> No Sheet Available</p>
{% endif %}
</div>

</div>

</div>
</body>
</html>

Now Lets Create our Second page where we can view/edit/update our spreadsheet.

View

def sheet(request,id):
if request.method == 'POST':
sheet_data = json.loads(request.body)
Sheet.objects.filter(id=id).update(data=json.dumps(sheet_data))
data = Sheet.objects.get(id=id)
return render(request,'main.html',{'data':data})

Template

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SpreadSheet</title>

<!-- Essential Studio for JavaScript theme reference -->
<link rel="stylesheet" href="http://cdn.syncfusion.com/17.1.0.38/js/web/flat-azure/ej.web.all.min.css" />
<!-- jquery script -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<!-- jsrender script -->
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<!-- Essential JS UI widget -->
<script src="http://cdn.syncfusion.com/17.1.0.38/js/web/ej.web.all.min.js"></script>
<!--Add custom scripts here -->

</head>
<body>
<style>
.save-button {
margin-top: 10px;
font-size: 17px;
background-color: #0b93ff;
color: white;
width: 123px;
height: 38px;
}
</style>

<div id="Spreadsheet"></div>


<script type="text/javascript">
$(function () {
$("#Spreadsheet").ejSpreadsheet({
});
var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
excelObj.loadFromJSON({{ data.data | safe}});
});



function SaveAsJSON() {
var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
window.excelData = excelObj.saveAsJSON();
$.ajax({
type: 'post',
url: '',
data:JSON.stringify(window.excelData),
dataType: 'json',
contentType: 'application/json',
success: function (data) {
}
})

}
</script>

<div align="center">

<input type="button" class="save-button" value="Save" onclick="SaveAsJSON()" />
</div>
</body>
</html>

Now Update your app urls.py with this

from django.urls import path
from . import views
urlpatterns = [
path('',views.homepage,name='homepage'),
path('sheet/<id>',views.sheet,name='sheet')
]

Result

Demo Url https://spreadsheetsyncfusion.herokuapp.com