Timesheet
Work-hour tracking interface on a JavaScript spreadsheet. It allows editable rows for employee time logs, totals, and date ranges—suitable for HR tools, attendance tracking, or payroll exports.
<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzFkMGE3MmQ5ZmNlY2NmMWYxNmU4MzA4Y2VkYjdlMWFlZTk5YzY2NDY1MDBjMWUyMjY5OGJlMzFkZTg3NThiYWEyYmVjMWJmNzQ4MGFlMTMyZmFkMDBkMDZmMGE5ZDVlYWNjZDVmYjRlYTI4NjQxYWExY2VlNzEwOTI4YTI5MjcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5URXlNRE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
"guid": "0fc12e95-e5ac-4c8c-9823-2c0630e6b70c",
"tabs": true,
"worksheets": [
{
"minDimensions": [20, 100],
"tableOverflow": true,
"tableWidth": 1300,
"tableHeight": 620,
"resize": "both",
"worksheetName": "Sheet1",
"defaultColWidth": 50,
"columns": [
{ "width": 104, "type": "text" },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "type": "text", "width": 104 },
{ "width": 104, "type": "text" },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 },
{ "type": "text", "width": 50 }
],
"data": [
["Timesheets"],
["Company Name", "", ""],
["", "", ""],
["https://company.com", "", null, null, "Employee Name:"],
null,
["", "", null, null, "Supervisor Name:"],
null,
[null, "", "", null, "Week:", "27/07/2024"],
null,
null,
[
"Day of the week",
"Normal",
"Overtime",
"Sick",
"Vacation",
"Holiday",
"Unpaid",
"Other",
"Total"
],
["=F8", null, null, null, null, null, null, null, "=SUM(B12:H12)"],
[
"=A12+1",
null,
null,
null,
null,
null,
null,
null,
"=SUM(B13:H13)",
null,
""
],
["=A13+1", null, null, null, null, null, null, null, "=SUM(B14:H14)"],
["=A14+1", null, null, null, null, null, null, null, "=SUM(B15:H15)"],
["=A15+1", null, null, null, null, null, null, null, "=SUM(B16:H16)"],
["=A16+1", null, null, null, null, null, null, null, "=SUM(B17:H17)"],
["=A17+1", null, null, null, null, null, null, null, "=SUM(B18:H18)"],
[
"Total Hrs:",
"=SUM(B12:B18)",
"=SUM(C12:C18)",
"=SUM(D12:D18)",
"=SUM(E12:E18)",
"=SUM(F12:F18)",
"=SUM(G12:G18)",
"=SUM(H12:H18)",
"=SUM(I12:I18)"
],
["Rate/Hour:", 12, 15, 15, 15, 15, 0, 0],
[
"Total Pay:",
"=B19*B20",
"=C19*C20",
"=D19*D20",
"=E19*E20",
"=F19*F20",
"=G19*G20",
"=H19*H20",
"=SUM(B21:H21)"
]
],
"style": {
"A1": 41,
"B1": 41,
"C1": 41,
"D1": 41,
"E1": 41,
"F1": 41,
"G1": 41,
"H1": 41,
"I1": 41,
"A2": 1,
"B2": 1,
"C2": 1,
"A3": 1,
"B3": 1,
"C3": 1,
"A4": 0,
"E4": 6,
"G4": 7,
"H4": 7,
"I4": 7,
"A6": 1,
"E6": 6,
"G6": 7,
"H6": 7,
"I6": 7,
"E8": 6,
"A11": 42,
"B11": 43,
"C11": 43,
"D11": 43,
"E11": 43,
"F11": 43,
"G11": 43,
"H11": 43,
"I11": 42,
"A12": 12,
"B12": 23,
"C12": 23,
"D12": 23,
"E12": 23,
"F12": 23,
"G12": 23,
"H12": 23,
"I12": 13,
"A13": 12,
"B13": 23,
"C13": 23,
"D13": 23,
"E13": 23,
"F13": 23,
"G13": 23,
"H13": 23,
"I13": 13,
"A14": 12,
"B14": 23,
"C14": 23,
"D14": 23,
"E14": 23,
"F14": 23,
"G14": 23,
"H14": 23,
"I14": 13,
"A15": 12,
"B15": 23,
"C15": 23,
"D15": 23,
"E15": 23,
"F15": 23,
"G15": 23,
"H15": 23,
"I15": 13,
"A16": 12,
"B16": 23,
"C16": 23,
"D16": 23,
"E16": 23,
"F16": 23,
"G16": 23,
"H16": 23,
"I16": 13,
"A17": 12,
"B17": 23,
"C17": 23,
"D17": 23,
"E17": 23,
"F17": 23,
"G17": 23,
"H17": 23,
"I17": 13,
"A18": 14,
"B18": 24,
"C18": 24,
"D18": 24,
"E18": 24,
"F18": 24,
"G18": 24,
"H18": 24,
"I18": 15,
"A19": 44,
"B19": 44,
"C19": 44,
"D19": 44,
"E19": 44,
"F19": 44,
"G19": 44,
"H19": 44,
"I19": 45,
"B20": 16,
"C20": 16,
"D20": 16,
"E20": 16,
"F20": 16,
"G20": 16,
"H20": 16,
"A21": 48,
"B21": 48,
"C21": 48,
"D21": 48,
"E21": 48,
"F21": 48,
"G21": 48,
"H21": 48,
"I21": 49
},
"cells": {
"F8": { "type": "text", "mask": "dd/mm/yyyy" },
"A12": { "type": "text", "mask": "dd/mmm/yyyy" },
"A13": { "type": "text", "mask": "dd/mmm/yyyy" },
"A14": { "type": "text", "mask": "dd/mmm/yyyy" },
"A15": { "type": "text", "mask": "dd/mmm/yyyy" },
"A16": { "type": "text", "mask": "dd/mmm/yyyy" },
"A17": { "type": "text", "mask": "dd/mmm/yyyy" },
"A18": { "type": "text", "mask": "dd/mmm/yyyy" }
},
"mergeCells": {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1]
},
"worksheetId": "38661542-a39a-4b46-b84e-4645056c3e90",
"rows": [
{ "height": 43 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 },
{ "height": 29 }
],
"meta": {},
"comments": {},
"cache": {}
}
],
"style": [
"text-align:center",
"text-align:center;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#c62828",
"text-align:center;font-weight:bold;background-color:#ef5350",
"text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee",
"text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee;font-size:x-large",
"font-weight:bold",
"border-bottom:1px solid black",
"background-color:#ef5350",
"background-color:#ef5350;color:#ffebee",
"text-align:center;font-weight:bold;background-color:#ef9a9a;color:#ffebee;font-size:x-large",
"background-color:#ef5350;color:#ffebee;font-weight:bold",
"border-top:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"",
"background-color:#ffebee",
"border-top:1px solid black;border-left:1px solid black;background-color:#ffebee",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;background-color:#ffebee",
"background-color:#ffcdd2",
"background-color:#ffebee;font-weight:bold",
"background-color:#ffcdd2;font-weight:bold",
"border-top:1px solid black;border-left:1px solid black;text-align:center",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;text-align:center",
"text-align:center;font-weight:bold;background-color:#f1f8e9;color:#ffebee;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#c5e1a5;color:#ffebee;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#c5e1a5;color:#fdffff;font-size:x-large",
"background-color:#9ccc65;color:#ffebee;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#9ccc65;color:#ffebee",
"background-color:#66bb6a;color:#ffebee;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#66bb6a;color:#ffebee",
"background-color:#66bb6a;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#66bb6a;color:#f7fffd",
"background-color:#aed581",
"background-color:#aed581;font-weight:bold",
"background-color:#81c784",
"background-color:#81c784;font-weight:bold",
"background-color:#81c784;color:#fdffff",
"background-color:#81c784;font-weight:bold;color:#fdffff",
"text-align:center;font-weight:bold;background-color:#ffca28;color:#fdffff;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#ffc107;color:#fdffff;font-size:x-large",
"background-color:#ffb300;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#ffb300;color:#f7fffd",
"background-color:#ffecb3",
"background-color:#ffecb3;font-weight:bold",
"background-color:#ffca28;color:#fdffff",
"background-color:#ffca28;font-weight:bold;color:#fdffff",
"background-color:#ffd54f;color:#fdffff",
"background-color:#ffd54f;font-weight:bold;color:#fdffff"
],
"toolbar": true
});
</script>
</html>
import React, { useEffect, useRef } from "react";
import 'jspreadsheet/dist/jspreadsheet.css';
import 'jsuites/dist/jsuites.css';
import jspreadsheet from 'jspreadsheet';
import './App.css';
// Set your JSS license key (The following key only works for one day)
const license = 'NzFkMGE3MmQ5ZmNlY2NmMWYxNmU4MzA4Y2VkYjdlMWFlZTk5YzY2NDY1MDBjMWUyMjY5OGJlMzFkZTg3NThiYWEyYmVjMWJmNzQ4MGFlMTMyZmFkMDBkMDZmMGE5ZDVlYWNjZDVmYjRlYTI4NjQxYWExY2VlNzEwOTI4YTI5MjcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5URXlNRE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';
export default function App() {
const spreadsheetRef = useRef(null);
useEffect(() => {
jspreadsheet.setLicense(license);
const instance = jspreadsheet(spreadsheetRef.current, {
guid: "0fc12e95-e5ac-4c8c-9823-2c0630e6b70c",
tabs: true,
worksheets: [
{
minDimensions: [20, 100],
tableOverflow: true,
tableWidth: 1300,
tableHeight: 620,
resize: "both",
worksheetName: "Sheet1",
defaultColWidth: 50,
columns: [{ width: 100 },{},{},{},{},{},{},{},{ width: 100 }],
data: [
["Timesheets"],
["Company Name", "", ""],
["", "", ""],
["https://company.com", "", null, null, "Employee Name:"],
null,
["", "", null, null, "Supervisor Name:"],
null,
[null, "", "", null, "Week:", "45500"],
null,
null,
[
"Day of the week",
"Normal",
"Overtime",
"Sick",
"Vacation",
"Holiday",
"Unpaid",
"Other",
"Total"
],
["=F8", "=SUM(B12:H12)", null, ""],
["=A12+1", "=SUM(B13:H13)", null, ""],
["=A13+1", "=SUM(B14:H14)"],
["=A14+1", "=SUM(B15:H15)"],
["=A15+1", "=SUM(B16:H16)"],
["=A16+1", "=SUM(B17:H17)"],
["=A17+1", "=SUM(B18:H18)"],
[
"Total Hrs:",
"=SUM(B12:B18)",
"=SUM(C12:C18)",
"=SUM(D12:D18)",
"=SUM(E12:E18)",
"=SUM(F12:F18)",
"=SUM(G12:G18)",
"=SUM(H12:H18)",
"=SUM(I12:I18)"
],
["Rate/Hour:", 12, 15, 15, 15, 15, 0, 0],
[
"Total Pay:",
"=B19*B20",
"=C19*C20",
"=D19*D20",
"=E19*E20",
"=F19*F20",
"=G19*G20",
"=H19*H20",
"=SUM(B21:H21)"
]
],
style: {
"A1": 41,
"B1": 41,
"C1": 41,
"D1": 41,
"E1": 41,
"F1": 41,
"G1": 41,
"H1": 41,
"I1": 41,
"A2": 1,
"B2": 1,
"C2": 1,
"A3": 1,
"B3": 1,
"C3": 1,
"A4": 0,
"E4": 6,
"G4": 7,
"H4": 7,
"I4": 7,
"A6": 1,
"E6": 6,
"G6": 7,
"H6": 7,
"I6": 7,
"E8": 6,
"A11": 42,
"B11": 43,
"C11": 43,
"D11": 43,
"E11": 43,
"F11": 43,
"G11": 43,
"H11": 43,
"I11": 42,
"A12": 12,
"B12": 23,
"C12": 23,
"D12": 23,
"E12": 23,
"F12": 23,
"G12": 23,
"H12": 23,
"I12": 13,
"A13": 12,
"B13": 23,
"C13": 23,
"D13": 23,
"E13": 23,
"F13": 23,
"G13": 23,
"H13": 23,
"I13": 13,
"A14": 12,
"B14": 23,
"C14": 23,
"D14": 23,
"E14": 23,
"F14": 23,
"G14": 23,
"H14": 23,
"I14": 13,
"A15": 12,
"B15": 23,
"C15": 23,
"D15": 23,
"E15": 23,
"F15": 23,
"G15": 23,
"H15": 23,
"I15": 13,
"A16": 12,
"B16": 23,
"C16": 23,
"D16": 23,
"E16": 23,
"F16": 23,
"G16": 23,
"H16": 23,
"I16": 13,
"A17": 12,
"B17": 23,
"C17": 23,
"D17": 23,
"E17": 23,
"F17": 23,
"G17": 23,
"H17": 23,
"I17": 13,
"A18": 14,
"B18": 24,
"C18": 24,
"D18": 24,
"E18": 24,
"F18": 24,
"G18": 24,
"H18": 24,
"I18": 15,
"A19": 44,
"B19": 44,
"C19": 44,
"D19": 44,
"E19": 44,
"F19": 44,
"G19": 44,
"H19": 44,
"I19": 45,
"B20": 16,
"C20": 16,
"D20": 16,
"E20": 16,
"F20": 16,
"G20": 16,
"H20": 16,
"A21": 48,
"B21": 48,
"C21": 48,
"D21": 48,
"E21": 48,
"F21": 48,
"G21": 48,
"H21": 48,
"I21": 49
},
cells: {
"F8": { "type": "text", "mask": "dd/mm/yyyy" },
"A12": { "type": "text", "mask": "dd/mmm/yyyy" },
"A13": { "type": "text", "mask": "dd/mmm/yyyy" },
"A14": { "type": "text", "mask": "dd/mmm/yyyy" },
"A15": { "type": "text", "mask": "dd/mmm/yyyy" },
"A16": { "type": "text", "mask": "dd/mmm/yyyy" },
"A17": { "type": "text", "mask": "dd/mmm/yyyy" },
"A18": { "type": "text", "mask": "dd/mmm/yyyy" }
},
mergeCells: {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1]
}
}
],
autoId: true,
style: [
"text-align:center",
"text-align:center;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#c62828",
"text-align:center;font-weight:bold;background-color:#ef5350",
"text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee",
"text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee;font-size:x-large",
"font-weight:bold",
"border-bottom:1px solid black",
"background-color:#ef5350",
"background-color:#ef5350;color:#ffebee",
"text-align:center;font-weight:bold;background-color:#ef9a9a;color:#ffebee;font-size:x-large",
"background-color:#ef5350;color:#ffebee;font-weight:bold",
"border-top:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"",
"background-color:#ffebee",
"border-top:1px solid black;border-left:1px solid black;background-color:#ffebee",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;background-color:#ffebee",
"background-color:#ffcdd2",
"background-color:#ffebee;font-weight:bold",
"background-color:#ffcdd2;font-weight:bold",
"border-top:1px solid black;border-left:1px solid black;text-align:center",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;text-align:center",
"text-align:center;font-weight:bold;background-color:#f1f8e9;color:#ffebee;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#c5e1a5;color:#ffebee;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#c5e1a5;color:#fdffff;font-size:x-large",
"background-color:#9ccc65;color:#ffebee;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#9ccc65;color:#ffebee",
"background-color:#66bb6a;color:#ffebee;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#66bb6a;color:#ffebee",
"background-color:#66bb6a;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#66bb6a;color:#f7fffd",
"background-color:#aed581",
"background-color:#aed581;font-weight:bold",
"background-color:#81c784",
"background-color:#81c784;font-weight:bold",
"background-color:#81c784;color:#fdffff",
"background-color:#81c784;font-weight:bold;color:#fdffff",
"text-align:center;font-weight:bold;background-color:#ffca28;color:#fdffff;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#ffc107;color:#fdffff;font-size:x-large",
"background-color:#ffb300;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#ffb300;color:#f7fffd",
"background-color:#ffecb3",
"background-color:#ffecb3;font-weight:bold",
"background-color:#ffca28;color:#fdffff",
"background-color:#ffca28;font-weight:bold;color:#fdffff",
"background-color:#ffd54f;color:#fdffff",
"background-color:#ffd54f;font-weight:bold;color:#fdffff"
],
toolbar: true
});
return () => {
instance?.destroy?.();
};
}, []);
return <div ref={spreadsheetRef}></div>;
}
<template>
<Spreadsheet
ref="spreadsheet"
:license="license"
:worksheets="worksheets"
:styles="globalStyle"
toolbar="true"
/>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
export default {
components: { Spreadsheet, Worksheet },
data() {
return {
// Set your JSS license key (The following key only works for one day)
license: 'NzFkMGE3MmQ5ZmNlY2NmMWYxNmU4MzA4Y2VkYjdlMWFlZTk5YzY2NDY1MDBjMWUyMjY5OGJlMzFkZTg3NThiYWEyYmVjMWJmNzQ4MGFlMTMyZmFkMDBkMDZmMGE5ZDVlYWNjZDVmYjRlYTI4NjQxYWExY2VlNzEwOTI4YTI5MjcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5URXlNRE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5',
tabs: true,
worksheets: [
{
minDimensions: [20, 100],
tableOverflow: true,
tableWidth: 1300,
tableHeight: 620,
resize: "both",
worksheetName: "Sheet1",
defaultColWidth: 50,
columns: [{ width: 100 },{},{},{},{},{},{},{},{ width: 100 }],
data: [
["Timesheets"],
["Company Name", "", ""],
["", "", ""],
["https://company.com", "", null, null, "Employee Name:"],
null,
["", "", null, null, "Supervisor Name:"],
null,
[null, "", "", null, "Week:", "45500"],
null,
null,
[
"Day of the week",
"Normal",
"Overtime",
"Sick",
"Vacation",
"Holiday",
"Unpaid",
"Other",
"Total"
],
["=F8", "=SUM(B12:H12)", null, ""],
["=A12+1", "=SUM(B13:H13)", null, ""],
["=A13+1", "=SUM(B14:H14)"],
["=A14+1", "=SUM(B15:H15)"],
["=A15+1", "=SUM(B16:H16)"],
["=A16+1", "=SUM(B17:H17)"],
["=A17+1", "=SUM(B18:H18)"],
[
"Total Hrs:",
"=SUM(B12:B18)",
"=SUM(C12:C18)",
"=SUM(D12:D18)",
"=SUM(E12:E18)",
"=SUM(F12:F18)",
"=SUM(G12:G18)",
"=SUM(H12:H18)",
"=SUM(I12:I18)"
],
["Rate/Hour:", 12, 15, 15, 15, 15, 0, 0],
[
"Total Pay:",
"=B19*B20",
"=C19*C20",
"=D19*D20",
"=E19*E20",
"=F19*F20",
"=G19*G20",
"=H19*H20",
"=SUM(B21:H21)"
]
],
style: {
"A1": 41,
"B1": 41,
"C1": 41,
"D1": 41,
"E1": 41,
"F1": 41,
"G1": 41,
"H1": 41,
"I1": 41,
"A2": 1,
"B2": 1,
"C2": 1,
"A3": 1,
"B3": 1,
"C3": 1,
"A4": 0,
"E4": 6,
"G4": 7,
"H4": 7,
"I4": 7,
"A6": 1,
"E6": 6,
"G6": 7,
"H6": 7,
"I6": 7,
"E8": 6,
"A11": 42,
"B11": 43,
"C11": 43,
"D11": 43,
"E11": 43,
"F11": 43,
"G11": 43,
"H11": 43,
"I11": 42,
"A12": 12,
"B12": 23,
"C12": 23,
"D12": 23,
"E12": 23,
"F12": 23,
"G12": 23,
"H12": 23,
"I12": 13,
"A13": 12,
"B13": 23,
"C13": 23,
"D13": 23,
"E13": 23,
"F13": 23,
"G13": 23,
"H13": 23,
"I13": 13,
"A14": 12,
"B14": 23,
"C14": 23,
"D14": 23,
"E14": 23,
"F14": 23,
"G14": 23,
"H14": 23,
"I14": 13,
"A15": 12,
"B15": 23,
"C15": 23,
"D15": 23,
"E15": 23,
"F15": 23,
"G15": 23,
"H15": 23,
"I15": 13,
"A16": 12,
"B16": 23,
"C16": 23,
"D16": 23,
"E16": 23,
"F16": 23,
"G16": 23,
"H16": 23,
"I16": 13,
"A17": 12,
"B17": 23,
"C17": 23,
"D17": 23,
"E17": 23,
"F17": 23,
"G17": 23,
"H17": 23,
"I17": 13,
"A18": 14,
"B18": 24,
"C18": 24,
"D18": 24,
"E18": 24,
"F18": 24,
"G18": 24,
"H18": 24,
"I18": 15,
"A19": 44,
"B19": 44,
"C19": 44,
"D19": 44,
"E19": 44,
"F19": 44,
"G19": 44,
"H19": 44,
"I19": 45,
"B20": 16,
"C20": 16,
"D20": 16,
"E20": 16,
"F20": 16,
"G20": 16,
"H20": 16,
"A21": 48,
"B21": 48,
"C21": 48,
"D21": 48,
"E21": 48,
"F21": 48,
"G21": 48,
"H21": 48,
"I21": 49
},
cells: {
"F8": { "type": "text", "mask": "dd/mm/yyyy" },
"A12": { "type": "text", "mask": "dd/mmm/yyyy" },
"A13": { "type": "text", "mask": "dd/mmm/yyyy" },
"A14": { "type": "text", "mask": "dd/mmm/yyyy" },
"A15": { "type": "text", "mask": "dd/mmm/yyyy" },
"A16": { "type": "text", "mask": "dd/mmm/yyyy" },
"A17": { "type": "text", "mask": "dd/mmm/yyyy" },
"A18": { "type": "text", "mask": "dd/mmm/yyyy" }
},
mergeCells: {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1]
}
}
],
autoId: true,
globalStyle: [
"text-align:center",
"text-align:center;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#c62828",
"text-align:center;font-weight:bold;background-color:#ef5350",
"text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee",
"text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee;font-size:x-large",
"font-weight:bold",
"border-bottom:1px solid black",
"background-color:#ef5350",
"background-color:#ef5350;color:#ffebee",
"text-align:center;font-weight:bold;background-color:#ef9a9a;color:#ffebee;font-size:x-large",
"background-color:#ef5350;color:#ffebee;font-weight:bold",
"border-top:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"",
"background-color:#ffebee",
"border-top:1px solid black;border-left:1px solid black;background-color:#ffebee",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;background-color:#ffebee",
"background-color:#ffcdd2",
"background-color:#ffebee;font-weight:bold",
"background-color:#ffcdd2;font-weight:bold",
"border-top:1px solid black;border-left:1px solid black;text-align:center",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;text-align:center",
"text-align:center;font-weight:bold;background-color:#f1f8e9;color:#ffebee;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#c5e1a5;color:#ffebee;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#c5e1a5;color:#fdffff;font-size:x-large",
"background-color:#9ccc65;color:#ffebee;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#9ccc65;color:#ffebee",
"background-color:#66bb6a;color:#ffebee;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#66bb6a;color:#ffebee",
"background-color:#66bb6a;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#66bb6a;color:#f7fffd",
"background-color:#aed581",
"background-color:#aed581;font-weight:bold",
"background-color:#81c784",
"background-color:#81c784;font-weight:bold",
"background-color:#81c784;color:#fdffff",
"background-color:#81c784;font-weight:bold;color:#fdffff",
"text-align:center;font-weight:bold;background-color:#ffca28;color:#fdffff;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#ffc107;color:#fdffff;font-size:x-large",
"background-color:#ffb300;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#ffb300;color:#f7fffd",
"background-color:#ffecb3",
"background-color:#ffecb3;font-weight:bold",
"background-color:#ffca28;color:#fdffff",
"background-color:#ffca28;font-weight:bold;color:#fdffff",
"background-color:#ffd54f;color:#fdffff",
"background-color:#ffd54f;font-weight:bold;color:#fdffff"
],
toolbar: true
};
},
};
</script>
import { Component, ElementRef, ViewChild } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzFkMGE3MmQ5ZmNlY2NmMWYxNmU4MzA4Y2VkYjdlMWFlZTk5YzY2NDY1MDBjMWUyMjY5OGJlMzFkZTg3NThiYWEyYmVjMWJmNzQ4MGFlMTMyZmFkMDBkMDZmMGE5ZDVlYWNjZDVmYjRlYTI4NjQxYWExY2VlNzEwOTI4YTI5MjcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNE5URXlNRE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
@Component({
standalone: true,
selector: 'app-root',
template: `<div #spreadsheet></div>`,
})
export class AppComponent {
@ViewChild('spreadsheet', { static: true }) spreadsheet!: ElementRef;
ngAfterViewInit() {
jspreadsheet(this.spreadsheet.nativeElement, {
tabs: true,
worksheets: [
{
minDimensions: [20, 100],
tableOverflow: true,
tableWidth: 1300,
tableHeight: 620,
resize: "both",
worksheetName: "Sheet1",
data: [
["Timesheets"],
["Company Name", "", ""],
["", "", ""],
["https://company.com", "", null, null, "Employee Name:"],
["", "", null, null, "Supervisor Name:"],
[null, "", "", null, "Week:", "45500"],
[
"Day of the week",
"Normal",
"Overtime",
"Sick",
"Vacation",
"Holiday",
"Unpaid",
"Other",
"Total"
],
["=F8", "=SUM(B12:H12)", null, ""],
["=A12+1", "=SUM(B13:H13)", null, ""],
["=A13+1", "=SUM(B14:H14)"],
["=A14+1", "=SUM(B15:H15)"],
["=A15+1", "=SUM(B16:H16)"],
["=A16+1", "=SUM(B17:H17)"],
["=A17+1", "=SUM(B18:H18)"],
[
"Total Hrs:",
"=SUM(B12:B18)",
"=SUM(C12:C18)",
"=SUM(D12:D18)",
"=SUM(E12:E18)",
"=SUM(F12:F18)",
"=SUM(G12:G18)",
"=SUM(H12:H18)",
"=SUM(I12:I18)"
],
["Rate/Hour:", 12, 15, 15, 15, 15, 0, 0],
[
"Total Pay:",
"=B19*B20",
"=C19*C20",
"=D19*D20",
"=E19*E20",
"=F19*F20",
"=G19*G20",
"=H19*H20",
"=SUM(B21:H21)"
]
],
style: {
"A1": 41,
"B1": 41,
"C1": 41,
"D1": 41,
"E1": 41,
"F1": 41,
"G1": 41,
"H1": 41,
"I1": 41,
"A2": 1,
"B2": 1,
"C2": 1,
"A3": 1,
"B3": 1,
"C3": 1,
"A4": 0,
"E4": 6,
"G4": 7,
"H4": 7,
"I4": 7,
"A6": 1,
"E6": 6,
"G6": 7,
"H6": 7,
"I6": 7,
"E8": 6,
"A11": 42,
"B11": 43,
"C11": 43,
"D11": 43,
"E11": 43,
"F11": 43,
"G11": 43,
"H11": 43,
"I11": 42,
"A12": 12,
"B12": 23,
"C12": 23,
"D12": 23,
"E12": 23,
"F12": 23,
"G12": 23,
"H12": 23,
"I12": 13,
"A13": 12,
"B13": 23,
"C13": 23,
"D13": 23,
"E13": 23,
"F13": 23,
"G13": 23,
"H13": 23,
"I13": 13,
"A14": 12,
"B14": 23,
"C14": 23,
"D14": 23,
"E14": 23,
"F14": 23,
"G14": 23,
"H14": 23,
"I14": 13,
"A15": 12,
"B15": 23,
"C15": 23,
"D15": 23,
"E15": 23,
"F15": 23,
"G15": 23,
"H15": 23,
"I15": 13,
"A16": 12,
"B16": 23,
"C16": 23,
"D16": 23,
"E16": 23,
"F16": 23,
"G16": 23,
"H16": 23,
"I16": 13,
"A17": 12,
"B17": 23,
"C17": 23,
"D17": 23,
"E17": 23,
"F17": 23,
"G17": 23,
"H17": 23,
"I17": 13,
"A18": 14,
"B18": 24,
"C18": 24,
"D18": 24,
"E18": 24,
"F18": 24,
"G18": 24,
"H18": 24,
"I18": 15,
"A19": 44,
"B19": 44,
"C19": 44,
"D19": 44,
"E19": 44,
"F19": 44,
"G19": 44,
"H19": 44,
"I19": 45,
"B20": 16,
"C20": 16,
"D20": 16,
"E20": 16,
"F20": 16,
"G20": 16,
"H20": 16,
"A21": 48,
"B21": 48,
"C21": 48,
"D21": 48,
"E21": 48,
"F21": 48,
"G21": 48,
"H21": 48,
"I21": 49
},
cells: {
"F8": { "type": "text", "mask": "dd/mm/yyyy" },
"A12": { "type": "text", "mask": "dd/mmm/yyyy" },
"A13": { "type": "text", "mask": "dd/mmm/yyyy" },
"A14": { "type": "text", "mask": "dd/mmm/yyyy" },
"A15": { "type": "text", "mask": "dd/mmm/yyyy" },
"A16": { "type": "text", "mask": "dd/mmm/yyyy" },
"A17": { "type": "text", "mask": "dd/mmm/yyyy" },
"A18": { "type": "text", "mask": "dd/mmm/yyyy" }
},
mergeCells: {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1]
}
}
],
autoId: true,
style: [
"text-align:center",
"text-align:center;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#c62828",
"text-align:center;font-weight:bold;background-color:#ef5350",
"text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee",
"text-align:center;font-weight:bold;background-color:#ef5350;color:#ffebee;font-size:x-large",
"font-weight:bold",
"border-bottom:1px solid black",
"background-color:#ef5350",
"background-color:#ef5350;color:#ffebee",
"text-align:center;font-weight:bold;background-color:#ef9a9a;color:#ffebee;font-size:x-large",
"background-color:#ef5350;color:#ffebee;font-weight:bold",
"border-top:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black",
"",
"background-color:#ffebee",
"border-top:1px solid black;border-left:1px solid black;background-color:#ffebee",
"border-top:1px solid black;border-right:1px solid black;border-left:1px solid black;background-color:#ffebee",
"background-color:#ffcdd2",
"background-color:#ffebee;font-weight:bold",
"background-color:#ffcdd2;font-weight:bold",
"border-top:1px solid black;border-left:1px solid black;text-align:center",
"border-top:1px solid black;border-bottom:1px solid black;border-left:1px solid black;text-align:center",
"text-align:center;font-weight:bold;background-color:#f1f8e9;color:#ffebee;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#c5e1a5;color:#ffebee;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#c5e1a5;color:#fdffff;font-size:x-large",
"background-color:#9ccc65;color:#ffebee;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#9ccc65;color:#ffebee",
"background-color:#66bb6a;color:#ffebee;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#66bb6a;color:#ffebee",
"background-color:#66bb6a;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#66bb6a;color:#f7fffd",
"background-color:#aed581",
"background-color:#aed581;font-weight:bold",
"background-color:#81c784",
"background-color:#81c784;font-weight:bold",
"background-color:#81c784;color:#fdffff",
"background-color:#81c784;font-weight:bold;color:#fdffff",
"text-align:center;font-weight:bold;background-color:#ffca28;color:#fdffff;font-size:x-large",
"text-align:center;font-weight:bold;background-color:#ffc107;color:#fdffff;font-size:x-large",
"background-color:#ffb300;color:#f7fffd;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#ffb300;color:#f7fffd",
"background-color:#ffecb3",
"background-color:#ffecb3;font-weight:bold",
"background-color:#ffca28;color:#fdffff",
"background-color:#ffca28;font-weight:bold;color:#fdffff",
"background-color:#ffd54f;color:#fdffff",
"background-color:#ffd54f;font-weight:bold;color:#fdffff"
],
toolbar: true
});
}
}