primereact-sass-theme icon indicating copy to clipboard operation
primereact-sass-theme copied to clipboard

fix(DataTable): apply bottom border width in dataTable footer

Open KumJungMin opened this issue 5 months ago • 0 comments

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
}

KumJungMin avatar Sep 01 '24 12:09 KumJungMin