Build a Grid (Table) from CSV data file : Table Grid : GUI Components : JavaScript DHTML examples (example source code) Organized by topic




 

<html>

<head>

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

  <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </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>

    .active-controls-grid {height: 100%; font: menu;}



    .active-column-0 {width:  80px;}

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

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

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

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



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

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

  </style>

</head>

<body>

  <script>



  //  create ActiveWidgets data model - text-based table

  var table = new Active.Text.Table;



  //  provide data URL - plain text comma-separated file

  table.setURL("gridExamples/data/companies.csv");



  //  start asyncronous data retrieval

  table.request();



  //  define column labels

  var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];



  //  create ActiveWidgets Grid javascript object

  var obj = new Active.Controls.Grid;



  //  provide column labels

  obj.setColumnProperty("texts", columns);



  //  provide external model as a grid data source

  obj.setDataModel(table);



  //  write grid html to the page

  document.write(obj);



  </script>

</body>

</html>


1. List box ( Grid Table )
2. List view (Selection between two list)
3. Basic Grid (Table)
4. Grid (Table) with colored cells
5. Build a Grid (Tree) from a tab separated file
6. Build a Grid (Table) from yahoo quotes (IE only)
7. Grid (Table) with image in cells
8. Grid (Table) with multiple selection
9. Grid (Table) with row header and tooltips
10. One page two grid (Table)
11. Data in Grid (Table) from XML file
12. Grid (Table) with Data Island and Column highlight
13. Grid (Table) with cell format and XML data set
14. Grid (Table) data from RSS (IE only)
15. Grid (Table) data from xml file 2
16. Grid (Table) with news feeder (IE only)
17. Grid (Table) with quotes feeder (IE only)
18. Grid (Table) in Unix style
19. Sortable Grids (table)
20. Selectable Cells Grid Table
21. Editable Grid Table cell
22. Call back action in Grid Table
23. Table Grid Rows Selection
24. Grid Table Columns Resize
25. Table Grid Column Renderers
26. Sorting for each column or double click to edit its contents.
27. Table Grid style and sort the style
28. Table in JavaScript
29. Web Data Grid Table