AI Data Table addon is a useful tool that allows you to create and display tabular data on your website. With this addon, you can present information in a structured and organized manner, making it easier for visitors to understand and analyze data.
The addon is particularly useful for displaying information such as product specifications, pricing comparisons, event schedules, or any data that requires a tabular representation.
The biggest drawback of dealing with a large data collection is that you have to scroll down your table several times to get entries that are near the bottom. Because of this, AI Data Table has a “Search” option that enables you to find the data you need.
How to set up AI Data Table?
Step 1: Search and find the Data Table in the search box under the Elements Tab. After that, easily drag and drop the widget wherever you want inside the Elementor section
Step 2: This is how the element will look after inserting the AI Data Table.
How to set up content for AI Data Table?
Under the content tab, you can configure the AI Data Table.
There are three main fields in General Section such as Table Sorting, Table Search, Table Pagiation. Enable the toggle to add the features to the table.
AI Data Table supports inline editing, so if you want you can edit the content for each individual cell directly inside.
You may quickly add new columns or rows from the Editor itself. You can also choose to delete a specific row or column. In addition, you can copy, paste, and undo the content of your data.
How to add Styles to AI Data Table?
Switch to the Style tab to style the Data Table.
You can customise the table’s Background Color, Font Color, Margin, Padding, Border type, Radius, and Box Shadow in the General section.
Table: In this area you can adjust Row Padding, Border Type, Alignment, Typography of the Table. If you want a distinct background color and font color for the table’s odd and even rows, turn on the Row Odd Even Style option and customize it.
Row Heading: Customise the First Row’s Typography, Row Padding, Background Color, and Text Color in this area.
Column Heading: Customise the First Column’s Background Color, Font Color, Padding, Alignment and Typography.
Column: Set the Minimum width for the table’s cells under Cell Min Width. Additionally, you have control over the Typography, Padding, Background Color, and Font Color.
Search: Using Alignment, you may keep the table’s search icon anywhere you like. Additionally, you can customise the Search Box’s Background Color, Margin, and Padding.
Pagination: Using the Alignment field, keep the pagination box to the right, left, or centre. With the Outer Spacing Field, you can also modify the distance between the table and the box. You can additionally modify the dimensions of the numbers in the Number Dimension Field as well as set the distance between pagination boxes in Number Spacing.
By following the basic steps and a bit more modifying, you can style your AI Advanced Data Table as per your preference.
