How to Customize the Table Design Element

This article will demonstrate how to add the Table Design Element to your SharePoint page and how to customize it.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint web part
  • Step 2: Switch to Grid Mode
  • Step 3: Insert the Table Design Element
  • Step 4: Connect the Table to a SharePoint List / Library
  • Step 5: Customize the Design
  • Step 6: Customize the Content
  • Step 7: Save
• Table Features
  • A. Design Tab
  • B. Connect tab

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have a SharePoint List / Library you wish to connect to:

Interactive Tutorial

Click Get Started to learn how to customize the Table Design Element:

NOTECheck out Table Features to learn more about the customizable options.

Step-by-step Tutorial

Follow the detailed guide below to customize the Table Design Element:

NOTEBefore proceeding, make sure you already have a SharePoint List / Library you wish to connect to:

Step 1: Edit the ShortPoint web part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Switch to Grid Mode

NOTEThe Table Design Element is currently only available in Grid Mode.

• Click the Switch to Grid Mode icon.

Step 3: Insert the Table Design Element

• Click the plus icon to open the library of Design Elements.
• Use the search bar to look for Table and select it.

Step 4: Connect the Table to a SharePoint List / Library

• Navigate to the Connect tab.
• You can use the Connection types below. Choose the connection type that corresponds to the location of your SharePoint List / Library.

1. Current Site - allows you to connect ShortPoint elements to existing site assets located on the same site.
2. Other Sites - allows you to connect ShortPoint elements to existing site assets located on other sites within your SharePoint tenancy.
3. SharePoint Site URL - allows you to connect ShortPoint elements to existing site assets located on another site using a specific SharePoint Site URL.

• Select your List/Library name.
• Select the View you want to use.
• Click Connect.

Step 5: Customize the Design

• Navigate to the Design tab.
• Under the Design section, customize the look of the Table according to your preferences.

NOTECheck out Table Features to learn more about the customizable options.

Step 6: Customize the Content

• Scroll down until you see the Data section. In the Columns to Show field, type the columns you want to appear in the Table.

• In the Columns Titles field, write the header name you want to assign for each column on your Table.

NOTECheck out Table Features to learn more about the customizable options.

Step 7: Save

• Click Preview to see how your Table will look.

• Once satisfied, click Insert.
• Click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Table Features

Below are the tabs you can find when you insert the Table Design Element:

A. Design Tab

The Design tab allows you to customize the look and the content of the Table. It has the following options:

DESIGN

	Style	allows you to customize the style of the Table. You can choose from simple, striped, bordered, or condensed.
	Background Color	allows you to change the Table's background color. You can [1] type the HEX code of the color you want to use or [2] use the drop-down.
	Text Color	allows you to choose the text color. You can [1] type the HEX code of the color you want to use or [2] use the drop-down.
	Header Text Color	allows you to customize the header's text color. You can [1] type the HEX code of the color you want to use or [2] use the drop-down.
	Border Size	allows you to modify the size of the border. The size will be in px.
	Border Color	allows you to change the color of the border. You can [1] type the HEX code of the color you want to use or [2] use the drop-down.
	Width	allows you to customize the width.

DATA

	Columns to Show	allows you to select the columns you want to show in the order you want them to appear.
	Page size	allows you to define how many items will be displayed on a single page inside the table element.
	Header	allows you to hide/show the columns’ headers.
	Columns Titles	allows you to assign the header name for each column on your Table.
	Link Column	allows you to add a reference link to the original SharePoint List.

TABLE OPTIONS

	Linking options	allows you to choose how the link will be opened. Check out Types of Linking Options to learn more.
	Responsive	allows you to choose the responsive style of the table. You can choose from bootstrap or flipscroll.
	Header First	allows you to assign the first row of the Table as the header.
	Sorting	allows you to enable sorting.
	Search	allows you to add the search function.
	Hover	allows you to add an effect whenever you hover over rows.

B. Connect tab

The Connect tab allows you to connect the Table to a data resource. Check out ShortPoint Connect: Basic Tutorial to learn more.

Congratulations! You now know how to customize the Table Design Element. Make the most out of this Design Element on your SharePoint pages.

Related articles:

• How to Customize the Text Design Element
• How to Customize the Tabs Design Element
• How to Customize the Tiles Design Element