chore: align tailwind tables with ui design

apps/tailwind-components/assets/css/main.css

@@ -98,6 +98,8 @@
     --background-color-invalid: var(--color-red-200);
     --background-color-input: var(--color-white);
     --background-color-input-checked: var(--color-yellow-500);
+    --background-color-table: var(--color-white);
+
 
     --text-color-button-primary: var(--color-gray-900);
     --text-color-button-primary-hover: var(--color-gray-900);
@@ -143,6 +145,7 @@
     --text-color-pagination-input: var(--color-blue-800);
     --text-color-pagination-hover: var(--color-white);
     --text-color-footer-link: var(--color-yellow-500);
+    --text-color-table-column-header: var(--color-gray-600);
 
     --text-color-invalid: var(--color-red-500);
     --text-color-valid: var(--color-green-800);

apps/tailwind-components/components/table/TableEMX2.vue

@@ -55,7 +55,7 @@ function handlePagingRequest(page: number) {
 }
 </script>
 <template>
-  <div class="flex">
+  <div class="flex pb-[30px]">
     <FilterSearch
       class="w-2/5"
       :modelValue="settings.search"
@@ -64,67 +64,65 @@ function handlePagingRequest(page: number) {
     >
     </FilterSearch>
   </div>
-  <div class="overflow-x-auto overscroll-x-contain">
-    <table class="text-left table-fixed w-full">
-      <caption class="caption-bottom pt-8 text-left">
-        <span class="sr-only">{{ tableId }}</span>
-        Showing
-        {{
-          rows.length
-        }}
-        of
-        {{
-          count
-        }}
-      </caption>
-      <thead>
-        <tr>
-          <th
-            v-for="column in columns"
-            class="py-2.5 px-2.5 border-b border-gray-200 first:pl-0 last:pr-0 sm:first:pl-2.5 sm:last:pr-2.5 text-left w-64"
-            :ariaSort="
-              settings.orderby.column === column.id
-                ? mgAriaSortMappings[settings.orderby.direction]
-                : 'none'
-            "
-            scope="col"
-          >
-            <button
-              class="overflow-ellipsis whitespace-nowrap overflow-hidden hover:cursor-pointer"
-              @click="handleSortRequest(column.id)"
+
+  <div class="overflow-auto rounded-b-50px">
+    <div
+      class="overflow-x-auto overscroll-x-contain bg-table rounded-t-3px pb-6"
+    >
+      <table class="text-left table-fixed w-full">
+        <thead>
+          <tr>
+            <th
+              v-for="column in columns"
+              class="py-2.5 px-2.5 border-b border-gray-200 first:pl-0 last:pr-0 sm:first:pl-2.5 sm:last:pr-2.5 text-left w-64"
+              :ariaSort="
+                settings.orderby.column === column.id
+                  ? mgAriaSortMappings[settings.orderby.direction]
+                  : 'none'
+              "
+              scope="col"
             >
-              {{ column.label }}
-              <ArrowUp
-                v-if="
-                  column.id === settings.orderby.column &&
-                  settings.orderby.direction === 'ASC'
-                "
-                class="w-4 h-4 inline-block"
-              />
-              <ArrowDown
-                v-if="
-                  column.id === settings.orderby.column &&
-                  settings.orderby.direction === 'DESC'
-                "
-                class="w-4 h-4 inline-block"
-              />
-            </button>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="row in rows">
-          <TableCellTypesEMX2
-            v-for="column in columns"
-            :scope="column.key === 1 ? 'row' : null"
-            :metaData="column"
-            :data="row[column.id]"
-          />
-        </tr>
-      </tbody>
-    </table>
+              <button
+                class="overflow-ellipsis whitespace-nowrap overflow-hidden hover:cursor-pointer text-table-column-header text-body-base capitalize"
+                @click="handleSortRequest(column.id)"
+              >
+                {{ column.label }}
+                <ArrowUp
+                  v-if="
+                    column.id === settings.orderby.column &&
+                    settings.orderby.direction === 'ASC'
+                  "
+                  class="w-4 h-4 inline-block"
+                />
+                <ArrowDown
+                  v-if="
+                    column.id === settings.orderby.column &&
+                    settings.orderby.direction === 'DESC'
+                  "
+                  class="w-4 h-4 inline-block"
+                />
+              </button>
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="mb-3 [&_tr:last-child_td]:border-none [&_tr:last-child_td]:mb-5"
+        >
+          <tr v-for="row in rows">
+            <TableCellTypesEMX2
+              v-for="column in columns"
+              :scope="column.key === 1 ? 'row' : null"
+              :metaData="column"
+              :data="row[column.id]"
+            />
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
+
   <Pagination
+    class="pt-[30px] pb-[30px]"
     :current-page="settings.page"
     :totalPages="Math.ceil(count / settings.pageSize)"
     @update="handlePagingRequest($event)"

apps/tailwind-components/pages/Styles.other.vue

@@ -313,6 +313,9 @@
     <li>
       <ColorTile color="footer-link" type="text" />
     </li>
+    <li>
+      <ColorTile color="table-column-header" type="text" />
+    </li>
     <li>
       <ColorTile color="invalid" type="text" />
     </li>

apps/tailwind-components/tailwind.config.js

@@ -153,6 +153,7 @@ module.exports = {
         "disabled": "var(--background-color-disabled)",
         "invalid": "var(--background-color-invalid)",
         "input": "var(--background-color-input)",
+        "table": "var(--background-color-table)",
       }),
       textColor: ({ theme }) => ({
         "button-primary": "var(--text-color-button-primary)",
@@ -197,6 +198,7 @@ module.exports = {
         "pagination-input": "var(--text-color-pagination-input)",
         "pagination-hover": "var(--text-color-pagination-hover)",
         "footer-link": "var(--text-color-footer-link)",
+        "table-column-header": "var(--text-color-table-column-header)",
         "invalid": "var(--text-color-invalid)",
         "valid": "var(--text-color-valid)",
         "disabled": "var(--text-color-disabled)",

apps/ui/pages/[schema]/[table]/index.vue

@@ -44,7 +44,7 @@ const offset = computed(
   () => (currentPage.value - 1) * tableSettings.value.pageSize
 );
 
-const { data, status, error } = await useLazyAsyncData(
+const { data, error } = await useLazyAsyncData(
   "table explorer data",
   async () => {
     const metaData = fetchTableMetadata(schemaId, tableId);
@@ -103,19 +103,16 @@ const current = computed(
         <BreadCrumbs :align="'left'" :crumbs="crumbs" :current="current" />
       </template>
     </PageHeader>
-
-    <ContentBlock>
-      <div v-if="status === 'pending'">Loading...</div>
-      <div v-if="error">Error: {{ error }}</div>
-      <!-- <pre v-if="data">{{ tableMetaData }}</pre> -->
-      <!-- <pre>{{ tableData}}</pre> -->
-      <TableEMX2
-        :columns="dataColumns"
-        :rows="rows"
-        :count="numberOfRows"
-        :settings="tableSettings"
-        @update:settings="handleSettingsUpdate"
-      />
-    </ContentBlock>
+    <div v-if="error">Error: {{ error }}</div>
+    <!-- <pre v-if="data">{{ tableMetaData }}</pre> -->
+    <!-- <pre>{{ tableData}}</pre> -->
+    <TableEMX2
+      :table-id="tableId"
+      :columns="dataColumns"
+      :rows="rows"
+      :count="numberOfRows"
+      :settings="tableSettings"
+      @update:settings="handleSettingsUpdate"
+    />
   </Container>
 </template>