Data Table

Tables are incredibly useful for providing an in-browser presentation of data to users. A Data Table is a page effect that functions like a spreadsheet in presenting data in tabular format. A Data Table can be both static or dynamic in nature.

AJAX Tables

The invention of AJAX as a technique for dynamically pulling data from the backend via the frontend became a common pattern for making standard tables more interactive.

Some of the leading approaches for AJAX are listed below:

Table Sorting with Prototype

• Table column sorting script using Prototype: https://web.archive.org/web/20100407060707/http://tetlaw.id.au/view/blog/table-sorting-with-prototype/ | EXAMPLE (which is also used by Scriptaculous library)
• Instructions for how to use the "TableKit" lib for Prototype DataTables: https://web.archive.org/web/20100315023457/https://www.millstream.com.au/upload/code/tablekit/

YUI DataTables

YUI from Yahoo, provides several examples of data tables:

• YUI 2.x Tables: http://yui.github.io/yui2/docs/yui_2.9.0_full/datatable/ | EXAMPLE
• YUI 3.x Tables: https://yuilibrary.com/yui/docs/datatable/ | EXAMPLE

Highlighted Row/Column Grid with Mootools

• Highlighted Grid using Mootools: http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php

Resources

• Responsive Data Table Roundup: https://css-tricks.com/responsive-data-table-roundup/
• Responsive Data Tables: https://css-tricks.com/responsive-data-tables/
• Responsive Web Design -- Table patterns: http://gergeo.se/RWD-Table-Patterns | DEMO
• Best Practice Table markup: https://codepen.io/davidelrizzo/full/dGBpZK/

Tutorials

• Basic/Simple Sortable DataTable in Prototype: https://web.archive.org/web/20080302053527/http://tetlaw.id.au/view/blog/table-sorting-with-prototype/ | DEMO
• DataTable Examples in YUI: http://developer.yahoo.com/yui/examples/datatable/dt_autocomplete.html
• Nested Sortable Table in jQuery: http://www.bernardopadua.com/nestedSortables/test/widget/
• Responsive Data Tables: https://css-tricks.com/responsive-data-tables/
• Building Table Sorting and Pagination in Vue.js: https://www.raymondcamden.com/2018/02/08/building-table-sorting-and-pagination-in-vuejs*
• How To Architect A Complex Web Table: https://www.smashingmagazine.com/2019/02/complex-web-tables/
• Styling Tables with CSS: https://www.elated.com/styling-tables-with-css/
• How to Remove Spacing Between Table Borders with CSS: https://www.webucator.com/how-to/how-remove-spacing-between-table-borders-with-css.cfm (NOTE: this version known to have issues on certain versions of Chrome)
• Remove spacing between table cells and rows: https://stackoverflow.com/questions/8479090/remove-spacing-between-table-cells-and-rows
• Remove cellpadding and cellspacing from an HTML table with CSS: https://www.electrictoolbox.com/remove-table-cellpadding-cellspacing-css/
• How to addEventListener to table cells: https://stackoverflow.com/questions/46341171/how-to-addeventlistener-to-table-cells
• Adding a badge style count indicator: https://rimblas.com/blog/2014/05/adding-a-badge-style-count-indicator/

External Links

• wikipedia: Data Table
• Data Grids with AJAX, DHTML and JavaScript: http://coding.smashingmagazine.com/2007/05/30/tables-and-data-grids-with-ajax-dhtml-javascript/
• Adding an onclick event to a table row: https://stackoverflow.com/questions/1207939/adding-an-onclick-event-to-a-table-row

See Also

Responsive Design | Progressive Enhancement | Graceful Degradation | HTML | JavaScript | AJAX | CSS | DOM