One page two grid (Table) : Table Grid : GUI Components : JavaScript DHTML examples (example source code) Organized by topic




<html>

<head>

  <title>ActiveWidgets Grid :: Examples</title>

  <style> body, html {font: menu; background: threedface;} </style>



  <!-- ActiveWidgets stylesheet and scripts -->

  <link href="gridRuntime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>

  <script src="gridRuntime/lib/grid.js"></script>



  <!-- grid format -->

  <style>

    #grid1 {height: 200px; border: 2px inset; background: white}

    #grid2 {height: 100px; border: 2px inset; background: white}



    #grid1 .active-column-1 {width: 200px; background-color: threedlightshadow;}

    #grid2 .active-column-1 {width: 150px; background-color: infobackground;}



    .active-column-2 {text-align: right;}

    .active-column-3 {text-align: right;}

    .active-column-4 {text-align: right;}



    .active-grid-row {border-bottom: 1px solid threedlightshadow;}

    .active-grid-column {border-right: 1px solid threedlightshadow;}



  </style>



  <!-- grid data -->

  <script>

    var data1 = [

      ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],

      ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],

      ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],

      ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],

      ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],

      ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],

      ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],

      ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],

      ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],

      ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],

      ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],

      ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],

      ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],

      ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],

      ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],

    ];



    var data2 = [

      ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],

      ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],

      ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],

      ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],

      ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"],

    ];



    var columns1 = [

      "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"

    ];



    var columns2 = [

      "Ticker(2)", "Company Name(2)", "Market Cap.(2)", "$ Sales(2)", "Employees(2)"

    ];

  </script>

</head>

<body>

  <p>

    Here is the first grid:

  </p>



  <script>

    var obj1 = new Active.Controls.Grid;

    obj1.setId("grid1");

    obj1.setRowProperty("count", 15);

    obj1.setColumnProperty("count", 5);

    obj1.setDataProperty("text", function(i, j){return data1[i][j]});

    obj1.setColumnProperty("text", function(i){return columns1[i]});

    document.write(obj1);

  </script>



  <p>

    And another one...

  </p>



  <script>

    var obj2 = new Active.Controls.Grid;

    obj2.setId("grid2");

    obj2.setRowProperty("count", 5);

    obj2.setColumnProperty("count", 5);

    obj2.setDataProperty("text", function(i, j){return data2[i][j]});

    obj2.setColumnProperty("text", function(i){return columns2[i]});

    document.write(obj2);

  </script>

</body>

</html>


1. Table Sorter Proof of Concept
2. Create 100 random rows and do the column sorting
3. Sortable table column
4. Table row style with 'mouse roll over' effect
5. Pagable Table
6. Repeat table column at the table bottom
7. Editable table cell
8. Table row with mouse roll over
9. Adding a table row
10. List box ( Grid Table )
11. List view (Selection between two list)
12. Basic Grid (Table)
13. Grid (Table) with colored cells
14. Build a Grid (Table) from CSV data file
15. Build a Grid (Tree) from a tab separated file
16. Build a Grid (Table) from yahoo quotes (IE only)
17. Grid (Table) with image in cells
18. Grid (Table) with multiple selection
19. Grid (Table) with row header and tooltips
20. Data in Grid (Table) from XML file
21. Grid (Table) with Data Island and Column highlight
22. Grid (Table) with cell format and XML data set
23. Grid (Table) data from RSS (IE only)
24. Grid (Table) data from xml file 2
25. Grid (Table) with news feeder (IE only)
26. Grid (Table) with quotes feeder (IE only)
27. Grid (Table) in Unix style
28. Sortable Grids (table)
29. Selectable Cells Grid Table
30. Editable Grid Table cell
31. Call back action in Grid Table
32. Table Grid Rows Selection
33. Grid Table Columns Resize
34. Table Grid Column Renderers
35. Sorting for each column or double click to edit its contents.
36. Table Grid style and sort the style
37. Table in JavaScript
38. Web Data Grid Table
39. Sortable Tables from Scratch with MochiKit
40. Ajax Table
41. Drag and drop table columns
42. Dynamic data grid: add a row, remove a row and sort column
43. super table
44. GUI for table creation