glimmer-dsl-libui 0.4.8 → 0.4.12

data/README.md

@@ -1,4 +1,4 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.4.8
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.4.12
 ## Prerequisite-Free Ruby Desktop Development GUI Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-libui.svg)](http://badge.fury.io/rb/glimmer-dsl-libui)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -77,6 +77,127 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-basic-table-progress-bar.png](images/glimmer-dsl-libui-mac-basic-table-progress-bar.png) | ![glimmer-dsl-libui-windows-basic-table-progress-bar.png](images/glimmer-dsl-libui-windows-basic-table-progress-bar.png) | ![glimmer-dsl-libui-linux-basic-table-progress-bar.png](images/glimmer-dsl-libui-linux-basic-table-progress-bar.png)
 
+Form Table
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class FormTable
+  Contact = Struct.new(:name, :email, :phone, :city, :state)
+  
+  include Glimmer
+  
+  attr_accessor :contacts, :name, :email, :phone, :city, :state, :filter_value
+  
+  def initialize
+    @contacts = [
+      Contact.new('Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'),
+      Contact.new('Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'),
+      Contact.new('Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'),
+      Contact.new('Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'),
+      Contact.new('Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'),
+    ]
+  end
+  
+  def launch
+    window('Contacts', 600, 600) { |w|
+      margined true
+      
+      vertical_box {
+        form {
+          stretchy false
+          
+          entry {
+            label 'Name'
+            text <=> [self, :name] # bidirectional data-binding between entry text and self.name
+          }
+          
+          entry {
+            label 'Email'
+            text <=> [self, :email]
+          }
+          
+          entry {
+            label 'Phone'
+            text <=> [self, :phone]
+          }
+          
+          entry {
+            label 'City'
+            text <=> [self, :city]
+          }
+          
+          entry {
+            label 'State'
+            text <=> [self, :state]
+          }
+        }
+        
+        button('Save Contact') {
+          stretchy false
+          
+          on_clicked do
+            new_row = [name, email, phone, city, state]
+            if new_row.include?('')
+              msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
+            else
+              @contacts << Contact.new(*new_row) # automatically inserts a row into the table due to explicit data-binding
+              @unfiltered_contacts = @contacts.dup
+              self.name = '' # automatically clears name entry through explicit data-binding
+              self.email = ''
+              self.phone = ''
+              self.city = ''
+              self.state = ''
+            end
+          end
+        }
+        
+        search_entry {
+          stretchy false
+          # bidirectional data-binding of text to self.filter_value with after_write option
+          text <=> [self, :filter_value,
+            after_write: ->(filter_value) { # execute after write to self.filter_value
+              @unfiltered_contacts ||= @contacts.dup
+              # Unfilter first to remove any previous filters
+              self.contacts = @unfiltered_contacts.dup # affects table indirectly through explicit data-binding
+              # Now, apply filter if entered
+              unless filter_value.empty?
+                self.contacts = @contacts.filter do |contact| # affects table indirectly through explicit data-binding
+                  contact.members.any? do |attribute|
+                    contact[attribute].to_s.downcase.include?(filter_value.downcase)
+                  end
+                end
+              end
+            }
+          ]
+        }
+        
+        table {
+          text_column('Name')
+          text_column('Email')
+          text_column('Phone')
+          text_column('City')
+          text_column('State')
+    
+          editable true
+          cell_rows <=> [self, :contacts] # explicit data-binding to Model Array
+          
+          on_changed do |row, type, row_data|
+            puts "Row #{row} #{type}: #{row_data}"
+          end
+        }
+      }
+    }.show
+  end
+end
+
+FormTable.new.launch
+```
+
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-form-table.png](images/glimmer-dsl-libui-mac-form-table.png) | ![glimmer-dsl-libui-windows-form-table.png](images/glimmer-dsl-libui-windows-form-table.png) | ![glimmer-dsl-libui-linux-form-table.png](images/glimmer-dsl-libui-linux-form-table.png)
+
 Area Gallery
 
 ```ruby
