Dyalog MiServer 3 Sample Site

The DataTable widget uses the JS-Library DataTables which provides a very powerful and comprehensive rendering tool for tabular data.

• this example uses the “Responsive” extension that provides a responsive layout. Compare this page to its non-responsive counterpart Responsiveness will be effective as you resize the browser-window and the visible columns will adjust accordingly. (Hidden columns are shown when in a details-view for individual records.) Please note that a wealth of options is available to fine-tune this behaviour.
• numeric colums right-aligned by assigning specific CSS-Class

Data on this page was taken from the CIA World Factbook.

:Class DataTableAdvanced_responsive : MiPageSample 
⍝ Control::     _JS.DataTable 
⍝ Description:: A DataTable with the a responsive layout 
 
    ∇ Compose;data;dt 
      :Access Public 
      
      Add _.p MarkdownFollows 
   ⍝## Responsive DataTable 
   ⍝ The DataTable widget uses the JS-Library [DataTables](http://datatables.net/) 
   ⍝ which provides a very powerful and comprehensive rendering tool for tabular data. 
   ⍝ * this example uses the "Responsive" extension that provides a responsive layout. 
   ⍝   Compare this page to its [non-responsive counterpart](./DataTableSimple.mipage) 
   ⍝   Responsiveness will be effective as you resize the browser-window 
   ⍝   and the visible columns will adjust accordingly. (Hidden columns are 
   ⍝   shown when in a details-view for individual records.) 
   ⍝   Please note that a wealth of [options](https://datatables.net/extensions/responsive/) is available 
   ⍝   to fine-tune this behaviour. 
   ⍝ * numeric colums right-aligned by assigning specific CSS-Class 
   ⍝                     
   ⍝## Health Care Spending by Country 
   ⍝ Data on this page was taken from the [CIA World Factbook](https://www.cia.gov/the-world-factbook/). 
      
      ⍝  [;1] country [;2] % GDP [;3] population [;4] GDP [;5] $/capita 
      data←1 #.Files.FREAD #.Boot.AppRoot,'Examples/Data/stats.DCF' 
      data[;3 4 5]←0.01×⌊0.5+100×data[;3 4 5]÷[2]1000 1000000 1  ⍝ scale the data a bit 
      data⍪⍨←'Country' '% GDP' 'Population (thousands)' 'GDP ($Millions)' '$/Capita' 
      dt←'#sample'Add _.DataTable data 
      
      ⍝ make sure numeric columns are right-aligned 
      'columns[2].className'dt.Set'dt-right' 
      'columns[3].className'dt.Set'dt-right' 
      'columns[4].className'dt.Set'dt-right' 
      'columns[5].className'dt.Set'dt-right' 
      
      dt.Plugins←'responsive,mark'  ⍝ that's all we need to do to make the table responsive! 
    ∇ 
 
:EndClass