#creating tables

New Post has been published on http://www.htmluse.com/fattable-create-scrollable-table-with-infinite-rows-and-columns/

Fattable - Create scrollable table with infinite rows and columns

Download Demo

Fattable is a javascript Library to create table with infinite scroll, with infinite number of rows and number of columns.

Big table (more 10,000 cells) don’t do well with DOM. Your scroll will start getting choppy.

Also big tables can rapidly grow in sizes. It is not always possible to have clients download or even retain all of the table data. Fattable includes everything required to load your data asynchronously.

This library is

light : no library needed, smaller than 10KB)

fast (only visible element are in DOM, the exact same DOM element are recycled over and over, )

async friendly : the API makes it simple to fetch your data aysnchronously.

powerful and unbloated : Design is up to you. Style the table via css and use your painter to hook up events, and render your content in your cell.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href='fattable.css'> <script src='fattable.js'></script>

2. HTML

<div id='container'></div>

3. JAVASCRIPT

var columnWidths = [ 150, 120, 600, 250, ]; for (var i=columnWidths.length; i<10000; i++) var columnWidth = (Math.random() * 100 + 100) var painter = new fattable.Painter(); painter.fillCell = function(cellDiv, data) cellDiv.textContent = data.content; if (data.rowId % 2 == 0) cellDiv.className = "even"; else cellDiv.className = "odd"; painter.fillCellPending = function(cellDiv, data) cellDiv.textContent = ""; cellDiv.className = "pending"; var tableData = new fattable.SyncTableModel(); var c=0; tableData.getCellSync = function(i,j) return "+c, "rowId": i tableData.columnHeaders = ["Country Name", "Country Code", "Indicator Name", "Indicator Code", "1960", "1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"]; tableData.getHeaderSync = function(j) return "Column " + j; var table = fattable( "container": "#container", "model": tableData, "nbRows": 40000, "rowHeight": 35, "headerHeight": 40, "painter": painter, "columnWidths": columnWidths ); window.onclick = function() c += 1; table.refreshAllContent(true); ; window.onresize = function() table.setup();

4. API

