\n\nTambém é possível formatar as células de forma manual usando a propridade `formatter`:\n\n```json\n\"cell\": {\n \"name\": \"gdp\",\n \"reducer\": \"SUM\",\n \"formatter\": \"{{AppController.formatter}}\"\n}\n```\n\n```ts\n// AppController.ts\nexport class AppController {\n public formatter = (value: number, labels: ILabel[]) => {\n return `$ ${value}`;\n };\n}\n```\n\n### Propriedades\n\n#### Crosstab\n\n| Nome | Tipo | Padrão | Descrição |\n|---------------|--------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------|-----------------------------------------------------------------------|\n| `datasource` | [`IDatasource`](https://docs.zeedhi.com/frontend/base-types/datasource) | | Fonte de dados do componente |\n| `cell` | [`ICell`](#icell) | `{ reducerInitialValue: 0, align: 'right' }` | Configuração de exibição das células |\n| `rows` | [`IField[]`](#ifield) | `[]` | Campos que serão utilizados como linhas |\n| `cols` | [`IField[]`](#ifield) | `[]` | Campos que serão utilizados como colunas |\n| `noDataText` | `string` | `'NO_DATA'` | Texto a ser exibido quando o datasource não possuir dados |\n| `loadingSlot` | [`IComponentRender[]`](https://docs.zeedhi.com/frontend/base-types/component-render) | `[{ name: 'name-loading', component: 'ZdText', text: 'Loading items...' }]` | Componente a ser renderizado enquanto o datasource estiver carregando |\n| `height` | `string \\| number` | `'auto'` | Altura do componente |\n| `dense` | `boolean` | `true` | Define se a altura das linhas será densa |\n\n\n#### Eventos\n\n| Nome | Parâmetros | Descrição |\n|-------------|-----------------------------------------------------------------------|------------------------------------------|\n| `cellClick` | `{ component, event, element, value, labels }: IEventParam` | Evento disparado ao clicar em uma célula |\n\n\n#### IField\n\n| Nome | Tipo | Padrão | Descrição |\n|----------------|----------------------------------------------|--------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `name` | `string` | | Nome do campo |\n| `label` | `string` | | Label a ser exibida no Crosstab |\n| `showFooter` | `boolean` | `false` | Exibe a coluna no footer |\n| `showHeader` | `boolean` | `true` | Exibe a coluna no header |\n| `sort` | `string \\| ((a: number, b: number) => number)` | | Função utilizada para ordenar os campos. Esta função deve retornar 1, 0 ou -1, seguindo o mesmo padrão do [Arrays.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) |\n| `valuesFiltered` | `string[]` | | Filtro de valores que podem ser renderizados. Deve ser um array de strings contendo os possíveis valores |\n\n\n#### ICell\n\n| Nome | Tipo | Padrão | Descrição |\n|---------------------|------------------------------------------------------------------------------------------------------------------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `name` | `string` | | Nome do campo a ser utilizado para agregar as células |\n| `align` | `string` | `'right'` | Alinhamento dos valores das células |\n| `componentProps` | [`IDictionary`](https://docs.zeedhi.com/frontend/base-types/dictionary) | | Propriedades utilizadas para formatar as células. Elas serão formatadas de acordo com o componente utilizado |\n| `formatter` | `string \\| ((value: number, labels: ILabel[]) => string \\| number)` | | Função utilizada para formatar as células. Os parâmetros `value` e `labels` são passados por parâmetro para a função de formatação |\n| `reducer` | `string \\| ((sum: number, item: IDictionary) => number)` | `'COUNT'` | Função utilizada para agregar os valores. Existem duas funções predefinidas, basta passar o nome delas para a propriedade: `COUNT` e `SUM`. Também é possível passar uma função personalizada para agregar os valores, utilizando um Accessor |\n| `reducerInitialValue` | `number` | `0` | Valor inicial do agregador |\n\n\n#### ILabel\n\n| Nome | Tipo |\n|-------|--------|\n| `field` | `any` |\n| `value` | `string` |","readmeFilename":"README.md"}
![\"Basic](\"./img/basic-usage.png\")
\n![\"Formatter\"/](\"./img/formatter.png\")
\n