From 85a68bebb9ba3ec4883b24884e31bb889f3ce6de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pete=20An=C3=B8ther?= <develop.pit@gmail.com>
Date: Fri, 19 Jan 2024 12:32:53 -0300
Subject: [PATCH] EZQMS-529: Added support for `grow` and new `align` display
 options in `Table` (#4389)

Signed-off-by: Petr Vyazovetskiy <develop.pit@gmail.com>
---
 packages/theme/styles/components.scss              | 12 +++++++++++-
 plugins/view-resources/src/components/Table.svelte | 13 ++++++++++---
 plugins/view/src/index.ts                          |  1 +
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 1937dada3c..5efd187f30 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -877,7 +877,7 @@
       font-size: 0.75rem;
     }
     .label {
-      margin-bottom: 0rem;
+      margin-bottom: 0;
     }
   }
 }
@@ -915,6 +915,16 @@
     }
     &:hover .antiTable-cells__checkCell { visibility: visible; }
     .checkall { visibility: visible; }
+
+    &.align-left .antiTable-cells { justify-content: start; }
+    &.align-center .antiTable-cells { justify-content: center; }
+    &.align-right .antiTable-cells { justify-content: end; }
+  }
+
+  td {
+    &.align-left { text-align: left; }
+    &.align-center { text-align: center; }
+    &.align-right { text-align: right; }
   }
 
   &.editable {
diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte
index 53209e578c..4b524203c9 100644
--- a/plugins/view-resources/src/components/Table.svelte
+++ b/plugins/view-resources/src/components/Table.svelte
@@ -80,6 +80,7 @@
   $: lookup = buildConfigLookup(hierarchy, _class, config, options?.lookup)
 
   let _sortKey = prefferedSorting
+  let userSorting = false
   $: if (!userSorting) {
     _sortKey = prefferedSorting
   }
@@ -87,8 +88,6 @@
   let sortOrder = SortingOrder.Descending
   let loading = 0
 
-  let userSorting = false
-
   let objects: Doc[] = []
   let gtotal: number = 0
   let total: number = 0
@@ -339,8 +338,12 @@
           {/if}
           {#each model as attribute}
             <th
+              class:w-full={attribute.displayProps?.grow === true}
               class:sortable={attribute.sortingKey}
               class:sorted={attribute.sortingKey === _sortKey}
+              class:align-left={attribute.displayProps?.align === 'left'}
+              class:align-center={attribute.displayProps?.align === 'center'}
+              class:align-right={attribute.displayProps?.align === 'right'}
               on:click={() => {
                 changeSorting(attribute.sortingKey)
               }}
@@ -416,7 +419,11 @@
             {/if}
             {#if row < rowLimit}
               {#each model as attribute, cell}
-                <td>
+                <td
+                  class:align-left={attribute.displayProps?.align === 'left'}
+                  class:align-center={attribute.displayProps?.align === 'center'}
+                  class:align-right={attribute.displayProps?.align === 'right'}
+                >
                   <div class:antiTable-cells__firstCell={!cell}>
                     <!-- {getOnChange(object, attribute) !== undefined} -->
                     <svelte:component
diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts
index 797b563c92..2be9d026d9 100644
--- a/plugins/view/src/index.ts
+++ b/plugins/view/src/index.ts
@@ -583,6 +583,7 @@ export interface DisplayProps {
   key?: string
   excludeByKey?: string
   fixed?: 'left' | 'right' // using for align items in row
+  align?: 'left' | 'right' | 'center'
   suffix?: boolean
   optional?: boolean
   compression?: boolean