PLEDIPO/msme-manager-pro
0
1class CustomMsmeTable extends HTMLElement {2 constructor() {3 super();4 this.data = [];5 }6 7 setData(newData) {8 this.data = newData;9 this.render();10 }11 12 connectedCallback() {13 this.render();14 }15 16 render() {17 this.attachShadow({ mode: 'open' });18 this.shadowRoot.innerHTML = `19 <style>20 .table-container {21 overflow-x: auto;22 border-radius: 0.5rem;23 border: 1px solid #e5e7eb;24 }25 26 table {27 width: 100%;28 border-collapse: collapse;29 }30 31 th {32 background-color: #f3f4f6;33 color: #374151;34 font-weight: 600;35 text-align: left;36 padding: 0.75rem 1rem;37 border-bottom: 1px solid #e5e7eb;38 position: sticky;39 top: 0;40 cursor: pointer;41 user-select: none;42 }43 44 th:hover {45 background-color: #e5e7eb;46 }47 48 td {49 padding: 0.75rem 1rem;50 border-bottom: 1px solid #e5e7eb;51 color: #4b5563;52 }53 54 tr:nth-child(even) {55 background-color: #f9fafb;56 }57 58 tr:hover td {59 background-color: #f0fdf4;60 }61.actions {62 display: flex;63 gap: 0.5rem;64 }65 66 .action-btn {67 display: flex;68 align-items: center;69 justify-content: center;70 width: 1.75rem;71 height: 1.75rem;72 border-radius: 0.25rem;73 cursor: pointer;74 transition: background-color 0.2s;75 }76 77 .edit-btn {78 background-color: #dbeafe;79 color: #1d4ed8;80 }81 82 .edit-btn:hover {83 background-color: #bfdbfe;84 }85 86 .delete-btn {87 background-color: #fee2e2;88 color: #dc2626;89 }90 91 .delete-btn:hover {92 background-color: #fecaca;93 }94 95 .empty-state {96 padding: 2rem;97 text-align: center;98 color: #6b7280;99 }100 101 @media (max-width: 768px) {102 th, td {103 padding: 0.5rem;104 font-size: 0.875rem;105 }106 }107 </style>108 109 <div class="table-container">110 <table>111 <thead>112 <tr>113 <th>MSME ID</th>114 <th>Business Name</th>115 <th>Owner</th>116 <th>DTI Reg No</th>117 <th>Sector</th>118 <th>Location</th>119 <th>Category</th>120 <th>Actions</th>121 </tr>122 </thead>123 <tbody>124 ${this.data.length > 0 ? this.data.map(item => `125 <tr>126 <td>${item.id}</td>127 <td>${item.businessName}</td>128 <td>${item.owner}</td>129 <td>${item.dtiRegistration || '-'}</td>130 <td>${item.sector}</td>131 <td>${item.municipality}, ${item.barangay}</td>132 <td>${item.category}</td>133<td>134 <div class="actions">135 <div class="action-btn edit-btn" data-id="${item.id}">136 <i data-feather="edit-2" width="14" height="14"></i>137 </div>138 <div class="action-btn delete-btn" data-id="${item.id}">139 <i data-feather="trash-2" width="14" height="14"></i>140 </div>141 </div>142 </td>143 </tr>144 `).join('') : `145 <tr>146 <td colspan="9" class="empty-state">147 <div class="flex flex-col items-center justify-center py-8">148 <i data-feather="folder" class="text-gray-400 w-12 h-12 mb-2"></i>149 <p class="text-gray-500">No MSMEs found</p>150 <p class="text-gray-400 text-sm mt-1">Add a new MSME or adjust your search</p>151 </div>152 </td>153 </tr>154 `}155 </tbody>156 </table>157 </div>158 `;159 160 // Add event listeners for action buttons161 this.shadowRoot.querySelectorAll('.edit-btn').forEach(btn => {162 btn.addEventListener('click', (e) => {163 const id = e.currentTarget.getAttribute('data-id');164 this.dispatchEvent(new CustomEvent('edit-msme', { 165 detail: { id },166 bubbles: true,167 composed: true 168 }));169 });170 });171 172 this.shadowRoot.querySelectorAll('.delete-btn').forEach(btn => {173 btn.addEventListener('click', (e) => {174 const id = e.currentTarget.getAttribute('data-id');175 this.dispatchEvent(new CustomEvent('delete-msme', { 176 detail: { id },177 bubbles: true,178 composed: true 179 }));180 });181 });182 183 // Replace feather icons184 if (window.feather) {185 window.feather.replace({ 186 width: '1rem', 187 height: '1rem' 188 });189 }190 }191}192 193customElements.define('custom-msme-table', CustomMsmeTable);