How to create Placeholder in AG-Grid Text field

Question

I have an editable ag-grid. How can I add placeholders to empty cells (they should disappear when cells are edited)?

cellEditor: 'agTextCellEditor',
    cellEditorParams: (params) => {
        debugger;
    const { filterOptionKey, placeholder } = params;
    return `Enter the Athelte`;
  },
  filter: 'agNumberColumnFilter',
        filterParams: {
            filterPlaceholder: 'Enter the Athelte '
        }

}, we try the above code but its not working

Answer 1

We can use cellRenderer to do this like so!

{
  headerName: 'Text Editor',
  field: 'color1',
  cellRenderer: (params) => params.value || <span class="light-color">'Click to edit!'</span>,
  cellEditor: 'agTextCellEditor',
  cellEditorParams: {
    maxLength: 20,
  },
},

plunkr

Answer 2

const columnDefs = [
  {
    headerName: 'Athlete',
    field: 'athlete',
    editable: true,
    cellEditor: 'agTextCellEditor',
    valueFormatter: function (params) {
      const isEditing = params.node.gridOptions.api.getEditingCells().length > 0;
      return isEditing ? params.value : 'Enter the Athlete';
    },
  },
  // Other columns...
];

const gridOptions = {
  // other options...
};

// Create the grid
new agGrid.Grid(gridDiv, gridOptions);

// Set the data
gridOptions.api.setRowData(yourRowData);

In this example, the valueFormatter checks whether any cell is being edited using params.node.gridOptions.api.getEditingCells().length > 0. If a cell is being edited, it displays the actual value; otherwise, it displays the placeholder text. Note that this approach might not be as visually clean as using custom cell renderers, but it's a simpler solution using the available options in ag-Grid.

• Here, showing data only...

• Here, where is nothing at there showing Click to edit! and you can edit...