Comparative Table

This section describes the BfmComparativeTableComponent component.

Usage

If you need more customization, you need to import it in your module and use it in your template.

comparative-table.component.ts

import { BfmComparativeTableComponent } from '@celerofinancas/ui-reports';

@Component({
  standalone: true,
  selector: 'comparative-table',
  imports: [BfmComparativeTableComponent],
  templateUrl: './comparative-table.component.html',
})
export class ComparativeTableComponent {}

Then, in your template, you can use the component like this:

comparative-table.component.html

<bfm-comparative-table 
  [columnStyle]="columnStyle"
  [comparativeObject]="comparativeObject"
  [style]="style"
/>

Inputs

The BfmComparativeTableComponent component has the following inputs:

columnStyle

Column Style object for the table

Type	Default
{}	{}

comparativeObject

Object to be iterated and compared

Type	Default
ComparativeObject	{}

style

Style object for the table

Type	Default
{}	{}

isFixed

Controls whether the table is fixed to apply styles

Type	Default
boolean	false

Events

The BfmComparativeTableComponent component has no events.

Configuration

To customize the BfmComparativeTableComponent, you can inject configuration tokens in your module.

COMPARATIVE_REPORT_TABLE_CONFIG

This token is used to provide custom configuration for the comparative report table behavior. If not provided, the default values will be used.

Properties

Key	Description	Default
useDirectiveColor	Determines whether to apply directive-specific colors to the table.	false
showCustomLine	Indicates whether a custom line should be displayed in the comparative table.

Example

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { COMPARATIVE_REPORT_TABLE_CONFIG } from '@celerofinancas/ui-reports';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: COMPARATIVE_REPORT_TABLE_CONFIG,
      useValue: {
        useDirectiveColor: true,
        showCustomLine: true,
      },
    },
  ],
};