diff --git a/workspace/04-pipesApp/package-lock.json b/workspace/04-pipesApp/package-lock.json
index d8c44ac..69ad3b1 100644
--- a/workspace/04-pipesApp/package-lock.json
+++ b/workspace/04-pipesApp/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "~13.2.0",
+        "@angular/cdk": "^13.2.3",
         "@angular/common": "~13.2.0",
         "@angular/compiler": "~13.2.0",
         "@angular/core": "~13.2.0",
@@ -344,6 +345,28 @@
         "@angular/core": "13.2.3"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "13.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.2.3.tgz",
+      "integrity": "sha512-X7FH0eGwfK2HcAroYBrE7O9ehZ50k9+DoDV98xm1NRgezNfiQ2QxIdLQKhJv0bnnID+pGk4Tnb44RXUmgk5idw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^13.0.0 || ^14.0.0-0",
+        "@angular/core": "^13.0.0 || ^14.0.0-0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true
+    },
     "node_modules/@angular/cli": {
       "version": "13.2.4",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.2.4.tgz",
@@ -11495,6 +11518,23 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/cdk": {
+      "version": "13.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.2.3.tgz",
+      "integrity": "sha512-X7FH0eGwfK2HcAroYBrE7O9ehZ50k9+DoDV98xm1NRgezNfiQ2QxIdLQKhJv0bnnID+pGk4Tnb44RXUmgk5idw==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "13.2.4",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.2.4.tgz",
diff --git a/workspace/04-pipesApp/package.json b/workspace/04-pipesApp/package.json
index 5b7f608..9894e21 100644
--- a/workspace/04-pipesApp/package.json
+++ b/workspace/04-pipesApp/package.json
@@ -11,6 +11,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~13.2.0",
+    "@angular/cdk": "^13.2.3",
     "@angular/common": "~13.2.0",
     "@angular/compiler": "~13.2.0",
     "@angular/core": "~13.2.0",
diff --git a/workspace/04-pipesApp/src/app/prime-ng/prime-ng.module.ts b/workspace/04-pipesApp/src/app/prime-ng/prime-ng.module.ts
index 018466c..7c659b6 100644
--- a/workspace/04-pipesApp/src/app/prime-ng/prime-ng.module.ts
+++ b/workspace/04-pipesApp/src/app/prime-ng/prime-ng.module.ts
@@ -5,13 +5,17 @@ import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
 import { MenubarModule } from 'primeng/menubar';
 import { FieldsetModule } from 'primeng/fieldset';
+import { ToolbarModule } from 'primeng/toolbar';
+import { TableModule } from 'primeng/table';
 
 @NgModule({
   exports: [
     ButtonModule,
     CardModule,
     MenubarModule,
-    FieldsetModule
+    FieldsetModule,
+    ToolbarModule,
+    TableModule
   ]
 })
 export class PrimeNgModule { }
diff --git a/workspace/04-pipesApp/src/app/shared/menu/menu.component.ts b/workspace/04-pipesApp/src/app/shared/menu/menu.component.ts
index f9e1b6a..53e8fcd 100644
--- a/workspace/04-pipesApp/src/app/shared/menu/menu.component.ts
+++ b/workspace/04-pipesApp/src/app/shared/menu/menu.component.ts
@@ -39,7 +39,8 @@ export class MenuComponent implements OnInit {
       },
       {
         label: 'Pipes personalizados',
-        icon: 'pi pi-cog'
+        icon: 'pi pi-cog',
+        routerLink: '/ordenar'
       }
     ];
   }
