Quick start

Build your first Tablentor table in under 5 minutes.

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.