Adding and Setting Up the Table Master App

5 min read
The Table Master app lets you easily create tables on your Wix site. You can upload Google Sheets spreadsheets or manually insert table data yourself. Your site visitors can view, sort, and filter the table data without the need to download it. 
Use a table to:
  • Organize content
  • Create lists
  • Sort contact details
  • Update data 
  • and more 
A screenshot of the Table Master app as it appears on desktop and mobile.

Step 1 | Add the Table Master app to your site

Add the Table Master app to your site. Once you've added the app, you can copy and paste the app to move it to another page on your site.
Note:
The Table Master app is not yet available for the Studio Editor.

To add the app:

  1. Click Add Apps  on the left side of the Editor.
  2. Search for the Table Master app in the search bar.
  3. Click Add to Site.
A screenshot showing how to add the Table Master app to your site.

Step 2 | Enter your table data

You can choose to upload a Google Sheets spreadsheet or manually insert table data yourself.  

To add your data:

  1. Select your table in your Editor.
  2. Click Settings.
  3. Click the Data tab.
  4. Add your data manually or upload a Google Sheets spreadsheet.

Step 3 | Customize your table's layout and display

After you've added your data, you can customize the layout and display of your table. Select how many columns of data to display, the height of your table, and how your table will display on mobile devices. 

To customize the layout and display:

  1. Click the Layout tab.
  2. Click the Column limit toggle to set whether your table displays a limited number of columns or not.
    • Enabled: You can select the number of columns to display under Maximum columns to show. Drag the slider or enter a number in the field to change it. 
    • Disabled: There is no limit on the number of columns that are displayed on your table.
A screenshot of the Table Master app layout settings
  1. Select your table's height under Table height.
    • Fixed size with scroll: Your table will not adjust to your data. Your table will have a vertical scroll bar if there are more rows than can fit in the visible area. 
    • Fit to content: The height of your table will adjust depending on the number of rows it has.
  2. Select your table's behavior on mobile devices under Mobile layout.
    • Expand: Your table will display the first column and visitors can click each row to view its contents.
    • Scroll: Your table height is fixed and has scroll bars that visitors can use to see more data.
  3. Click the Display tab.
A screenshot of the Table Master app display settings.
  1. Click the Show header & footer toggle to set whether your table displays a header and footer.
  2. Click the Show search toggle to set whether your table displays a search bar.
  3. (Optional) Customize the default text of your search bar under Search text.
  4. Click the Allow sorting toggle to set whether your visitors can sort the data in your table.
    When enabled, visitors can click a column to sort in ascending or descending alphabetical or numerical order. 
A GIF of the sorting function in the Table Master app.

Step 4 | Customize your table's text and colors

The last step is to customize your table's fonts and text colors on the Design tab. You can set the colors of the table's background, borders, and rows, and customize the font used for the text on your table.
  1. Click the Design tab.
  2. Click Background color.
  3. Select a color for the background of your table under Primary color.
  4. Click the Use gradient toggle to set whether the background color of your table uses a gradient effect. 
A screenshot of a populated table, name, email, and phone number.
  1. (Optional) Select a second color for the gradient beside Secondary color.
  2. Select a border color, border width, and corner radius under Outer Border.
  3. Click Back.
  4. Click Table.
  5. Click Text to under Columns or Rows to customize the fonts used in your table. You can select separate text options for your rows and columns. 
A screenshot of the design settings and how to change the font.
  1. Select background colors for your rows under Rows. You can set different colors for your odd and even rows, and set a hover background color. 
  2. Select a color and width for the inner borders of your table under Inner Border.
  3. Publish your site to see the changes live.

Tip:
You can also search the Wix App Market for additional table apps or create a table using Velo by Wix.

Did this help?

|