Tabulator: placeholder effect for editable fields?

[AydinChavez]

Hi!

Is it possible to add a placeholder for editable fields (input) like the standard HTML placeholder attribute for input type text
(example: https://www.w3.org/wiki/images/5/52/Input_text02.png )

If not (yet), can this easily be added?

[tomheaps]

You could use a custom formatter to place text in the cell if the cell is empty i.e. before it is edited e.g.

var placeHolder = function(cell, formatterParams) {
    var cellValue = cell.getValue();
    if (cellValue === "") {
      return "Your Placeholder Text..."
    } else {
      return cellValue
    }
  };

Then in your column definitions:

{
        title: "Title",
        field: "Field",
        editor: true,
        formatter: placeHolder,
        etc.
      },

[AydinChavez]

Thanks mate, seemed to work!

[hariharasuthan-balaji]

In my case, the table data will be sent to the server. If I follow the above approach of setting the placeholder as the cell value directly, I would need to replace the placeholder by empty string before sending it to the server.

Instead, I would like to define the placeholder along with the column definition. Would this be possible ?columns : [{title: 'City',field: 'city', editor: true, placeholder: 'Enter city'}]

[olifolkerd]

Hey @harihsb

You would still need to use a custom formatter to get it to display on the table.

[hariharasuthan-balaji]

Thanks Oli, I was aware of that anyway. This is just a kind suggestion.