Open MMrj9 opened 8 years ago
reactive-table has options to set classes on the table, th, tr, and td elements.
I see that materialize has a 'responsive-table' class. I've never used it, but you could try class: 'responsive-table'
in your settings and see if it helps.
Compatibility with table-responsive from bootstrap 3 ensure to have possibility of create div with class .table-responsive
before table. We need something like this:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
But if I type:
<div class="table-responsive">
{{> reactiveTable settings=settings}}
</div>
then div
contains not only table but also .datatable-editable-filter
and navigation of table. This is reason of scroll bar at the bottom of table
and in mobile phone it looks even worse.
Is there possibility of put div.table-responsive
exactly before table
tag allowing .datatable-editable-filter
and navigation of table to be out of this?
Now I am using this hack:
Template.nameOfTemplate.onRendered(function () {
$( "#idOfTableSetInSettings" ).wrap( "<div class='table-responsive'></div>" );
});
It works great. Docs about wrap
function:
I would like the tables to be responsive, but i don't know how could i make them so. Btw i'm using materialize. Any help would be appreciated.