diff --git a/navalplanner-business/src/main/java/org/navalplanner/business/materials/entities/Material.java b/navalplanner-business/src/main/java/org/navalplanner/business/materials/entities/Material.java
index 4422c63fa..32fe0f98f 100644
--- a/navalplanner-business/src/main/java/org/navalplanner/business/materials/entities/Material.java
+++ b/navalplanner-business/src/main/java/org/navalplanner/business/materials/entities/Material.java
@@ -32,7 +32,7 @@ import org.navalplanner.business.common.BaseEntity;
  * @author Jacobo Aragunde Perez <jaragunde@igalia.com>
  *
  */
-public class Material extends BaseEntity {
+public class Material extends BaseEntity implements Comparable {
 
     @NotNull
     @NotEmpty
@@ -110,4 +110,11 @@ public class Material extends BaseEntity {
         this.unitType = unitType;
     }
 
+    @Override
+    public int compareTo(Object arg0) {
+      final Material material = (Material) arg0;
+
+      return code.compareTo(material.getCode());
+    }
+
 }
\ No newline at end of file
diff --git a/navalplanner-webapp/src/main/webapp/materials/materials.zul b/navalplanner-webapp/src/main/webapp/materials/materials.zul
index b5f273496..aaf0d2042 100644
--- a/navalplanner-webapp/src/main/webapp/materials/materials.zul
+++ b/navalplanner-webapp/src/main/webapp/materials/materials.zul
@@ -73,16 +73,16 @@
                                 <panelchildren>
                                     <button label="${i18n:_('Add')}"
                                         onClick="materialsController.addMaterialToMaterialCategory(categoriesTree.selectedItem)" />
-                                    <grid id="gridMaterials"
+                                    <newdatasortablegrid id="gridMaterials"
                                         fixedLayout="true"
                                         model="@{materialsController.materials}">
                                         <columns>
-                                            <column label="${i18n:_('Code')}" />
-                                            <column label="${i18n:_('Description')}" />
-                                            <column label="${i18n:_('Unit price')}" />
-                                            <column label="${i18n:_('Unit type')}" />
-                                            <column label="${i18n:_('Disabled')}" />
-                                            <column label="" />
+                                            <newdatasortablecolumn label="${i18n:_('Code')}" />
+                                            <newdatasortablecolumn label="${i18n:_('Description')}" />
+                                            <newdatasortablecolumn label="${i18n:_('Unit price')}" />
+                                            <newdatasortablecolumn label="${i18n:_('Unit type')}" />
+                                            <newdatasortablecolumn label="${i18n:_('Disabled')}" />
+                                            <newdatasortablecolumn label="" />
                                         </columns>
                                         <rows>
                                             <row self="@{each='material'}" value="@{material}">
@@ -101,7 +101,7 @@
                                                 </button>
                                             </row>
                                         </rows>
-                                    </grid>
+                                    </newdatasortablegrid>
 
                                 </panelchildren>
                             </panel>