Ngx-datatable: All columns collapse when resizing the browser window.

[benjamincharity]

I'm submitting a ...

• [x] bug report

Current behavior

• Chrome (on 2.0.0 or 2.1.1): When the window is resized, the column layout collapses.
• FF/Safari (on 2.0.0): When the window is resized, the column layout collapses.
• FF/Safari (on 2.1.1): Columns are collapsed on page load.

Expected behavior

The table should retain it's columns as it is resized (always filling the width of it's parent).

Reproduction of the problem

I couldn't get the suggested Plunker link working so I'm posting a gif..

What is the motivation / use case for changing the behavior?

A user should be able to resize the browser window as the table expands/contracts while retaining columns.

Please tell us about your environment:

• NPM / OSX / Karma / angular-cli

*Table version:

• Bug present on 2.0.0 or 2.1.1 (didn't test 2.1.0)
• Not present on previous 1.x.x versions

*Angular version: 2.2.4

*Browser:

• Chrome
• In Firefox and Safari it seems that the layout bug presents on load; before resizing.

*Language: TypeScript 2.1.1

[amcdnl]

Ugh, I just tried to fix some bugs around this apparently i made more :(

Can you make a demo of this in plunkr, it would be heplful cuz I didn't see the demos doing it.

[amcdnl]

Plz retry in 2.1.2

[benjamincharity]

Sorry for the delay.. been buried at work.

Upgraded to the latest on master but am now getting another error that is blocking me from testing the column collapse.

Error in ./DatatableComponent class DatatableComponent - inline template:15:8 caused by: Cannot read property 'length' of undefined

Which points to:

Quick outline of my code:

TypeScript

export class ConversationsComponent implements OnInit {
    private tableColumns: any[];
    public newConversations: Conversation[] = [];
    public defaultTableSort: any[] = [
      {
        prop: 'modifiedAt',
        dir: 'asc',
      },
    ];

    ngOnInit() {
        this.tableColumns = [
            {
                prop: 'flags',
                flexGrow: 1,
                draggable: false,
                resizeable: false,
            },
            ... // more columns...
        ];


        // Get the data passed in from the route resolves
        this.route.data.subscribe((data: any) => {
            this.newConversations = data.newConversations;
        });
    }

    viewConversation(event) {
        //...
    }
}

HTML

<swui-datatable
  #newDatatable
  class="material  table  striped"
  [rows]="newConversations"
  [sorts]="defaultTableSort"
  [columns]="tableColumns"
  [columnMode]="'flex'"
  [headerHeight]="50"
  [footerHeight]="0"
  [rowHeight]="50"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [loadingIndicator]="!newConversations"
  [selected]="selected"
  [selectionType]="'single'"
  (select)='viewConversation($event)'
></swui-datatable>

[amcdnl]

Fixed in 2.2.0 the above issue. Can u confirm the first logged one?

[benjamincharity]

Hey @amcdnl, I'm not seeing a 2.2.0 release on GH or on NPM..am I missing it somehow?

[amcdnl]

I removed all the private variables, sadly AoT is not outputting files now. Logged a bug for it, maybe you have some ideas.

[benjamincharity]

Alright, on 2.2.0 I do not see the collapsing issue on standard tables! 🎊

I _do_ still see the issue when a table is inside @angular/material tabs. But since it is only happening when inside of another component I think we can consider this solved.

---

I haven't dealt with AoT any yet (that need is fast approaching in my current project) so I'm not sure I will be much help there. 😞

---

There's definitely a reason I don't want to roll my own datatable, so I appreciate how much time is needed to get something like this working well for everyone's specific needs as a single person. Thanks for cranking out fixes so quickly!

[benjamincharity]

@amcdnl One last note... it's a long shot.. but the @angular/material guys just ran into a AoT bug with webpack concerning export * which was apparently breaking webpack's module loading. I know this lib uses export * also, so in case it's helpful https://github.com/angular/material2/issues/2123#issuecomment-265913577

(no solution listed yet, but I'm sure one is underway)

[benjamincharity]

Update

In case anyone else comes across this looking for a solution:

• a) On load, the datatable layout is broken
• b) Switching tabs, fixes the layout
• c) Resizing the window breaks the layout again
• d) After a resize, switching tabs no longer fixes the layout

Example:

Current workaround

• Set the initially selected tab to one that _isn't_ the first one (so if the first tab should be shown first, _initially_ set the second tab as the default tab.
• Then in your ngOnInit method set a timeout for 100ms and dynamically set the 1st tab as the selected tab.

export class YourComponent implements OnInit {
    // I really want the tab index of `0` to be shown initially, but we default to the 2nd tab
    public currentTabIndex = 1;

    ngOnInit() {
            setTimeout(() => {
                // This will move to the first tab which will have a correct layout now
                this.currentTabIndex = 0;
            }, 100);
    }
}

<md-tab-group
  md-stretch-tabs
  flex
  [selectedIndex]="currentTabIndex"  <!-- this is what we are changing in ngOnInit -->
  (selectChange)="tabSelected($event)"
>
</md-tab-group>

Note: Dynamically setting the active tab doesn't work until @angular/material: 2.0.0-alpha.11-2

[furqanaziz]

Did anybody found any workaround or fix to this?

[arturtupiassu]

Any lucky, guys? I'm stuck with the same problem ...