1 - Main Settings
Table Name:
The table name is necessary to connect the table to the search bar and row number. Having a unique table name for each table also allows you to have more than one table on a page. Your table name should not have any spaces or special characters.
Source:
You can choose to have Table Pro pull data from either Google Sheets or a CSV File.
Google Sheet Key: Each google sheet has a unique key that you can paste here to connect your google sheet to the Table Pro widget. You can find your google key
here.
Sortable:
Checking the box allows users to click on a column to sort the cells in ascending or descending order.
2 - Height / Alignment / Spacing
Header & Cell Text Alignment:
Alignment options include left, center, or right.
Header & Body Cells Height (px):
Specify the pixel height of the cells.
Horizontal Spacing:
Specify the horizontal spacing between cell content and the edge of the cell.
3 - Cells Color
Header (Odd/Even):
Specify the cell color.
Body Cells (Odd/Even):
Specify the cell color.
4 - Texts
In this section you can style the table text. The typeface can be changed through the Text Panel (⌘T).
The Body font size can be set for each individual breakpoint by selecting the Main widget, and changing the size through the Text Panel. Make sure that you are “formatting the text on the current breakpoint” instead of “all breakpoints”.
Header Font Size (px):
The header font size is dependent on the size of the body font on that breakpoint. The value you put here determines how bigger or smaller the header font will be.
So for example, if the body font size is 16px and we enter 4 for our header font size, then our header font size will be 20px.
You can also use negative values to have the header font size appear smaller than the body font size, so if our body font size is 16px and we enter -4 four our header font size, then our header font size will be 12px.
Header / Body Letter Spacing (px):
Specify the letter spacing.
Header Text (Odd/Even):
Specify the text color.
Body Text (Odd/Even):
Specify the body text color.
Checkboxes: check the boxes to enable the following styling
- Uppercase Header Text
- Uppercase Body Text
- Bold Header Text
- Bold Body Text
5 - Borders
The borders cannot be controlled through Muse’s stroke panel. Borders can be controlled in the main option panel under the borders tab.
Cells Border Thickness (px):
Assign a pixel width for the cell borders.
Cells Border Style:
Select between solid, dashed, or dotted.
Header / Cells Border Color:
Select a color.
Sorting
Ascending/Descending Pointer
Pointer Thickness (px):
Assign pixel width for pointer.
Size:
Assign pixel width for pointer.
Distance from right:
Specify distance pointer is from the right edge of the cell.
Pointer Color:
Specify pointer color.
Sorted Column
Sorted Column Text Color (odd/even):
Specify color for the odd and even rows.
Sorted Column Background Color (odd/even):
Specify a background color for the odd and even rows.
Sorted Column Background Opacity:
Specify background opacity for sorted column. Values closer to 100 are more opaque.
Sorted on-load
The number of the sorted column on-load:
Specify the column that appears sorted on-load. By default, it is set to 1. Note: The column number for the “sorted column on-load” should be an existing number, otherwise the widget will not work. For example, if we only have 4 columns and we type 5 in the number of column for the default sorted column, then the widget will not work properly.
Sorted Column Background Color (odd/even):
Specify a background color for the odd and even rows.
07 - Linked Cells
Open Links:
Specify whether you want links to open at the same page or in a new page.
Icon:
You have the option to upload an icon that will show up inside cells that are linked.
Icon Size (px):
Specify the size that you want your icon to appear at.
Mouse Over State Background / Text Color:
Specify colors for when users hover / mouse over a linked cell.
08 - Assigning
Graphic styles can be assigned to objects to have them function as either Next, Previous, or Download button. These objects all have the graphic styles applied to them.
Additional information concerning graphic styles can be found at the following links:
09 - Additional Controls
Message for no search result:
You have the option of customizing the message that shows up when users use the search bar and a matching result isn’t found in the table.
Number of rows dropdown entries:
Customize the options for the number of rows that users can view at a time. Entries should be separated with commas (example: 5, 10, 15…).
