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

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. 

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 first be created in either Content Editor or Content mode within Page Builder. Then rows should be tagged with the appropriate category value(s), and finally filters should be activated in Page Builder. 

Create categories in Page Builder:

1. Navigate to the page in the Sitemap list on the left side panel by expanding Home > page name.
2. Click the quill icon on the local toolbar to open Content mode.
3. Navigate to the table component and locate Table Categories.
4. 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 “SitecoreAI,” “Content Hub” and “Sprinklr.” To rename a category from the default "Category #," click the Category item in the Content tree and update the text in the Title field.
5. To add value(s) to the category filter:
   1. Click the “…” icon to the right of the Category in the Content tree.
   2. Click Create item.
   3. Click Category and then Select.
   4. Enter a name for the category value and hit Enter.
   5. Click on the category value item in the Content tree and enter a value for the category in the Value field and click away from the field to save the entry.

Alternatively, 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 > site name > 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 “SitecoreAI,” “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. 

Activate filters in Page Builder:

1. Return to the Editor mode tab in Page Builder.
2. Refresh the canvas to pull in the changes made in Content Editor or Content mode.
3. Click the Table component to select it. The component will be outlined with a purple box, and the component toolbar will appear.
4. On the right-side panel, choose the Design tab.
5. Expand the Advanced Styling section.
6. 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. Many users find it easiest to use Content Editor when adding rows because the cell content and tagging can be done within the same step.

Add and Manage Rows

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.

Alternatively 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 > site name > 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 or Category Tags to Cells in a Row

In Page Builder:

1. Navigate to the page in the Sitemap list on the left side panel by expanding Home > page name.
2. Click the quill icon on the local toolbar to open Content mode.
3. Navigate to the table component and the specific row in the Content tree in the left side panel.
4. Enter cell content in each necessary column field.
5. Optional: Select category tag(s) for the row in the Category # fields.
6. Repeat for additional rows, as needed.
7. Click the paper and pencil icon on the local toolbar to return to Editor mode.
8. Reload the canvas in Page Builder to load the changes.
9. Click Actions and Submit to send the changes to the publishing workflow.

Alternatively, 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 > site name > 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. 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.
5. Click Save.
6. Reload the canvas in Page Builder to load the changes.
7. Click Actions and Submit to send the changes to the publishing workflow.

Publish the Table Item

Tables have a quirk in that the component needs to be submitted for publishing in addition to submitting the page that it appears on. 

If working 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 > site name > 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, confirm all row items have been finalized. Click the row in the Content Tree, the Review tab and click Check In, if it appears.  
4. Click on the Table item in the Content Tree. Click the Review tab and select Check In from the menu.
5. Return to Page Builder.
6. Reload the canvas in Page Builder to load the changes.
7. Click Actions and Submit to send the changes to the publishing workflow.