```typescript const app = document.getElementById('app'); const createTable = () => { const table = document.createElement('table'); table.className = "min-w-full bg-white border border-gray-300"; const thead = document.createElement('thead'); thead.className = "bg-gray-200"; const headerRow = document.createElement('tr'); const headers = ['Name', 'Age', 'Occupation', 'Actions']; headers.forEach(header => { const th = document.createElement('th'); th.className = "py-2 px-4 border-b"; th.innerText = header; headerRow.appendChild(th); }); thead.appendChild(headerRow); table.appendChild(thead); const tbody = document.createElement('tbody'); table.appendChild(tbody); const addRow = () => { const row = document.createElement('tr'); const nameInput = document.createElement('input'); nameInput.className = "border py-1 px-2"; const ageInput = document.createElement('input'); ageInput.className = "border py-1 px-2"; const occupationInput = document.createElement('input'); occupationInput.className = "border py-1 px-2"; const actionsTd = document.createElement('td'); const addButton = document.createElement('button'); addButton.innerText = 'Add'; addButton.className = "bg-blue-500 text-white py-1 px-2 ml-2"; addButton.onclick = () => { const newRow = document.createElement('tr'); newRow.innerHTML = `${nameInput.value} ${ageInput.value} ${occupationInput.value} `; tbody.appendChild(newRow); nameInput.value = ''; ageInput.value = ''; occupationInput.value = ''; }; actionsTd.appendChild(addButton); row.innerHTML = ` `; row.appendChild(actionsTd); tbody.appendChild(row); row.children[0].appendChild(nameInput); row.children[1].appendChild(ageInput); row.children[2].appendChild(occupationInput); }; const addRowButton = document.createElement('button'); addRowButton.innerText = 'Add Row'; addRowButton.className = "bg-green-500 text-white py-2 px-4 m-4"; addRowButton.onclick = addRow; app.appendChild(addRowButton); app.appendChild(table); }; createTable(); ```