Tabulator Demo

About select editor text but not value in Tabulator

by LukeAtkinsFNM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.10/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.0/luxon.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@5.0.10/dist/css/tabulator.min.css">
<div id="example-table"></div>

JavaScript

const DateTime = luxon.DateTime;
const Duration = luxon.Duration;

var config = {
	footerElement: createFooterButton("Add Record", () => {
  	table.addRow({});
  }),
    "layout": "fitDataTable",
    "pagination": "local",
    "paginationSize": 10,
    "history": true,
    "rowContextMenu": [
        {
            "label": "Edit",
            "menu": [
                {
                    "label": "Copy"
                }
            ]
        },
        {
            "label": "Export",
            "menu": [
                {
                    "label": "Download as CSV"
                },
                {
                    "label": "Download as XLSX"
                },
                {
                    "label": "Download as PDF"
                },
                {
                    "label": "Download as JSON"
                }
            ]
        }
    ],
    "clipboard": true,
    "columns": [
        {
            "title": "Date",
            "field": "Date",
            "formatter": "DateTime",
            "formatterParams": {
                "format": "dd/MM/yyyy"
            },
            "variableHeight": false
        },
        {
            "title": "Bally-Hooley",
            "field": "Bally_Hooley",
            "formatter": "float",
            "formatterParams": {
                "units": "m"
            },
            editor: "number",
            "hozAlign": "right",
            "variableHeight": false
        },
        {
            "title": "Orchid",
            "field": "Orchid",
            "formatter": "float",
            "formatterParams": {
                "units": "m"
            },
            editor: "number",
            "hozAlign": "right",
            "variableHeight": false
        }
    ]
};

var data = [
    {
        "Date": 1623074400000,
        "Bally_Hooley": 5.76,
        "Orchid": 6.12,
        "BH_Id": 7,
        "O_Id": 6
    },
    {
        "Date": 1625666400000,
        "Bally_Hooley": 6.74,
       ...