Primevue Datatable with Dynamic column and Column Grouping, Gridlines dissapearing on scroll down

Question

I'm using PrimeVue DataTable with dynamic column and column grouping.

When table is just loaded, the gridlines look fine, the column freeze, scrollable, all working as expected.

But as soon as I start scrolling down, the gridlines will show weird behavior, such as disappearing

below is my code snippet

any help is appreciated.

<DataTable
  v-if="crSummaryList.length > 0"
  scrollable
  scrollHeight="700px"
  showGridlines
  stripedRows
  :value="crSummaryList"
  paginator
  :rows="25"
  :rowsPerPageOptions="[25, 50, 75, 100]"
  tableStyle="min-width: 50rem; white-space: nowrap;"
  style="font-size: 13px"
>
                            <ColumnGroup type="header">
                                <Row>
                                    <Column v-for="col of colsListCom.filter(col => col.index < 23)" :key="col.field"
                                        :field="col.field" :header="col.header" :frozen="col.frozen" :rowspan="3"
                                        class="text-center">
                                    </Column>
                                    <!-- KK SCH AND AMT HEADER  -->
                                    <Column v-for="col of colsListCom.filter(col => col.index == 23)"
                                        style="min-width: 12rem" :header="'Current KK ' + currentKKPlanID" :rowspan="2"
                                        :colspan="2">
                                    </Column>
                                    <!-- DYNAMIC COLUMN HEADER -->
                                    <Column v-for="col of colsListDynamicHeaderCom" style="min-width: 12rem" :header="col"
                                        :colspan="4">
                                    </Column>
                                    <Column header="Total" :colspan="4" alignFrozen="right">
                                    </Column>
                                </Row>
                                <Row>
                                    <Column v-for="col of colsListDynamicHeaderPlanIDCom" style="min-width: 12rem"
                                        :header="col" :colspan="2"></Column>
                                    <Column :header="selectedPlanId" colspan="2" />
                                    <Column :header="selectedPlanIdToCompare" colspan="2" />
                                </Row>
                                <Row>
                                    <Column v-for="col of colsListCom.filter(col => col.index >= 23)" :key="col.field"
                                        :field="col.field" :frozen="col.frozen"
                                        :header="col.header.includes('Qty') ? 'Qty' : 'Amt'">
                                    </Column>
                                </Row>
                            </ColumnGroup>
                            <Column v-for="col of colsListCom" :key="col.field" :field="col.field" :header="col.header"
                                :frozen="col.frozen">
                                <template #body="slotProps">
                                    <div :class="col.header.toLowerCase().includes('amt') ? 'text-end' : ''">
                                    {{  
                                    !slotProps.data[col.header] ? slotProps.data[col.header]
                                    : col.header.toLowerCase().includes('amt') ? numberWithCommasAndDollarSign(slotProps.data[col.header])
                                    : col.header.toLowerCase().includes('qty') ? numberWithCommas(slotProps.data[col.header]) 
                                    : slotProps.data[col.header] 
                                }}
                                </div>
                                </template>
                            </Column>
                        </DataTable>

Answer 1

thanks to the link shared by Moritz Ringler

below is the solution

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

    .p-column-header-content {
        text-align: center;
        justify-content: center;
    }
}