ITs quite a large table. For previews just do a small sample.

components/documents-table.js

@@ -1,3 +1,4 @@
+
 class DocumentsTable extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
@@ -6,9 +7,10 @@ class DocumentsTable extends HTMLElement {
         table {
           width: 100%;
           border-collapse: collapse;
+          font-size: 0.875rem;
         }
         th, td {
-          padding: 12px 16px;
+          padding: 10px 12px;
           text-align: left;
           border-bottom: 1px solid #e5e7eb;
         }
@@ -20,6 +22,28 @@ class DocumentsTable extends HTMLElement {
         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;
+        }
       </style>
       <table>
         <thead>
@@ -33,19 +57,31 @@ class DocumentsTable extends HTMLElement {
         <tbody>
           <tr>
             <td>1</td>
-            <td>Research Paper 1</td>
+            <td>Research Paper on Cognitive Behavior</td>
             <td>PDF</td>
             <td>2023-05-15</td>
           </tr>
           <tr>
             <td>2</td>
-            <td>Study Notes</td>
+            <td>Patient Session Notes</td>
             <td>DOCX</td>
             <td>2023-06-22</td>
           </tr>
+          <tr>
+            <td>3</td>
+            <td>Case Study Analysis</td>
+            <td>PDF</td>
+            <td>2023-07-10</td>
+          </tr>
         </tbody>
       </table>
-    `;
+      <div class="sample-notice">Showing sample of 3 records. View full table for complete data.</div>
+      <div class="pagination">
+        <button class="pagination-button" disabled>Previous</button>
+        <span>Page 1 of 14</span>
+        <button class="pagination-button">Next</button>
+      </div>
+`;
   }
 }