var table = fattable( "painter": painter, // your painter (see below) "model": model, // model describing your data (see below) "nbRows": 1000000, // overall number of rows "rowHeight": 35, // constant row height (px) "headerHeight": 100, // height of the header (px) "columnWidths": [300, 300, 300, 300] // array of column width (px) )

5. PAINTER

painter is an object which role is to fill the content of your cells, and columnHeaders. It is expected to implement the following interface.

var painter = "setupHeader": function(headerDiv) /* Setup method are called at the creation of the column header. That is during initialization and for all window resize event. Columns are recycled. */ , "setupCell": function(cellDiv) /* The cell painter tells how to fill, and style cells. Do not set height or width. in either fill and setup methods. */ , "fillHeader": function(headerDiv, data) /* Fills and style a column div. Data is whatever the datalayer is returning. A String, or a more elaborate object. */ colHeaderDiv.textContent = data; , "fillCell": function(cellDiv, data) /* Fills and style a cell div. Data is whatever the datalayer is returning. A String, or a more elaborate object. */ cellDiv.textContent = data; , "fillHeaderPending": function(headerDiv) /* Mark a column header as pending. When using an asynchronous. Its content is not in cache and needs to be fetched */ cellDiv.textContent = "NA"; , "fillCellPending": function(cellDiv) /* Mark a cell content as pending Its content is not in cache and needs to be fetched */ cellDiv.textContent = "NA"; ;

Actually this very simple implementation is the default. And it is available as fattable.Painter, so that you can just override it.

6. DATALAYER

Synchronous Data Layer

If your data is not too big, you probably can just fetch your data all at once, and then display the table. For this simple use case, the best is probably to extend the SyncTableData object.

You just need to extend fattable.SyncTableModel and implement the following methods

"getCellSync": function(i,j) return "cell " + i + "," + j; , "getHeaderSync": function(i,j) return "col " + j;

Asynchronous and paged async model

You probably don’t want your backend to receive one request per cell displayed. A good solution to this problem is to partition your table into pages of cells.

Queries are only sent when the user stops scrolling.

To use such a system, you just have to extend the PagedAsyncTableModelclass with the following methods. In addition, it include a simple LRU cache.

"cellPageName": function(i,j) 0; return JSON.stringify([I,J]); , "fetchCellPage": function(pageName, cb) // Async method to return the page of var coords = JSON.parse(pageName); var I = coords[0]; var J = coords[1]; getJSON("data/page-" + I + "-" + J + ".json", function(data) cb(function(i,j) return rowId: i, content: data[i-I*128][j-J*29] ; ); ); , "headerCellPage" : function(j) // Same as for cellPageName but for cells. , "fetchHeaderPage" : function(j) // Same as for fetchCellPage but for headers

Custom async model

If you want to go custom, you can implement your own data model, it just has to implement the following methods :

New Post has been published on http://www.htmluse.com/jquery-cooltable-creating-tables-with-sorting-filtering/

jQuery Cooltable - Creating tables with sorting, filtering

Download   Demo

Cooltable is a very very cool jQuery plugin for creating tables with sorting, filtering, custom cell rendering, custom css and custom sorting support

1. INCLUDE JS FILES

<script src="./jquery.cooltable.js"></script> <script src="./jquery-1.6.2.min.js"></script>

2. HTML

<div id="rcGrid" ></div> <div id="rcPaginator"></div>

3. JAVASCRIPT

After you need to initialize your grid by creating an array which holds table metadata like (Column Title, key for gathering data for that column, column header style, data style etc… Must have attributes for a column are name and label. Optional attributes will be explained in metadata attributes section.

var metadata = []; metadata.push( name: "status", label: "Status"); metadata.push( name: "creditNo", label:"Credit Number"); metadata.push( name: "creditType", label:"Credit Type"); metadata.push( name: "creditCode", label: "Credit Code");

Than we need to construct our data array which contains data of the table. One thing you need to be careful about the structure of data. For a single row there is an data structure like below :

id: 0,values: "status":"Opened","creditNo":"10A3423","creditType":"RC", "creditCode":"A";

Here id attribute is generally used for identification of the row. For example if you sort or filter the row you may need to know identity of the row you have clicked. And values object inside the row object contains the values for columns. Here plug in takes the data of the column with name attribute’s value. For example for status column the value of the row is Opened.

After understanding one single row data structure you need to create a data array which holds the row objects :

var data = []; data.push(id: 0,values: "status":"Opened","creditNo":"10A3423","creditType":"RC", "creditCode":"A"); data.push(id: 1,values: "status":"Closed","creditNo":"10A3422","creditType":"RC", "creditCode":"A"); data.push(id: 2,values: "status":"Opened But Not Used","creditNo":"10A3429","creditType":"RC", "creditCode":"A"); data.push(id: 3,values: "status":"Opened","creditNo":"10A3444","creditType":"RC", "creditCode":"A");

Finally we have got our metadata and data arrays. Now if we want we can create a rowSettings array for adjusting css of rows, row hover style and row functions when we trigger an event such as ‘click’, ‘dblclick’ :

function rowDblClicked(event) alert('dbl click occurred event data:'+event.data.values.creditNo); function rowClicked(event) alert('click occurred event data:'+event.data.id); var rowSettings = evenRowStyle:"background":"#d8e6f0",oddRowStyle:"background":"#fcfcfc", hoverStyle:"background-color":"#99CCFF",rowFunctions: [eventType:"dblclick",functionToCall:rowDblClicked,eventType:"click",functionToCall:rowClicked];

All attributes above are optional. You can give your css for an even row or an odd row with jQuery css syntax. If you want to change the row’s style while mouse over you can use hoverStyle attribute. If you want to bind events over row you can use rowFunctions attribute. It’s type should be array even if you just bind one event. You can define your own functions and you will receive row data from event.data object. If you don’t want any settings for rowSettings you can just leave it as null.

Finally it is time to draw our table before drawing it one last thing to remember. If you want pagination you can pass it to the constructor of CoolGrid object if you want a table without pagination just leave it null or don’t write.

var pageSize = 6; tablo = new CoolTable('rcGrid',metadata,rowData,'crmgrid',pageSize,rowSettings); tablo.drawTable();

Above rcGrid is the id of the div which will host our table, metadata array is the array which holds column info, rowData is the real data which we want to show in our table, ‘crmgrid’ is the css class for our table, pageSize is the size of the one page and which enables pagination and finally rowSettings holds the css info and functions which would be called when a specified event occurs.

Full code of example

I was on a roll and found a TON of online resources for creating CSS layouts!

 http://htmldog.com/guides/cssintermediate/ - what I have been using throughout our projects. Basic and quick overview of CSS. http://csscreator.com/version2/pagelayout.php -- generates layouts with CSS, easy and effective. Manipulates the layout without directly changing your web page. http://www.thenoodleincident.com/tutorials/box_lesson/old/css_3box_plus_topbox.html -- interesting web page. Has a nice design without boxes and explains how you made that layout.

http://www.yourhtmlsource.com/examples/positioning2.html -- fascinating page illustrating different sort of boxes you can use on a web page; forces the reader to use the source code to see the code, rather than getting it directly from an example.

http://www.yourhtmlsource.com/stylesheets/csslayout.html -- much more in-depth explanation of position, floating elements, layers, and tables. http://www.free-css.com/css-reference/css1-properties.php -- a database of CSS property tags. http://green-beast.com/experiments/ -- shows some CSS designs such as “smart corners”, list calendars, photo showcases etc with the HTML code AND CSS code available!

http://www.macworld.com/article/48296/2005/12/januarycreate.html -- creating personalized bullets, checked off lists etc. Includes explanation and CSS code.

http://24ways.org/2005/tables-with-style -- creating tables “with style”. The related articles on the left navigation bar are also really great.

http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php -- WONDERFUL CSS navigation layouts! Complete with how they’re created and the code to create them.

http://builder.yaml.de/ -- complex CSS generator. Good for another project or establish cause and effect. Gives code.

http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ -- using child selector that is compatible with Internet Explorer.

http://www.cheatography.com/davechild/cheat-sheets/css2/ -- I’m not sure if CSS2 is different or incompatible with CSS, but this is an amazing cheat sheet to CSS2 properties.