diff --git a/workspace/04-pipesApp/src/app/ventas/interfaces/ventas.interface.ts b/workspace/04-pipesApp/src/app/ventas/interfaces/ventas.interface.ts
new file mode 100644
index 0000000..5b23af6
--- /dev/null
+++ b/workspace/04-pipesApp/src/app/ventas/interfaces/ventas.interface.ts
@@ -0,0 +1,9 @@
+export enum Color {
+    rojo, negro, azul, verde
+}
+
+export interface Heroe {
+    nombre: string;
+    vuela: boolean;
+    color: Color;
+}
\ No newline at end of file
diff --git a/workspace/04-pipesApp/src/app/ventas/pages/ordenar/ordenar.component.html b/workspace/04-pipesApp/src/app/ventas/pages/ordenar/ordenar.component.html
index 57a20a8..273a7da 100644
--- a/workspace/04-pipesApp/src/app/ventas/pages/ordenar/ordenar.component.html
+++ b/workspace/04-pipesApp/src/app/ventas/pages/ordenar/ordenar.component.html
@@ -1 +1,70 @@
-<p>ordenar works!</p>
+<div class="text-layout">
+
+    <h1>Pipes personalizados</h1>
+    <p>Pipes creados por {{ 'nosotros' | mayusculas:enMayusculas }}</p>
+
+</div>
+
+<p-toolbar>
+    <div class="p-toolbar-group-left">
+
+    </div>
+
+    <div class="p-toolbar-group-right">
+        <p-button label="En myúsculas" icon="pi pi-check" styleClass="p-button-md" (onClick)="cambiarTamanio()"
+            class="mr-1">
+        </p-button>
+        <button pButton icon="pi pi-sort" label="Por nombre" class="mr-1 p-button-warning"
+            (click)="cambiarOrden('nombre')"></button>
+        <button pButton icon="pi pi-sort" label="Vuela" class="mr-1 p-button-success "
+            (click)="cambiarOrden('vuela')"></button>
+        <button pButton icon="pi pi-sort" label="Por color" class="mr-1 p-button-help"
+            (click)="cambiarOrden('color')"></button>
+    </div>
+</p-toolbar>
+
+<div class="grid">
+    <div class="col mt-2">
+        <p-table [value]="heroes | ordenar: ordenarPor " responsiveLayout="scroll">
+            <ng-template pTemplate="header">
+                <tr>
+                    <th>Nombre</th>
+                    <th>Vuela</th>
+                    <th>Color</th>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="body" let-heroe>
+                <tr>
+                    <td>{{heroe.nombre | titlecase}}</td>
+                    <td>{{heroe.vuela | vuela | titlecase }}</td>
+                    <td>{{heroe.color }}</td>
+                </tr>
+            </ng-template>
+        </p-table>
+    </div>
+</div>
+
+
+<div class="grid">
+    <div class="col mt-2">
+        <p-table [value]="heroes | slice:0" responsiveLayout="scroll">
+            <ng-template pTemplate="header">
+                <tr>
+                    <th pSortableColumn="nombre">Nombre <p-sortIcon field="nombre"></p-sortIcon>
+                    </th>
+                    <th pSortableColumn="vuela">Vuela <p-sortIcon field="vuela"></p-sortIcon>
+                    </th>
+                    <th pSortableColumn="color">Color <p-sortIcon field="color"></p-sortIcon>
+                    </th>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="body" let-heroe>
+                <tr>
+                    <td>{{heroe.nombre | titlecase}}</td>
+                    <td>{{heroe.vuela | vuela | titlecase }}</td>
+                    <td>{{heroe.color }}</td>
+                </tr>
+            </ng-template>
+        </p-table>
+    </div>
+</div>
\ No newline at end of file
diff --git a/workspace/04-pipesApp/src/app/ventas/pages/ordenar/ordenar.component.ts b/workspace/04-pipesApp/src/app/ventas/pages/ordenar/ordenar.component.ts
index 34a821c..1df20f0 100644
--- a/workspace/04-pipesApp/src/app/ventas/pages/ordenar/ordenar.component.ts
+++ b/workspace/04-pipesApp/src/app/ventas/pages/ordenar/ordenar.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { Color, Heroe } from '../../interfaces/ventas.interface';
 
 @Component({
   selector: 'app-ordenar',
@@ -6,11 +7,46 @@ import { Component, OnInit } from '@angular/core';
   styles: [
   ]
 })
