Select entire column text when editing

Question

Below tabulator (version 6.3.0) column assignment code works. It is input editor. When user click it, cursor will alway on end of existing text. I would like to highlight entire existing text, when user click it. It means when I enter first character, it will replace entire existing text by entered character.

          { title: "Discount",field: "Discount",
            editor: "input",
            validator: ["numeric"],
          },

Answer 1

You can add selectContents: true option to editorParams of the editable column to select its text content when loaded. Here is an example:

const data = [
  { id: 1, name: 'Billy Bob', age: '12', gender: 'male', height: 1, col: 'red', dob: '', cheese: 1 },
  { id: 2, name: 'Mary May', age: '1', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982', cheese: true },
  { id: 10, name: 'Margret Marmajuke', age: '16', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1999' }
]

const table = new Tabulator('#table', {
  data: data,
  columns: [
    { 
      title: 'Name',
      field: 'name',
      editor: 'input',
      editorParams: {
        selectContents: true
      }
    },
    { title: 'Age', field: 'age'},
    { title: 'Gender', field: 'gender'},
    { title: 'Height', field: 'height' },
    { title: 'Color', field: 'col' }
  ]
})

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>

<div id="table"></div>

Reference: https://tabulator.info/docs/6.3/edit#editor-input