Ngx-datatable: Show/hide columns based on device width

[voslartomas]

[ ] 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
It's not possible to hide elements on different devices, like tablet or mobile.

Expected behavior
It should be possible to show/hide columns depending on widht of the device.

Reproduction of the problem

What is the motivation / use case for changing the behavior?
On mobile view is not enough space for so many columns like on desktop.

Please tell us about your environment:

• Table version: 0.7.0

• Angular version: 2.4

• Browser: [all]

• Language: [all]

[amcdnl]

Thanks for the suggestion, however, this is a implementation detail. This can be accomplished now quite easily, given the number of configurations I don't want to embed this type of logic in our implementation. Take care!

[voslartomas]

@amcdnl I have been trying to do this with flexShow for example, but it doesn't work on column component. How would you suggest, to achieve this??

[amcdnl]

Use a tool to get the media query and then adjust as needed.

[voslartomas]

@amcdnl But there is no identification on specific column, is there a way how to add ID or something? To column header and then to each column row...

[voslartomas]

@amcdnl Another thing is if you try to hide it just with css, you can't use flexwidth, it will just break the design. So you would need much more hacking. Are you sure, this shouldnt be there by design?

[amcdnl]

Why not use the prop attribute for identification?

[voslartomas]

Prop will be just in row, not in header, correct?

I can't see anything unique in there

<datatable-header-cell draggable="" long-press="" resizeable="" ng-reflect-drag-model="[object Object]" ng-reflect-resize-enabled="true" ng-reflect-sort-type="single" ng-reflect-column="[object Object]" ng-reflect-sort-ascending-icon="icon-down" ng-reflect-sort-descending-icon="icon-up" ng-reflect-header-height="50px" ng-reflect-sorts="" class="datatable-header-cell sortable resizeable" ng-reflect-class-name="datatable-header-cell sortable resizeable" title="Date" style="width: 276.667px; left: auto;">
</datatable-header-cell>

not even in row column

<datatable-body-cell class="datatable-body-cell sort-active" tabindex="-1" ng-reflect-row="[object Object]" ng-reflect-column="[object Object]" ng-reflect-row-height="auto" ng-reflect-class-name="datatable-body-cell" style="width: 276.667px; height: auto;">
  </datatable-body-cell>

[dylandrollut]

@amcdnl How would one use the prop attribute with a media query? Could you give an example please.

[nikoszs]

https://github.com/swimlane/ngx-datatable/issues/423#issuecomment-377068947