Remove repetition from template

ee/app/assets/javascripts/dependencies/components/dependencies_table.vue

 <script>
+import { s__ } from '~/locale';
 import DependenciesTableRow from './dependencies_table_row.vue';
 
 export default {
@@ -16,23 +17,30 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      tableSections: [
+        { className: 'section-20', label: s__('Dependencies|Component') },
+        { className: 'section-15', label: s__('Dependencies|Version') },
+        { className: 'section-20', label: s__('Dependencies|Packager') },
+        { className: 'flex-grow-1', label: s__('Dependencies|Location') },
+      ],
+    };
+  },
 };
 </script>
 
 <template>
   <div>
     <div class="gl-responsive-table-row table-row-header text-2 bg-secondary-50 px-2" role="row">
-      <div class="table-section section-20" role="rowheader">
-        {{ s__('Dependencies|Component') }}
-      </div>
-      <div class="table-section section-15" role="rowheader">
-        {{ s__('Dependencies|Version') }}
-      </div>
-      <div class="table-section section-20" role="rowheader">
-        {{ s__('Dependencies|Packager') }}
-      </div>
-      <div class="table-section flex-grow-1" role="rowheader">
-        {{ s__('Dependencies|Location') }}
+      <div
+        v-for="(section, index) in tableSections"
+        :key="index"
+        class="table-section"
+        :class="section.className"
+        role="rowheader"
+      >
+        {{ section.label }}
       </div>
     </div>
 

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_table_spec.js.snap

@@ -14,7 +14,6 @@ exports[`DependenciesTable component given a list of dependencies (loaded) match
       Component
     
     </div>
-     
     <div
       class="table-section section-15"
       role="rowheader"
@@ -23,7 +22,6 @@ exports[`DependenciesTable component given a list of dependencies (loaded) match
       Version
     
     </div>
-     
     <div
       class="table-section section-20"
       role="rowheader"
@@ -32,7 +30,6 @@ exports[`DependenciesTable component given a list of dependencies (loaded) match
       Packager
     
     </div>
-     
     <div
       class="table-section flex-grow-1"
       role="rowheader"
@@ -66,7 +63,6 @@ exports[`DependenciesTable component given a list of dependencies (loading) matc
       Component
     
     </div>
-     
     <div
       class="table-section section-15"
       role="rowheader"
@@ -75,7 +71,6 @@ exports[`DependenciesTable component given a list of dependencies (loading) matc
       Version
     
     </div>
-     
     <div
       class="table-section section-20"
       role="rowheader"
@@ -84,7 +79,6 @@ exports[`DependenciesTable component given a list of dependencies (loading) matc
       Packager
     
     </div>
-     
     <div
       class="table-section flex-grow-1"
       role="rowheader"
@@ -120,7 +114,6 @@ exports[`DependenciesTable component given an empty list of dependencies matches
       Component
     
     </div>
-     
     <div
       class="table-section section-15"
       role="rowheader"
@@ -129,7 +122,6 @@ exports[`DependenciesTable component given an empty list of dependencies matches
       Version
     
     </div>
-     
     <div
       class="table-section section-20"
       role="rowheader"
@@ -138,7 +130,6 @@ exports[`DependenciesTable component given an empty list of dependencies matches
       Packager
     
     </div>
-     
     <div
       class="table-section flex-grow-1"
       role="rowheader"