Handling moveableRows with a handle and CSV Import/Export in Tabulator

Описание: Learn how to effectively manage Tabulator tables with moveable rows using handles, while properly importing and exporting CSV data without losing the first column.
---
This video is based on the question https://stackoverflow.com/q/79366563/ asked by the user 'David Banning' ( https://stackoverflow.com/u/13280047/ ) and on the answer https://stackoverflow.com/a/79369401/ provided by the user 'David Banning' ( https://stackoverflow.com/u/13280047/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: tabulator issue with importing and exporting data when using a handle for moveable rows

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
Managing Moveable Rows with Handles in Tabulator: CSV Import/Export Tips

Introduction

If you're using Tabulator tables with moveable rows, you may want to add a drag handle to the left side of each row for better UX. This is commonly done with the rowHeader configuration and the handle formatter.

However, when you use formatter: "handle" in rowHeader and try to import CSV data back into the table, you might find that the first field of each row is missing. This issue can break your data import workflow.

In this post, I'll explain why this happens and share a practical workaround to handle CSV import/export without losing data.



The Problem Explained

When enabling movable rows with handles:

[[See Video to Reveal this Text or Code Snippet]]

The handle occupies an extra header space as a non-data column. When exporting to CSV and then re-importing it, Tabulator expects each CSV row to have a placeholder for this handle column. But since the handle column is not actual data, it can cause the first data field in each row to be shifted or dropped.

What Happens?

Exporting with .download() works fine — it excludes non-data columns like the handle.

Importing CSV with .import() expects a matching structure, but the handle column is missing in CSV.

This causes the first actual data field to be treated as the handle's placeholder, leading to the first field being lost.



Workaround: Add a Dummy Column for the Handle

A practical fix is to add a dummy column matching the handle's placeholder before exporting, ensuring CSV rows align with Tabulator’s expected structure. Then hide this dummy column to keep your UI clean.

How to Implement

Add a dummy column (e.g., id) before download:
This acts as the placeholder for the handle.

Download CSV.

Hide the dummy column afterward to avoid showing it in the UI.

Sample Code

[[See Video to Reveal this Text or Code Snippet]]

Notes

The { title: "id", field: "id" } column acts as a filler to keep CSV data aligned.

Adding the column with addColumn(..., true) inserts it at the start.

Since you hide the column after export, it won’t affect table display.

This dummy column only needs to exist during export; it doesn’t interfere with imports.



Additional Tips

Alternatively, if you’re importing CSV that starts with an empty field (e.g., leading comma) or enabling autoColumns: true, the issue may also resolve. But enabling autoColumns could affect column formatting and control.

The dummy column approach preserves your specific column configurations and formatting.



Conclusion

Using moveableRows with handle formatters in Tabulator breaks CSV import/export alignment because the handle column is not part of the CSV data. By adding a dummy placeholder column before export and hiding it afterward, you ensure the CSV structure matches the table, preventing data loss.

This workaround is simple, effective, and lets you keep the drag handle UX without sacrificing data integrity during CSV import/export.



For more complex needs, keep an eye on future Tabulator updates or consider customizing CSV parsers to handle dummy column offsets.