primereact-sass-theme
primereact-sass-theme copied to clipboard
fix(DataTable): apply bottom border width in dataTable footer
Defect Fixes
- issue: https://github.com/primefaces/primereact/issues/7080
- When the
footerColumnGroup
in a dataTable is shorter than the total number of columns, - the border width is not applied to some columns.
How to Resolve
- Previously, the td styles at the top of the footer were adjusted based on whether the footer was present.
- However, when the length of the footer's columns was shorter than the total number of columns, some td elements did not receive the correct border styles.
- To resolve this, I removed the code that modified the td styles based on the presence of the footer:
// .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
// border-width: 0 0 0 1px;
// }
// .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
// border-width: 0 1px 0 1px;
// }
- Now, instead of changing styles based on the footer's presence, I apply a consistent border-width to all td elements.
- When the footer is present, I specifically set the border styles for the td elements in the footer:
.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
// border-width: 1px 0 1px 1px;
border-width: 0 0 1px 1px; // updated
}
.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
// border-width: 1px 1px 1px 1px;
border-width: 0 1px 1px 1px; // updated
}