table vs layout grid? in listivew?

Hi guys. There are some different opinions about this subject. When making a table where each row has a button it is advised to use a listview. To make the coloms in the listview you can either use table of layout. What do you guys use? what are some pro's or cons?  
5 answers

Hello Jason,

I personally always use the layout grid if possible. 

The only difference I've seen so far is the way they get build into HTML - with the layout grid building into Div elements with Bootstrap column classes and the Table building as an actual <table> element. 

I prefer the Div structure because it gives me free reign on CSS, whereas tables come with their predefined structure (row/column elements) and their specific display style (display:table;).

I see Table elements more useful when you actually make full use of rows and you want your objects/fields to be aligned both vertically and horizontally - take the data grid widget as an example. 


I've used both depending on what's more important to me at that time. Dragos has a very good answer already, for me the decision is about what I think is more important.

If I have a relatively large amount of columns & data and I want to make sure the alignment is always perfect (basically making my own datagrid), then I probably use a table, since that's easier to get exact widths and is easier to change the overflow of data if it doesn't fit. 

If I'm looking for a responsive layout and show hide columns based on screen sizes, then it's by default the layout grid. 


Also if all you want is to have a datagrid with a button on each row, I would recommend to check out the appstore module "Data Grid Extension (Flex Headers)".  This module has the option to render buttons in a column. You basically create an extra column with any attribute in it and configure the widget to override it with a button. 


As long as you don't start nesting things there shouldn't be a problem.

Just be careful when putting tables in layoutgrids or the other way around. This can get messy as tables come with padding by default. On the other hand Mendix adds a 'nopadding' class (without telling) when nesting tables to work around that.

Still, tables are the better choice for having fine control on columns.



Tables were designed to put a table on a webpage. Layout grids are designed to work together with Bootstrap and to be responsive. You will be doing your UI/UX designer a favor using layout-grids when possible and tables only to show a table.

That being said: the more columns you want to show, the more difficult it gets to make it look pretty in a layoutgrid.



If you want to have the look of a datagrid, I would use a table. If it should have some responsiveness, I would youse a layout grid.
If you want to build something like "DataGridWithButtons", use a table.