Ryan Kinal
100 E. St. Clair St.
Warren, PA 16365
716.581.1000
ryan.kinal@gmail.com
Ryan Kinal is a programmer and web developer, specializing in JavaScript, HTML, and CSS,
with experience in PHP, SQL, ASP.NET, and graphic design. But beyond being technologically inclined, he is also artistically motivated, through music, lindy hop, and drawing in various media. Combining these interests and talents, he is a skilled developer with an eye for aesthetic design.
Dynamic Table is a javascript object which takes a normal HTML table and transforms it so that a user can move and resize columns.
Instructions
- To move a column, click and drag the header to another header. Currently, it is not possible to drag a column to the last position.
- To resize a column, click and drag the box at the right side of that column. This can be styled however you please. It is just used as a target for JS events.
Sample Table
| Header 1 | Header 2 | Header 3 | Header 4 |
| Data | More Data | Even More Data | Yet MOre Data |
| Data | More Data | Even More Data | Yet MOre Data |
| Data | More Data | Even More Data | Yet MOre Data |
| Data | More Data | Even More Data | Yet MOre Data |
Required Functions
- addEvent and removeEvent from domFunctions.js
Sample Code
// This code was used for the table on this page // An HTML table was built and given the ID "sampleTable" // This table must use the <thead>, <tfoot>, and <tbody> tags // and have only one row in <thead> // Standard CSS styles were applied to the table for coloring and borders function setup() { var t = document.getElementById("sampleTable"); var dt = new DynamicTable(t); } addEvent(window, "load", setup, false);