DataTable with virtual scroll missing horizontal row borders

[lminuti]

Step to reproduce

1. Open file TableDoc.vue
2. Transform the first grid in a Virtual grid
3. The border of the grid rows disappears

diff --git a/src/views/uikit/TableDoc.vue b/src/views/uikit/TableDoc.vue
index 5161fff..7b079e1 100644
--- a/src/views/uikit/TableDoc.vue
+++ b/src/views/uikit/TableDoc.vue
@@ -146,8 +146,10 @@ function calculateCustomerTotal(name) {
         <div class="font-semibold text-xl mb-4">Filtering</div>
         <DataTable
             :value="customers1"
-            :paginator="true"
             :rows="10"
+            scrollable
+            scrollHeight="400px"
+            :virtualScrollerOptions="{ itemSize: 46 }"
             dataKey="id"
             :rowHover="true"
             v-model:filters="filters1"

Workaround

Add the following style:

table.p-datatable-table {
  border-collapse: separate;
}

See also: https://github.com/primefaces/primevue/issues/6091