@@ -235,6 +356,11 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
     - [Custom Keywords](#custom-keywords)
     - [Observer Pattern](#observer-pattern)
     - [Data-Binding](#data-binding)
+      - [Bidirectional (Two-Way) Data-Binding](#bidirectional-two-way-data-binding)
+        - [Table Data-Binding](#table-data-binding)
+      - [Unidirectional (One-Way) Data-Binding](#unidirectional-one-way-data-binding)
+      - [Data-Binding API](#data-binding-api)
+      - [Data-Binding Gotchas](#data-binding-gotchas)
     - [API Gotchas](#api-gotchas)
     - [Original API](#original-api)
   - [Packaging](#packaging)
@@ -267,6 +393,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
       - [Button Counter](#button-counter)
       - [Color The Circles](#color-the-circles)
       - [Control Gallery](#control-gallery)
+      - [CPU Percentage](#cpu-percentage)
       - [Custom Draw Text](#custom-draw-text)
       - [Dynamic Area](#dynamic-area)
       - [Editable Column Table](#editable-column-table)
@@ -373,10 +500,20 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.4.8'
+gem 'glimmer-dsl-libui', '~> 0.4.12'
 ```
 
-Add `require 'glimmer-dsl-libui'` at the top, and then `include Glimmer` into the top-level main object for testing or into an actual class for serious usage.
+Test that installation worked by running the [Meta-Example](#examples):
+
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/meta_example'"
+```
+
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-meta-example.png](images/glimmer-dsl-libui-mac-meta-example.png) | ![glimmer-dsl-libui-windows-meta-example.png](images/glimmer-dsl-libui-windows-meta-example.png) | ![glimmer-dsl-libui-linux-meta-example.png](images/glimmer-dsl-libui-linux-meta-example.png)
+
+Now to use [glimmer-dsl-libui](https://rubygems.org/gems/glimmer-dsl-libui), add `require 'glimmer-dsl-libui'` at the top, and then `include Glimmer` into the top-level main object for testing or into an actual class for serious usage.
 
 Example (you may copy/paste in [`girb`](#girb-glimmer-irb)):
 
@@ -451,7 +588,7 @@ Keyword(Args) | Properties | Listeners
 `about_menu_item` | None | `on_clicked`
 `area` | `auto_draw_enabled` | `on_draw(area_draw_params)`, `on_mouse_event(area_mouse_event)`, `on_mouse_down(area_mouse_event)`, `on_mouse_up(area_mouse_event)`, `on_mouse_drag_started(area_mouse_event)`, `on_mouse_dragged(area_mouse_event)`, `on_mouse_dropped(area_mouse_event)`, `on_mouse_entered`, `on_mouse_exited`, `on_key_event(area_key_event)`, `on_key_down(area_key_event)`, `on_key_up(area_key_event)`
 `arc(x_center as Numeric, y_center as Numeric, radius as Numeric, start_angle as Numeric, sweep as Numeric, is_negative as Boolean)` | `x_center` (`Numeric`), `y_center` (`Numeric`), `radius` (`Numeric`), `start_angle` (`Numeric`), `sweep` (`Numeric`), `is_negative` (Boolean) | None
-`background_color_column(name as String)` | None | None
+`background_color_column` | None | None
 `bezier(c1_x as Numeric, c1_y as Numeric, c2_x as Numeric, c2_y as Numeric, end_x as Numeric, end_y as Numeric)` | `c1_x` (`Numeric`), `c1_y` (`Numeric`), `c2_x` (`Numeric`), `c2_y` (`Numeric`), `end_x` (`Numeric`), `end_y` (`Numeric`) | None
 `button(text as String)` | `text` (`String`) | `on_clicked`
 `button_column(name as String)` | `enabled` (Boolean) | None
@@ -615,120 +752,110 @@ Note that the `cell_rows` property declaration results in "implicit data-binding
 - Inserting cell rows: Calling `Array#<<`, `Array#push`, `Array#prepend`, or any insertion/addition `Array` method automatically inserts rows in actual `table` control
 - Changing cell rows: Calling `Array#[]=`, `Array#map!`, or any update `Array` method automatically updates rows in actual `table` control
 
+([explicit data-binding](#data-binding) supports everything available with implicit data-binding too)
+
 Example (you may copy/paste in [`girb`](#girb-glimmer-irb)):
 
 ```ruby
 require 'glimmer-dsl-libui'
 
-class FormTable
-  include Glimmer
-  
-  attr_accessor :name, :email, :phone, :city, :state, :filter_value
-  
-  def initialize
-    @data = [
-      ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO', '80014'],
-      ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA', '02101'],
-      ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL', '60007'],
-      ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA', '98101'],
-      ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA', '90001'],
-    ]
-  end
+include Glimmer
+
+data = [
+  ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'],
+  ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'],
+  ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'],
+  ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'],
+  ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'],
+]
+
+window('Contacts', 600, 600) { |w|
+  margined true
   
-  def launch
-    window('Contacts', 600, 600) { |w|
-      margined true
+  vertical_box {
+    form {
+      stretchy false
       
-      vertical_box {
-        form {
-          stretchy false
-          
-          entry {
-            label 'Name'
-            text <=> [self, :name]
-          }
-          
-          entry {
-            label 'Email'
-            text <=> [self, :email]
-          }
-          
-          entry {
-            label 'Phone'
-            text <=> [self, :phone]
-          }
-          
-          entry {
-            label 'City'
-            text <=> [self, :city]
-          }
-          
-          entry {
-            label 'State'
-            text <=> [self, :state]
-          }
-        }
-        
-        button('Save Contact') {
-          stretchy false
-          
-          on_clicked do
-            new_row = [name, email, phone, city, state]
-            if new_row.include?('')
-              msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
-            else
-              @data << new_row # automatically inserts a row into the table due to implicit data-binding
-              @unfiltered_data = @data.dup
-              self.name = '' # automatically clears name entry through explicit data-binding
-              self.email = ''
-              self.phone = ''
-              self.city = ''
-              self.state = ''
+      @name_entry = entry {
+        label 'Name'
+      }
+      
+      @email_entry = entry {
+        label 'Email'
+      }
+      
+      @phone_entry = entry {
+        label 'Phone'
+      }
+      
+      @city_entry = entry {
+        label 'City'
+      }
+      
+      @state_entry = entry {
+        label 'State'
+      }
+    }
+    
+    button('Save Contact') {
+      stretchy false
+      
+      on_clicked do
+        new_row = [@name_entry.text, @email_entry.text, @phone_entry.text, @city_entry.text, @state_entry.text]
+        if new_row.include?('')
+          msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
+        else
+          data << new_row # automatically inserts a row into the table due to implicit data-binding
+          @unfiltered_data = data.dup
+          @name_entry.text = ''
+          @email_entry.text = ''
+          @phone_entry.text = ''
+          @city_entry.text = ''
+          @state_entry.text = ''
+        end
+      end
+    }
+    
+    search_entry { |se|
+      stretchy false
+      
+      on_changed do
+        filter_value = se.text
+        @unfiltered_data ||= data.dup
+        # Unfilter first to remove any previous filters
+        data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
+        # Now, apply filter if entered
+        unless filter_value.empty?
+          data.filter! do |row_data| # affects table indirectly through implicit data-binding
+            row_data.any? do |cell|
+              cell.to_s.downcase.include?(filter_value.downcase)
             end
           end
-        }
-        
-        search_entry {
-          stretchy false
-          text <=> [self, :filter_value, # bidirectional data-binding of text to self.filter_value with after_write option
-            after_write: ->(filter_value) { # execute after write to self.filter_value
-              @unfiltered_data ||= @data.dup
-              # Unfilter first to remove any previous filters
-              @data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
-              # Now, apply filter if entered
-              unless filter_value.empty?
-                @data.filter! do |row_data| # affects table indirectly through implicit data-binding
-                  row_data.any? do |cell|
-                    cell.to_s.downcase.include?(filter_value.downcase)
-                  end
-                end
-              end
-            }
-          ]
-        }
-        
-        table {
-          text_column('Name')
-          text_column('Email')
-          text_column('Phone')
-          text_column('City')
-          text_column('State')
+        end
+      end
+    }
     
-          cell_rows @data # implicit data-binding
-          
-          on_changed do |row, type, row_data|
-            puts "Row #{row} #{type}: #{row_data}"
-          end
-        }
-      }
-    }.show
-  end
-end
+    table {
+      text_column('Name')
+      text_column('Email')
+      text_column('Phone')
+      text_column('City')
+      text_column('State')
 
-FormTable.new.launch
+      editable true
+      cell_rows data # implicit data-binding to raw data Array of Arrays
+      
+      on_changed do |row, type, row_data|
+        puts "Row #{row} #{type}: #{row_data}"
+      end
+    }
+  }
+}.show
 ```
 
-![glimmer-dsl-libui-linux-form-table.png](images/glimmer-dsl-libui-linux-form-table.png)
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-form-table.png](images/glimmer-dsl-libui-mac-form-table.png) | ![glimmer-dsl-libui-windows-form-table.png](images/glimmer-dsl-libui-windows-form-table.png) | ![glimmer-dsl-libui-linux-form-table.png](images/glimmer-dsl-libui-linux-form-table.png)
 
 Learn more by checking out [examples](#examples).
 
@@ -798,9 +925,9 @@ Check [examples/dynamic_area.rb](#dynamic-area) for a more detailed semi-declara
 - `scroll_to(x as Numeric, y as Numeric, width as Numeric = main_window.width, height as Numeric = main_window.height)`: scrolls to `x`/`y` location with `width` and `height` viewport size.
 - `set_size(width as Numeric, height as Numeric)`: set size of scrolling area, which must must exceed that of visible viewport in order for scrolling to be enabled.
 
-Mac |Linux
-----|-----
-![glimmer-dsl-libui-mac-dynamic-area.png](images/glimmer-dsl-libui-mac-basic-scrolling-area.png) ![glimmer-dsl-libui-mac-dynamic-area-updated.png](images/glimmer-dsl-libui-mac-basic-scrolling-area-scrolled.png) | ![glimmer-dsl-libui-linux-dynamic-area.png](images/glimmer-dsl-libui-linux-basic-scrolling-area.png) ![glimmer-dsl-libui-linux-dynamic-area-updated.png](images/glimmer-dsl-libui-linux-basic-scrolling-area-scrolled.png)
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-dynamic-area.png](images/glimmer-dsl-libui-mac-basic-scrolling-area.png) ![glimmer-dsl-libui-mac-dynamic-area-updated.png](images/glimmer-dsl-libui-mac-basic-scrolling-area-scrolled.png) | ![glimmer-dsl-libui-windows-dynamic-area.png](images/glimmer-dsl-libui-windows-basic-scrolling-area.png) ![glimmer-dsl-libui-windows-dynamic-area-updated.png](images/glimmer-dsl-libui-windows-basic-scrolling-area-scrolled.png) | ![glimmer-dsl-libui-linux-dynamic-area.png](images/glimmer-dsl-libui-linux-basic-scrolling-area.png) ![glimmer-dsl-libui-linux-dynamic-area-updated.png](images/glimmer-dsl-libui-linux-basic-scrolling-area-scrolled.png)
 
 Check [examples/basic_scrolling_area.rb](#basic-scrolling-area) for a more detailed example.
 
@@ -1216,6 +1343,7 @@ Note that `area`, `path`, and nested shapes are all truly declarative, meaning t
 - When destroying a control nested under a `horizontal_box` or `vertical_box`, it is automatically deleted from the box's children
 - When destroying a control nested under a `form`, it is automatically deleted from the form's children
 - When destroying a control nested under a `window` or `group`, it is automatically unset as their child to allow successful destruction
+- When destroying a control that has a data-binding to a model attribute, the data-binding observer registration is automatically deregistered
 - For `date_time_picker`, `date_picker`, and `time_picker`, make sure `time` hash values for `mon`, `wday`, and `yday` are 1-based instead of [libui](https://github.com/andlabs/libui) original 0-based values, and return `dst` as Boolean instead of `isdst` as `1`/`0`
 - Smart defaults for `grid` child properties are `left` (`0`), `top` (`0`), `xspan` (`1`), `yspan` (`1`), `hexpand` (`false`), `halign` (`:fill`), `vexpand` (`false`), and `valign` (`:fill`)
 - The `table` control automatically constructs required `TableModelHandler`, `TableModel`, and `TableParams`, calculating all their arguments from `cell_rows` and `editable` properties (e.g. `NumRows`) as well as nested columns (e.g. `text_column`)
@@ -1381,6 +1509,8 @@ Data-binding supports utilizing the [MVP (Model View Presenter)](https://en.wiki
 
 ![MVP](https://www.researchgate.net/profile/Gilles-Perrouin/publication/320249584/figure/fig8/AS:668260987068418@1536337243385/Model-view-presenter-architecture.png)
 
+#### Bidirectional (Two-Way) Data-Binding
+
 [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) supports bidirectional (two-way) data-binding of the following controls/properties via the `<=>` operator (indicating data is moving in both directions between View and Model):
 - `checkbox`: `checked`
 - `check_menu_item`: `checked`
@@ -1398,27 +1528,184 @@ Data-binding supports utilizing the [MVP (Model View Presenter)](https://en.wiki
 - `search_entry`: `text`
 - `slider`: `value`
 - `spinbox`: `value`
+- `table`: `cell_rows` (explicit data-binding by using `<=>` and [implicit data-binding](#table-api) by assigning value directly)
 - `time_picker`: `time`
 
-Example of bidirectional data-binding:
+Example of bidirectional data-binding:
+
+```ruby
+entry {
+  text <=> [contract, :legal_text]
+}
+```
+
+That is data-binding a contract's legal text to an `entry` `text` property.
+
+Another example of bidirectional data-binding with an option:
+
+```ruby
+entry {
+  text <=> [self, :entered_text, after_write: ->(text) {puts text}]
+}
+```
+
+That is data-binding `entered_text` attribute on `self` to `entry` `text` property and printing text after write to the model.
+
+##### Table Data-Binding
+
+One note about `table` `cell_rows` data-binding is that it works with either:
+- Raw data `Array` (rows) of `Array`s (column cells)
+- Model `Array` (rows) of objects having attributes (column cells) matching the underscored names of `table` columns by convention. Model attribute names can be overridden when needed by passing an `Array` enumerating all mapped model attributes in the order of `table` columns or alternatively a `Hash` mapping only the column names that have model attribute names different from their table column underscored version.
+
+Example of `table` implicit data-binding of `cell_rows` to raw data `Array` of `Array`s (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+data = [
+  ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'],
+  ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'],
+  ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'],
+  ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'],
+  ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'],
+]
+
+window('Contacts', 600, 600) {
+  table {
+    text_column('Name')
+    text_column('Email')
+    text_column('Phone')
+    text_column('City')
+    text_column('State')
+  
+    cell_rows data
+  }
+}.show
+```
+
+Example of `table` explicit data-binding of `cell_rows` to Model `Array` (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class SomeTable
+  Contact = Struct.new(:name, :email, :phone, :city, :state)
+  
+  include Glimmer
+  
+  attr_accessor :contacts
+  
+  def initialize
+    @contacts = [
+      Contact.new('Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'),
+      Contact.new('Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'),
+      Contact.new('Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'),
+      Contact.new('Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'),
+      Contact.new('Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'),
+    ]
+  end
+  
+  def launch
+    window('Contacts', 600, 200) {
+      table {
+        text_column('Name')
+        text_column('Email')
+        text_column('Phone')
+        text_column('City')
+        text_column('State')
+  
+        cell_rows <=> [self, :contacts] # explicit data-binding to Model Array auto-inferring model attribute names from underscored table column names by convention
+      }
+    }.show
+  end
+end
+
+SomeTable.new.launch
+```
+
+Example of `table` explicit data-binding of `cell_rows` to Model `Array` with `column_attributes` `Hash` mapping for custom column names (you may copy/paste in [`girb`](#girb-glimmer-irb)):
 
 ```ruby
-entry {
-  text <=> [contract, :legal_text]
-}
-```
+require 'glimmer-dsl-libui'
 
-That is data-binding a contract's legal text to an `entry` `text` property.
+class SomeTable
+  Contact = Struct.new(:name, :email, :phone, :city, :state)
+  
+  include Glimmer
+  
+  attr_accessor :contacts
+  
+  def initialize
+    @contacts = [
+      Contact.new('Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'),
+      Contact.new('Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'),
+      Contact.new('Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'),
+      Contact.new('Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'),
+      Contact.new('Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'),
+    ]
+  end
+  
+  def launch
+    window('Contacts', 600, 200) {
+      table {
+        text_column('Name')
+        text_column('Email')
+        text_column('Phone')
+        text_column('City/Town')
+        text_column('State/Province')
+  
+        cell_rows <=> [self, :contacts, column_attributes: {'City/Town' => :city, 'State/Province' => :state}]
+      }
+    }.show
+  end
+end
 
-Another example of bidirectional data-binding with an option:
+SomeTable.new.launch
+```
+
+Example of `table` explicit data-binding of `cell_rows` to Model `Array` with complete `column_attributes` `Array` mapping (you may copy/paste in [`girb`](#girb-glimmer-irb)):
 
 ```ruby
-entry {
-  text <=> [self, :entered_text, after_write: ->(text) {puts text}]
-}
+require 'glimmer-dsl-libui'
+
+class SomeTable
+  Contact = Struct.new(:name, :email, :phone, :city, :state)
+  
+  include Glimmer
+  
+  attr_accessor :contacts
+  
+  def initialize
+    @contacts = [
+      Contact.new('Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'),
+      Contact.new('Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'),
+      Contact.new('Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'),
+      Contact.new('Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'),
+      Contact.new('Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'),
+    ]
+  end
+  
+  def launch
+    window('Contacts', 600, 200) {
+      table {
+        text_column('Full Name')
+        text_column('Email Address')
+        text_column('Phone Number')
+        text_column('City or Town')
+        text_column('State or Province')
+  
+        cell_rows <=> [self, :contacts, column_attributes: [:name, :email, :phone, :city, :state]]
+      }
+    }.show
+  end
+end
+
+SomeTable.new.launch
 ```
 
-That is data-binding `entered_text` attribute on `self` to `entry` `text` property and printing text after write to the model.
+#### Unidirectional (One-Way) Data-Binding
 
 [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) supports unidirectional (one-way) data-binding of any control/shape/attributed-string property via the `<=` operator (indicating data is moving from the right side, which is the Model, to the left side, which is the GUI View object).
 
@@ -1442,6 +1729,8 @@ window {
 
 That is data-binding the `window` `title` property to the `score` attribute of a `@game`, but converting on read from the Model to a `String`.
 
+#### Data-Binding API
+
 To summarize the data-binding API:
 - `view_property <=> [model, attribute, *read_or_write_options]`: Bidirectional (two-way) data-binding to Model attribute accessor
 - `view_property <= [model, attribute, *read_only_options]`: Unidirectional (one-way) data-binding to Model attribute reader
@@ -1472,12 +1761,13 @@ entry {
 }
 ```
 
-Data-binding gotchas:
+Learn more from data-binding usage in [Login](#login) (4 data-binding versions), [Basic Entry](#basic-entry), [Form](#form), [Form Table](#form-table) (5 data-binding versions), [Method-Based Custom Keyword](#method-based-custom-keyword), [Snake](#snake) and [Tic Tac Toe](#tic_tac_toe) examples.
+
+#### Data-Binding Gotchas
+
 - Never data-bind a control property to an attribute on the same view object with the same exact name (e.g. binding `entry` `text` property to `self` `text` attribute) as it would conflict with it. Instead, data-bind view property to an attribute with a different name on the view object or with the same name, but on a presenter or model object (e.g. data-bind `entry` `text` to `self` `legal_text` attribute or to `contract` model `text` attribute)
 - Data-binding a property utilizes the control's listener associated with the property (e.g. `on_changed` for `entry` `text`), so you cannot hook into the listener directly anymore as that would negate data-binding. Instead, you can add an `after_write: ->(val) {}` option to perform something on trigger of the control listener instead.
 
-Learn more from data-binding usage in [Login](#login) (4 data-binding versions), [Basic Entry](#basic-entry), [Form](#form), [Form Table](#form-table), [Method-Based Custom Keyword](#method-based-custom-keyword), [Snake](#snake) and [Tic Tac Toe](#tic_tac_toe) examples.
-
 ### API Gotchas
 
 - There is no proper way to destroy `grid` children due to [libui](https://github.com/andlabs/libui) not offering any API for deleting them from `grid` (no `grid_delete` similar to `box_delete` for `horizontal_box` and `vertical_box`).
@@ -1489,272 +1779,12 @@ Learn more from data-binding usage in [Login](#login) (4 data-binding versions),
 - `table` `progress_bar` column on Windows cannot be updated with a positive value if it started initially with `-1` (it ignores update to avoid crashing due to an issue in [libui](https://github.com/andlabs/libui) on Windows.
 - It seems that [libui](https://github.com/andlabs/libui) does not support nesting multiple `area` controls under a `grid` as only the first one shows up in that scenario. To workaround that limitation, use a `vertical_box` with nested `horizontal_box`s instead to include multiple `area`s in a GUI.
 - As per the code of [examples/basic_transform.rb](#basic-transform), Windows requires different ordering of transforms than Mac and Linux.
+- `scrolling_area#scroll_to` does not seem to work on Windows and Linux, but works fine on Mac
 
 ### Original API
 
 Here are all the lower-level [LibUI](https://github.com/kojix2/LibUI) API methods utilized by [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui):
-- `alloc_control`
-- `area_begin_user_window_move`
-- `area_begin_user_window_resize`
-- `area_queue_redraw_all`
-- `area_scroll_to`
-- `area_set_size`
-- `attribute_color`
-- `attribute_family`
-- `attribute_features`
-- `attribute_get_type`
-- `attribute_italic`
-- `attribute_size`
-- `attribute_stretch`
-- `attribute_underline`
-- `attribute_underline_color`
-- `attribute_weight`
-- `attributed_string_append_unattributed`
-- `attributed_string_byte_index_to_grapheme`
-- `attributed_string_delete`
-- `attributed_string_for_each_attribute`
-- `attributed_string_grapheme_to_byte_index`
-- `attributed_string_insert_at_unattributed`
-- `attributed_string_len`
-- `attributed_string_num_graphemes`
-- `attributed_string_set_attribute`
-- `attributed_string_string`
-- `box_append`
-- `box_delete`
-- `box_padded`
-- `box_set_padded`
-- `button_on_clicked`
-- `button_set_text`
-- `button_text`
-- `checkbox_checked`
-- `checkbox_on_toggled`
-- `checkbox_set_checked`
-- `checkbox_set_text`
-- `checkbox_text`
-- `color_button_color`
-- `color_button_on_changed`
-- `color_button_set_color`
-- `combobox_append`
-- `combobox_on_selected`
-- `combobox_selected`
-- `combobox_set_selected`
-- `control_destroy`
-- `control_disable`
-- `control_enable`
-- `control_enabled`
-- `control_enabled_to_user`
-- `control_handle`
-- `control_hide`
-- `control_parent`
-- `control_set_parent`
-- `control_show`
-- `control_toplevel`
-- `control_verify_set_parent`
-- `control_visible`
-- `date_time_picker_on_changed`
-- `date_time_picker_set_time`
-- `date_time_picker_time`
-- `draw_clip`
-- `draw_fill`
-- `draw_free_path`
-- `draw_free_text_layout`
-- `draw_matrix_invert`
-- `draw_matrix_invertible`
-- `draw_matrix_multiply`
-- `draw_matrix_rotate`
-- `draw_matrix_scale`
-- `draw_matrix_set_identity`
-- `draw_matrix_skew`
-- `draw_matrix_transform_point`
-- `draw_matrix_transform_size`
-- `draw_matrix_translate`
-- `draw_new_path`
-- `draw_new_text_layout`
-- `draw_path_add_rectangle`
-- `draw_path_arc_to`
-- `draw_path_bezier_to`
-- `draw_path_close_figure`
-- `draw_path_end`
-- `draw_path_line_to`
-- `draw_path_new_figure`
-- `draw_path_new_figure_with_arc`
-- `draw_restore`
-- `draw_save`
-- `draw_stroke`
-- `draw_text`
-- `draw_text_layout_extents`
-- `draw_transform`
-- `editable_combobox_append`
-- `editable_combobox_on_changed`
-- `editable_combobox_set_text`
-- `editable_combobox_text`
-- `entry_on_changed`
-- `entry_read_only`
-- `entry_set_read_only`
-- `entry_set_text`
-- `entry_text`
-- `ffi_lib`
-- `ffi_lib=`
-- `font_button_font`
-- `font_button_on_changed`
-- `form_append`
-- `form_delete`
-- `form_padded`
-- `form_set_padded`
-- `free_attribute`
-- `free_attributed_string`
-- `free_control`
-- `free_font_button_font`
-- `free_image`
-- `free_init_error`
-- `free_open_type_features`
-- `free_table_model`
-- `free_table_value`
-- `free_text`
-- `grid_append`
-- `grid_insert_at`
-- `grid_padded`
-- `grid_set_padded`
-- `group_margined`
-- `group_set_child`
-- `group_set_margined`
-- `group_set_title`
-- `group_title`
-- `image_append`
-- `init`
-- `label_set_text`
-- `label_text`
-- `main`
-- `main_step`
-- `main_steps`
-- `menu_append_about_item`
-- `menu_append_check_item`
-- `menu_append_item`
-- `menu_append_preferences_item`
-- `menu_append_quit_item`
-- `menu_append_separator`
-- `menu_item_checked`
-- `menu_item_disable`
-- `menu_item_enable`
-- `menu_item_on_clicked`
-- `menu_item_set_checked`
-- `msg_box`
-- `msg_box_error`
-- `multiline_entry_append`
-- `multiline_entry_on_changed`
-- `multiline_entry_read_only`
-- `multiline_entry_set_read_only`
-- `multiline_entry_set_text`
-- `multiline_entry_text`
-- `new_area`
-- `new_attributed_string`
-- `new_background_attribute`
-- `new_button`
-- `new_checkbox`
-- `new_color_attribute`
-- `new_color_button`
-- `new_combobox`
-- `new_date_picker`
-- `new_date_time_picker`
-- `new_editable_combobox`
-- `new_entry`
-- `new_family_attribute`
-- `new_features_attribute`
-- `new_font_button`
-- `new_form`
-- `new_grid`
-- `new_group`
-- `new_horizontal_box`
-- `new_horizontal_separator`
-- `new_image`
-- `new_italic_attribute`
-- `new_label`
-- `new_menu`
-- `new_multiline_entry`
-- `new_non_wrapping_multiline_entry`
-- `new_open_type_features`
-- `new_password_entry`
-- `new_progress_bar`
-- `new_radio_buttons`
-- `new_scrolling_area`
-- `new_search_entry`
-- `new_size_attribute`
-- `new_slider`
-- `new_spinbox`
-- `new_stretch_attribute`
-- `new_tab`
-- `new_table`
-- `new_table_model`
-- `new_table_value_color`
-- `new_table_value_image`
-- `new_table_value_int`
-- `new_table_value_string`
-- `new_time_picker`
-- `new_underline_attribute`
-- `new_underline_color_attribute`
-- `new_vertical_box`
-- `new_vertical_separator`
-- `new_weight_attribute`
-- `new_window`
-- `on_should_quit`
-- `open_file`
-- `open_type_features_add`
-- `open_type_features_clone`
-- `open_type_features_for_each`
-- `open_type_features_get`
-- `open_type_features_remove`
-- `progress_bar_set_value`
-- `progress_bar_value`
-- `queue_main`
-- `quit`
-- `radio_buttons_append`
-- `radio_buttons_on_selected`
-- `radio_buttons_selected`
-- `radio_buttons_set_selected`
-- `save_file`
-- `slider_on_changed`
-- `slider_set_value`
-- `slider_value`
-- `spinbox_on_changed`
-- `spinbox_set_value`
-- `spinbox_value`
-- `tab_append`
-- `tab_delete`
-- `tab_insert_at`
-- `tab_margined`
-- `tab_num_pages`
-- `tab_set_margined`
-- `table_append_button_column`
-- `table_append_checkbox_column`
-- `table_append_checkbox_text_column`
-- `table_append_image_column`
-- `table_append_image_text_column`
-- `table_append_progress_bar_column`
-- `table_append_text_column`
-- `table_model_row_changed`
-- `table_model_row_deleted`
-- `table_model_row_inserted`
-- `table_value_color`
-- `table_value_get_type`
-- `table_value_image`
-- `table_value_int`
-- `table_value_string`
-- `timer`
-- `uninit`
-- `user_bug_cannot_set_parent_on_toplevel`
-- `window_borderless`
-- `window_content_size`
-- `window_fullscreen`
-- `window_margined`
-- `window_on_closing`
-- `window_on_content_size_changed`
-- `window_set_borderless`
-- `window_set_child`
-- `window_set_content_size`
-- `window_set_fullscreen`
-- `window_set_margined`
-- `window_set_title`
-- `window_title`
+`alloc_control`, `append_features`, `area_begin_user_window_move`, `area_begin_user_window_resize`, `area_queue_redraw_all`, `area_scroll_to`, `area_set_size`, `attribute_color`, `attribute_family`, `attribute_features`, `attribute_get_type`, `attribute_italic`, `attribute_size`, `attribute_stretch`, `attribute_underline`, `attribute_underline_color`, `attribute_weight`, `attributed_string_append_unattributed`, `attributed_string_byte_index_to_grapheme`, `attributed_string_delete`, `attributed_string_for_each_attribute`, `attributed_string_grapheme_to_byte_index`, `attributed_string_insert_at_unattributed`, `attributed_string_len`, `attributed_string_num_graphemes`, `attributed_string_set_attribute`, `attributed_string_string`, `box_append`, `box_delete`, `box_padded`, `box_set_padded`, `button_on_clicked`, `button_set_text`, `button_text`, `checkbox_checked`, `checkbox_on_toggled`, `checkbox_set_checked`, `checkbox_set_text`, `checkbox_text`, `color_button_color`, `color_button_on_changed`, `color_button_set_color`, `combobox_append`, `combobox_on_selected`, `combobox_selected`, `combobox_set_selected`, `control_destroy`, `control_disable`, `control_enable`, `control_enabled`, `control_enabled_to_user`, `control_handle`, `control_hide`, `control_parent`, `control_set_parent`, `control_show`, `control_toplevel`, `control_verify_set_parent`, `control_visible`, `date_time_picker_on_changed`, `date_time_picker_set_time`, `date_time_picker_time`, `draw_clip`, `draw_fill`, `draw_free_path`, `draw_free_text_layout`, `draw_matrix_invert`, `draw_matrix_invertible`, `draw_matrix_multiply`, `draw_matrix_rotate`, `draw_matrix_scale`, `draw_matrix_set_identity`, `draw_matrix_skew`, `draw_matrix_transform_point`, `draw_matrix_transform_size`, `draw_matrix_translate`, `draw_new_path`, `draw_new_text_layout`, `draw_path_add_rectangle`, `draw_path_arc_to`, `draw_path_bezier_to`, `draw_path_close_figure`, `draw_path_end`, `draw_path_line_to`, `draw_path_new_figure`, `draw_path_new_figure_with_arc`, `draw_restore`, `draw_save`, `draw_stroke`, `draw_text`, `draw_text_layout_extents`, `draw_transform`, `editable_combobox_append`, `editable_combobox_on_changed`, `editable_combobox_set_text`, `editable_combobox_text`, `entry_on_changed`, `entry_read_only`, `entry_set_read_only`, `entry_set_text`, `entry_text`, `ffi_lib`, `ffi_lib=`, `font_button_font`, `font_button_on_changed`, `form_append`, `form_delete`, `form_padded`, `form_set_padded`, `free_attribute`, `free_attributed_string`, `free_control`, `free_font_button_font`, `free_image`, `free_init_error`, `free_open_type_features`, `free_table_model`, `free_table_value`, `free_text`, `grid_append`, `grid_insert_at`, `grid_padded`, `grid_set_padded`, `group_margined`, `group_set_child`, `group_set_margined`, `group_set_title`, `group_title`, `image_append`, `init`, `label_set_text`, `label_text`, `main`, `main_step`, `main_steps`, `menu_append_about_item`, `menu_append_check_item`, `menu_append_item`, `menu_append_preferences_item`, `menu_append_quit_item`, `menu_append_separator`, `menu_item_checked`, `menu_item_disable`, `menu_item_enable`, `menu_item_on_clicked`, `menu_item_set_checked`, `msg_box`, `msg_box_error`, `multiline_entry_append`, `multiline_entry_on_changed`, `multiline_entry_read_only`, `multiline_entry_set_read_only`, `multiline_entry_set_text`, `multiline_entry_text`, `new_area`, `new_attributed_string`, `new_background_attribute`, `new_button`, `new_checkbox`, `new_color_attribute`, `new_color_button`, `new_combobox`, `new_date_picker`, `new_date_time_picker`, `new_editable_combobox`, `new_entry`, `new_family_attribute`, `new_features_attribute`, `new_font_button`, `new_form`, `new_grid`, `new_group`, `new_horizontal_box`, `new_horizontal_separator`, `new_image`, `new_italic_attribute`, `new_label`, `new_menu`, `new_multiline_entry`, `new_non_wrapping_multiline_entry`, `new_open_type_features`, `new_password_entry`, `new_progress_bar`, `new_radio_buttons`, `new_scrolling_area`, `new_search_entry`, `new_size_attribute`, `new_slider`, `new_spinbox`, `new_stretch_attribute`, `new_tab`, `new_table`, `new_table_model`, `new_table_value_color`, `new_table_value_image`, `new_table_value_int`, `new_table_value_string`, `new_time_picker`, `new_underline_attribute`, `new_underline_color_attribute`, `new_vertical_box`, `new_vertical_separator`, `new_weight_attribute`, `new_window`, `on_should_quit`, `open_file`, `open_type_features_add`, `open_type_features_clone`, `open_type_features_for_each`, `open_type_features_get`, `open_type_features_remove`, `progress_bar_set_value`, `progress_bar_value`, `queue_main`, `quit`, `radio_buttons_append`, `radio_buttons_on_selected`, `radio_buttons_selected`, `radio_buttons_set_selected`, `save_file`, `slider_on_changed`, `slider_set_value`, `slider_value`, `spinbox_on_changed`, `spinbox_set_value`, `spinbox_value`, `tab_append`, `tab_delete`, `tab_insert_at`, `tab_margined`, `tab_num_pages`, `tab_set_margined`, `table_append_button_column`, `table_append_checkbox_column`, `table_append_checkbox_text_column`, `table_append_image_column`, `table_append_image_text_column`, `table_append_progress_bar_column`, `table_append_text_column`, `table_model_row_changed`, `table_model_row_deleted`, `table_model_row_inserted`, `table_value_color`, `table_value_get_type`, `table_value_image`, `table_value_int`, `table_value_string`, `timer`, `uninit`, `user_bug_cannot_set_parent_on_toplevel`, `window_borderless`, `window_content_size`, `window_fullscreen`, `window_margined`, `window_on_closing`, `window_on_content_size_changed`, `window_set_borderless`, `window_set_child`, `window_set_content_size`, `window_set_fullscreen`, `window_set_margined`, `window_set_title`, `window_title`
 
 To learn more about the [LibUI](https://github.com/kojix2/LibUI) API exposed through [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui):
 - Check out [LibUI ffi.rb](https://github.com/kojix2/LibUI/blob/main/lib/libui/ffi.rb)
@@ -3063,7 +3093,44 @@ UI.main
 UI.quit
 ```
 
-[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (passing file url as image):
+
+```ruby
+# frozen_string_literal: true
+
+# NOTE:
+# This example displays images that can be freely downloaded from the Studio Ghibli website.
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+IMAGE_ROWS = []
+
+50.times do |i|
+  url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
+  puts "Processing Image: #{url}"; $stdout.flush # for Windows
+  IMAGE_ROWS << [url] # array of one column cell
+rescue StandardError => e
+  warn url, e.message
+end
+
+window('The Red Turtle', 310, 350, false) {
+  horizontal_box {
+    table {
+      image_column('www.ghibli.jp/works/red-turtle')
+      
+      cell_rows IMAGE_ROWS
+    }
+  }
+  
+  on_closing do
+    puts 'Bye Bye'
+  end
+}.show
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (automatic construction of `image`):
 
 ```ruby
 # NOTE:
@@ -3098,7 +3165,7 @@ window('The Red Turtle', 310, 350, false) {
 }.show
 ```
 
-[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (manual construction of `image` from `image_part`):
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (manual construction of `image` from `image_part`):
 
 ```ruby
 # NOTE:
@@ -3166,7 +3233,44 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-basic-table-image-text.png](images/glimmer-dsl-libui-mac-basic-table-image-text.png) | ![glimmer-dsl-libui-windows-basic-table-image-text.png](images/glimmer-dsl-libui-windows-basic-table-image-text.png) | ![glimmer-dsl-libui-linux-basic-table-image-text.png](images/glimmer-dsl-libui-linux-basic-table-image-text.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (passing file url as image):
+
+```ruby
+# frozen_string_literal: true
+
+# NOTE:
+# This example displays images that can be freely downloaded from the Studio Ghibli website.
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+IMAGE_ROWS = []
+
+5.times do |i|
+  url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
+  puts "Processing Image: #{url}"; $stdout.flush # for Windows
+  text = url.sub('https://www.ghibli.jp/gallery/thumb-redturtle', '').sub('.png', '')
+  IMAGE_ROWS << [[url, text], [url, text]] # cell values are dual-element arrays
+rescue StandardError => e
+  warn url, e.message
+end
+
+window('The Red Turtle', 670, 350) {
+  horizontal_box {
+    table {
+      image_text_column('image/number')
+      image_text_column('image/number (editable)') {
+        editable true
+      }
+      
+      cell_rows IMAGE_ROWS
+    }
+  }
+}.show
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (automatic construction of `image`):
 
 ```ruby
 # NOTE:
@@ -3268,7 +3372,70 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-basic-table-button.png](images/glimmer-dsl-libui-mac-basic-table-button.png) ![glimmer-dsl-libui-mac-basic-table-button-deleted.png](images/glimmer-dsl-libui-mac-basic-table-button-deleted.png) | ![glimmer-dsl-libui-windows-basic-table-button.png](images/glimmer-dsl-libui-windows-basic-table-button.png) ![glimmer-dsl-libui-windows-basic-table-button-deleted.png](images/glimmer-dsl-libui-windows-basic-table-button-deleted.png) | ![glimmer-dsl-libui-linux-basic-table-button.png](images/glimmer-dsl-libui-linux-basic-table-button.png) ![glimmer-dsl-libui-linux-basic-table-button-deleted.png](images/glimmer-dsl-libui-linux-basic-table-button-deleted.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with explicit [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class BasicTableButton
+  BasicAnimal = Struct.new(:name, :sound)
+  
+  class Animal < BasicAnimal
+    def action
+      'delete'
+    end
+  end
+  
+  include Glimmer
+  
+  attr_accessor :animals
+  
+  def initialize
+    @animals = [
+      Animal.new('cat', 'meow'),
+      Animal.new('dog', 'woof'),
+      Animal.new('chicken', 'cock-a-doodle-doo'),
+      Animal.new('horse', 'neigh'),
+      Animal.new('cow', 'moo'),
+    ]
+  end
+  
+  def launch
+    window('Animal sounds', 400, 200) {
+      horizontal_box {
+        table {
+          text_column('Animal')
+          text_column('Description')
+          button_column('Action') {
+            on_clicked do |row|
+              # Option 1: direct data deletion is the simpler solution
+#               @animals.delete_at(row) # automatically deletes actual table row due to explicit data-binding
+              
+              # Option 2: cloning only to demonstrate table row deletion upon explicit setting of animals attribute (cloning is not recommended beyond demonstrating this point)
+              new_animals = @animals.clone
+              new_animals.delete_at(row)
+              self.animals = new_animals # automatically loses deleted table row due to explicit data-binding
+            end
+          }
+    
+          
+          cell_rows <= [self, :animals, column_attributes: {'Animal' => :name, 'Description' => :sound}]
+          
+          # explicit unidirectional data-binding of table cell_rows to self.animals
+          on_changed do |row, type, row_data|
+            puts "Row #{row} #{type}: #{row_data}"
+            $stdout.flush
+          end
+        }
+      }
+    }.show
+  end
+end
+
+BasicTableButton.new.launch
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (with implicit [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -3477,16 +3644,126 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-basic-table-color.png](images/glimmer-dsl-libui-mac-basic-table-color.png) | ![glimmer-dsl-libui-windows-basic-table-color.png](images/glimmer-dsl-libui-windows-basic-table-color.png) | ![glimmer-dsl-libui-linux-basic-table-color.png](images/glimmer-dsl-libui-linux-basic-table-color.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with explicit [data-binding](#data-binding) to model rows using a presenter):
 
 ```ruby
-# frozen_string_literal: true
+require 'glimmer-dsl-libui'
+
+class BasicTableColor
+  Animal = Struct.new(:name, :sound, :mammal)
+  
+  class AnimalPresenter < Animal
+    def name_color
+      color = case name
+      when 'cat'
+        :red
+      when 'dog'
+        :yellow
+      when 'chicken'
+        :beige
+      when 'horse'
+        :purple
+      when 'cow'
+        :gray
+      end
+      [name, color]
+    end
+    
+    def sound_color
+      color = case name
+      when 'cat', 'chicken', 'cow'
+        :blue
+      when 'dog', 'horse'
+        {r: 240, g: 32, b: 32}
+      end
+      [sound, color]
+    end
+    
+    def mammal_description_color
+      color = case name
+      when 'cat', 'dog', 'horse', 'cow'
+        :green
+      when 'chicken'
+        :red
+      end
+      [mammal, 'mammal', color]
+    end
+    
+    def image_description_color
+      color = case name
+      when 'cat', 'dog', 'horse'
+        :dark_blue
+      when 'chicken'
+        :beige
+      when 'cow'
+        :brown
+      end
+      [img, 'Glimmer', color]
+    end
+    
+    def img
+      # scale image to 24x24 (can be passed as file path String only instead of Array to avoid scaling)
+      [File.expand_path('../icons/glimmer.png', __dir__), 24, 24]
+    end
+    
+    def background_color
+      case name
+      when 'cat'
+        {r: 255, g: 120, b: 0, a: 0.5}
+      when 'dog'
+        :skyblue
+      when 'chicken'
+        {r: 5, g: 120, b: 110}
+      when 'horse'
+        '#13a1fb'
+      when 'cow'
+        0x12ff02
+      end
+    end
+  end
+  
+  include Glimmer
+  
+  attr_accessor :animals
+  
+  def initialize
+    @animals = [
+      AnimalPresenter.new('cat', 'meow', true),
+      AnimalPresenter.new('dog', 'woof', true),
+      AnimalPresenter.new('chicken', 'cock-a-doodle-doo', false),
+      AnimalPresenter.new('horse', 'neigh', true),
+      AnimalPresenter.new('cow', 'moo', true),
+    ]
+  end
+  
+  def launch
+    window('Animals', 500, 200) {
+      horizontal_box {
+        table {
+          text_color_column('Animal')
+          text_color_column('Sound')
+          checkbox_text_color_column('Description')
+          image_text_color_column('GUI')
+          background_color_column # must always be the last column and always expects data-binding model attribute `background_color` when binding to Array of models
+    
+          cell_rows <= [self, :animals, column_attributes: {'Animal' => :name_color, 'Sound' => :sound_color, 'Description' => :mammal_description_color, 'GUI' => :image_description_color}]
+        }
+      }
+    }.show
+  end
+end
+
+BasicTableColor.new.launch
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (with implicit [data-binding](#data-binding) to raw data rows):
 
+```ruby
 require 'glimmer-dsl-libui'
 
 include Glimmer
 
-img = image(File.expand_path('../icons/glimmer.png', __dir__), 24, 24)
+img = [File.expand_path('../icons/glimmer.png', __dir__), 24, 24] # scales image to 24x24 (can be passed as file path String only instead of Array to avoid scaling)
 
 data = [
   [['cat', :red]      , ['meow', :blue]                  , [true, 'mammal', :green], [img, 'Glimmer', :dark_blue], {r: 255, g: 120, b: 0, a: 0.5}],
@@ -3503,7 +3780,7 @@ window('Animals', 500, 200) {
       text_color_column('Sound')
       checkbox_text_color_column('Description')
       image_text_color_column('GUI')
-      background_color_column('Mammal')
+      background_color_column # must be the last column
 
       cell_rows data
     }
@@ -3511,7 +3788,7 @@ window('Animals', 500, 200) {
 }.show
 ```
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (manual construction of [libui](https://github.com/andlabs/libui) `image` from `image_part`):
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (with implicit [data-binding](#data-binding) to raw data rows and manual construction of [libui](https://github.com/andlabs/libui) `image` from `image_part`):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -3545,7 +3822,7 @@ window('Animals', 500, 200) {
       text_color_column('Sound')
       checkbox_text_color_column('Description')
       image_text_color_column('GUI')
-      background_color_column('Mammal')
+      background_color_column
 
       cell_rows data
     }
@@ -3687,9 +3964,9 @@ Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/
 ruby -r glimmer-dsl-libui -e "require 'examples/basic_scrolling_area'"
 ```
 
-Mac | Linux
-----|------
-![glimmer-dsl-libui-mac-dynamic-area.png](images/glimmer-dsl-libui-mac-basic-scrolling-area.png) ![glimmer-dsl-libui-mac-dynamic-area-updated.png](images/glimmer-dsl-libui-mac-basic-scrolling-area-scrolled.png) | ![glimmer-dsl-libui-linux-dynamic-area.png](images/glimmer-dsl-libui-linux-basic-scrolling-area.png) ![glimmer-dsl-libui-linux-dynamic-area-updated.png](images/glimmer-dsl-libui-linux-basic-scrolling-area-scrolled.png)
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-dynamic-area.png](images/glimmer-dsl-libui-mac-basic-scrolling-area.png) ![glimmer-dsl-libui-mac-dynamic-area-updated.png](images/glimmer-dsl-libui-mac-basic-scrolling-area-scrolled.png) | ![glimmer-dsl-libui-windows-dynamic-area.png](images/glimmer-dsl-libui-windows-basic-scrolling-area.png) ![glimmer-dsl-libui-windows-dynamic-area-updated.png](images/glimmer-dsl-libui-windows-basic-scrolling-area-scrolled.png) | ![glimmer-dsl-libui-linux-dynamic-area.png](images/glimmer-dsl-libui-linux-basic-scrolling-area.png) ![glimmer-dsl-libui-linux-dynamic-area-updated.png](images/glimmer-dsl-libui-linux-basic-scrolling-area-scrolled.png)
 
 New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
 
@@ -3776,6 +4053,8 @@ BasicScrollingArea.new.launch
 
 #### Basic Image
 
+Please note the caveats of [Area Image](#area-image) **(Alpha Feature)** with regards to this example.
+
 [examples/basic_image.rb](examples/basic_image.rb)
 
 Run with this command from the root of the project if you cloned the project:
@@ -5026,9 +5305,9 @@ Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/
 ruby -r glimmer-dsl-libui -e "require 'examples/button_counter'"
 ```
 
-Mac | Linux
-----|------
-![glimmer-dsl-libui-mac-button-counter.png](images/glimmer-dsl-libui-mac-button-counter.png) | ![glimmer-dsl-libui-linux-button-counter.png](images/glimmer-dsl-libui-linux-button-counter.png)
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-button-counter.png](images/glimmer-dsl-libui-mac-button-counter.png) | ![glimmer-dsl-libui-windows-button-counter.png](images/glimmer-dsl-libui-windows-button-counter.png) | ![glimmer-dsl-libui-linux-button-counter.png](images/glimmer-dsl-libui-linux-button-counter.png)
 
 New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
 
@@ -5687,9 +5966,74 @@ MAIN_WINDOW = window('Control Gallery', 600, 500) {
       }
     }
   }
-}
-
-MAIN_WINDOW.show
+}
+
+MAIN_WINDOW.show
+```
+
+#### CPU Percentage
+
+This example shows CPU usage percentage second by second.
+
+Note that it is highly dependent on low-level OS terminal commands, so if anything changes in their output formatting, the code could break. Please report any issues you might encounter.
+
+[examples/cpu_percentage.rb](examples/cpu_percentage.rb)
+
+Run with this command from the root of the project if you cloned the project:
+
+```
+ruby -r './lib/glimmer-dsl-libui' examples/cpu_percentage.rb
+```
+
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
+
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/cpu_percentage'"
+```
+
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-cpu-percentage.png](images/glimmer-dsl-libui-mac-cpu-percentage.png) | ![glimmer-dsl-libui-windows-cpu-percentage.png](images/glimmer-dsl-libui-windows-cpu-percentage.png) | ![glimmer-dsl-libui-linux-cpu-percentage.png](images/glimmer-dsl-libui-linux-cpu-percentage.png)
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+
+```ruby
+require 'glimmer-dsl-libui'
+require 'bigdecimal'
+
+include Glimmer
+
+data = [
+  ['CPU', '0%', 0],
+]
+
+Glimmer::LibUI.timer(1) do
+  cpu_percentage_value = nil
+  if OS.windows?
+    cpu_percentage_raw_value = `wmic cpu get loadpercentage`
+    cpu_percentage_value = cpu_percentage_raw_value.split("\n")[2].to_i
+  elsif OS.mac?
+    cpu_percentage_value = `ps -A -o %cpu | awk '{s+=$1} END {print s}'`.to_i
+  elsif OS.linux?
+    stats = `top -n 1`
+    idle_percentage = stats.split("\n")[2].match(/ni,.* (.*) .*id/)[1]
+    cpu_percentage_value = (BigDecimal(100) - BigDecimal(idle_percentage)).to_i
+  end
+  data[0][1] = "#{cpu_percentage_value}%"
+  data[0][2] = cpu_percentage_value
+end
+
+window('CPU Percentage', 400, 200) {
+  vertical_box {
+    table {
+      text_column('Name')
+      text_column('Value')
+      progress_bar_column('Percentage')
+
+      cell_rows data # implicit data-binding
+    }
+  }
+}.show
 ```
 
 #### Custom Draw Text
@@ -6402,8 +6746,8 @@ window('Editable animal sounds', 300, 200) {
       text_column('Animal')
       text_column('Description')
 
-      cell_rows data
       editable true
+      cell_rows data
       
       on_changed do |row, type, row_data| # fires on all changes (even ones happening through data array)
         puts "Row #{row} #{type}: #{row_data}"
@@ -6418,30 +6762,382 @@ window('Editable animal sounds', 300, 200) {
   on_closing do
     puts 'Bye Bye'
   end
-}.show
-```
-
-#### Form Table
-
-[examples/form_table.rb](examples/form_table.rb)
-
-Run with this command from the root of the project if you cloned the project:
-
-```
-ruby -r './lib/glimmer-dsl-libui' examples/form_table.rb
-```
-
-Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
+}.show
+```
+
+#### Form Table
+
+[examples/form_table.rb](examples/form_table.rb)
+
+Run with this command from the root of the project if you cloned the project:
+
+```
+ruby -r './lib/glimmer-dsl-libui' examples/form_table.rb
+```
+
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
+
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/form_table'"
+```
+
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-form-table.png](images/glimmer-dsl-libui-mac-form-table.png) ![glimmer-dsl-libui-mac-form-table-contact-entered.png](images/glimmer-dsl-libui-mac-form-table-contact-entered.png) ![glimmer-dsl-libui-mac-form-table-filtered.png](images/glimmer-dsl-libui-mac-form-table-filtered.png) | ![glimmer-dsl-libui-windows-form-table.png](images/glimmer-dsl-libui-windows-form-table.png) ![glimmer-dsl-libui-windows-form-table-contact-entered.png](images/glimmer-dsl-libui-windows-form-table-contact-entered.png) ![glimmer-dsl-libui-windows-form-table-filtered.png](images/glimmer-dsl-libui-windows-form-table-filtered.png) | ![glimmer-dsl-libui-linux-form-table.png](images/glimmer-dsl-libui-linux-form-table.png) ![glimmer-dsl-libui-linux-form-table-contact-entered.png](images/glimmer-dsl-libui-linux-form-table-contact-entered.png) ![glimmer-dsl-libui-linux-form-table-filtered.png](images/glimmer-dsl-libui-linux-form-table-filtered.png)
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with explicit [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class FormTable
+  Contact = Struct.new(:name, :email, :phone, :city, :state)
+  
+  include Glimmer
+  
+  attr_accessor :contacts, :name, :email, :phone, :city, :state, :filter_value
+  
+  def initialize
+    @contacts = [
+      Contact.new('Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'),
+      Contact.new('Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'),
+      Contact.new('Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'),
+      Contact.new('Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'),
+      Contact.new('Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'),
+    ]
+  end
+  
+  def launch
+    window('Contacts', 600, 600) { |w|
+      margined true
+      
+      vertical_box {
+        form {
+          stretchy false
+          
+          entry {
+            label 'Name'
+            text <=> [self, :name] # bidirectional data-binding between entry text and self.name
+          }
+          
+          entry {
+            label 'Email'
+            text <=> [self, :email]
+          }
+          
+          entry {
+            label 'Phone'
+            text <=> [self, :phone]
+          }
+          
+          entry {
+            label 'City'
+            text <=> [self, :city]
+          }
+          
+          entry {
+            label 'State'
+            text <=> [self, :state]
+          }
+        }
+        
+        button('Save Contact') {
+          stretchy false
+          
+          on_clicked do
+            new_row = [name, email, phone, city, state]
+            if new_row.include?('')
+              msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
+            else
+              @contacts << Contact.new(*new_row) # automatically inserts a row into the table due to explicit data-binding
+              @unfiltered_contacts = @contacts.dup
+              self.name = '' # automatically clears name entry through explicit data-binding
+              self.email = ''
+              self.phone = ''
+              self.city = ''
+              self.state = ''
+            end
+          end
+        }
+        
+        search_entry {
+          stretchy false
+          # bidirectional data-binding of text to self.filter_value with after_write option
+          text <=> [self, :filter_value,
+            after_write: ->(filter_value) { # execute after write to self.filter_value
+              @unfiltered_contacts ||= @contacts.dup
+              # Unfilter first to remove any previous filters
+              self.contacts = @unfiltered_contacts.dup # affects table indirectly through explicit data-binding
+              # Now, apply filter if entered
+              unless filter_value.empty?
+                self.contacts = @contacts.filter do |contact| # affects table indirectly through explicit data-binding
+                  contact.members.any? do |attribute|
+                    contact[attribute].to_s.downcase.include?(filter_value.downcase)
+                  end
+                end
+              end
+            }
+          ]
+        }
+        
+        table {
+          text_column('Name')
+          text_column('Email')
+          text_column('Phone')
+          text_column('City')
+          text_column('State')
+    
+          editable true
+          cell_rows <=> [self, :contacts] # explicit data-binding to Model Array auto-inferring model attribute names from underscored table column names by convention
+          
+          on_changed do |row, type, row_data|
+            puts "Row #{row} #{type}: #{row_data}"
+          end
+        }
+      }
+    }.show
+  end
+end
+
+FormTable.new.launch
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with explicit [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class FormTable
+  Contact = Struct.new(:name, :email, :phone, :city, :state)
+  
+  include Glimmer
+  
+  attr_accessor :contacts, :name, :email, :phone, :city, :state, :filter_value
+  
+  def initialize
+    @contacts = [
+      Contact.new('Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'),
+      Contact.new('Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'),
+      Contact.new('Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'),
+      Contact.new('Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'),
+      Contact.new('Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'),
+    ]
+  end
+  
+  def launch
+    window('Contacts', 600, 600) { |w|
+      margined true
+      
+      vertical_box {
+        form {
+          stretchy false
+          
+          entry {
+            label 'Name'
+            text <=> [self, :name] # bidirectional data-binding between entry text and self.name
+          }
+          
+          entry {
+            label 'Email'
+            text <=> [self, :email]
+          }
+          
+          entry {
+            label 'Phone'
+            text <=> [self, :phone]
+          }
+          
+          entry {
+            label 'City'
+            text <=> [self, :city]
+          }
+          
+          entry {
+            label 'State'
+            text <=> [self, :state]
+          }
+        }
+        
+        button('Save Contact') {
+          stretchy false
+          
+          on_clicked do
+            new_row = [name, email, phone, city, state]
+            if new_row.include?('')
+              msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
+            else
+              @contacts << Contact.new(*new_row) # automatically inserts a row into the table due to implicit data-binding
+              @unfiltered_contacts = @contacts.dup
+              self.name = '' # automatically clears name entry through explicit data-binding
+              self.email = ''
+              self.phone = ''
+              self.city = ''
+              self.state = ''
+            end
+          end
+        }
+        
+        search_entry {
+          stretchy false
+          # bidirectional data-binding of text to self.filter_value with after_write option
+          text <=> [self, :filter_value,
+            after_write: ->(filter_value) { # execute after write to self.filter_value
+              @unfiltered_contacts ||= @contacts.dup
+              # Unfilter first to remove any previous filters
+              self.contacts = @unfiltered_contacts.dup # affects table indirectly through explicit data-binding
+              # Now, apply filter if entered
+              unless filter_value.empty?
+                self.contacts = @contacts.filter do |contact| # affects table indirectly through explicit data-binding
+                  contact.members.any? do |attribute|
+                    contact[attribute].to_s.downcase.include?(filter_value.downcase)
+                  end
+                end
+              end
+            }
+          ]
+        }
+        
+        table {
+          text_column('Name')
+          text_column('Email')
+          text_column('Phone')
+          text_column('City')
+          text_column('State/Province')
+    
+          editable true
+          cell_rows <=> [self, :contacts, column_attributes: {'State/Province' => :state}] # explicit data-binding to Model Array with column_attributes mapping for a specific column
+          
+          on_changed do |row, type, row_data|
+            puts "Row #{row} #{type}: #{row_data}"
+          end
+        }
+      }
+    }.show
+  end
+end
+
+FormTable.new.launch
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with explicit [data-binding](#data-binding)):
+
+```ruby
+
+require 'glimmer-dsl-libui'
+
+class FormTable
+  Contact = Struct.new(:full_name, :email_address, :phone_number, :city_or_town, :state_or_province)
+  
+  include Glimmer
+  
+  attr_accessor :contacts, :name, :email, :phone, :city, :state, :filter_value
+  
+  def initialize
+    @contacts = [
+      Contact.new('Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'),
+      Contact.new('Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'),
+      Contact.new('Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'),
+      Contact.new('Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'),
+      Contact.new('Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'),
+    ]
+  end
+  
+  def launch
+    window('Contacts', 600, 600) { |w|
+      margined true
+      
+      vertical_box {
+        form {
+          stretchy false
+          
+          entry {
+            label 'Name'
+            text <=> [self, :name] # bidirectional data-binding between entry text and self.name
+          }
+          
+          entry {
+            label 'Email'
+            text <=> [self, :email]
+          }
+          
+          entry {
+            label 'Phone'
+            text <=> [self, :phone]
+          }
+          
+          entry {
+            label 'City'
+            text <=> [self, :city]
+          }
+          
+          entry {
+            label 'State'
+            text <=> [self, :state]
+          }
+        }
+        
+        button('Save Contact') {
+          stretchy false
+          
+          on_clicked do
+            new_row = [name, email, phone, city, state]
+            if new_row.include?('')
+              msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
+            else
+              @contacts << Contact.new(*new_row) # automatically inserts a row into the table due to implicit data-binding
+              @unfiltered_contacts = @contacts.dup
+              self.name = '' # automatically clears name entry through explicit data-binding
+              self.email = ''
+              self.phone = ''
+              self.city = ''
+              self.state = ''
+            end
+          end
+        }
+        
+        search_entry {
+          stretchy false
+          # bidirectional data-binding of text to self.filter_value with after_write option
+          text <=> [self, :filter_value,
+            after_write: ->(filter_value) { # execute after write to self.filter_value
+              @unfiltered_contacts ||= @contacts.dup
+              # Unfilter first to remove any previous filters
+              self.contacts = @unfiltered_contacts.dup # affects table indirectly through explicit data-binding
+              # Now, apply filter if entered
+              unless filter_value.empty?
+                self.contacts = @contacts.filter do |contact| # affects table indirectly through explicit data-binding
+                  contact.members.any? do |attribute|
+                    contact[attribute].to_s.downcase.include?(filter_value.downcase)
+                  end
+                end
+              end
+            }
+          ]
+        }
+        
+        table {
+          text_column('Name')
+          text_column('Email')
+          text_column('Phone')
+          text_column('City')
+          text_column('State')
+    
+          editable true
+          cell_rows <=> [self, :contacts, column_attributes: [:full_name, :email_address, :phone_number, :city_or_town, :state_or_province]] # explicit data-binding to Model Array with column_attributes mapping for all columns
+          
+          on_changed do |row, type, row_data|
+            puts "Row #{row} #{type}: #{row_data}"
+          end
+        }
+      }
+    }.show
+  end
+end
 
+FormTable.new.launch
 ```
-ruby -r glimmer-dsl-libui -e "require 'examples/form_table'"
-```
-
-Mac | Windows | Linux
-----|---------|------
-![glimmer-dsl-libui-mac-form-table.png](images/glimmer-dsl-libui-mac-form-table.png) ![glimmer-dsl-libui-mac-form-table-contact-entered.png](images/glimmer-dsl-libui-mac-form-table-contact-entered.png) ![glimmer-dsl-libui-mac-form-table-filtered.png](images/glimmer-dsl-libui-mac-form-table-filtered.png) | ![glimmer-dsl-libui-windows-form-table.png](images/glimmer-dsl-libui-windows-form-table.png) ![glimmer-dsl-libui-windows-form-table-contact-entered.png](images/glimmer-dsl-libui-windows-form-table-contact-entered.png) ![glimmer-dsl-libui-windows-form-table-filtered.png](images/glimmer-dsl-libui-windows-form-table-filtered.png) | ![glimmer-dsl-libui-linux-form-table.png](images/glimmer-dsl-libui-linux-form-table.png) ![glimmer-dsl-libui-linux-form-table-contact-entered.png](images/glimmer-dsl-libui-linux-form-table-contact-entered.png) ![glimmer-dsl-libui-linux-form-table-filtered.png](images/glimmer-dsl-libui-linux-form-table-filtered.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 4 (with explicit [data-binding](#data-binding) to raw data):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -6449,15 +7145,15 @@ require 'glimmer-dsl-libui'
 class FormTable
   include Glimmer
   
-  attr_accessor :name, :email, :phone, :city, :state, :filter_value
+  attr_accessor :data, :name, :email, :phone, :city, :state, :filter_value
   
   def initialize
     @data = [
-      ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO', '80014'],
-      ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA', '02101'],
-      ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL', '60007'],
-      ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA', '98101'],
-      ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA', '90001'],
+      ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'],
+      ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'],
+      ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'],
+      ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'],
+      ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'],
     ]
   end
   
@@ -6471,7 +7167,7 @@ class FormTable
           
           entry {
             label 'Name'
-            text <=> [self, :name]
+            text <=> [self, :name] # bidirectional data-binding between entry text and self.name
           }
           
           entry {
@@ -6503,8 +7199,8 @@ class FormTable
             if new_row.include?('')
               msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
             else
-              @data << new_row # automatically inserts a row into the table due to implicit data-binding
-              @unfiltered_data = @data.dup
+              data << new_row # automatically inserts a row into the table due to implicit data-binding
+              @unfiltered_data = data.dup
               self.name = '' # automatically clears name entry through explicit data-binding
               self.email = ''
               self.phone = ''
@@ -6516,14 +7212,15 @@ class FormTable
         
         search_entry {
           stretchy false
-          text <=> [self, :filter_value, # bidirectional data-binding of text to self.filter_value with after_write option
+          # bidirectional data-binding of text to self.filter_value with after_write option
+          text <=> [self, :filter_value,
             after_write: ->(filter_value) { # execute after write to self.filter_value
-              @unfiltered_data ||= @data.dup
+              @unfiltered_data ||= data.dup
               # Unfilter first to remove any previous filters
-              @data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
+              data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
               # Now, apply filter if entered
               unless filter_value.empty?
-                @data.filter! do |row_data| # affects table indirectly through implicit data-binding
+                data.filter! do |row_data| # affects table indirectly through implicit data-binding
                   row_data.any? do |cell|
                     cell.to_s.downcase.include?(filter_value.downcase)
                   end
@@ -6539,8 +7236,9 @@ class FormTable
           text_column('Phone')
           text_column('City')
           text_column('State')
-    
-          cell_rows @data # implicit data-binding
+          
+          editable true
+          cell_rows <=> [self, :data] # explicit data-binding to raw data Array of Arrays
           
           on_changed do |row, type, row_data|
             puts "Row #{row} #{type}: #{row_data}"
@@ -6554,7 +7252,7 @@ end
 FormTable.new.launch
 ```
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 5 (with implicit [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -6562,11 +7260,11 @@ require 'glimmer-dsl-libui'
 include Glimmer
 
 data = [
-  ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO', '80014'],
-  ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA', '02101'],
-  ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL', '60007'],
-  ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA', '98101'],
-  ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA', '90001'],
+  ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'],
+  ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'],
+  ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'],
+  ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'],
+  ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'],
 ]
 
 window('Contacts', 600, 600) { |w|
@@ -6642,7 +7340,8 @@ window('Contacts', 600, 600) { |w|
       text_column('City')
       text_column('State')
 
-      cell_rows data # implicit data-binding
+      editable true
+      cell_rows data # implicit data-binding to raw data Array of Arrays
       
       on_changed do |row, type, row_data|
         puts "Row #{row} #{type}: #{row_data}"
@@ -8178,7 +8877,7 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-snake.png](images/glimmer-dsl-libui-mac-snake.png) ![glimmer-dsl-libui-mac-snake-game-over.png](images/glimmer-dsl-libui-mac-snake-game-over.png) | ![glimmer-dsl-libui-windows-snake.png](images/glimmer-dsl-libui-windows-snake.png) ![glimmer-dsl-libui-windows-snake-game-over.png](images/glimmer-dsl-libui-windows-snake-game-over.png) | ![glimmer-dsl-libui-linux-snake.png](images/glimmer-dsl-libui-linux-snake.png) ![glimmer-dsl-libui-linux-snake-game-over.png](images/glimmer-dsl-libui-linux-snake-game-over.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -8195,6 +8894,7 @@ class Snake
     @game = Model::Game.new
     @grid = Presenter::Grid.new(@game)
     @game.start
+    @keypress_queue = []
     create_gui
     register_observers
   end
@@ -8214,14 +8914,30 @@ class Snake
     end
     
     Glimmer::LibUI.timer(SNAKE_MOVE_DELAY) do
-      @game.snake.move unless @game.over?
+      unless @game.over?
+        process_queued_keypress
+        @game.snake.move
+      end
+    end
+  end
+  
+  def process_queued_keypress
+    # key press queue ensures one turn per snake move to avoid a double-turn resulting in instant death (due to snake illogically going back against itself)
+    key = @keypress_queue.shift
+    case [@game.snake.head.orientation, key]
+    in [:north, :right] | [:east, :down] | [:south, :left] | [:west, :up]
+      @game.snake.turn_right
+    in [:north, :left] | [:west, :down] | [:south, :right] | [:east, :up]
+      @game.snake.turn_left
+    else
+      # No Op
     end
   end
   
   def create_gui
     @main_window = window {
       # data-bind window title to game score, converting it to a title string on read from the model
-      title <= [@game, :score, on_read: -> (score) {"Glimmer Snake (Score: #{@game.score})"}]
+      title <= [@game, :score, on_read: -> (score) {"Snake (Score: #{@game.score})"}]
       content_size @game.width * CELL_SIZE, @game.height * CELL_SIZE
       resizable false
       
@@ -8239,15 +8955,109 @@ class Snake
                 }
                 
                 on_key_up do |area_key_event|
-                  orientation_and_key = [@game.snake.head.orientation, area_key_event[:ext_key]]
-                  case orientation_and_key
-                  in [:north, :right] | [:east, :down] | [:south, :left] | [:west, :up]
-                    @game.snake.turn_right
-                  in [:north, :left] | [:west, :down] | [:south, :right] | [:east, :up]
-                    @game.snake.turn_left
-                  else
-                    # No Op
-                  end
+                  @keypress_queue << area_key_event[:ext_key]
+                end
+              }
+            end
+          }
+        end
+      }
+    }
+  end
+end
+
+Snake.new.launch
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+require_relative 'snake/presenter/grid'
+
+class Snake
+  include Glimmer
+  
+  CELL_SIZE = 15
+  SNAKE_MOVE_DELAY = 0.1
+  
+  def initialize
+    @game = Model::Game.new
+    @grid = Presenter::Grid.new(@game)
+    @game.start
+    @keypress_queue = []
+    create_gui
+    register_observers
+  end
+  
+  def launch
+    @main_window.show
+  end
+  
+  def register_observers
+    @game.height.times do |row|
+      @game.width.times do |column|
+        observe(@grid.cells[row][column], :color) do |new_color|
+          @cell_grid[row][column].fill = new_color
+        end
+      end
+    end
+    
+    observe(@game, :over) do |game_over|
+      Glimmer::LibUI.queue_main do
+        if game_over
+          msg_box('Game Over!', "Score: #{@game.score} | High Score: #{@game.high_score}")
+          @game.start
+        end
+      end
+    end
+    
+    Glimmer::LibUI.timer(SNAKE_MOVE_DELAY) do
+      unless @game.over?
+        process_queued_keypress
+        @game.snake.move
+      end
+    end
+  end
+  
+  def process_queued_keypress
+    # key press queue ensures one turn per snake move to avoid a double-turn resulting in instant death (due to snake illogically going back against itself)
+    key = @keypress_queue.shift
+    case [@game.snake.head.orientation, key]
+    in [:north, :right] | [:east, :down] | [:south, :left] | [:west, :up]
+      @game.snake.turn_right
+    in [:north, :left] | [:west, :down] | [:south, :right] | [:east, :up]
+      @game.snake.turn_left
+    else
+      # No Op
+    end
+  end
+  
+  def create_gui
+    @cell_grid = []
+    @main_window = window {
+      # data-bind window title to game score, converting it to a title string on read from the model
+      title <= [@game, :score, on_read: -> (score) {"Snake (Score: #{@game.score})"}]
+      content_size @game.width * CELL_SIZE, @game.height * CELL_SIZE
+      resizable false
+      
+      vertical_box {
+        padded false
+        
+        @game.height.times do |row|
+          @cell_grid << []
+          horizontal_box {
+            padded false
+            
+            @game.width.times do |column|
+              area {
+                @cell_grid.last << square(0, 0, CELL_SIZE) {
+                  fill Presenter::Cell::COLOR_CLEAR
+                }
+                
+                on_key_up do |area_key_event|
+                  @keypress_queue << area_key_event[:ext_key]
                 end
               }
             end
@@ -8676,7 +9486,7 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-tic-tac-toe.png](images/glimmer-dsl-libui-mac-tic-tac-toe.png) ![glimmer-dsl-libui-mac-tic-tac-toe-player-o-wins.png](images/glimmer-dsl-libui-mac-tic-tac-toe-player-o-wins.png) ![glimmer-dsl-libui-mac-tic-tac-toe-player-x-wins.png](images/glimmer-dsl-libui-mac-tic-tac-toe-player-x-wins.png) ![glimmer-dsl-libui-mac-tic-tac-toe-draw.png](images/glimmer-dsl-libui-mac-tic-tac-toe-draw.png) | ![glimmer-dsl-libui-windows-tic-tac-toe.png](images/glimmer-dsl-libui-windows-tic-tac-toe.png) ![glimmer-dsl-libui-windows-tic-tac-toe-player-o-wins.png](images/glimmer-dsl-libui-windows-tic-tac-toe-player-o-wins.png) ![glimmer-dsl-libui-windows-tic-tac-toe-player-x-wins.png](images/glimmer-dsl-libui-windows-tic-tac-toe-player-x-wins.png) ![glimmer-dsl-libui-windows-tic-tac-toe-draw.png](images/glimmer-dsl-libui-windows-tic-tac-toe-draw.png) | ![glimmer-dsl-libui-linux-tic-tac-toe.png](images/glimmer-dsl-libui-linux-tic-tac-toe.png) ![glimmer-dsl-libui-linux-tic-tac-toe-player-o-wins.png](images/glimmer-dsl-libui-linux-tic-tac-toe-player-o-wins.png) ![glimmer-dsl-libui-linux-tic-tac-toe-player-x-wins.png](images/glimmer-dsl-libui-linux-tic-tac-toe-player-x-wins.png) ![glimmer-dsl-libui-linux-tic-tac-toe-draw.png](images/glimmer-dsl-libui-linux-tic-tac-toe-draw.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -8722,6 +9532,7 @@ class TicTacToe
                 text(23, 19) {
                   string {
                     font family: 'Arial', size: OS.mac? ? 20 : 16
+                    # data-bind string property of area text attributed string to tic tac toe board cell sign
                     string <= [@tic_tac_toe_board[row + 1, column + 1], :sign] # board model is 1-based
                   }
                 }
@@ -8755,6 +9566,95 @@ end
 TicTacToe.new.launch
 ```
 
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
+
+```ruby
+
+require 'glimmer-dsl-libui'
+
+require_relative "tic_tac_toe/board"
+
+class TicTacToe
+  include Glimmer
+
+  def initialize
+    @tic_tac_toe_board = Board.new
+  end
+  
+  def launch
+    create_gui
+    register_observers
+    @main_window.show
+  end
+  
+  def register_observers
+    observe(@tic_tac_toe_board, :game_status) do |game_status|
+      display_win_message if game_status == Board::WIN
+      display_draw_message if game_status == Board::DRAW
+    end
+    
+    3.times.map do |row|
+      3.times.map do |column|
+        observe(@tic_tac_toe_board[row + 1, column + 1], :sign) do |sign| # board model is 1-based
+          @cells[row][column].string = sign
+        end
+      end
+    end
+  end
+  
+  def create_gui
+    @main_window = window('Tic-Tac-Toe', 180, 180) {
+      resizable false
+      
+      @cells = []
+      vertical_box {
+        padded false
+        
+        3.times.map do |row|
+          @cells << []
+          horizontal_box {
+            padded false
+            
+            3.times.map do |column|
+              area {
+                square(0, 0, 60) {
+                  stroke :black, thickness: 2
+                }
+                text(23, 19) {
+                  @cells[row] << string('') {
+                    font family: 'Arial', size: OS.mac? ? 20 : 16
+                  }
+                }
+                on_mouse_up do
+                  @tic_tac_toe_board.mark(row + 1, column + 1) # board model is 1-based
+                end
+              }
+            end
+          }
+        end
+      }
+    }
+  end
+
+  def display_win_message
+    display_game_over_message("Player #{@tic_tac_toe_board.winning_sign} has won!")
+  end
+
+  def display_draw_message
+    display_game_over_message("Draw!")
+  end
+
+  def display_game_over_message(message_text)
+    Glimmer::LibUI.queue_main do
+      msg_box('Game Over', message_text)
+      @tic_tac_toe_board.reset!
+    end
+  end
+end
+
+TicTacToe.new.launch
+```
+
 #### Timer
 
 To run this example, install [TiMidity](http://timidity.sourceforge.net) and ensure `timidity` command is in `PATH` (can be installed via [Homebrew](https://brew.sh) on Mac or [apt-get](https://help.ubuntu.com/community/AptGet/Howto) on Linux).
@@ -9115,7 +10015,7 @@ These features have been planned or suggested. You might see them in a future ve
     is fine, but please isolate to its own commit so I can cherry-pick
     around it.
 
-Note that the latest development sometimes takes place in [development](https://github.com/AndyObtiva/glimmer-dsl-libui/tree/development) branch (which is deleted once merged back to [master](https://github.com/AndyObtiva/glimmer-dsl-libui)).
+Note that the latest development sometimes takes place in the [development](https://github.com/AndyObtiva/glimmer-dsl-libui/tree/development) branch (usually deleted once merged back to [master](https://github.com/AndyObtiva/glimmer-dsl-libui)).
 
 ## Contributors