components/documents-table.js

class DocumentsTable extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        table {
          width: 100%;
          border-collapse: collapse;
          font-size: 0.875rem;
        }
        th, td {
          padding: 10px 12px;
          text-align: left;
          border-bottom: 1px solid #e5e7eb;
        }
        th {
          background-color: #f9fafb;
          font-weight: 600;
          color: #374151;
        }
        tr:hover {
          background-color: #f3f4f6;
        }
        .sample-notice {
          font-size: 0.75rem;
          color: #6b7280;
          margin-top: 8px;
        }
        .pagination {
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          align-items: center;
        }
        .pagination-button {
          padding: 6px 12px;
          border: 1px solid #e5e7eb;
          border-radius: 4px;
          background: white;
          cursor: pointer;
        }
        .pagination-button:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
        .file-size {
          font-family: monospace;
          text-align: right;
        }
        .processing-time {
          font-family: monospace;
          text-align: right;
        }
</style>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Doc ID</th>
            <th>File Type</th>
            <th>File Size</th>
            <th>Processing Time</th>
            <th>OCR Date</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>50420</td>
            <td>HOUSE_OVERSIGHT_022477</td>
            <td>image_ocr</td>
            <td>288 KB</td>
            <td>1.42s</td>
            <td>2025-11-16</td>
          </tr>
          <tr>
            <td>50421</td>
            <td>HOUSE_OVERSIGHT_022478</td>
            <td>image_ocr</td>
            <td>305 KB</td>
            <td>5.67s</td>
            <td>2025-11-16</td>
          </tr>
          <tr>
            <td>50426</td>
            <td>HOUSE_OVERSIGHT_022479</td>
            <td>image_ocr</td>
            <td>426 KB</td>
            <td>6.70s</td>
            <td>2025-11-16</td>
          </tr>
          <tr>
            <td>50428</td>
            <td>HOUSE_OVERSIGHT_022480</td>
            <td>image_ocr</td>
            <td>384 KB</td>
            <td>3.27s</td>
            <td>2025-11-16</td>
          </tr>
          <tr>
            <td>50430</td>
            <td>HOUSE_OVERSIGHT_022481</td>
            <td>image_ocr</td>
            <td>329 KB</td>
            <td>2.77s</td>
            <td>2025-11-16</td>
          </tr>
        </tbody>
      </table>
      <div class="sample-notice">Showing sample of 5 records. View full table for complete data.</div>
<div class="pagination">
        <button class="pagination-button" disabled>Previous</button>
        <span>Page 1 of 1002</span>
<button class="pagination-button">Next</button>
      </div>
`;
  }
}

customElements.define('documents-table', DocumentsTable);