search

GwtMaterialDesign / gwt-material-table

A complex table component designed for the material design specifications
https://gwtmaterialdesign.github.io/gmd-table-demo/
Apache License 2.0
27 stars 31 forks source link

MaterialTable - Solution for Mobile view #134

Closed kevzlou7979 closed 6 years ago

kevzlou7979 commented 6 years ago

Here's I've got in my RnD for Responsive DataTable. Feel free to discuss and analyze the benefits of this codepen.

https://codepen.io/zavoloklom/pen/IGkDz?editors=1010

kevzlou7979 commented 6 years ago

Found something interesting article https://css-tricks.com/responsive-data-tables/

BenDol commented 6 years ago

This is basically how the current data table it set up to respond to mobile. It might be that it just needs to some tweaking and fixes for specific browsers. It also depends what container the table is in and how its CSS rules are set up.

BenDol commented 6 years ago

You can test this by adding the MaterialDataTable to the body element at 100% width and scale the browser. https://gwtmaterialdesign.github.io/gwt-material-table-sample/snapshot/

kevzlou7979 commented 6 years ago

Yeah agreed we can look how to respond to i'ts container but I think its just a plain css with media query. Also found out that the table headers is defined on the css which I think is hard coded. Might be good to define it directly to the DOM.

BenDol commented 6 years ago

Yes that is currently how the existing data table works. See https://github.com/GwtMaterialDesign/gwt-material-table/blob/master/src/main/resources/gwt/material/design/client/resources/css/style.css#L487 there are multiple definitions like so.

kevzlou7979 commented 6 years ago

categorized paged row-expansion selection simple