Eel is a little Python library for making simple Electron-like offline HTML/JS GUI apps, with full access to Python capabilities and libraries.
https://github.com/ChrisKnott/Eel
Install
pip install eel
C:\python_dev\table>pip install eel
Install PyAutoGUI
https://pypi.org/project/PyAutoGUI/
pip install PyAutoGUI
C:\python_dev\table>pip install PyAutoGUI
Create Database sqlite3 using python
createdb.py
#createdb.py
import sqlite3
from sqlite3 import Error
def create_connection(db_file):
""" create a database connection to a SQLite database """
conn = None
try:
conn = sqlite3.connect(db_file)
print(sqlite3.version)
except Error as e:
print(e)
finally:
if conn:
conn.close()
if __name__ == '__main__':
create_connection(r"C:\python_dev\table\views\database\storage.db")
run C:\python_dev\table>python createdb.py
main.py
#main.py
import eel
from views.models.fetchdata import showallrecords
import pyautogui #https://pypi.org/project/PyAutoGUI/
eel.init('views')
@eel.expose
def get_registers():
select_reg = showallrecords()
eel.action_out(select_reg)
eel.start(
'index.html',
size=pyautogui.size()
)
Create Table CREATE TABLE tblemployee (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name VARCHAR (150),
position VARCHAR (150),
office VARCHAR (150)
);
#table\views\models\fetchdata.py
import sqlite3
def showallrecords():
try:
connect = sqlite3.connect("views/database/storage.db")
cursor = connect.cursor()
cursor.execute("SELECT * FROM tblemployee")
registers = []
for item in cursor.fetchall():
#test = item[1]
#print(test)
registers.append(item)
return registers
except Exception as error:
print(error)
msg = "Error"
return msg
Make your Front-end HTML CSS and Javascript table\views\index.html
//table\views\index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/eel.js"></script>
<link rel="stylesheet" href="css/index.css">
<link rel="icon" href="img/myglogo.png">
<title>Python Registration</title>
</head>
<body>
<div class="container">
<p style="text-align:center;"><h2>Python Desktop App Fetch All Records sqlite3 using python eel</h2></p>
<p style="text-align:right;"><button type="button" class="btn">Add New</button></p>
<table id="employeedatatable" class="styled-table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Action</th>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){
eel.get_registers()
})
eel.expose(action_out)
function action_out(registers){
//alert("Show Table");
registers.forEach(showdata)
}
function showdata(item, index){
var get_table = document.getElementById("employeedatatable");
var tr = document.createElement("tr");
var td = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var td5 = document.createElement("td");
td.innerText = item[0]
td2.innerText = item[1]
td3.innerText = item[2]
td4.innerText = item[3]
td5.innerHTML = '<button type="button" class="btn" onclick="buttonedit()">Edit</button> | <button type="button" class="btndelete" onclick="buttondelete()">Delete</button>'
//td5.className = "acoes"
//td5.setAttribute("onclick","actions(this, 'documents');")
get_table.appendChild(tr)
tr.appendChild(td)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(td4)
tr.appendChild(td5)
}
function buttonedit()
{
alert("Edit Records")
}
function buttondelete()
{
if(confirm("Are you sure you want to delete this?")) {
alert("Successfully Deleted");
}else{
return false;
}
}
</script>
</body>
</html>
table\views\css\index.css
//table\views\css\index.css
.container {margin:30px;}
.styled-table {
border-collapse: collapse;width:100%;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.styled-table th,
.styled-table td {
padding: 12px 15px;
}
.styled-table tr {
border-bottom: 1px solid #dddddd;
}
.styled-table tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tr:last-of-type {
border-bottom: 2px solid #009879;
}
.btn {
background-color: #04AA6D!important;
border-radius: 5px;color:#ffffff;
font-size: 17px;
font-family: 'Source Sans Pro', sans-serif;
padding: 6px 18px;
}
.btndelete {
background-color: #cf2e2e!important;
border-radius: 5px;color:#ffffff;
font-size: 17px;
font-family: 'Source Sans Pro', sans-serif;
padding: 6px 18px;
}
Run C:\python_dev\table>python main.py
