Responsive

[AlexBeggiato]

Integration with responsive plug-in of DataTables:
http://datatables.net/extensions/responsive/

[l-lin]

You can include the response feature by including the CSS and the JS and add the DataTable option like this:

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('responsive', true);

[melnikovkolya]

Hi Louis,

I did as suggested however - this results in a buggy behavior for me. I am wondering if that could be caused by some style conflict, or most likely the reason lies in the JS part.

For instance, in the full view of the table, I can see all columns no problem. As I start 'squeezing' the table - columns start [falling out/disappearing] from the table, instead of shrinking along with the table. Three images showing the above-described behavior are here

[l-lin]

You need to specify width="100%" in your table attribute:

<table datatable dt-options="dtOptions" dt-columns="dtColumns" width="100%">
...
</table>

[melnikovkolya]

Hi, thank you.

The table behaves somewhat better now - in a sense that it does remain within the parent element, however the rows do still get dropped. The following sequence of images shows that.

And I did set the width="100%":

<table datatable id="users"
                           dt-options="dtOptions"
                           dt-columns="dtColumns"
                           class="table table-striped table-bordered table-hover no-footer"
                           width="100%">
</table>

I also tried removing the class attribute, and nothing changed.

Or, is it the expected behavior, when a certain width is exceeded downwards?

[l-lin]

I think I don't quite understand your problem. Given your images, it looks like it's working as expected.
You are talking about the rows inside the table, right?

[melnikovkolya]

I guess that I am misunderstanding it altogether :) I was thinking more about the shrinking of columns. The image sequence shows that instead of 7 columns for the wide view of the table I am getting only two when the containing browser window dimensions are shrank.

[morfin]

Grid works, but notice the search field is not correctly resized. It ends up bigger than it should, on small screen (400px width).

Any idea?

I had the same search issue, but some custom CSS helped.

[LuciferZhang]

@l-lin
Responsive works well in Chrome when i use withOption('width", '10%') on tr-th and show image on tr-td.But firefox works bad! How to resolve it ?