Table

Component fields in Page Builder canvas: 

Item name (single-line text)

• Text used for the Table name when creating the Table data.
• By default, adding a Table to the page creates a Table Categories folder and a first Table row, titled “Table Row 1.” This row can be renamed.

Table cells (multi-line text) 

• This is the same field as in Page Builder. 
• This field allows for some basic HTML formatting tags, including <b></b> for bold, <i></i> for italic and <a href=””></a> for links.

Manage Items options in right-side menu:

+ Add new (button)

• Add additional table row(s)

Advanced Styling options in right-side menu:

Use Sorting? (check box)

• When checked, table columns are sortable. 

Number of Items per Page (single-line text)

• This field accepts numbers only.
• The default value is blank, which means there will be no pagination. 
• If a number is entered, it will limit the number of Table rows per page to this number.

Number of Columns to Display (single-line text)

• This field accepts numbers one to eight only. 

Column # Title: (single-line text)

• Text in this field creates the Column header for the numbered column.

Column # Width (single-line text)

• This field accepts numbers only. The number sets the column’s width, represented as a percentage of the whole.
• The default value is blank. 
• When all Column # Width fields are blank, the width of the Table columns will be equally divided. For example, if there are four columns each column will display at 25% of the full table width. 
• When numeric values are added to the Column # Width fields, they represent the percentage of the width the column will take. If adding values to the fields, each column in use must have a number, and these numbers must add up to 100. For example: If using four columns, the column widths could be 20, 20, 20 and 40, but could not be 20, 20, 20 and blank.

Table Categories item in the Content Tree

Display Keyword (check box)

When checked, the component will display the keyword search field above the Table.

Display Category 1 / 2 / 3 (check box) 

When checked, the component will display the corresponding category filter above the Table.

Specific Category items in the Content Tree, under Table Categories: 

Title (single-line text) 

Category title text that displays above Category filter for the numbered category

Category value item selected in the Content Tree, under a Category:

Value (single-line text)

• Category value label

Table Column # (multi-line text) 

• These text fields correspond to the cells in the table for the row. The number corresponds to the table column, reading left to right. 
• Data entered here corresponds to the same fields in Page Builder. It is up to the content author which interface they prefer. Page Builder allows for viewing the table in a visual format while entering content. 
• These fields allow for some basic HTML formatting tags: 
  • <b></b> for bold
  • <i></i> for italic
  • <a href=””></a> for links
• Category 1 / 2 / 3 (selection field)
  • Assign desired category values to the table row. 
  • To assign, click the category value in the “All” panel on the left for the appropriate category and click the > icon to move it to the “Selected” panel. 

A table can have an unlimited number of rows. If including more than twenty rows, using pagination is recommended so the page is not too long.

A table can have one to eight columns.

Table cells can include text with limited HTML styling (bold, italic and link).

The Table component is added to the page in Page Builder. The majority of the initial setup is done in Content Editor. Once the Table is configured as desired, content authors can edit table cell text in Page Builder.

In Pages:

1. Select the page in the Content Tree. The page must use a basic Page or Two-Thirds Page layout.
2. Click the “+” button in any full-width area Placeholder box below the Breadcrumb links.
3. Select Table component from list.

Alternate method:

1. Click Components tab at top of the Content Tree.
2. Locate Table component.
3. Drag the Table component to any empty full-width or left column placeholder area of the page below the Breadcrumb links.

Assign data to the Table component:

4. In the Assign content item window, choose the component data to use:
   1. For existing components, select them from the page’s Data folder or from the appropriate shared folder.
   2. For new components, select “+”, type in the component title and hit Enter.
5. Once the component data is selected, click on the Assign button in the lower right corner.

When added to the page, the Table component has a Categories folder and an initial Table Row with one cell.

Table settings must be configured using Content Editor.

In Pages:

1. Ctrl + click the Content Editor link in the instruction bar of the new Table component on the page. Open Content Editor in a new tab.

In Content Editor:

2. If the Table component does not appear in the Content Tree, close the page’s Data node and expand it again to refresh the Content Tree. Then in the Content Tree, expand Content > MSU > sitename > Home > page name > Data or wherever the component was added. 
3. Locate and expand the Table component. 

Set Table level properties:

4. Select the main Table item in the Content Tree.
5. If desired, change the default Number of Items per Page. 
   1. The default is blank, with no pagination. 
   2. If the table will be long, enter a number here to add pages and limit the rows displayed per page. Rows will be limited to the number entered in the field.
6. If desired, change the Number of Columns to Display. 
   1. Select a number from one to eight. 
7. If desired, add column titles in the designated column title field(s) for columns being used.  
8. If desired, change the column width for the columns being used. 
   1. A default setting (blank fields) results in equally divided columns. 
   2. If numbers are added, a number must be added to represent the percent of total width assigned to each column in use, and the numbers must total 100.

Set Table Category properties:

9. Select the Table Categories item in the Content Tree.
10. If desired, enable (or disable) table filter and search settings by checking or unchecking the box under the Filters section. 
    1. When Display Keyword is checked, the Table will display a keyword search box above the Table that searches text in Table cells.
    2. When Display Category 1, Display Category 2 or Display Category 3 are checked the Table will display that category filter(s) above the Table.
11. If using any of the Categories:
    1. Select the specific Category item in the Content Tree. 
    2. Edit the Title field text to name the category. 
    3. Right-click on the Category (i.e., “Category 1”, “Category 2” or “Category 3”) in the Content Tree and select Insert and Category on the flyout menu to add a value to the category. Repeat as needed.

Publish the Table Item:

12. After configuration edits are complete, right-click on the Table item in the Content Tree and select Publish Item from the menu. 
    1. Select Smart publish and check the Publish subitems box.
    2. Click on the Publish button.
13. Add content to the table in Page Builder.
     

After configuration edits are complete in Content Editor, return to Page Builder. 

In Page Builder:

1. Reload the canvas in Page Builder.
2. Click on a specific Table cell and enter desired text.

• Bold: <b>InsertTextHere</b>
• Italic: <i>InsertTextHere</i>
• Link: <a href=”https://website-url-example.edu”>InsertTextHere</a>
   

3. After completing edits, click Publish to publish the changes to the live page.

In Content Editor:

1. If the Table component does not appear in the Content Tree, close the page’s Data node and expand it again to refresh the Content Tree. Then in the Content Tree, expand Content > MSU > sitename > Home > page name > Data or wherever the component was added. 
2. Locate and expand the Table component in the Content Tree. 

Add a row:

3. Right-click on the Table item in the Content Tree.
4. Click Insert and Table Row in the menu. 

Add content to a row:

5. Locate and select the desired row. 
6. Enter text for each column in use.
7. Click Save.
8. Repeat for additional rows. 

Publish changes:

9. After content edits are complete, right-click on the Table item in the Content Tree and select Publish Item from the menu. 
10. Select Smart publish and check the Publish subitems box.
11. Click on the Publish button.