Table

Content options in content tab of right-side menu:

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.

Manage Items options in design tab of right-side menu:

+ Add new (button)

• Add additional table row(s)

Advanced Styling options in design tab of right-side menu:

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.

Use Sorting? (check box)

• When checked, table columns are sortable. 

Use Keyword Search? (check box)

• When checked, a text-based Search box is added above the table. 

Display Category #?

• When checked, the respective category filter will appear above the table.

Column # Title: (single-line text)

• Text in this field creates the Column header for the numbered column.
• Empty column fields do not display. Fill columns in numeric order, starting with column 1.

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.

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

The Table component is added to the page in Page Builder. The majority of the initial setup is done in a combination of Content Editor and Page Builder. Row content can be added in Content Editor.

In Pages builder:

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.

In Page Builder:

1. Click the Table component to select it. The component will be outlined with a purple box, and the component toolbar will appear.
2. On the right-side panel, choose the Content tab.
3. Enter titles in the Column # Title field(s) for all columns needed in the table. Work in numeric order, starting with Column 1. Tables may have up to eight columns.
4. (Optional) Enter a number in the Column # Width field(s) to manually adjust the width of the columns. 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.

In Page Builder:

1. Click the Table component to select it. The component will be outlined with a purple box, and the component toolbar will appear.
2. On the right-side panel, choose the Design tab.
3. Expand the Advanced Styling section.
4. Add a number in the “Number of Items Per Page” field. This controls the number of table rows that appear on a page of the table. If a table contains more rows than this number, pagination controls will appear below the table.

In Page Builder:

1. Click the Table component to select it. The component will be outlined with a purple box, and the component toolbar will appear.
2. On the right-side panel, choose the Design tab.
3. Expand the Advanced Styling section.
4. Check the box next to “Use Sorting?”

In Page Builder:

1. Click the Table component to select it. The component will be outlined with a purple box, and the component toolbar will appear.
2. On the right-side panel, choose the Design tab.
3. Expand the Advanced Styling section.
4. Check the box next to “Use Keyword Search?”

First, filter categories and values must be created in Content Editor. Then the filters need to be activated in Page Builder. 

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.
3. Expand the Table Categories folder.
4. Click on the filter to be edited. Tables can have up to three filter categories. Each filter category can have multiple values. For example, a category of “Platform” can have values of “Sitecore XM Cloud,” “Content Hub” and “Sprinklr.”
5. Enter a label for the category in the Title field.
6. Optional: Users may also rename the Category field in the Content Tree to aid in remembering which Category # applies to the Category label. It is recommended that users retain the number in the category name in the Content Tree because other parts of the system refer to categories by their number.
7. Add value(s) to the category filter:
   1. Right click on the category name in the Content Tree to open the flyout menu.
   2. Click Insert and Category.
   3. Enter a name for the new category value and click OK.
   4. Enter a label for the value in the Value field on the new item. The value will default to the name of the Category item entered when it was created, but this label can be changed.
   5. Click Save. 

In Page Builder:

8. Return to the Page Builder tab.
9. Refresh the canvas to pull in the changes made in Content Editor.
10. Click the Table component to select it. The component will be outlined with a purple box, and the component toolbar will appear.
11. On the right-side panel, choose the Design tab.
12. Expand the Advanced Styling section.
13. Check the box next to “Display Category #?” for each category that should be enabled as a displayed filter.

Rows can be added to a table in either Page Builder or Content Editor.

You must use Content Editor to add content to the cells within a row and to apply filter tags to the row. 

Managing Rows in Page Builder:

In Page Builder:

1. Click the Table component to select it. The component will be outlined with a purple box, and the component toolbar will appear.
2. On the right-side panel, choose the Design tab.
3. Expand the Manage Items section.
4. To add a row: Click the + Add new button and click Table Row. Rename the row and hit Enter to save the change.
5. To rename a row: Click the “…” icon to the right of the row name, select Rename from the popup menu, enter a new name in the name field and hit Enter to save the change.
6. To reorder rows: Click the “…” icon to the right of the row name, select Move up or Move down from the popup menu, as appropriate. Repeat as needed.
7. To delete a row: Click the “…” icon to the right of the row name, select Delete from the popup menu and click Yes.

Managing Rows in Content Editor:

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.
3. To add a row: Right-click on the table name, click Insert and click Table Row. Enter a row name and click OK.
4. To rename a row: Right-click on the row name, click Rename, enter a new name and click OK.
5. To reorder rows: Click and drag a row item to another spot on the Content Tree, being careful to avoid nesting it or moving it outside of the table. Click OK.
6. To delete a row: Right-click on the row name, click Delete and click OK. 

Add Content to Cells in a Row

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 and locate the row.
3. Enter text in the necessary columns. Take care to properly align the column content to the column headings assigned in Page Builder. 

4. Click Save.

Assign Category Tag(s) to a Row

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 and locate the row.
3. Scroll to the Category 1, Category 2 and Category 3 fields. Select an option from the dropdown(s) for each category that will be tagged for this row.
4. Click Save.

Publish the Table Item

Tables have a quirk in that the component needs to be published in addition to the page that it appears on. 

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.
3. After configuration and content 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.
4. Return to Page Builder. 

In Page Builder:

5. Reload the canvas in Page Builder to load the changes.
6. After completing any additional page edits, click Publish to publish the changes to the live page.