Develop a customizable table with spreadsheet functionalities on a Django website

I'm currently working on a project for a planning site that features a spreadsheet-style table with each day as a row and every school subject as a column. The rows represent all the days in a year, while the columns represent different school subjects.

https://i.sstatic.net/j2rCc.png

The cells in the table should be editable and customizable, allowing users to add, remove, and highlight homework tasks just like in Google Spreadsheets. It's essential that users can edit a cell instantly upon clicking on it.

It's important that these edits are saved to a database so other users can view them. I'm wondering how I can save all changes made on editing to the database?

Is there a way to implement this spreadsheet functionality into a Django website?

I've tried using HTML tables with contenteditable and considered using input forms. Does anyone have an example or could provide guidance on how to achieve this?

htmlcssdjango

Answer №1

An efficient and commonly used method for developing applications involves dividing the app into frontend and backend components. Utilizing Django for the backend and a JavaScript framework such as React or Vue.js for the frontend is a standard approach. Integrate Django-rest-framework API for seamless communication between the two parts, with numerous examples available to guide you.

However, I recently stumbled upon an intriguing repository called django-funky-sheets, which presents a unique way of incorporating the JavaScript library Handsontable with Django. While it may not be the most efficient solution, it could be suitable for smaller projects. Although the repo is no longer actively maintained, you have the option to fork it and contribute through pull requests.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to utilize relative path in CSS

I currently have a CSS file located at /opt/ion/node/service/public. The file, cc.css, needs to be relocated to /opt/ion/node/service/views/pages. However, I am facing issues with this relocation process. Whenever I hit the server, it continues to point t ...

htmlcsspath

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the ...

javascriptcssvue.jsfrontendvuetify.js

What are the steps to integrate AWS Dynamo Db with Django?

In the process of developing web applications, APIs, and backends with the Django MVC framework, one key feature that stands out is its impressive ORM for models. Integrating an ORM like those in Django can greatly enhance productivity. Normally, Django pr ...

pythondjangoormnosqlamazon-dynamodb

PHPUnit ensuring consistent HTML structure regardless of spacing differences

I have a script that generates HTML through the command line and I want to write unit tests for it using PHPUnit. It's important to note that this HTML is not intended for display in a browser, so Selenium isn't the right tool for testing it. My ...

phphtmlunit-testingphpunit

How can I achieve a jQuery fade effect when hovering over an element?

I am looking for guidance on how to hide the <img /> tags within this particular structure and then fade them in upon mouseover using jQuery/css. The concept is to have the HTML <img> element hidden initially, only to smoothly fade in when hov ...

jqueryhtmlcssfadein

Navigating through IE z-index complications to position a modal *above* a YUI Panel

Within my web application, I have implemented an informational pop-up modal using a <div> element with the CSS attribute "display" set to "none". To display this modal when needed, a JavaScript code snippet is used to toggle the display attribute. W ...

javascripthtmlcssinternet-exploreryui

Designing a drop-down menu that appears visually above its parent

As I design a menu positioned at the bottom using position:absolute; bottom:0, I want the submenu items to align perfectly above their parent. Each li should appear above the ul itself. The trick to achieving this is by applying a negative margin. However ...

htmlcssdrop-down-menunegative-number

Choosing between radio buttons either horizontally or vertically within a table

Here is the markup I am working with: <table> <tr> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></ ...

javascripthtmlcssradio-button

Duplicate the functionality of Django Admin's "add" button

Consider a scenario where there are two models, each with their own unique form for creating model records. For instance: Business_Client Model: busName field - CharField mainContact field - ForeignKey(Contacts) Contacts Model: firstName field ...

djangodjango-admin

Identifying and handling overlay blockers using Selenium technology

Currently, I am conducting tests on a website that utilizes in-browser pop-ups to display details about objects. These pop-ups are occasionally modal, meaning they render the rest of the screen unusable and activate a gray transparent overlay that covers e ...

cssselenium

Struggling to locate or create a commenting system akin to the one found on Djangobook

I am intrigued by the idea of open-sourcing my notes, much like how it is done on DjangoBook. After searching, I have not come across any other open-source platforms that offer a similar system to this website. The vertical commenting system specifically c ...

djangocomments

When the forward button is pressed multiple times in the carousel, the alignment changes

I recently noticed that the alignment of my carousel gets disturbed when I repeatedly click the forward button (>). How can I ensure that the carousel moves smoothly one item at a time when I click the forward or backward buttons? <div class="contai ...

javascriptcsstwitter-bootstrapbootstrap-4

The spacebar is not functioning properly within a `button` element while using HTML5 `contenteditable`. What steps can I take to fix this issue and get it working correctly?

When using the HTML5 contenteditable attribute, I've noticed that the spacebar does not work in the button element, but it works perfectly fine in the div element. Does anyone have a solution to get it working properly? You can see the issue here: ht ...

javascriptjquerycsshtml

What is the best way to create a new column that wraps content from existing columns?

While working on some homework, I encountered an issue with flex-wrap. I have columns that I want to wrap into at least two columns, but instead, they are overflowing my container. Note: I am aware that this can be achieved with grid as well, but I wanted ...

htmlcssflexbox

Problem with Layering in Javascript Canvas Game using Kinetic JS

Currently, I am attempting to replicate the game found at and delving into html5 canvas and kineticJS for my study. Here is the link to my fiddle: http://jsfiddle.net/2WRwY/7/ The issues I am facing are as follows: The tail part of the player in the f ...

javascriptjqueryhtmlhtml5-canvaskineticjs

Issues arising from code that computes percentages

I currently have three boxes in my HTML template that are meant to calculate and display various values. The first box is calculating a score, the second box represents the total amount of points possible, and the third box is supposed to show the percenta ...

javascripthtml

Enable scrolling feature for the table

I have integrated a bootstrap table into my React application, but I am facing an issue where the table is not scrollable. Whenever new content is loaded, it increases the height of the table instead of making it scrollable. Below is the code for my table ...

javascriptcssreactjsmaterial-uistylus

Tips for setting a date format to dd-mm-yyyy in Internet Explorer to match the one displayed in Google Chrome

Since type=date does not work in IE, is there a way to achieve the dd-mm-yyyy format like in other browsers? Any suggestions would be greatly appreciated. Thanks! ...

javascripthtmldateinternet-explorerbrowser

Trouble with Django Project on Cloud Foundry: Admin Interface CSS Not Loading

My Django project, which is deployed with Cloud Foundry, has an issue with the admin interface. While it appears fine when running locally, once deployed the CSS is broken and the URLs for the assets return 404 errors. I've tried using the collectsta ...

djangodjango-admincloud-foundrydjango-static

How to use Django to group by multiple columns and retrieve the count of distinct combinations

Within my model, I have a total of 10 fields. However, I am looking to group records based on the following four fields: department city state zip After grouping by these fields, I aim to calculate the count of records that share the same combination of ...

django