Table Widget Tutorial

Intro

The Premium Table widget will allow you to create unique tables with lots of customization options. You can enable a sorting feature, add icons and url links to table’s cells, and enable the live search. Last but not least, Premium Table Widget comes with the powerful ability to upload and import a CSV file to create the table.

Click here to check Premium Table Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

• Data
• Head
• Body
• Display Options
• Advanced Settings

1. Data

Data Type:

• Custom: Add your content to the table directly in the WordPress editor.
• Import CSV File: Upload and import a file from the media library, or import a remote file. The table content will display directly in your post or page. Optionally, you can edit the “Data Separator” which is used to separate your data into cells. Make sure that the separator matches your imported file. Also, you could render the first row as header or body row and you can set an interval to refresh the table data.

2. Head

These settings are only available if the custom data is used.

The table head is the first heading above each column. The default is 3 headers.
Click on the object to open the settings:

• Text: Change the visible text label.
• Icon: Select an icon, upload a custom image via the media library or add Lottie Animations. You can also adjust its position and spacing. For the Lottie Animations, you can enable loop or reverse the animation.
• Row Span: Lets you span the table head cell and text across multiple rows.
• Column Span: Lets you span the table head cell and text Across multiple columns.
• Alignment: Align the text to the left, center or right.
• Link: Enable/disable adding an existing page link or an external link to your cell.

Click on the “Add Item” button to add an additional column and table head.

3. Body

These settings are only available if the custom data is used.

In the Body section you can see all the current rows and cells. You can edit and remove existing cells and add new ones.

In addition to the text and icon settings that are also available for the table heads, you can change the cell type between cell and row, and change a body cell to a table head.

4. Display Options

• Table Layout: Set table cells width to be auto or fixed.
• Width: Select the width of the table.
• Blur On Hover: Blurs the text of the other table rows when users hover over a cell. This option requires the row text hover color to be set in the styles tab.
• Responsive: Enables scroll on mobile.
• Table Alignment: If the width is less than 100%, you can choose to align the table to the left, center or right.

5. Advanced Settings

• Sortable: Enables sorting with respect to the table heads. This option is only available if the custom data is used.
• Sort on Mobile: Same as Sortable but enable or disable it on mobile devices.
• Search: Enables searching through the table using rows’ first cell keyword.
• Show Records: Shows a dropdown to control the number of records. This option is only available if the custom data is used.
• Pagination: enable pagination to divide the table rows into multiple pages. You can also select the number of rows for each page.
• Direction: Choose between left to right and right to left.

Style

1. Head

In the Head style settings you can style the odd and even table heads differently by clicking the respective buttons at the top.

• Text Color: Select a text color for the heading.
• Text Hover Color: Select a text color that will be used when the user hovers over the heading.
• Icon Color: Select a color for the icon.
• Typography: Adjust the font settings.
• Text Shadow: The shadow option adds a shadow to the text itself. Adjust the shadow color and the following controls:
  • Horizontal Position.
  • Vertical Position.
  • Blur.
  • Spread.
  • Position: Outline or Inset.
• Background: Select the background color, image or background gradient for the table heads, as well as the background that will be used when the user hovers over it.

Border Type

Select between the following border types, as well as the width of the border on each side of the table head:

• None
• Solid
• Double
• Dotted
• Dashed
• Groove

Padding: Select the padding between the head cells in pixels, em or %. Change the padding of all the sides at once, or individually.

2. Rows

The Rows settings are the same as the head settings:

3. Columns

Background: Select the background color, image or background gradient for the odd and even columns, as well as the background that will be used when the user hovers over the column.

4. Sort

• Color: Select arrows colors.
• Hover Color: Select on hover color for arrows.
• Background: Select background color for the arrows.
• Border Type.
• Text Shadow.
• Padding.

5. Search

• Width: Set search box width.
• Input Text Color: Select the color for the text color inside the search box.
• Background Type: Select background type of the search box, color or background.
• Border.
• Box Shadow.
• Margin.
• Padding.

6. Records

• Width: Select the width of the show records box.
• Option Color: Select the color of the options text.
• Background Type: Select the background color of the options text.
• Border.
• Box Shadow.
• Margin.
• Padding.

7. Pagination

• Typography.
• Margin.
• Numbers Padding.
• Color: Select the color of the numbers.
• Background Color: Select the fill color of the number box.
• Border.

8. Table

• Background Type: Select the background color, image or background gradient for the table itself, as well as the background that will be used when the user hovers over the table.
• Border Type
• Border Radius
• Box Shadow: You can add a shadow around the widget with this option. Adjust the color and the following settings:
• Horizontal Position
• Vertical Position
• Blur
• Spread
• Position: Outline or Inset

How to Merge Columns and Rows in Table?

Sometimes we may need to combine numbers of rows and columns to display a single cell.

Merge Column:

Navigate to Column Span and set the value that matches your needs.

Merge Row:

Navigate to Row Span and set the value that matches your needs.

Also, you could merge columns and row at the same time.