Spaces:
Running
Running
Tôi đang cần app giải quyết vấn đề dùng để cải thiện nhìn đẹp bảng giao data nhằm kiểm soát data giao cho nhân viên Tôi có 2 kiểu người dùng là admin và sale có các chức năng như là thêm, sửa, xóa, hiển thị, lọc trùng dữ liệu Các trường cơ bản là số điện thoại là duy nhất, tên khách hàng, link facebook, ngày, báo cáo lần 1, lần 2, lần 3 đây là mô tả cơ bản của tôi là như vậy
159f0e1 verified | class DataTable extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 1rem 0; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.1); | |
| } | |
| th, td { | |
| padding: 12px 15px; | |
| text-align: left; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| th { | |
| background-color: #4CAF50; | |
| color: white; | |
| position: sticky; | |
| top: 0; | |
| } | |
| tr:hover { | |
| background-color: #f5f5f5; | |
| } | |
| .actions { | |
| display: flex; | |
| gap: 5px; | |
| } | |
| button { | |
| padding: 5px 10px; | |
| border: none; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| } | |
| .edit-btn { | |
| background-color: #2196F3; | |
| color: white; | |
| } | |
| .delete-btn { | |
| background-color: #f44336; | |
| color: white; | |
| } | |
| .filter-btn { | |
| background-color: #ff9800; | |
| color: white; | |
| } | |
| .search-container { | |
| margin-bottom: 20px; | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .add-btn { | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 8px 16px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| } | |
| input[type="text"] { | |
| padding: 8px; | |
| width: 300px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| } | |
| </style> | |
| <div class="search-container"> | |
| <input type="text" placeholder="Search..."> | |
| <button class="filter-btn">Filter Duplicates</button> | |
| <button class="add-btn" id="addCustomerBtn">Add Customer</button> | |
| </div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Phone</th> | |
| <th>Customer Name</th> | |
| <th>Facebook</th> | |
| <th>Date</th> | |
| <th>Report 1</th> | |
| <th>Report 2</th> | |
| <th>Report 3</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Data will be inserted here --> | |
| </tbody> | |
| </table> | |
| `; | |
| } | |
| } | |
| customElements.define('data-table', DataTable); |