Table Widget Tutorial

Intro

Elementor Table widget by Premium Addons Pro plugin allows you to create advanced tables with lots of customization options. Use the Premium Table widget to create tables and sort the data, add icons and URLs links to the table’s cells. Not just that, you can add a live search field. Last but not least, you can build custom tables or show data from your CSV and Google spreadsheets.

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: Build the table and add the data manually from Elementor editor.
• Import CSV File: Upload and import a file from the media library, or import a remote file. The table content will display directly on 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 a header or body row and you can set an interval to refresh the table data.

2. Header

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.
  • Test Color: Set the header text color.
  • Typography: Adjust the font settings.
• 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.
• US Numbers Format: Enable this if you are using US-formatted numbers. For instance, 1,234,567.89
• Sort on Mobile: Same as Sortable but enable or disable it on mobile devices.
• Search: Enables searching through the table’s data.
• 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 border types, as well as the width of the border on each side of the table head.
• 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 arrow colors.
• Hover Color: Select on hover color for arrows.
• Background: Select the background color for the arrows.
• Border Type: Select between the border types, as well as the width of the border on each side.
• Text Shadow: Set the text-shadow type.
• Padding: Select the padding between it in pixels, em, or %. Change the padding of all the sides at once, or individually.

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 Type: Select between the border types, as well as the width of the border on each side.
• Text Shadow: Set the text-shadow type.
• Margin: Creates a space around the search box, outside of any defined borders.
• Padding: Select the padding between it in pixels, em, or %. Change the padding of all the sides at once, or individually.

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 Type: Select between the border types, as well as the width of the border on each side.
• Text Shadow: Set the text-shadow type.
• Margin: Creates a space around it, outside of any defined borders.
• Padding: Select the padding between it in pixels, em, or %. Change the padding of all the sides at once, or individually.

7. Pagination

• Typography: Adjust the font settings.
• Margin: Creates a space around it, outside of any defined borders.
• Numbers Padding: Select the padding between it in pixels, em, or %. Change the padding of all the sides at once, or individually.
• Color: Select the color of the numbers.
• Background Color: Select the fill color of the number box.
• Border Type: Select between the border types, as well as the width of the border on each side.

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: Select between the border types, as well as the width of the border on each side.
• Border Radius: Set the image’s 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 Elementor 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.