Add temporary width control to avoid flickering when resorting

galaxyproject · Oct 20, 2023 · 510eaf7 · 510eaf7
1 parent bb54ead
commit 510eaf7
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue
@@ -170,7 +170,11 @@ watch(operationMessage, () => {
                 </th>
             </thead>
             <tr v-for="(rowData, rowIndex) in gridData" :key="rowIndex" :class="{ 'grid-dark-row': rowIndex % 2 }">
-                <td v-for="(fieldEntry, fieldIndex) in gridConfig.fields" :key="fieldIndex" class="px-2 py-3">
+                <td
+                    v-for="(fieldEntry, fieldIndex) in gridConfig.fields"
+                    :key="fieldIndex"
+                    class="px-2 py-3"
+                    :style="{ width: fieldEntry.width }">
                     <GridOperations
                         v-if="fieldEntry.type == 'operations'"
                         :title="rowData.title"

diff --git a/client/src/components/Grid/configs/types.ts b/client/src/components/Grid/configs/types.ts
@@ -31,6 +31,7 @@ export interface FieldOperations {
     key: string;
     title: string;
     operations: Array<Operation>;
+    width?: string;
 }
 
 export type FieldKeyHandler = (data: RowData) => void;

diff --git a/client/src/components/Grid/configs/visualizations.js b/client/src/components/Grid/configs/visualizations.js
@@ -20,6 +20,7 @@ export const VisualizationsGrid = {
             title: "Title",
             key: "title",
             type: "operations",
+            width: "40%",
             operations: [
                 {
                     title: "Open",