Add material design theme

[marvin-bitterlich]

I would like to propose the addition of a material design theme.

A good library for this is http://materializecss.com/table.html

I can help implement this but it would really be helpful if you would hint me to where to look and add things.

Thanks in advance!

[Mottie]

Hi @Kostronor!

It looks like it would be very similar to the Bootstrap theme. The developer would add the classes needed to add borders, stripes and/or highlights. The theme is only necessary to add sort arrows.

To make a table responsive, the developer could use the reflow widget instead of adding the "responsive-table" class.

I'll see what I can do when I have some time this weekend, unless you beat me to it. 😉

[marvin-bitterlich]

Hey @Mottie

Tried altering the bootstrap theme a bit to get it to work but I did not succeed. It seems that bootstrap enforces fixed widths of columns and I did not found where to remove that.

I will wait for you to implement something that is not a hack 😉 and until then I will use the default theme with materialize classes.

Looking forward! 😄

[Herst]

I am using the Bootstrap theme and I have no problem with resizable widths in combination with the Resizable widget (where I set the resizable_widths setting for sensible defaults).

Besides, if you look at the dynamic CSS at https://getbootstrap.com/css/#tables you will see that the widths aren't fixed per-se.

[Mottie]

Here is a demo of what I have so far; let me know if it can be improved/modified to work better.

The issues I've encountered:

• There is no "previous" icon, so I added a .flip definition and flipped the play icon.
• The select is automatically hidden. It looks like the javascript is needed to restyle the select, so I had to include a "browser-default" class in the filter_cssFilter option to prevent it from being hidden.
• The pager buttons are huge... I didn't see an option for small buttons, just button and large button.
• Adding a "input-field" class to the filter row (it does wrap the inputs/select LOL), actually seems to break the desired action. The input turns white and the underline disappears. I guess I could just make the entire filter row white... I do miss the "x" inside the search input though.

[Mottie]

Here is the latest demo which includes the theme.materialize.css in the css panel. Once the next release is available, I'll link to the file in the documentation.

[marvin-bitterlich]

That looks really nice. Can't wait for the release! Thanks for the fix.