Document Library Pro comes with several options for controlling how the responsive tables behave on different screen sizes, for example mobiles and tablets. These options are available for the table layout and not the grid layout.

These options can only be used by adding them directly to a Document Library Pro shortcode.

Wrap

The wrap option tells the table whether to wrap long content onto multiple lines, or to keep everything on a single line and hide the rest. The default is true which means longer content will “wrap” onto extra lines as needed. If you set this to false it will ensure that each row is exactly one line high:

Example: [doc_library content="title,author,doc_categories" wrap="false"]

Priorities

The priorities option is only relevant when displaying the table on smaller screen sizes (mobiles, tablets, etc) or when you have a lot of columns in your table and the plugin can’t fit everything in. When the screen size gets too small, the plugin will collapse certain columns down so they are no longer visible, and a “+” icon will appear at the left-side of each row. Clicking this icon will expand the row to show its full contents.

So the priorities option is used to determine the order in which columns are “collapsed” on smaller screens. Some default priorities are used, but if you wish to override these you can use this option. The lower the number, the higher priority that column has. So a column with a priority of “1” would have the highest priority and be collapsed last.

If you had a table with three columns – title, author, and doc_categories, and you wanted to make title the most important, doc_categories second most, and author least important you would use the following: [doc_library content="title,author,doc_categories" priorities="1,3,2"]

Column breakpoints

The column_breakpoints option gives you fine-grained control over the breakpoints for each column when viewed at smaller screen sizes.

By default, Document Library Pro will show or hide columns on smaller screens based on the priorities option described above (or the default priorities if none are set). If you wish to set more specific breakpoints, you can set one of the following options for each column: desktop, tablet, mobile, all, none or default. For example, setting a breakpoint of tablet for a column means it will display on tablet devices, but not on mobiles or desktop screens.

The all option means the column will always be visible, regardless of screen size. The none option means it will not be shown in the table, but the column will still show in the child row (or modal window) when expanded. The default option will let the plugin decide when it is hidden (using the priorities option if set).

You should set one option for each column in the table, for example:
[doc_library content="title,content,tags,date" column_breakpoints="default,desktop,mobile,all"]

Some notes:

• You do not need to list column names in the column_breakpoints option. You just need to list the visibility for each column in the correct order. In the above example, the 4 columns are title,content,tags,date in this order. To set column breakpoints for these columns, you need to list the visibility for 4 columns in the same order, e.g. default,desktop,mobile,all. Document Library Pro will use the order of this list to set the visibility for each column - so in this example, the 3rd column is 'tags' and will be visible on 'mobile', and the 4th column is 'date' and will be visible on all devices.
• Document Library Pro can only display columns that physically fit into each screen size. The column_breakpoints option will be ignored if the columns that are set to visible will not fit on a specific screen size. For example, if you have 20 columns and set them all to 'all' then some of them will still be hidden. We have coded the plugin this way to prevent it from ever looking broken on any screen size.

I've hidden the first column and it's not working! 

By default, it's not possible to hide the first column in your table because the expandable + plus icon is contained within the first column. If you need to hide the first column, then you'll also need to use the responsive_control option to put the + plus icon in its own column of the table.

For example:

[doc_library content="name,doc_categories,tags,price" responsive_control="column" column_breakpoints="none,desktop,mobile,all"]

More options

Document Library Pro is built on the jQuery DataTables library. In addition to the options listed above, you can also use any of the options listed on this page of the DataTables documentation. These options are more than most of our users will need, but are useful if you want even more fine-grained control over which columns appear on each device.

For example:

[doc_library content="name,doc_categories,tags,price" column_breakpoints="all,not-mobile,desktop,tablet"]

Responsive control

When the table can’t fit all the data within the space available (for example, on mobile devices) a “plus” icon appears to the left of each row to allow the user to show or expand the full content. The responsive_control option sets whether that “+” icon control is displayed inside the first column (responsive_control="inline") or within its own separate column (responsive_control="column"). Defaults to inline.

Responsive display

The responsive_display option determines how the “child rows” are displayed when viewing the table on smaller screen sizes (or when there is too much data to fit in the table). By default, the extra columns are displayed inside a child row which can be shown by clicking the “+” icon at the start of each row. You can also choose from the following options:

• child_row – the default option. Extra data will be displayed in a hidden child row.
• child_row_visible – Extra data is displayed in a child row which is expanded automatically when the table is first viewed.
• modal – Extra data is displayed in a modal window when the “+” icon is clicked.

Example: [doc_library content="title,content,date,status,author" responsive_display="modal"]

Troubleshooting - Why can't I hide the first column of my table?

If the above options aren't working when you try to hide the first column of your table on smaller screens, then this is because the first column also contains the + icon. This is needed to let users reveal the hidden child row, so you can't hide the first column in this case.

To fix the problem, add responsive_control="column" to your document library shortcode. This will put the + icon in its own column so that you can successfully hide the first column.

Related Articles

• Document library table column widths
• Displaying shortcodes in the document library
• Lazy load option for large document libraries
• Changing the number of documents in the library
• Document library controls
• Document library sort options