Go to athemes.com

Table

The Table Widget allows you to create customizable tables within your WordPress site using the Elementor page builder. You can manually input data or upload a CSV file, making it flexible for various use cases.

Activate the widget

This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.

Widget options

Source section

  • Source: Choose between “Manual” or “CSV File” to define how you will input your table data.
  • CSV File: Upload a CSV file for automatic data entry. Available if “CSV File” is selected as the source.
  • Delimiter: Specify the delimiter used in your CSV file. Default is a comma (,).
  • Import first row as header: Toggle to use the first row of your CSV file as the table header.

Header section

  • Name: Enter the name of each header column.
  • Span: Define how many columns each header should span.
  • Icon: Add an icon or image to the header if needed.
  • Disable Header: Toggle to disable the table header if not needed.

Content section

  • Element Type: Choose between “Row” or “Column” to define the structure of your table.
  • Content Type: Select the type of content for each cell (Text, Icon, Image, WYSIWYG, Template).
  • Span: Specify how many columns or rows each cell should span.
  • Use as Header: Toggle to use a cell as a header.
  • Color: Set the text and background color for each cell.

Settings section

  • Highlight Mode: Choose to highlight rows, columns, cells, or none on hover.
  • Enable Sorting: Toggle to allow sorting of the table columns.
  • Enable Search: Toggle to enable a search bar for the table.
  • Enable Pagination: Toggle to enable pagination for the table.
  • Rows per Page: Set the number of rows displayed per page when pagination is enabled.
  • Pagination Alignment: Align the pagination controls to the left, center, or right.
  • Enable Horizontal Scroll: Toggle to enable horizontal scrolling for the table on smaller screens.
  • Width: Adjust the width of the table for responsive design.

Style tab

Customize the appearance of your table under this tab. You can adjust padding, margins, colors, borders, typography, and much more to ensure the widget matches your website’s design and branding perfectly.

Wrapper Style

  • Padding: Adjust the padding inside the table wrapper.
  • Margin: Set the margin outside the table wrapper.
  • Background Color: Set a background color for the table wrapper.
  • Border: Configure the border settings for the table wrapper.
  • Box Shadow: Apply a box shadow to the table wrapper.

Table Style

  • Border: Customize the border of the table.
  • Border Radius: Set the border radius for rounded corners.
  • Border Collapse: Choose between “Collapse” or “Separate” border styles.

Header Style

  • Padding: Adjust the padding inside the header cells.
  • Border Radius: Set the border radius for header cells.
  • Alignment: Align the header text.
  • Typography: Customize the typography of the header text.
  • Icon Size: Adjust the size of icons in the header.
  • Icon Position: Set the position of icons in the header (before, after, or top).
  • Colors: Customize the text, background, and border colors for normal, hover, and active states.

Content Style

  • Padding: Adjust the padding inside the content cells.
  • Border: Customize the border of the content cells.
  • Typography: Customize the typography of the content text.
  • Icon Color: Set the color of icons in the content cells.
  • Row Colors: Set different colors for odd, even, and hover states of the table rows.
  • Alignment: Align the content text within the cells.

Pagination Style

  • Padding: Adjust the padding inside the pagination buttons.
  • Spacing: Set the spacing between pagination buttons.
  • Colors: Customize the text, background, and border colors for normal, hover, and active states of the pagination buttons.
  • Border Radius: Set the border radius for pagination buttons.

These style options ensure that your table looks professional and integrates seamlessly with your site’s overall design.

Usage tips

  • Use CSV files for large datasets to save time on manual data entry.
  • Enable sorting and search to improve the user experience for tables with a lot of data.
  • Utilize the pagination feature for tables with many rows to keep your page layout clean.
  • Experiment with different style settings to match the table with your site’s design.

Conclusion

The Table Widget is a versatile tool for displaying data in a structured and organized manner on your website. With its extensive customization options, you can tailor the appearance and functionality to meet your specific needs and provide a better user experience.