NgxTablexcel2Ui

This library was generated with Angular CLI version 17.3.0.

I. Rendu

1. Image rendu

2. Animation rendu

II. Utilisation

1. les entêtes

Modèle des entête

export interface Header {
  libelle: string;
  key: string;
  style?: any;
  styleLine?: any;
}

Exemple d'entête

[
    {
      libelle: 'PAYS',
      key: '',
      style: {
        'background-color': '#0B3040',
        color: '#FFFFFF'
      },
      styleLine: {
        'background-color': '#47D359',
        color: '#FFFFFF'
      }
    },
    {
      libelle: 'VILLE',
      key: 'ville',
      style: {
        'background-color': '#0B3040',
        color: '#FFFFFF'
      },
      styleLine: {
        'background-color': '#44B3E1',
        color: '#FFFFFF'
      }
    },
    {
      libelle: 'COMMUNE',
      key: 'commune',
      style: {
        'background-color': '#0B3040',
        color: '#FFFFFF'
      },
      styleLine: {
        'background-color': '#F1A983',
        color: '#FFFFFF'
      }
    },
    {
      libelle: 'QUARTIER',
      key: 'quartier',
      style: {
        'background-color': '#0B3040',
        color: '#FFFFFF'
      },
      styleLine: {
        'background-color': '#f1f1f1',
        color: '#000000'
      }
    },
    {
      libelle: 'NOMBRE DE FILLE',
      key: 'nbFille',
      style: {
        'background-color': '#0B3040',
        color: '#FFFFFF'
      }
    },
    {
      libelle: 'NOMBRE DE GARCON',
      key: 'nbGarcon',
      style: {
        'background-color': '#0B3040',
        color: '#FFFFFF'
      }
    }
]

2. Les données

data = [
    {
      libelle: 'Côte d\'Ivoire',
      ville: '2',
      commune: "2",
      quartier: "7",
      nbFille: "48",
      nbGarcon: "146",
      childrens: [
        {
          libelle: 'ABIDJAN',
          commune: "2",
          quartier: "7",
          nbFille: "48",
          nbGarcon: "146",
          childrens: [
            {
              libelle: "YOPOUGON",
              quartier: "4",
              nbFille: "16",
              nbGarcon: "50",
              childrens: [
                {
                  libelle: "Ananeraie",
                  nbFille: "2",
                  nbGarcon: "20",
                },
                {
                  libelle: "Sideci",
                  nbFille: "3",
                  nbGarcon: "15",
                },
                {
                  libelle: "Maroc",
                  nbFille: "5",
                  nbGarcon: "10",
                },
                {
                  libelle: "Cite verte",
                  nbFille: "6",
                  nbGarcon: "5",
                },
              ]
            },
            {
              libelle: "COCODY",
              quartier: "3",
              nbFille: "32",
              nbGarcon: "96",
              childrens: [
                {
                  libelle: "2 plateaux",
                  nbFille: "2",
                  nbGarcon: "8",
                },
                {
                  libelle: "angrée",
                  nbFille: "10",
                  nbGarcon: {
                    value: "20",
                    note: "lorempsium cjdk bnojdn dsc dn cj sqc sc s cjksq chcjsbqkj"
                  },
                },
                {
                  libelle: "palmeraie",
                  nbFille: "20",
                  nbGarcon: "68",
                },
              ]




            }
          ]
        }
      ]
    },
    {
      libelle: 'Côte d\'Ivoire',
      ville: '2',
      commune: "2",
      quartier: "7",
      nbFille: "48",
      nbGarcon: "146",
      childrens: [
        {
          libelle: 'ABIDJAN',
          commune: "2",
          quartier: "7",
          nbFille: "48",
          nbGarcon: "146",
          childrens: [
            {
              libelle: "YOPOUGON",
              quartier: "4",
              nbFille: "16",
              nbGarcon: "50",
              childrens: [
                {
                  libelle: "Ananeraie",
                  nbFille: "2",
                  nbGarcon: "20",
                },
                {
                  libelle: "Sideci",
                  nbFille: "3",
                  nbGarcon: "15",
                },
                {
                  libelle: "Maroc",
                  nbFille: "5",
                  nbGarcon: "10",
                },
                {
                  libelle: "Cite verte",
                  nbFille: "6",
                  nbGarcon: "5",
                },
              ]
            },
            {
              libelle: "COCODY",
              quartier: "3",
              nbFille: "32",
              nbGarcon: "96",
              childrens: [
                {
                  libelle: "2 plateaux",
                  nbFille: "2",
                  nbGarcon: "8",
                },
                {
                  libelle: "angrée",
                  nbFille: "10",
                  nbGarcon: "20",
                },
                {
                  libelle: "palmeraie",
                  nbFille: "20",
                  nbGarcon: "68",
                },
              ]




            }
          ]
        }
      ]
    },
  ];

3. Affichage du component dans le HTML

<derich-ngx-tablexcel2-ui
  [data]="data"
  [headers]="headers">
</derich-ngx-tablexcel2-ui>