Эх сурвалжийг харах

HUE-9485 [frontend] Add support for custom table cell components and data adapters in the HueTable Vue component

Johan Ahlen 5 жил өмнө
parent
commit
580004c00f

+ 5 - 0
desktop/core/src/desktop/js/components/HueTable.d.ts

@@ -14,9 +14,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { Component } from 'vue';
+
 export interface Column {
   label: string;
   key: string;
+  cellComponent?: Component;
+  cellProps?: (key: string, row: Row) => { [attr: string]: unknown };
+  adapter?: (key: string, row: Row) => string | number | boolean | undefined;
 }
 
 export type Row = { [key: string]: unknown };

+ 14 - 1
desktop/core/src/desktop/js/components/HueTable.vue

@@ -30,7 +30,20 @@
     </thead>
     <tbody>
       <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
-        <td v-for="(column, colIndex) in columns" :key="colIndex">{{ row[column.key] }}</td>
+        <td v-for="(column, colIndex) in columns" :key="colIndex">
+          <component
+            :is="column.cellComponent"
+            v-if="column.cellComponent"
+            v-bind="
+              column.cellProps
+                ? column.cellProps(column.key, row)
+                : { value: column.adapter ? column.adapter(column.key, row) : row[column.key] }
+            "
+          />
+          <template v-else>
+            {{ column.adapter ? column.adapter(column.key, row) : row[column.key] }}
+          </template>
+        </td>
       </tr>
     </tbody>
   </table>

+ 44 - 12
desktop/core/src/desktop/js/components/__snapshots__/HueTable.test.ts.snap

@@ -22,58 +22,90 @@ exports[`HueTable.vue should render a table 1`] = `
   <tbody>
     <tr>
       <td>
-        1
+        
+          1
+        
       </td>
       <td>
         
+          
+        
       </td>
       <td>
-        false
+        
+          false
+        
       </td>
       <td>
-        5
+        
+          5
+        
       </td>
     </tr>
     <tr>
       <td>
-        2
+        
+          2
+        
       </td>
       <td>
         
+          
+        
       </td>
       <td>
-        true
+        
+          true
+        
       </td>
       <td>
-        6
+        
+          6
+        
       </td>
     </tr>
     <tr>
       <td>
-        3
+        
+          3
+        
       </td>
       <td>
         
+          
+        
       </td>
       <td>
-        false
+        
+          false
+        
       </td>
       <td>
-        7
+        
+          7
+        
       </td>
     </tr>
     <tr>
       <td>
-        4
+        
+          4
+        
       </td>
       <td>
         
+          
+        
       </td>
       <td>
-        true
+        
+          true
+        
       </td>
       <td>
-        8
+        
+          8
+        
       </td>
     </tr>
   </tbody>