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>

the issue is with border-collapse css, solved it, thank you very much! — kbdev
– kbdev, Commented Dec 26, 2023 at 12:46

kbdev · Accepted Answer · 2023-12-27 02:53:28Z

0

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;
    }
}

answered Dec 27, 2023 at 2:53

kbdev

196 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related