68 lines
2.3 KiB
HTML
68 lines
2.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Tables</title>
|
||
|
|
<link rel="stylesheet" href="../css/global.css">
|
||
|
|
<link rel="stylesheet" href="tables.css">
|
||
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body x-data="tablesApp()" x-init="init()">
|
||
|
|
<div id="main-content">
|
||
|
|
<div class="content-section active">
|
||
|
|
<div class="app-container">
|
||
|
|
<div class="content-container">
|
||
|
|
<div class="header">
|
||
|
|
<h1>📊 Tables</h1>
|
||
|
|
<div class="subtitle">Excel Clone - Celebrating Lotus 1-2-3 Legacy 🎉</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="resizable-container">
|
||
|
|
<div class="resizable-panel left" style="width: 30%">
|
||
|
|
<!-- Left panel content -->
|
||
|
|
</div>
|
||
|
|
<div class="resizable-handle"></div>
|
||
|
|
<div class="resizable-panel right" style="width: 70%">
|
||
|
|
<div class="spreadsheet-content">
|
||
|
|
<table>
|
||
|
|
<thead id="tableHead"></thead>
|
||
|
|
<tbody id="tableBody"></tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Formula bar -->
|
||
|
|
<div class="formula-bar">
|
||
|
|
<span id="cellRef">A1</span>
|
||
|
|
<input type="text"
|
||
|
|
id="formulaInput"
|
||
|
|
placeholder="Enter formula..."
|
||
|
|
@keypress.enter="updateCellValue($event.target.value)"
|
||
|
|
x-model="formulaInputValue">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Status bar -->
|
||
|
|
<div class="status-bar">
|
||
|
|
<span>Rows: <span id="rowCount" x-text="rows"></span></span>
|
||
|
|
<span>Columns: <span id="colCount" x-text="cols"></span></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Toolbar -->
|
||
|
|
<div class="toolbar">
|
||
|
|
<button @click="addRow()">Add Row</button>
|
||
|
|
<button @click="addColumn()">Add Column</button>
|
||
|
|
<button @click="deleteRow()">Delete Row</button>
|
||
|
|
<button @click="deleteColumn()">Delete Column</button>
|
||
|
|
<button @click="sort()">Sort</button>
|
||
|
|
<button @click="sum()">Sum</button>
|
||
|
|
<button @click="average()">Average</button>
|
||
|
|
<button @click="exportData()">Export</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="tables.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|