Help Center
    Home
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Working with dynamic pages and the CMS
    5. CMS (Formerly Content Manager): Displaying Collection Content in a Table

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.
Important:
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:

  1. Go to CMS in your site's dashboard. Alternatively, you can click CMS in your Editor.
  2. Click Create Collection. 
  3. Enter a name for your collection. 
  4. Leave Multiple items (Default) selected and click Create. 
  5. Add fields to your collection manually or by importing a CSV file:
  6. Set permissions for the collection: 
    1. Click More Actions and select Permissions & privacy. 
    2. 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. 
    3. 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:

  1. Go to your Editor.
  2. Go to the page or section where you want to add your table.
  3. Click Add Elements  on the left side of the Editor.
  4. Click List.
  5. Click Tables.
  6. 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:

  1. In your Editor, click the table element you added. 
  2. Click the Connect to CMS icon .
  3. 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.
  1. Click the relevant drop-downs under Connections to choose which collection fields connect to each column. 
  2. (Optional) Link the column items to their dynamic item pages or to other locations:
    1. Click the relevant [Field Name] column links to drop-down. 
    2. Select the dynamic item page listed as [Collection Name] (Item) or choose another link option.
    3. Repeat this step for each column item you want to link. 
  1. (Optional) Add another column to the table: 
    1. Click Add column at the bottom of the column on the right. 
    2. Click the Choose column drop-down and select the collection field you want to connect. 
    3. 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. 
Note:
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:

  1. In your Editor, click the table element.
  2. 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.
  1. 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. 
  2. Click the Layout icon  to choose the table height, header display options, row and column sizing, content alignment, and pagination. 
  3. Click the Design icon  to select a preset design, then click Customize Design to fine-tune the look of your table. 
  4. Click the Stretch icon  to make the table fit the width of your site. 
  5. 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:

  1. Click the dataset then click Dataset Settings. 
  2. Click the Dataset mode drop-down and select and option: 
Note:
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. 
  1. (Optional) Click + Add Filter to only show specific items in the table. 
  2. (Optional) Click + Add Sort to choose the order in which collection items appear in the table.

FAQs

Click below for answers to common questions about displaying CMS content in tables. 

In This Article

  • Step 1 | Create a collection
  • Step 2 | Add a table to your site
  • Step 3 | Connect the table to your CMS collection
  • Step 4 | Customize your table
  • Step 5 | Manage the dataset settings
  • FAQs

Related Content

CMS (Formerly Content Manager): About Your Collection Fields
CMS: Displaying Dynamic Content in a Repeater

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched