UAT2 – Settings – Tables

This article covers the Global Table Settings. These Settings are applied to all tables you create by default. You can however override these setting on a per table basis, offering ultimate flexibility. Here is where you set up the basic functionality of your tables.

 

Table Heading

Checking this box will hide the entire header of the table. Checking this will make it so you cannot filter or sort your table. Check this only if you want ONLY your table rows to show with no headings.

 

Table Sorting

Check this box to make your table sortable. Images  columns are not sortable by default. Tables will not be sortable if you checked the box to “Hide the Table Header”.

 

Table Filtering

Checking this box will add a filtering section on the top of your table. This is recommended if you have a large amount of products in your table.

You can also set some custom messages here for the filtering system including:

  • No Results Message – The message that displays if no products meet the filter search criteria.
  • Filter Placeholder Text – The working in the search box before the visitor searches.
  • Filter Dropdown Heading – The custom heading inside the filter columns dropdown
  • Filter Position – Where the position will be displayed, right, left, or center

 

Table Pagination

Enabling this will limit the number of rows that display in your table at one time.

Settings include:

  • Number of Rows per Page – We recommend no more than 10 rows per page, or your table will start having display issues on small screens.
  • Pagination Position – Display the page links on the bottom left, right, or center.
  • Table Pagination – Pages Displayed Limit – This limits the amount of page numbers that show at one time. * IT DOES NOT LIMIT THE NUMBER OF PRODUCTS OR PAGES IN YOUR TABLE!

 

Table Memory

Checking this will enable the built in “browser memory”. Capable modern browsers will remember the sorting, filtering and pagination the visitor leaves the table at when leaving the page. As long as the user has not cleared their cookies in their browser, the tables will be exactly as the visitor last left them.

* If you have made changes to your table and you are not seeing those changes on the front end of your website, you probably have table memory enabled and are seeing a cached version of the table. If this is the case, you must clear your browser cache and cookies to see your table updates.

 

Table Custom Responsive Settings

Enabling this will let you have a high level of control of how your table behaves for different screen sizes.

* These settings are more advanced, and meant for advanced users looking to fine-tune their table’s responsive & mobile settings.

  • Base Responsive Breakpoints off the Width of the Container – By default, the table changes based on different browser screen widths. By checking this box, your table will change based off the width of the parent container that the table resides in, like your main content area.
  • Custom Breakpoints – Checking this box will let you set the widths that trigger when the table layout changes. This is based off the browser width, unless the “Base Responsive Breakpoints off the Width of the Container” is checked.
    • Extra Small Breakpoint – Recommended starting value 480
    • Small Breakpoint – Recommended starting value 640
    • Medium Breakpoint – Recommended starting value 768
    • Large Breakpoint – Recommended starting value 1023
  • Expand the First Row by Default – When columns are collapsed on smaller screens, checking this will open the first row upon load. This is good to show your visitor that there is hidden information for each product. We recommend checking this box
  • Expand All Rows by Default – Open all rows to display hidden columns on load.
  • Hide the Toggle Button – This hides the small “+” button located in the first column when hidden information is present. Checking this box will hide this toggle button.

 

Hide Toggle Button

Check this box to hide the toggle button that displays on each  table row when you have hidden columns.