Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Commit 25d12e5

Browse files
authored
docs: improve formatters doc
1 parent ebec913 commit 25d12e5

File tree

1 file changed

+2
-7
lines changed

1 file changed

+2
-7
lines changed

docs/column-functionalities/Formatters.md

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,12 @@
1919

2020
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`.
2121

22-
For a [UI sample](#ui-sample), scroll down below.
23-
2422
#### Provided Formatters
2523

2624
`Slickgrid-Universal` ships with a few `Formatters` by default which helps with common fields, you can see the [entire list here](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/index.ts#L37).
2725

28-
> **Note** you might not need a Formatter when a simple CSS style and class might be enough, think about using `cssClass` column property as much as possible since it has much better perf.
26+
> **Note** you might not need a Formatter when simple CSS styling and class might be enough, think about using `cssClass` column property as much as possible since it has much better perf.
27+
> For example: `{ cssClass: 'text-right' }` on your column definition (or any other class) to align on the right.
2928
3029
**List of provided `Formatters`**
3130

@@ -322,7 +321,3 @@ A **Better Solution** is to use Custom Formatters **as much as possible** becaus
322321
* [Example 22](https://ghiscoding.github.io/Angular-Slickgrid/#/angular-components) | [Component](../../src/app/examples/grid-angular.component.ts) | [animated gif](https://user-images.githubusercontent.com/643976/53061045-87346580-348a-11e9-95f3-dfe33be6e966.gif)
323322
324323
In the [animated gif](https://user-images.githubusercontent.com/643976/53061045-87346580-348a-11e9-95f3-dfe33be6e966.gif), you can see the 3rd column is using `asyncPostRender` and before it gets rendered we show 3 dots (...), and if you look carefully you can see them being rendered before the actual result, it's short but it is visible.
325-
326-
### UI Sample
327-
328-
![Default Slickgrid Example](https://github.com/ghiscoding/angular-slickgrid/blob/master/screenshots/formatters.png)

0 commit comments

Comments
 (0)