-export class OrdenarComponent implements OnInit {
+export class OrdenarComponent {
 
-  constructor() { }
+  enMayusculas: boolean = false;
 
-  ngOnInit(): void {
+  ordenarPor: string = '';
+
+  heroes: Heroe[] = [
+    {
+      nombre: 'Superman',
+      vuela: true,
+      color: Color.azul
+    },
+    {
+      nombre: 'Bataman',
+      vuela: false,
+      color: Color.negro
+    },
+    {
+      nombre: 'Robin',
+      vuela: false,
+      color: Color.verde
+    },
+    {
+      nombre: 'Dart Devil',
+      vuela: false,
+      color: Color.rojo
+    },
+    {
+      nombre: 'Linterna Verde',
+      vuela: true,
+      color: Color.verde
+    },
+  ];
+
+
+  cambiarTamanio() {
+    (this.enMayusculas) ? this.enMayusculas = false : this.enMayusculas = true;
   }
 
+  cambiarOrden(valor: string){
+    this.ordenarPor = valor;
+  }
 }
diff --git a/workspace/04-pipesApp/src/app/ventas/pipes/mayusculas.pipe.ts b/workspace/04-pipesApp/src/app/ventas/pipes/mayusculas.pipe.ts
new file mode 100644
index 0000000..e7e6d2b
--- /dev/null
+++ b/workspace/04-pipesApp/src/app/ventas/pipes/mayusculas.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'mayusculas'
+})
+export class MayusculasPipe implements PipeTransform {
+
+    transform(valor: string, enMayusculas: boolean = true): string {
+        return (enMayusculas) ? valor.toUpperCase() : valor.toLowerCase();
+    }
+
+}
+
diff --git a/workspace/04-pipesApp/src/app/ventas/pipes/ordenar.pipe.ts b/workspace/04-pipesApp/src/app/ventas/pipes/ordenar.pipe.ts
new file mode 100644
index 0000000..e33c3db
--- /dev/null
+++ b/workspace/04-pipesApp/src/app/ventas/pipes/ordenar.pipe.ts
@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Heroe } from '../interfaces/ventas.interface';
+
+@Pipe({
+  name: 'ordenar'
+})
+export class OrdenarPipe implements PipeTransform {
+
+  transform(heroes: Heroe[], ordenarPor: string = 'sin valor'): Heroe[] {
+
+    switch (ordenarPor) {
+      case 'nombre':
+        return heroes = heroes.sort((a, b) => (a.nombre > b.nombre) ? 1 : -1);
+      case 'vuela':
+        return heroes = heroes.sort((a, b) => (a.vuela > b.vuela) ? -1 : 1);
+      case 'color':
+        return heroes = heroes.sort((a, b) => (a.color > b.color) ? 1 : -1);
+
+      default:
+        return heroes;
+    }
+
+  }
+
+}
diff --git a/workspace/04-pipesApp/src/app/ventas/pipes/vuela.pipe.ts b/workspace/04-pipesApp/src/app/ventas/pipes/vuela.pipe.ts
new file mode 100644
index 0000000..783bdc1
--- /dev/null
+++ b/workspace/04-pipesApp/src/app/ventas/pipes/vuela.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'vuela'
+})
+export class VuelaPipe implements PipeTransform {
+
+    transform(vuela: boolean): string {
+        return (vuela) ? 'vuela' : 'no vuela';
+    }
+
+}
\ No newline at end of file
diff --git a/workspace/04-pipesApp/src/app/ventas/ventas.module.ts b/workspace/04-pipesApp/src/app/ventas/ventas.module.ts
index fc6e6e2..620ba05 100644
--- a/workspace/04-pipesApp/src/app/ventas/ventas.module.ts
+++ b/workspace/04-pipesApp/src/app/ventas/ventas.module.ts
@@ -7,15 +7,24 @@ import { NumerosComponent } from './pages/numeros/numeros.component';
 import { NoComunesComponent } from './pages/no-comunes/no-comunes.component';
 import { BasicosComponent } from './pages/basicos/basicos.component';
 import { OrdenarComponent } from './pages/ordenar/ordenar.component';
+import { MayusculasPipe } from './pipes/mayusculas.pipe';
+import { VuelaPipe } from './pipes/vuela.pipe';
+import { OrdenarPipe } from './pipes/ordenar.pipe';
 
 
 
 @NgModule({
   declarations: [
+    // Componentes
     NumerosComponent,
     NoComunesComponent,
     BasicosComponent,
-    OrdenarComponent
+    OrdenarComponent,
+    
+    // Pipes
+    MayusculasPipe,
+    VuelaPipe,
+    OrdenarPipe
   ],
   exports: [
     NumerosComponent,