Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jakaria-istauk/tablentor/llms.txt

Use this file to discover all available pages before exploring further.

This guide walks you through creating your first table with each of the two Tablentor widgets. You will have a live, styled table on your page by the end.

​
Create a basic table

1

Open the Elementor editor

Edit any page or post by clicking Edit with Elementor, or create a new page and open it in the editor.
2

Search for the Basic Table widget

In the left widget panel, type Basic Table in the search field. The Basic Table widget will appear in the results.
3

Drag the widget onto the canvas

Drag the Basic Table widget to the desired section or column on your page canvas.
4

Set the number of columns

In the Content tab, find the Number of Columns control. Enter a value between 1 and 20 (default is 3). A corresponding column section appears for each column you define.
5

Add rows to each column

Expand each Column section (Column 1, Column 2, etc.). Inside each column, use the Repeater to add rows:
  • Click Add Item to add a new row.
  • Set the Row Name field to label the row.
  • Choose a Content Type: Content for text or Image for an image.
  • Enter your text content or select an image.
Repeat for each column. Each row at the same repeater position corresponds to the same table row across all columns.
6

Configure search

Scroll down to the Enable Search toggle. Turn it on if you want visitors to filter table rows in real time, or leave it off for a static table.
7

Apply styling

Switch to the Style tab to customize the table’s appearance:
  • Table Styling — background color, border, border radius, box shadow, padding.
  • Table Heading — typography, text color, and background for <th> cells.
  • Table Columns — typography, text color, background, border, and padding for <td> cells.
8

Publish the page

Click Publish (or Update) to make your table live.

​
Import a CSV table

1

Add the Table CSV widget

In the Elementor widget panel, search for Table CSV. Drag the Table CSV widget onto your canvas.
2

Paste your CSV data

In the Content tab, locate the CSV Data textarea. Paste your comma-separated data directly into the field. Format the data with one row per line and values separated by commas:
Name, Age, City, Country
John Doe, 25, New York, USA
Jane Smith, 30, London, UK
Mike Johnson, 35, Toronto, Canada
The first line becomes column headers when the header option is enabled (see next step).
3

Set the first row as a header

Toggle First Row/Line as Header to on if your CSV data’s first line contains column names. The header row will be styled separately from the data rows.
4

Enable DataTables for pagination, sorting, and search

Toggle Enable Data Table to on to activate the DataTables integration. This adds client-side pagination, column sorting, and a search field to the rendered table — useful for larger datasets.
5

Publish the page

Click Publish (or Update). Your CSV data will render as a fully styled, responsive table on the frontend.
In the Elementor editor, large CSV datasets are limited to 12 preview rows for performance. All rows display on the published frontend.

Build docs developers (and LLMs) love

Get started for freeTalk to us