CMS (Formerly Content Manager): Displaying Collection Content in a Table
8 min read
Display your CMS (Content Management System) collection content in table on your site. When you connect the table to a dataset that binds to your collection, the fields appear as columns and the items appear as rows. By default, supported field types that are set to visible automatically appear in your Editor when you connect to the CMS. You can then manage the order of the columns and choose from several settings panels to customize the table's look and behavior.
Tables are not available in Editor X or the Studio Editor.
Step 1 | Create a collection
Create a multiple item collection that you will use to store the content that appears in your table. You can manually add the fields and items or import them from a CSV file.
To create a collection:
- Go to CMS in your site's dashboard. Alternatively, you can click CMS in your Editor.
- Click Create Collection.
- Enter a name for your collection.
- Leave Multiple items (Default) selected and click Create.
- Add fields to your collection manually or by importing a CSV file:
- Set permissions for the collection:
- Click More Actions and select Permissions & privacy.
- Click the What type of content will you store in this collection? drop-down and select an option. If necessary, you can click the drop-downs to adjust who can view, add, delete, and update content. Learn more about setting collection permissions.
- Click Save.
Step 2 | Add a table to your site
Choose from several pre-designed tables to add in your Editor. You will connect and fully customize the table later.
To add the table element to your page:
- Go to your Editor.
- Go to the page or section where you want to add your table.
- Click Add Elements on the left side of the Editor.
- Click List.
- Click Tables.
- Click and drag the table you want to use onto the page.
Step 3 | Connect the table to your CMS collection
Supported field types from your collection automatically appear in the table once you connect the table to a dataset that binds to your collection. You can then add links to columns, such as links to dynamic item pages, so visitors can navigate to the links by clicking items in the columns.
To connect the table to the CMS:
- In your Editor, click the table element you added.
- Click the Connect to CMS icon .
- Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Create a New Dataset, then choose the collection you want to connect, give it a name and click Create.
- Click the relevant drop-downs under Connections to choose which collection fields connect to each column.
- (Optional) Link the column items to their dynamic item pages or to other locations:
- Click the relevant [Field Name] column links to drop-down.
- Select the dynamic item page listed as [Collection Name] (Item) or choose another link option.
- Repeat this step for each column item you want to link.
- (Optional) Add another column to the table:
- Click Add column at the bottom of the column on the right.
- Click the Choose column drop-down and select the collection field you want to connect.
- Click Add Column.
Step 4 | Customize your table
Now you can fine tune the table to get it looking just the way you like. Reorder, rename, or remove columns, then choose from several options in the Settings, Layout, and Design panels. You may then want to drag the edges of your table to adjust its size and position.
To change a collection field name, turn on Dev Mode in your Editor, then go to your collection and edit the relevant field to edit its field name.
To customize your table:
- In your Editor, click the table element.
- Click Manage Table and choose want you want to do:
- Reorder: Click the Reorder icon next to the relevant column and drag it up or down into place.
- Change column name: Hover over the relevant column, click the More Actions icon , and select Edit label. Enter the new name and click Done.
- Delete column: Hover over the relevant column, click the More Actions icon , and select Delete.
- Manage Connections: Click Manage Connections then click the relevant drop-downs to choose which collection fields connect to each column and set links for the items.
- Click the Settings icon and choose from the following options:
- Clicking selects: Choose what gets selected in the table when visitors click a cell: Nothing, Rows, or Cells.
- Links open in: If you've linked items, choose whether they open in a new window or in the current window.
- Date format: If you connected a Date field type, choose a format in which the dates display.
- Click the Layout icon to choose the table height, header display options, row and column sizing, content alignment, and pagination.
- Click the Design icon to select a preset design, then click Customize Design to fine-tune the look of your table.
- Click the Stretch icon to make the table fit the width of your site.
- Click and drag the edges of the table to resize it.
Step 5 | Manage the dataset settings
Set the dataset mode, add filters that restrict certain items from appearing, and add sorts to control the order in which the items display in your table. Your table displays all the collection items it can read from the dataset, so the Maximum items displayed field does not apply to tables.
To manage the dataset settings:
- Click the dataset then click Dataset Settings.
- Click the Dataset mode drop-down and select and option:
- Read: Allow the dataset to display your collection content in the table.
- Read & Write: Allow the dataset to display your collection content in the table and allow visitors to add or edit collection content with input elements.
The Maximum items displayed field does not apply to tables. You can limit the number of items displayed by clicking the Layout icon and setting a custom table height and enabling pagination.
Click below for answers to common questions about displaying CMS content in tables.
How can visitors filter the info displayed in a table?
Can I connect a 'Load More' button to a table?
What are the supported field types that can connect to tables?