From ab9a5b8009ab0696dfea2b43b8b243ae36ce068b Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 17 Oct 2024 10:01:49 +0200
Subject: [PATCH 1/4] chore: align tailwind tables with ui design

---
 apps/tailwind-components/assets/css/main.css  |   1 +
 .../components/table/TableEMX2.vue            | 112 +++++++++---------
 apps/tailwind-components/tailwind.config.js   |   1 +
 apps/ui/pages/[schema]/[table]/index.vue      |  27 ++---
 4 files changed, 67 insertions(+), 74 deletions(-)

diff --git a/apps/tailwind-components/assets/css/main.css b/apps/tailwind-components/assets/css/main.css
index f671535d3f..331897c4b2 100644
--- a/apps/tailwind-components/assets/css/main.css
+++ b/apps/tailwind-components/assets/css/main.css
@@ -96,6 +96,7 @@
     --backgroud-color-tab-active: var(--color-blue-500);
     --background-color-disabled: var(--color-gray-200);
     --background-color-invalid: var(--color-red-200);
+    --background-color-table: var(--color-white);
 
     --text-color-button-primary: var(--color-gray-900);
     --text-color-button-primary-hover: var(--color-gray-900);
diff --git a/apps/tailwind-components/components/table/TableEMX2.vue b/apps/tailwind-components/components/table/TableEMX2.vue
index 5f1c398382..0b851a62df 100644
--- a/apps/tailwind-components/components/table/TableEMX2.vue
+++ b/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,61 @@ 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">
+      <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"
+                @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 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)"
diff --git a/apps/tailwind-components/tailwind.config.js b/apps/tailwind-components/tailwind.config.js
index 1c94b81087..241a0c066d 100644
--- a/apps/tailwind-components/tailwind.config.js
+++ b/apps/tailwind-components/tailwind.config.js
@@ -152,6 +152,7 @@ module.exports = {
         "tab-active": "var(--backgroud-color-tab-active)",
         "disabled": "var(--background-color-disabled)",
         "invalid": "var(--background-color-invalid)",
+        "table": "var(--background-color-table)",
       }),
       textColor: ({ theme }) => ({
         "button-primary": "var(--text-color-button-primary)",
diff --git a/apps/ui/pages/[schema]/[table]/index.vue b/apps/ui/pages/[schema]/[table]/index.vue
index 6d82a52b8f..1a10b79413 100644
--- a/apps/ui/pages/[schema]/[table]/index.vue
+++ b/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>

From 944f5c1d47ea71fa8cf0e88daef8ebc20a5a0a70 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Fri, 18 Oct 2024 14:10:03 +0200
Subject: [PATCH 2/4] tweaks for last row, table with rounded bottom corners

---
 apps/tailwind-components/components/table/TableEMX2.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/tailwind-components/components/table/TableEMX2.vue b/apps/tailwind-components/components/table/TableEMX2.vue
index 0b851a62df..459addb7a1 100644
--- a/apps/tailwind-components/components/table/TableEMX2.vue
+++ b/apps/tailwind-components/components/table/TableEMX2.vue
@@ -66,7 +66,7 @@ function handlePagingRequest(page: number) {
   </div>
 
   <div class="overflow-auto rounded-b-50px">
-    <div class="overflow-x-auto overscroll-x-contain bg-table rounded-t-3px">
+    <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>
@@ -103,7 +103,7 @@ function handlePagingRequest(page: number) {
             </th>
           </tr>
         </thead>
-        <tbody class="mb-3">
+        <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"

From be4274058f8c451ca34afcfb58736307d30a0443 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Fri, 18 Oct 2024 14:23:56 +0200
Subject: [PATCH 3/4] format

---
 apps/tailwind-components/components/table/TableEMX2.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/tailwind-components/components/table/TableEMX2.vue b/apps/tailwind-components/components/table/TableEMX2.vue
index 459addb7a1..141d003024 100644
--- a/apps/tailwind-components/components/table/TableEMX2.vue
+++ b/apps/tailwind-components/components/table/TableEMX2.vue
@@ -66,7 +66,9 @@ function handlePagingRequest(page: number) {
   </div>
 
   <div class="overflow-auto rounded-b-50px">
-    <div class="overflow-x-auto overscroll-x-contain bg-table rounded-t-3px pb-6">
+    <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>
@@ -103,7 +105,9 @@ function handlePagingRequest(page: number) {
             </th>
           </tr>
         </thead>
-        <tbody class="mb-3 [&_tr:last-child_td]:border-none [&_tr:last-child_td]:mb-5">
+        <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"

From c7d705d77c86022526d9be3c2b07199a8ebea1b2 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Mon, 21 Oct 2024 09:20:56 +0200
Subject: [PATCH 4/4] improve column header style

---
 apps/tailwind-components/assets/css/main.css            | 1 +
 apps/tailwind-components/components/table/TableEMX2.vue | 2 +-
 apps/tailwind-components/pages/Styles.other.vue         | 3 +++
 apps/tailwind-components/tailwind.config.js             | 1 +
 4 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/tailwind-components/assets/css/main.css b/apps/tailwind-components/assets/css/main.css
index 58cc303c37..12edb81d33 100644
--- a/apps/tailwind-components/assets/css/main.css
+++ b/apps/tailwind-components/assets/css/main.css
@@ -145,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);
diff --git a/apps/tailwind-components/components/table/TableEMX2.vue b/apps/tailwind-components/components/table/TableEMX2.vue
index 141d003024..1bcdf6f8a8 100644
--- a/apps/tailwind-components/components/table/TableEMX2.vue
+++ b/apps/tailwind-components/components/table/TableEMX2.vue
@@ -83,7 +83,7 @@ function handlePagingRequest(page: number) {
               scope="col"
             >
               <button
-                class="overflow-ellipsis whitespace-nowrap overflow-hidden hover:cursor-pointer"
+                class="overflow-ellipsis whitespace-nowrap overflow-hidden hover:cursor-pointer text-table-column-header text-body-base capitalize"
                 @click="handleSortRequest(column.id)"
               >
                 {{ column.label }}
diff --git a/apps/tailwind-components/pages/Styles.other.vue b/apps/tailwind-components/pages/Styles.other.vue
index d74e82b8e1..70b575e929 100644
--- a/apps/tailwind-components/pages/Styles.other.vue
+++ b/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>
diff --git a/apps/tailwind-components/tailwind.config.js b/apps/tailwind-components/tailwind.config.js
index f6aedd3a19..557c194c39 100644
--- a/apps/tailwind-components/tailwind.config.js
+++ b/apps/tailwind-components/tailwind.config.js
@@ -198,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)",