Can table me made responsive ?

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[X ] feature request
[ ] support request => Please do not submit support request here

Current behavior I have a table with 10 rows, displayed great on my site, but as my site should be mobile friendly I can’t get the table to look good when on mobile.

Expected behavior

I would like to have some of my column header text wrap and increass in hight, I would like to set which column will have such behavior. I would like my words to break as well.

In general I would like it to look good.

Reproduction of the problem

Take any of your demo, shrink the browser and see the issue.

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

Web responsiveness

Please tell us about your environment:

Google chrome, vs code, npm, .net

• Table version: 0.7.x

4.1.0

• Angular version: 2.0.x

2.42

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5] TS

[samarism]

The table examples at the: demo site do appear to be responsive.

The demo link uses the following configuration for the datatable:

<ngx-datatable class="material" [rows]="rows" [loadingIndicator]="loadingIndicator" [columns]="columns" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'"> </ngx-datatable>

However, on my local setup with the same configuration, the tables do not change their size at all. Anything I am missing here?

[PeterSawyer]

The ember mobile size looks great, love to see a mobile-first responsive web design come to this excellent datatable Austin.

My current workaround is to size with standard column and turn on the scroll bar when under 1200 pixels wide (smaller than BS large displays). But the column headers are not part of the scroll. 😦

View snipped: -

    <ngx-datatable [columnMode]="'standard'" [scrollbarH]="scrollBarHorizontal"
...

Component snippet

  scrollBarHorizontal = (window.innerWidth < 1200);

  constructor() {
    window.onresize = () => {
      this.scrollBarHorizontal = (window.innerWidth < 1200);
    };
  }

Love this component 😃 Peter