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.

​
Overview

The CSV Table widget (tablentor-table-csv) parses raw CSV text or a remote CSV file URL and renders it as an HTML table inside Elementor. You can treat the first row as a header and optionally activate the DataTables library to add client-side search, pagination, and column sorting — all configurable from the Elementor panel.
  • Widget name: tablentor-table-csv
  • Elementor category: basic

​
Content tab controls

​
Content section

​
CSV Data
textarea
Paste your CSV directly into this field (10 rows tall in the panel). Each line becomes a table row; values within a line are split by commas. The default example is:
name, age, address
John, 25, 123 Street Name City
Jane, 30, 456 Another St Another City
A more complete example with four columns: 
Name, Age, City, Country
John Doe, 25, New York, USA
Jane Smith, 30, London, UK
Mike Johnson, 35, Toronto, Canada
​
First Row/Line as Header
switcher
default:"yes"
When Yes, the first line of the CSV is parsed separately and rendered inside <thead> as <th> elements. All remaining rows are placed in <tbody>. This setting must be Yes for the Enable Data Table option to appear.
​
Enable Data Table
switcher
Activates the DataTables JavaScript library on the rendered table, enabling client-side search, pagination, and sorting. Only visible when First Row/Line as Header is Yes.

​
Data Table section

Visible only when Enable Data Table is Yes and First Row/Line as Header is Yes.
​
Search Input
switcher
default:"yes"
Show or hide the DataTables search box above the table.
​
Pagination
switcher
default:"yes"
Show or hide pagination controls below the table.
​
Entries Per Page
switcher
default:"yes"
Show or hide the entries-per-page length dropdown. Only visible when Pagination is Yes.
​
Sorting
switcher
default:"yes"
Enable or disable column header click-to-sort. When enabled, DataTables renders sort indicator icons (::before / ::after pseudo-elements) on each <th>.

​
Style tab controls

​
Search section

Visible when Enable Data Table, First Row/Line as Header, and Search Input are all Yes. Label sub-section — targets .dt-search label
ControlType
TypographyGroup_Control_Typography
Text ColorColor
Input sub-section — targets .dt-search .dt-input
ControlTypeDefault
TypographyGroup_Control_Typography—
Text ColorColor—
BorderGroup_Control_Border—
Border RadiusDimensions (px / % / em / rem)4px all sides
PaddingDimensions (px / % / em / rem)5px all sides
MarginDimensions (px / % / em / rem)bottom 10px

​
Entries Per Page section

Visible when Enable Data Table, First Row/Line as Header, Pagination, and Entries Per Page are all Yes. Info sub-section — targets .dt-length label
ControlType
TypographyGroup_Control_Typography
ColorColor
Dropdown sub-section — targets .dt-length select.dt-input
ControlTypeDefault
TypographyGroup_Control_Typography—
Text ColorColor—
BorderGroup_Control_Border—
Border RadiusDimensions (px / % / em / rem)4px all sides
PaddingDimensions (px / % / em / rem)5px all sides
MarginDimensions (px / % / em / rem)bottom 10px

​
Table Heading section

Styles <thead> <th> cells (.tablentor-table-csv thead tr th).
ControlTypeNotes
Sorting Icon ColorColorShown only when Sorting is enabled. Targets .dt-column-order:before and .dt-column-order:after
AlignmentChoose (left / center / right)—
TypographyGroup_Control_Typography—
Text ColorColor—
BackgroundGroup_Control_Background (classic / gradient)Image type excluded
BorderGroup_Control_Border—
Border RadiusDimensions—
PaddingDimensions—

​
Table Body section

Styles <tbody> <td> cells (.tablentor-table-csv tbody tr td).
ControlTypeNotes
AlignmentChoose (left / center / right)—
TypographyGroup_Control_Typography—
Text ColorColor—
BackgroundGroup_Control_Background (classic / gradient)Image type excluded
BorderGroup_Control_Border—
Border RadiusDimensions—
PaddingDimensions—

​
Pagination section

Visible when Enable Data Table, First Row/Line as Header, and Pagination are all Yes. Paging Info sub-section — targets .dt-info
ControlType
TypographyGroup_Control_Typography
Text ColorColor
Buttons sub-section — targets .dt-paging .dt-paging-button
ControlTypeNotes
TypographyGroup_Control_Typography—
BorderGroup_Control_BorderColor property excluded
Border RadiusDimensions—
PaddingDimensions—
MarginDimensions—
Button colors are split across two state tabs:
ControlSelector
Color.dt-paging-button
Border Color.dt-paging-button
Background Colordiv.dt-container .dt-paging .dt-paging-button

​
Rendered HTML structure

<div
  id="tablentor-table-csv-{widget-id}"
  class="tablentor-table-csv-container"
  data-table="{base64-encoded-options}"
>
  <table class="tablentor-table-csv">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>London</td>
      </tr>
    </tbody>
  </table>
</div>
When Enable Data Table is off, the container receives the class no-data-table instead of the data-table attribute. When both Search Input and Pagination are disabled, the container also gets the class hide-table-heading.

​
DataTables integration

When Enable Data Table is turned on, the widget serializes the enabled feature flags into a JSON object and encodes it as a base64 string stored in the data-table attribute on the container <div>. The front-end JavaScript reads this attribute, decodes it, and passes the options to DataTables when initializing the table element. Example decoded data-table value: 
{
  "table": "yes",
  "searching": "yes",
  "paging": "yes",
  "ordering": "yes"
}
If Entries Per Page is disabled, "paging_length": "no" is added to the options object, which suppresses the length-change dropdown. DataTables maps these values to its own configuration when it initializes on the frontend.
In the Elementor editor, the CSV preview is limited to 12 rows for performance. All rows are rendered on the published frontend.
File URL import: when using a CSV file URL, the file must have a .csv extension and be publicly accessible. The server fetches the file using PHP file_get_contents(). Private, password-protected, or self-signed HTTPS URLs will fail silently or produce an error message in place of the table.

​
Editor preview behavior

In the Elementor editor, when Pagination is enabled the widget renders a static dummy pagination bar below the table so you can style the buttons without leaving the editor. This dummy bar uses the same DataTables CSS class names (.dt-paging, .dt-paging-button, .dt-info) as the real library, so style changes in the panel are reflected immediately. The full DataTables instance — with real pagination, search, and sorting — initializes only on the published frontend.

Build docs developers (and LLMs) love

Get started for freeTalk to us