CodeThatTable - Decoration Properties Example
//----------------------------------------------------------------------------------- //GLOBAL VARS //----------------------------------------------------------------------------------- var DATE_FORMAT = "dd.mm.yyyy", CURRENCY_FORMAT = " $"; var EMPTY_ROW = "no filter"; //----------------------------------------------------------------------------------- //TABLE DEFINITION //----------------------------------------------------------------------------------- var gridDef = { amountPerPage : 30, useMultiSort : true, datatype : 0, data : [["1", "Stiles James", "01.01.2002", "jstiles@necasting.com", "270 $"], ["2", "Alexander Jacklynn", "12.05.2003", "speedracer1979@iwon.com", " $"], ["3", "Martin Barney", "01.01.2002", "bmartin1@maine.rr.com", "92 $"], ["4", "Gelinas Patricia", "18.07.2003", "pattigelinas@hotmail.com", "364 $"], ["5", "Cooke Dee", "02.05.2002", "findDeeCooke@aol.com", "74 $"], ["6", "Greiner Andrew", "08.01.2003", "andy_greiner@hotmail.com", " $"], ["7", "Maillet Chad", "01.01.2002", "ChadRM@rccw.com", "265 $"], ["8", "Batson Alecia", "01.01.2002", "acbatson@yahoo.com", " $"], ["9", "Gato Timothy", "01.01.2002", "tgato2@maine.rr.com", "60 $"], ["10", "Wheeler Skip", "01.01.2002", "skipw47@aol.com", "59 $"], ["11", "Davis Mackenzie", "01.01.2002", "mackenziecd@rccw.com", "527 $"], ["12", "Hatch Jennie", "01.01.2002", "JHatchling@aol.com", "529 $"], ["13", "picano anthony", "06.01.2003", "t_Picano@yahoo.com", " $"], ["14", "Bernard Ashley", "11.10.2003", "Twiceblessedmum@lycos.com", "380 $"], ["15", "Masabny Rob", "01.01.2002", "masabny@yahoo.com", "38 $"], ["16", "Philbrick John", "01.01.2002", "jphilbri@maine.rr.com", "452 $"], ], colDef : [ { title : "ID", titleClass : "", //default for th, cellClass : "", type : "Number", width : 75, //auto alignment : "center", compareFunction : compare, isVisible : true, useAutoIndex : false, useAutoFilter : false }, { title : "Name", titleClass : "", cellClass : "", type : "String", width : 150, //auto alignment : "", compareFunction : compare, isVisible : true, useAutoIndex : false, useAutoFilter : false }, { title : "Reg. date", titleClass : "", //default for th cellClass : "", type : "Date", width : 120, //auto alignment : "center", compareFunction : compare, isVisible : true, useAutoIndex : true, useAutoFilter : true }, { title : "E-mail", titleClass : "", //default for th cellClass : "", type : "Email", width : 200, alignment : "right", compareFunction : compare, isVisible : true, useAutoIndex : false, useAutoFilter : false }, { title : "Account", titleClass : "", //default for th cellClass : { color : "red", textalign : "right" }, type : "Currency", width : 100, //auto alignment : "center", compareFunction : compare, isVisible : true, useAutoIndex : true, useAutoFilter : true } ], keyCol : "ID", //rowHandler : rowHandler, rowStyle : { markClass : { backgroundcolor : "#ccffff", fontsize : 11, fontfamily : "comic sans ms, arial", fontweight : "bold", color : "darkgreen" }, darkClass : "dark", lightClass : "light", hoverClass : { backgroundcolor : "#ffffcc", fontsize : 11, fontfamily : "comic sans ms, arial", fontweight : "bold", color : "darkgreen" } }, tableStyle : { tableClass : { backgroundcolor : "#ececec" }, thClass : "th", //cells with controls && filters &| titles border : 0, cellpadding : 2, cellspacing : 1 }, resetSortControl : { img : { src : "img/resetsort.gif", width : 16, height : 16, alt : "Reset sort" }, text : "" }, resetSearchControl : { img : { src : "img/resetsearch.gif", width : 16, height : 16, alt : "Reset search" }, text : "" }, resetMarkControl : { img : { src : "img/resetmark.gif", width : 16, height : 16, alt : "Reset select" }, text : "" }, amountControl : { img : { }, text : "Amount: " }, searchControl : { img : { src : "img/search.gif", width : 16, height : 16, alt : "Search" }, text : "Search: " }, imgSortAsc : { src : "img/sortasc.gif", width : 10, height : 10 }, imgSortDesc : { src : "img/sortdesc.gif", width : 10, height : 10 }, imgSortAscActive : { src : "img/sortasca.gif", width : 10, height : 10 }, imgSortDescActive : { src : "img/sortdesca.gif", width : 10, height : 10 }, imgMultiSortAscActive : { src : "img/sortascma.gif", width : 10, height : 10 }, imgMultiSortDescActive : { src : "img/sortdescma.gif", width : 10, height : 10 }, imgFirstPage : { src : "img/firstpage.gif", width : 10, height : 10 }, imgLastPage : { src : "img/lastpage.gif", width : 10, height : 10 }, imgPrevPage : { src : "img/prevpage.gif", width : 10, height : 10 }, imgNextPage : { src : "img/nextpage.gif", width : 10, height : 10 } };