Skip to content

Commit

Permalink
docs: improve formatters doc
Browse files Browse the repository at this point in the history
  • Loading branch information
ghiscoding authored Jan 23, 2025
1 parent 0ae82df commit 2e279f0
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions docs/column-functionalities/Formatters.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

`Formatters` are functions that can be used to change and format certain column(s) in the grid. Please note that it does not alter the input data, it simply changes the styling by formatting the data differently to the screen (what the user visually see).

A good example of a `Formatter` could be a column name `isActive` which is a `boolean` field with input data as `True` or `False`. User would prefer to simply see a checkbox as a visual indication representing the `True` flag, for this behavior you can use `Formatters.checkmark` which will use Material Design icon of `mdi-check` when `True` or an empty string when `False`.
A good example of a `Formatter` could be a column name `isActive` which is a `boolean` field with input data as `True` or `False`. User would prefer to simply see a checkbox as a visual indication representing the `True` flag, for this behavior you can use `Formatters.checkmarkMaterial` which will use Material Design icon of `mdi-check` when `True` or an empty string when `False`.

#### Provided Formatters

Expand All @@ -30,7 +30,7 @@ A good example of a `Formatter` could be a column name `isActive` which is a `bo
* `Formatters.arrayObjectToCsv`: Takes an array of complex objects and converts it to a comma delimited string.
* you also need to pass the property name(s) for the complex object, i.e.: `formatter: Formatters.arrayObjectToCsv, params: { propertyNames: ['name'], useFormatterOuputToFilter: true }`
* `Formatters.arrayToCsv` : takes an array of text and returns it as CSV string
* `Formatters.checkmarkMaterial` use Material Design to display a checkmark icon
* `Formatters.checkmarkMaterial` will display a checkmark icon when value is truthy using Material Design icons
* `Formatters.collection`: Looks up values from the columnDefinition.params.collection property and displays the label in CSV or string format
* `Formatters.complexObject`: takes a complex object (with a `field` that has a `.` notation) and pull correct value, there are multiple ways to use it
1. `{ id: 'firstName', field: 'user.firstName', formatter: Formatters.complexObject}`, will display the user's first name
Expand Down

0 comments on commit 2e279f0

Please sign in to comment.