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

CMS: Displaying Collection Content in a Table

13 min read
Display your CMS (Content Management System) collection content in a 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.
A screenshot showing an example of a table connected to the CMS.

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. 
A screenshot showing the collection permissions and privacy settings.

Step 2 | Add a table to your page

Choose from several pre-designed tables to add in your editor. You will connect and fully customize the table later. 
Wix Editor
Studio Editor
  1. Go to your editor.
  2. Click Add Elements  on the left side of the editor.
  3. Click List.
  4. Click Tables.
  5. Click and drag the table you want to use onto the page. 
A screenshot of adding a table in the Wix Editor.

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. 
Wix Editor
Studio Editor
  1. Click the table element on your page.
  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, select Add a 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 Connect Table panel 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. 
Wix Editor
Studio Editor
  1. Click the table element on your page.
  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 to change any of the CMS connections. Then click the relevant drop-downs on the right 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  if you want to make the table fit the width of your site. 
  5. Click and drag the edges of the table to resize it. 
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. 

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.
Wix Editor
Studio Editor
  1. In the panel on the right of your Editor, 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  , then 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. 

Did this help?

|

In This Article

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

Related Content

CMS: About Your Collection Fields
CMS: Managing Your Collection Content
CMS: Displaying Collection Content in a Repeater

Hire a Professional

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