Percentage Cell Editor

Summary

The Percentage Cell Editor allows cells where the value is a percentage to be edited as such
This works in the same fashion as when editing percentages in Excel

The Percentage Cell Editor allows cells, where the value is a percentage, to also be edited as percentages.

The Editor is designed to work in exactly the same way as percentage editors in Excel.

Note

There is a parallel AdaptableReactPercentageEditor available for us in AdapTable React

For example a value of 0.123456 will be displayed in the Percentage Cell Editor as 12.3456%.

Hint

Columns that use the Percentage Cell Editor are typically also given a Number Display Format of Percentage
This ensures that the Display Value and the Cell Editor Value remain consistent

Percentage Editor

Fork Fork

This demo shows how to use the Percentage Cell Editor
We have added a new column called Usage which has values like 0.12345, 0.13579 etc.
In ColumnDefs we set the CellEditor for the column to be the AdaptablePercentageEditor
We also created a Number Display Format for the Usage Column of Percentage

Open to see how the Percentage Cell Editor is set up

In ColumnDefs we define the Column and add the Cell Editor:

{
  field: 'usage',
  headerName: 'Usage',
  cellDataType: 'number',
  editable: true,
  cellEditor: AdaptablePercentageEditor,
},

We create a Number Display Format for the Usage Column of Percentage:

FormatColumn: {
  FormatColumns: [
    {
      Name: 'FormatColumn-usage-213',
      Scope: {
        ColumnIds: ['usage'],
      },
      DisplayFormat: {
        Formatter: 'NumberFormatter',
        Options: {
          FractionDigits: 2,
          Suffix: '%',
          Multiplier: 100,
        },
      },
    },
  ],
},

Try It Out

Try to edit a cell in the Usage Column and see that the Percentage Editor is used
Suspend the Format Column to see the real underlying value for the Usage column

Cell Editor Params

Similar to the Numeric Cell Editor, the Percentage Editor is configurable.

This is done using the cellEditorParams property in the AG Grid Column Definition.

This maps to the AdaptablePercentageCellEditorParams object, which contains 2 properties:

showClearButton - whether to show the Clear button (defaults to true)

Note
When set to true, this property works together with emptyValue
emptyValue - value to set for the cell when the Clear button is clicked (defaults to an empty string)

Caution

If the colDef has a valueParser provided as a function, that will be used before setting the value for the cell

Percentage Editor Params

Fork Fork

This demo contains the same Percentage Cell Editor (and Display Format) as the demo above but with 2 Cell Editor Params set:
- showClearButton is set to true so we see a Clear Button
- emptyValue has been set to 1 (instead of default of 0)

Open to see how the Percentage Cell Editor is set up

In ColumnDefs we define the Column and add the Cell Editor and add 2 Cell Editor Params:

{
 field: 'usage',
  headerName: 'Usage',
  cellDataType: 'number'
  editable: true,
  cellEditor: AdaptablePercentageEditor,
  cellEditorParams: {
    emptyValue: 1,
    showClearButton: true,
  },
},

Try It Out

Try to edit a cell in the Usage Column and see that the Percentage Editor is used
Note that there is now a Clear button, and when it is clicked the value changes to 1%

Percentage Cell Editor

(Recorded with AdapTable v19.0)

PreviousNumeric Cell Editor NextDate Picker