The only table in this is 'documents', but its not seeming to connect.

api/tables.json

@@ -0,0 +1,10 @@
+```json
+{
+  "tables": [
+    {
+      "table_name": "documents",
+      "table_schema": "Contains all document records with metadata and content"
+    }
+  ]
+}
+```

components/documents-table.js

@@ -0,0 +1,52 @@
+class DocumentsTable extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        table {
+          width: 100%;
+          border-collapse: collapse;
+        }
+        th, td {
+          padding: 12px 16px;
+          text-align: left;
+          border-bottom: 1px solid #e5e7eb;
+        }
+        th {
+          background-color: #f9fafb;
+          font-weight: 600;
+          color: #374151;
+        }
+        tr:hover {
+          background-color: #f3f4f6;
+        }
+      </style>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Title</th>
+            <th>Type</th>
+            <th>Created</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Research Paper 1</td>
+            <td>PDF</td>
+            <td>2023-05-15</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Study Notes</td>
+            <td>DOCX</td>
+            <td>2023-06-22</td>
+          </tr>
+        </tbody>
+      </table>
+    `;
+  }
+}
+
+customElements.define('documents-table', DocumentsTable);

index.html

@@ -68,15 +68,15 @@
 
                 <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                     <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
-                        <h2 class="text-lg font-semibold text-gray-800">Tables Preview</h2>
-                    </div>
+                            <h2 class="text-lg font-semibold text-gray-800">Documents Table</h2>
+</div>
                     <div class="divide-y divide-gray-200">
-                        <!-- Tables will be dynamically inserted here -->
-                    </div>
+                        <!-- Documents table will be dynamically inserted here -->
+</div>
                     <div id="loading" class="p-6 text-center text-gray-500">
                         <i data-feather="loader" class="animate-spin inline-block"></i>
-                        <span class="ml-2">Loading tables...</span>
-                    </div>
+                        <span class="ml-2">Loading documents...</span>
+</div>
 </div>
             </div>
         </div>
@@ -93,6 +93,7 @@
         });
     </script>
     <script src="script.js"></script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+    <script src="components/documents-table.js"></script>
+    <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

script.js

@@ -1,23 +1,20 @@
 
-// Mock database tables for demo
-const mockTables = [
-    { table_name: 'users', table_schema: 'Stores user account information' },
-    { table_name: 'sessions', table_schema: 'User login sessions' },
-    { table_name: 'experiments', table_schema: 'Research experiment data' },
-    { table_name: 'participants', table_schema: 'Study participants information' },
-    { table_name: 'results', table_schema: 'Experiment results data' }
+// Database tables
+const dbTables = [
+    { table_name: 'documents', table_schema: 'Stores all document records' }
 ];
-
-// Function to fetch tables from mock data
+// Function to fetch tables
 async function fetchTables() {
     try {
-        // Simulate network delay
-        await new Promise(resolve => setTimeout(resolve, 800));
-        return mockTables;
+        // Replace with your actual database connection logic
+        const response = await fetch('/api/tables');
+        if (!response.ok) throw new Error('Network response was not ok');
+        const data = await response.json();
+        return data.tables || dbTables; // Fallback to default if no tables returned
     } catch (error) {
         console.error('Error fetching tables:', error);
-        showError('Failed to fetch tables. Using demo data.');
-        return mockTables.slice(0, 3); // Return partial data on error
+        showError('Failed to fetch tables. Using default table.');
+        return dbTables;
     }
 }
 // Function to display tables in UI