fix(#4074): correct striped with expandable row (#4080)

epicmaxco · Dec 8, 2023 · 825406c · 825406c
1 parent 7d7cc02
commit 825406c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 11 deletions.
diff --git a/packages/ui/src/components/va-data-table/VaDataTable.stories.ts b/packages/ui/src/components/va-data-table/VaDataTable.stories.ts
@@ -144,3 +144,33 @@ export const disableClientSideSorting: StoryFn = () => ({
   },
   template: '<VaDataTable v-model:sort-by="sortBy" :loading="loading" v-model:sorting-order="sortingOrder" :items="sortedItems" :columns="columns" disable-client-side-sorting />',
 })
+
+export const Striped = () => ({
+  components: { VaDataTable, VaPagination },
+  data: () => ({ columns, items }),
+
+  template: `
+  <VaDataTable :items="items" :columns="columns" striped />
+  `,
+})
+
+export const ExpandableRow = () => ({
+  components: { VaDataTable, VaPagination },
+  data: () => ({ columns: [...columns, { key: 'actions', width: 80 }], items }),
+
+  template: `
+  <VaDataTable :items="items" :columns="columns" striped>
+     <template #cell(actions)="{ row, isExpanded }">
+      <button
+        @click="row.toggleRowDetails()"
+      >
+        {{ isExpanded ? 'Hide': 'More info' }}
+      </button>
+    </template>
+
+    <template #expandableRow="{ rowData }">
+      {{ rowData }}
+    </template>
+  </VaDataTable>
+  `,
+})
diff --git a/packages/ui/src/components/va-data-table/VaDataTable.vue b/packages/ui/src/components/va-data-table/VaDataTable.vue
@@ -145,17 +145,16 @@
                     </slot>
                   </td>
                 </tr>
-                <tr
+                <td
                   v-if="row.isExpandableRowVisible"
-                  class="va-data-table__table-tr--expanded va-data-table__table-expanded-content"
+                  class="va-data-table__table-expanded-content"
+                  colspan="99999"
                 >
-                  <td :colspan="row.cells.length">
-                    <slot
-                      name="expandableRow"
-                      v-bind="row"
-                    />
-                  </td>
-                </tr>
+                  <slot
+                    name="expandableRow"
+                    v-bind="row"
+                  />
+                </td>
               </template>
             </transition-group>
 
@@ -559,7 +558,7 @@ export default defineComponent({
     &.striped {
       .va-data-table__table-tbody {
         .va-data-table__table-tr {
-          &:nth-child(even) {
+          &:nth-of-type(2n) {
             &:not(.selected) {
               td {
                 // Position relative doesn't work on tr in Safari

diff --git a/packages/ui/src/components/va-menu-list/VaMenuList.vue b/packages/ui/src/components/va-menu-list/VaMenuList.vue
@@ -134,7 +134,8 @@ export default defineComponent({
     line-height: unset;
   }
 
-  td:not(&__virtual-td) {
+  // Without & at the start, style will be applied globally
+  & td:not(&__virtual-td) {
     padding-top: calc(var(--va-menu-padding-y) / 2);
     padding-bottom: calc(var(--va-menu-padding-y) / 2);
   }