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>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Material+Icons&display=swap" />
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MjBmYjkzM2JhMTM5MjU4YzJmODc0NDk4OWI2YWU0NWQzZjBkNTljODE2NDM1ODExMTg2MmI3NmVlZjgxMTBhNGU4ZTFkZDgxYjUzM2E2YzY5YjgzYzRiZTJjMzkzYjAzODMyNjA0MTk0NTU1ZjhmOTk2ODFkMTYwMmI0NGY4NzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeU5Ua3pNamMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula });
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
tabs: true,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
minDimensions: [20, 100],
tableOverflow: true,
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, "John Smith"],
null,
["", "", null, null, "Supervisor Name:", null, "Sarah Johnson"],
null,
[null, "", "", null, "Week:", 45500],
null,
null,
["Day of the week","Normal","Overtime","Sick","Vacation","Holiday","Unpaid","Other","Total"],
["=F8", 0, 0, 0, 0, 0, 0, 0, "=SUM(B12:H12)"],
["=A12+1", 0, 0, 0, 0, 0, 0, 0, "=SUM(B13:H13)"],
["=A13+1", 8, 0, 0, 0, 0, 0, 0, "=SUM(B14:H14)"],
["=A14+1", 8, 2, 0, 0, 0, 0, 0, "=SUM(B15:H15)"],
["=A15+1", 8, 0, 0, 0, 0, 0, 0, "=SUM(B16:H16)"],
["=A16+1", 8, 1, 0, 0, 0, 0, 0, "=SUM(B17:H17)"],
["=A17+1", 8, 0, 0, 0, 0, 0, 0, "=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:I1": 11,
"A2:C3": 1,
"A4": 0,
"E4": 2,
"G4:I4": 3,
"A6": 1,
"E6": 2,
"G6:I6": 3,
"E8": 2,
"A11": 12,
"B11:H11": 13,
"I11": 12,
"A12:A17": 4,
"B12:H17": 9,
"I12:I17": 5,
"A18": 6,
"B18:H18": 10,
"I18": 7,
"A19:H19": 14,
"I19": 15,
"B20:H20": 8,
"A21:H21": 16,
"I21": 17
},
cells: {
"F8": { "format": "mm-dd-yyyy" },
"A12": { "format": "mm-dd-yyyy" },
"A13": { "format": "mm-dd-yyyy" },
"A14": { "format": "mm-dd-yyyy" },
"A15": { "format": "mm-dd-yyyy" },
"A16": { "format": "mm-dd-yyyy" },
"A17": { "format": "mm-dd-yyyy" },
"A18": { "format": "mm-dd-yyyy" }
},
mergeCells: {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1],
"G4": [3, 1],
"G6": [3, 1]
},
rows: [
{ "height": 43 }
],
}
],
style: [
"text-align:center",
"text-align:center;font-weight:bold",
"font-weight:bold;color:#d97706",
"border-bottom:2px solid #f59e0b",
"border-top:1px solid #fed7aa;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-right:1px solid #fed7aa;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-right:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;background-color:#ffffff",
"",
"border-top:1px solid #fed7aa;border-left:1px solid #fed7aa;text-align:center;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;text-align:center;background-color:#ffffff",
"text-align:center;font-weight:bold;background-color:#f59e0b;color:#ffffff;font-size:x-large",
"background-color:#f59e0b;color:#ffffff;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#f59e0b;color:#ffffff",
"background-color:#fefce8",
"background-color:#fefce8;font-weight:bold",
"background-color:#fbbf24;color:#1e293b;font-weight:bold",
"background-color:#fbbf24;font-weight:bold;color:#1e293b"
],
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 formula from '@jspreadsheet/formula-pro';
import './App.css';
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MjBmYjkzM2JhMTM5MjU4YzJmODc0NDk4OWI2YWU0NWQzZjBkNTljODE2NDM1ODExMTg2MmI3NmVlZjgxMTBhNGU4ZTFkZDgxYjUzM2E2YzY5YjgzYzRiZTJjMzkzYjAzODMyNjA0MTk0NTU1ZjhmOTk2ODFkMTYwMmI0NGY4NzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeU5Ua3pNamMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula });
export default function App() {
const spreadsheetRef = useRef(null);
useEffect(() => {
const instance = jspreadsheet(spreadsheetRef.current, {
tabs: true,
tableOverflow: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
minDimensions: [20, 100],
tableOverflow: true,
worksheetName: "Sheet1",
defaultColWidth: 50,
columns: [{ width: 100 },{},{},{},{},{},{},{},{ width: 100 }],
data: [
["Timesheets"],
["Company Name", "", ""],
["", "", ""],
["https://company.com", "", null, null, "Employee Name:", null, "John Smith"],
null,
["", "", null, null, "Supervisor Name:", null, "Sarah Johnson"],
null,
[null, "", "", null, "Week:", "45500"],
null,
null,
["Day of the week","Normal","Overtime","Sick","Vacation","Holiday","Unpaid","Other","Total"],
["=F8", 0, 0, 0, 0, 0, 0, 0, "=SUM(B12:H12)"],
["=A12+1", 0, 0, 0, 0, 0, 0, 0, "=SUM(B13:H13)"],
["=A13+1", 8, 0, 0, 0, 0, 0, 0, "=SUM(B14:H14)"],
["=A14+1", 8, 2, 0, 0, 0, 0, 0, "=SUM(B15:H15)"],
["=A15+1", 8, 0, 0, 0, 0, 0, 0, "=SUM(B16:H16)"],
["=A16+1", 8, 1, 0, 0, 0, 0, 0, "=SUM(B17:H17)"],
["=A17+1", 8, 0, 0, 0, 0, 0, 0, "=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:I1": 11,
"A2:C3": 1,
"A4": 0,
"E4": 2,
"G4:I4": 3,
"A6": 1,
"E6": 2,
"G6:I6": 3,
"E8": 2,
"A11": 12,
"B11:H11": 13,
"I11": 12,
"A12:A17": 4,
"B12:H17": 9,
"I12:I17": 5,
"A18": 6,
"B18:H18": 10,
"I18": 7,
"A19:H19": 14,
"I19": 15,
"B20:H20": 8,
"A21:H21": 16,
"I21": 17
},
cells: {
"F8": { "format": "mm-dd-yyyy" },
"A12": { "format": "mm-dd-yyyy" },
"A13": { "format": "mm-dd-yyyy" },
"A14": { "format": "mm-dd-yyyy" },
"A15": { "format": "mm-dd-yyyy" },
"A16": { "format": "mm-dd-yyyy" },
"A17": { "format": "mm-dd-yyyy" },
"A18": { "format": "mm-dd-yyyy" }
},
mergeCells: {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1],
"G4": [3, 1],
"G6": [3, 1]
}
}
],
autoId: true,
style: [
"text-align:center",
"text-align:center;font-weight:bold",
"font-weight:bold;color:#d97706",
"border-bottom:2px solid #f59e0b",
"border-top:1px solid #fed7aa;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-right:1px solid #fed7aa;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-right:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;background-color:#ffffff",
"",
"border-top:1px solid #fed7aa;border-left:1px solid #fed7aa;text-align:center;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;text-align:center;background-color:#ffffff",
"text-align:center;font-weight:bold;background-color:#f59e0b;color:#ffffff;font-size:x-large",
"background-color:#f59e0b;color:#ffffff;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#f59e0b;color:#ffffff",
"background-color:#fefce8",
"background-color:#fefce8;font-weight:bold",
"background-color:#fbbf24;color:#1e293b;font-weight:bold",
"background-color:#fbbf24;font-weight:bold;color:#1e293b"
],
toolbar: true
});
return () => {
instance?.destroy?.();
};
}, []);
return <div ref={spreadsheetRef}></div>;
}
<template>
<Spreadsheet
ref="spreadsheet"
:license="license"
:tabs="tabs"
:table-width="tableWidth"
:table-height="tableHeight"
:resizable="resizable"
:worksheets="worksheets"
:styles="styles"
:toolbar="toolbar"
:tableOverflow="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: 'MjBmYjkzM2JhMTM5MjU4YzJmODc0NDk4OWI2YWU0NWQzZjBkNTljODE2NDM1ODExMTg2MmI3NmVlZjgxMTBhNGU4ZTFkZDgxYjUzM2E2YzY5YjgzYzRiZTJjMzkzYjAzODMyNjA0MTk0NTU1ZjhmOTk2ODFkMTYwMmI0NGY4NzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeU5Ua3pNamMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9',
tabs: true,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
minDimensions: [20, 100],
tableOverflow: true,
worksheetName: "Sheet1",
defaultColWidth: 50,
columns: [{ width: 100 },{},{},{},{},{},{},{},{ width: 100 }],
data: [
["Timesheets"],
["Company Name", "", ""],
["", "", ""],
["https://company.com", "", null, null, "Employee Name:", null, "John Smith"],
null,
["", "", null, null, "Supervisor Name:", null, "Sarah Johnson"],
null,
[null, "", "", null, "Week:", "45500"],
null,
null,
["Day of the week","Normal","Overtime","Sick","Vacation","Holiday","Unpaid","Other","Total"],
["=F8", 0, 0, 0, 0, 0, 0, 0, "=SUM(B12:H12)"],
["=A12+1", 0, 0, 0, 0, 0, 0, 0, "=SUM(B13:H13)"],
["=A13+1", 8, 0, 0, 0, 0, 0, 0, "=SUM(B14:H14)"],
["=A14+1", 8, 2, 0, 0, 0, 0, 0, "=SUM(B15:H15)"],
["=A15+1", 8, 0, 0, 0, 0, 0, 0, "=SUM(B16:H16)"],
["=A16+1", 8, 1, 0, 0, 0, 0, 0, "=SUM(B17:H17)"],
["=A17+1", 8, 0, 0, 0, 0, 0, 0, "=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:I1": 11,
"A2:C3": 1,
"A4": 0,
"E4": 2,
"G4:I4": 3,
"A6": 1,
"E6": 2,
"G6:I6": 3,
"E8": 2,
"A11": 12,
"B11:H11": 13,
"I11": 12,
"A12:A17": 4,
"B12:H17": 9,
"I12:I17": 5,
"A18": 6,
"B18:H18": 10,
"I18": 7,
"A19:H19": 14,
"I19": 15,
"B20:H20": 8,
"A21:H21": 16,
"I21": 17
},
cells: {
"F8": { "format": "mm-dd-yyyy" },
"A12": { "format": "mm-dd-yyyy" },
"A13": { "format": "mm-dd-yyyy" },
"A14": { "format": "mm-dd-yyyy" },
"A15": { "format": "mm-dd-yyyy" },
"A16": { "format": "mm-dd-yyyy" },
"A17": { "format": "mm-dd-yyyy" },
"A18": { "format": "mm-dd-yyyy" }
},
mergeCells: {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1],
"G4": [3, 1],
"G6": [3, 1]
}
}
],
toolbar: true,
styles: [
"text-align:center",
"text-align:center;font-weight:bold",
"font-weight:bold;color:#d97706",
"border-bottom:2px solid #f59e0b",
"border-top:1px solid #fed7aa;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-right:1px solid #fed7aa;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-right:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;background-color:#ffffff",
"",
"border-top:1px solid #fed7aa;border-left:1px solid #fed7aa;text-align:center;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;text-align:center;background-color:#ffffff",
"text-align:center;font-weight:bold;background-color:#f59e0b;color:#ffffff;font-size:x-large",
"background-color:#f59e0b;color:#ffffff;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#f59e0b;color:#ffffff",
"background-color:#fefce8",
"background-color:#fefce8;font-weight:bold",
"background-color:#fbbf24;color:#1e293b;font-weight:bold",
"background-color:#fbbf24;font-weight:bold;color:#1e293b"
]
};
},
};
</script>
import { Component, ElementRef, ViewChild } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import formula from '@jspreadsheet/formula-pro';
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MjBmYjkzM2JhMTM5MjU4YzJmODc0NDk4OWI2YWU0NWQzZjBkNTljODE2NDM1ODExMTg2MmI3NmVlZjgxMTBhNGU4ZTFkZDgxYjUzM2E2YzY5YjgzYzRiZTJjMzkzYjAzODMyNjA0MTk0NTU1ZjhmOTk2ODFkMTYwMmI0NGY4NzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjeU5Ua3pNamMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');
jspreadsheet.setExtensions({ formula });
@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,
tableWidth: '1360',
tableHeight: '620',
resizable: true,
worksheets: [
{
minDimensions: [20, 100],
tableOverflow: true,
worksheetName: "Sheet1",
data: [
["Timesheets"],
["Company Name", "", ""],
["", "", ""],
["https://company.com", "", null, null, "Employee Name:", null, "John Smith"],
["", "", null, null, "Supervisor Name:", null, "Sarah Johnson"],
[null, "", "", null, "Week:", "45500"],
[],[],[],[],
["Day of the week","Normal","Overtime","Sick","Vacation","Holiday","Unpaid","Other","Total"],
["=F8", 0, 0, 0, 0, 0, 0, 0, "=SUM(B12:H12)"],
["=A12+1", 0, 0, 0, 0, 0, 0, 0, "=SUM(B13:H13)"],
["=A13+1", 8, 0, 0, 0, 0, 0, 0, "=SUM(B14:H14)"],
["=A14+1", 8, 2, 0, 0, 0, 0, 0, "=SUM(B15:H15)"],
["=A15+1", 8, 0, 0, 0, 0, 0, 0, "=SUM(B16:H16)"],
["=A16+1", 8, 1, 0, 0, 0, 0, 0, "=SUM(B17:H17)"],
["=A17+1", 8, 0, 0, 0, 0, 0, 0, "=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:I1": 11,
"A2:C3": 1,
"A4": 0,
"E4": 2,
"G4:I4": 3,
"A6": 1,
"E6": 2,
"G6:I6": 3,
"E8": 2,
"A11": 12,
"B11:H11": 13,
"I11": 12,
"A12:A17": 4,
"B12:H17": 9,
"I12:I17": 5,
"A18": 6,
"B18:H18": 10,
"I18": 7,
"A19:H19": 14,
"I19": 15,
"B20:H20": 8,
"A21:H21": 16,
"I21": 17
},
cells: {
"F8": { "format": "mm-dd-yyyy" },
"A12": { "format": "mm-dd-yyyy" },
"A13": { "format": "mm-dd-yyyy" },
"A14": { "format": "mm-dd-yyyy" },
"A15": { "format": "mm-dd-yyyy" },
"A16": { "format": "mm-dd-yyyy" },
"A17": { "format": "mm-dd-yyyy" },
"A18": { "format": "mm-dd-yyyy" }
},
mergeCells: {
"A1": [9, 1],
"A2": [3, 2],
"A4": [2, 1],
"E4": [2, 1],
"E6": [2, 1],
"G4": [3, 1],
"G6": [3, 1]
}
}
],
autoId: true,
style: [
"text-align:center",
"text-align:center;font-weight:bold",
"font-weight:bold;color:#d97706",
"border-bottom:2px solid #f59e0b",
"border-top:1px solid #fed7aa;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-right:1px solid #fed7aa;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-right:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;background-color:#ffffff",
"",
"border-top:1px solid #fed7aa;border-left:1px solid #fed7aa;text-align:center;background-color:#ffffff",
"border-top:1px solid #fed7aa;border-bottom:3px solid #f59e0b;border-left:1px solid #fed7aa;text-align:center;background-color:#ffffff",
"text-align:center;font-weight:bold;background-color:#f59e0b;color:#ffffff;font-size:x-large",
"background-color:#f59e0b;color:#ffffff;font-weight:bold",
"text-align:center;font-weight:bold;background-color:#f59e0b;color:#ffffff",
"background-color:#fefce8",
"background-color:#fefce8;font-weight:bold",
"background-color:#fbbf24;color:#1e293b;font-weight:bold",
"background-color:#fbbf24;font-weight:bold;color:#1e293b"
],
toolbar: true
});
}
}