import { PoTableColumnIcon } from '../po-table-column-icon/po-table-column-icon.interface'; import { PoTableColumnLabel } from '../po-table-column-label/po-table-column-label.interface'; import { PoTableDetail } from '../po-table-detail/po-table-detail.interface'; import { PoTableSubtitleColumn } from '../po-table-subtitle-footer/po-table-subtitle-column.interface'; import { PoTableBoolean } from './po-table-boolean.interface'; /** * @usedBy PoTableComponent * * @description * * Interface para configuração das colunas do `po-table`. * * As definições das colunas serão aplicadas linha a linha. */ export interface PoTableColumn { /** * Define uma ação na coluna quando o tipo da coluna for `link` ou `icon`. * * > Quando for do tipo `link` será enviado como primeiro parâmetro o valor da coluna * e no segundo parâmetro o objeto completo da linha. Caso tenha sido definido uma ação e um link na coluna, a ação * será executada ao invés do link. * * > Quando for do tipo `icon` enviará o objeto completo da linha e o segundo parâmetro será a definição da coluna. */ action?: Function; /** * Define um objeto do tipo `PoTableBoolean` para as colunas do tipo _boolean_. Por exemplo: * * ``` * { property: 'approbation', type: 'boolean', boolean: { * trueLabel: 'Accepted', falseLabel: 'Rejected' * }} * ``` * * > Caso não seja definido um objeto para colunas do tipo *boolean*, * esta exibirá por padrão `Sim` e `Não` de acordo com os valores _booleanos_. */ boolean?: PoTableBoolean; /** * @optional * * @description * * Define a cor que será aplicada no conteúdo da coluna. * * Valores válidos: * - `color-01` * - `color-02` * - `color-03` * - `color-04` * - `color-05` * - `color-06` * - `color-07` * - `color-08` * - `color-09` * - `color-10` * - `color-11` * - `color-12` * * > Também é possível utilizar as 35 cores da paleta **Caption Tag Colors**: * * - `caption-tag-01` `caption-tag-02` `caption-tag-03` `caption-tag-04` `caption-tag-05` * - `caption-tag-06` `caption-tag-07` `caption-tag-08` `caption-tag-09` `caption-tag-10` * - `caption-tag-11` `caption-tag-12` `caption-tag-13` `caption-tag-14` `caption-tag-15` * - `caption-tag-16` `caption-tag-17` `caption-tag-18` `caption-tag-19` `caption-tag-20` * - `caption-tag-21` `caption-tag-22` `caption-tag-23` `caption-tag-24` `caption-tag-25` * - `caption-tag-26` `caption-tag-27` `caption-tag-28` `caption-tag-29` `caption-tag-30` * - `caption-tag-31` `caption-tag-32` `caption-tag-33` `caption-tag-34` `caption-tag-35` * * > Existe a possibilidade de informar uma função que retorne um dos valores aceitos, serão passados * por parâmetro a linha e a coluna atual, por exemplo: * * ``` * (row, column) => { row[column] == 'text' ? 'color-03' : 'color-09' } * ``` * * > É possível também usá-la na coluna do tipo `icons` para alteração das cores de seu conteúdo conforme exemplo abaixo, * contudo, desta forma sobrepõe a cor especificada em cada objeto caso haja: * * ``` * { property: 'columnIcon', label: 'Like', type: 'icon', color: 'color-08', icons: [ * { value: 'an an-star', action: () => this.notification() } * ]}, * ``` */ color?: string | Function; /** * Define um objeto que segue a interface `PoTableDetail`, para as colunas de detalhes. Por exemplo: * * ``` * { columns: [{ property: 'package', label: 'Pacote' }], typeHeader: 'top' } * ``` * */ detail?: PoTableDetail; /** * Função que deve retornar um booleano para habilitar ou desabilitar o *link* e sua ação. * * > Propriedade disponível nas colunas do tipo `link`. */ disabled?: Function; /** * Formato de exibição do valor da coluna. * * | Formatação | Type da Coluna | Descrição | Exemplos | * |------------|-----------------|-----------|----------| * | Monetário | `currency` | Formato para valores monetários. Informe o código da moeda (ISO 4217). | `'BRL'`, `'USD'`, `'EUR'`, `'RUB'` | * | Data | `date` | Aceita apenas os caracteres de dia(dd), mês(MM) e ano (yyyy ou yy), caso não seja informado um formato o mesmo será 'dd/MM/yyyy' | `'dd/MM/yyyy'`, `'dd-MM-yy'`, `'mm/dd/yyyy'` | * | Hora | `time` | Aceita apenas os caracteres de hora(HH), minutos(mm), segundos(ss) e milisegundos(f-ffffff), os milisegundos são opcionais, caso não seja informado um formato o mesmo será 'HH:mm:ss' | `'HH:mm'`, `'HH:mm:ss.ffffff'`, `'HH:mm:ss.ff'`, `'mm:ss.fff'` | * | Número | `number` | Aceita um valor seguindo o padrão [**DecimalPipe**](https://angular.dev/api/common/DecimalPipe) para formatação, e caso não seja informado, o número será exibido na sua forma original. | `'1.2-5'` (ex.: `50` → `50.00`) | * * Observação: caso não seja informado um formato, o valor será exibido em sua forma original. */ format?: string; /** * @description * * Define um *array* de objetos para colunas de ícones que irá sobrepor os valores como `action` e `color` * definidos na coluna, à partir do *value* da [`PoTableColumnIcon`](documentation/po-table#tableColumnIcon), por exemplo: * * ``` * { property: 'columnIcon', label: 'Icons', type: 'icon', action: this.favorite.bind(this), icons: [ * { value: 'delete', icon: 'an an-plus', color: 'color-06', action: this.add.bind(this), tooltip: 'Adiciona um novo item' }, * { value: 'edit', icon: 'an an-pencil-simple', action: this.edit.bind(this) }, * { value: 'delete', icon: 'an an-trash', color: 'color-12', action: this.remove.bind(this) } * ]}, * ``` * * ``` * ... * { id: 1, columnIcon: ['an an-pencil-simple', 'an an-trash', 'an an-star'] } * ... * * ``` */ icons?: Array; /** * Texto para título da coluna. * * Caso não seja informado, será utilizado como *label* o valor da propriedade *property* com a primeira letra em maiúsculo. */ label?: string; /** * Define um array de objetos para as colunas de label, onde 'labels' é uma lista de objetos * do tipo `PoTableColumnLabel` na qual devem ser definidas os labels. Por exemplo: * * ``` * { property: 'flightStatus', label: 'Status', type: 'label', width:'100px', labels: [ * { value: 'confirmed', color: 'caption-tag-13', label: 'Confirmado', tooltip: 'Flight Status' }, * { value: 'delayed', color: 'caption-tag-08', label: 'Atrasado', tooltip: 'Flight Status' } * } * ``` * */ labels?: Array; /** * Define o nome da propriedade que conterá o `link` a ser redirecionado. * * @default link */ link?: string; /** Nome identificador da coluna. Também permite objetos aninhados conforme exemplo abaixo. * * ``` * { property: 'address.street', label: 'Rua' } * ``` */ property?: string; /** * @optional * * @description * * Controla se a coluna será considerada como "ordenavel". Caso seja definido um valor falso, a coluna não será usada para * ordenação. * * @default `true` */ sortable?: boolean; /** * Define um array de objetos para as colunas de legenda. Onde, `subtitles` é uma lista de objetos do tipo PoTableSubtitle na qual * devem ser definidas as opções de legenda. Por exemplo: * * ``` * { property: 'flightStatus', label: 'Status', color: 'subtitle', width:'100px', subtitles: [ * { value: 'confirmed', color: 'caption-tag-13', label: 'Confirmado', content: '1' }, * { value: 'delayed', color: 'caption-tag-08', label: 'Atrasado', content: '2' } * } * ``` * Nesse exemplo a coluna escolhida para legenda é 'flightStatus', se o valor dessa coluna for 'confirmed', o texto da legenda será * 'Confirmado'. * */ subtitles?: Array; /** * Define um texto de ajuda que será exibido ao passar o *mouse* sobre um texto. * * > O tooltip só será visível se for uma coluna do tipo *link*. * * > Caso o conteúdo da célula exceder a largura da coluna, * é ignorado o valor atribuído ao *tooltip* e será exibido justamente o conteúdo da célula. */ tooltip?: string; /** * Tipo da coluna. * * Valores válidos: * - `boolean`: Exibirá por padrão `Sim` e `Não` de acordo com os valores *booleanos*. * > Caso necessite exibir valores diferentes do padrão, deve-se utilizar a propriedade `boolean` desta interface. * - `currency`: valores monetários. * * - `date`: valor de datas. * + Aceita os tipos _string_ e _Date_ padrão do Javascript, * por exemplo: `'2017-11-28'` ou `new Date(2017, 10, 28)`. * * - `dateTime`: valor de data com horário. * + Aceita o tipo _string_ no formato **ISO-8601** extendido **'yyyy-mm-ddThh:mm:ss+|-hh:mm'** * e o tipo _Date_ padrão do Javascript, por exemplo: `'2017-11-28T00:00:00-02:00'` ou `new Date(2017, 10, 28)`. * * - `detail`: array de objetos para o master-detail. * + Incompatível com `virtual-scroll`, que requer altura fixa nas linhas. * - `icon`: *array* de *string* ou objetos para a coluna de ícones. * - `label`: texto com destaque. * - `link`: habilita link na coluna para ação ou navegação. * - `number`: valores numéricos. * - `string`: textos. * - `subtitle`: array de objetos para a coluna de legenda. * * - `time`: valor de horário. * + Aceita o tipo _string_ nos formatos **'HH:mm:ss'** ou **'HH:mm:ss.ffffff'**, por exemplo: `'23:12:45'`. * - `cellTemplate`: Indica que a coluna será utilizada como template, em conjunto com o * [PoTableCellTemplate](/documentation/po-table-cell-template). * - `columnTemplate`: Indica que a coluna será utilizada como template, em conjunto com o * [PoTableColumnTemplate](/documentation/po-table-column-template). * * @default `string` */ type?: string; /** * @optional * * @description * * Controla a exibição da coluna. Caso seja definido um valor falso, a coluna não será exibida mas mas será possível torná-la * visível através do **gerenciador de colunas**. * * > A disponibilidade de visualização pode limitar-se de acordo com a definição de `p-max-columns`. * * @default `true` */ visible?: boolean; /** * * hoje o tamanho mínimo das colunas é de 32px, respeitando o padding lateral. * Boas Práticas: * Indicamos: * - para colunas com 2 das propriedades (property, [p-draggable] e [p-sort]) : 96px * - para colunas com 3 propriedades (property, [p-draggable] e [p-sort]) : 144px * */ width?: string; fixed?: boolean; }