Table CSS Improvements

[cagataycivici]

Describe the bug

• Table uses min-width: 100% with table-layout: fixed but min-width makes table-layout to auto so these two conflict.
• responsiveLayout should scroll by default instead of stack
• table-layout: auto should be the default instead
• responsive prop becomes obselete as table is responsive by default
• reimplement scrollable tables without flex
• Row span based grouping cannot be used in scrollable tables
• Since responsiveLayout is set to stacked, big tables can overflow without a scrollbar.

While on it, we should also make css more strict e.g.

.p-datatable table {}

should be;

.p-datatable-table {}

Otherwise nested tables get effected.

Breaking changes are;

• responsive prop is obselete has no effect.
• responsiveLayout is now defaults to scroll
• scrollDirection is now obselete
• autoLayout is obselete as table is based on auto layout now, tableStyle="table-layout:fixed" can be used for fixed.
• groupedheader and groupedfooter is not necessary anymore, header and footer templates can be used.

Environment

PrimeNG 14.2.0

Reproducer

No response

Angular version

14

PrimeNG version

14

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

all

Browser(s)

all

Steps to reproduce the behavior

No response

Expected behavior

No response

[eXpertise7]

@cagataycivici @cetincakiroglu test of v14.2.2 from developer that uses p-table:

How's that all of suddenly on individual (single column) and dynamic columns (generated dyncamically *ngFor let variable in template) setting any widths (either width, or max-width, ...) doesn't work properly as it did on v14.0.2 and before?

My table is trying to auto-fit columns by comparing text content probably. It ignores set up widths on either individual or either dynamic columns.

Why setting styles for width attributes or css class with width attributes doesn't work properly anymore, it gets set , as I can see on Inspector tab, but in the layout it's totally different situation.

<th [style]="{ width: '300px', 'max-width': '300px' }"

<td [style]="{width: '300px','max-width': '300px',}"

or

<th*ngFor="let column of columns$ | async" [style]="{ width: '200px' }"

<td *ngFor="let col of columns" [style]="{'min-width': '200px', width: '200px'}"

Table properties:

Thanks in advance. Any feedback would be helpful.

Kind regards,
Robert

[eXpertise7]

b3e7b35#diff-54f9fcc81f3c7d880cfe5f7ddd5dda1e60f15581a7ce88dd922b0586b1f259a1L2012

In the link above, flex attributes have been removed from the columns, and that after v14.2.2 update columns and don't work properly.

  .p-datatable-thead {
    display: block;

    tr {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
    }
  }

  .p-datatable-tbody {
    display: block;

    tr {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
    }

    td {
      display: flex;
      flex: 1 1 0;
      align-items: center;
    }
  }

After manually putting this code and setting manually style flex: 1 1 WIDTH_IN_PX on columns: what you guys had at v14.0.2 at my side stuff work normally again.

[mountpoint]

Fully agree with @eXpertise7. I also added this piece of code and my scrollable tables work normally again. Before this scroll in tables did't work.

@cagataycivici look at this again

[nicholas-ochoa]

@eXpertise7 THANK YOU! I realized my column widths were screwed up and ended up on this issue to try and see what I would need to change / fix and your snipper solved the problem nicely. One thing I did add (since I use footers) was this:

  .p-datatable-tfoot {
    display: block;

    tr {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
    }

    td {
      display: flex;
      flex: 1 1 0;
      align-items: center;
    }
  }

[yelhouti]

I tracked an issue after update to this commit.
We .p-table-wrapper overflow: auto when I have an autocomplete, dropdown... in the footer, it gets cropped and I need to append to body which is not ideal for accessibility. Any idea how to fix this ?