From Uncode 2.5.0, the Posts module also presents a new layout variation named Tables. The new Table layout represents a clean, minimalist, and modern approach to presenting your Post Type content through a diverse set of possible variations. This layout is perfect when you want to create regular lists.

The new Table layout can be a winning solution for presenting news on a page, creating a portfolio index, or even an e-commerce catalog view. This layout mimics a table design, where rows represent the items (posts), and the elements of the items (image, title, date, author, etc..) can be organized in columns.

Please find below some examples of Table layouts on our demo site:

• Portfolio Table
• Blog Table
• Shop Table

Set a Table layout

To select this mode, please open the Posts module and select General tab → Layout → Table, screenshot .

The creation of the Table layout is handled in the Module tab in the Elements group of options, thanks to these options you have the maximum flexibility to create your ideal layout.

To define a column, please insert a Column Definer ('Column' element). All the elements that will be inserted after the Column Definer will be part of the column until a new Column Definer closes the first column and opens the next one. In each Column Definer, please select the width of the column on a base of 12 divisions (the same as the Uncode grid). For example, to create a layout with three columns, please insert 3 Column Definers with the values 6/12, 3/12, 3/12, and between one and the other the elements you want to present in each column, screenshot .

Table responsiveness

When using the Table layout, at the Mobile tab, there are options (Items Not Stacked On Tablets and Items Not Stacked On Device) that you can use to control the layout on devices. Thanks to these options, you can "break" the table layout and stack the items, exactly as it happens for the main grid of Uncode.

In any way, please note that there may be some display issues on Tablet or Mobile depending on how many columns and contents you include in your tables, especially if you decide not to use the above options.

Unfortunately, it is not feasible to create programmatic admin options that can cope with the possible different needs. If you need to hide the columns of your tables depending on the device you are using, please find here an example code that you can use and adjust to your specific needs (of course, 'post-table-column-1' identifies the first column, a hypothetical 'post-table-column-2' will identify your second column, etc.):

/* Desktop */
@media (min-width: 960px) {
    .post-table-column-1 {
        display: none;
    }
}
/* Tablet */
@media (min-width: 570px) and (max-width: 959px) {
    .post-table-column-1 {
        display: none;
    }
}
/* Devices */
@media (max-width: 569px) {
    .post-table-column-1 {
        display: none;
    }
}