add sample for table cell coloring

src/z2ui5_cl_demo_app_000.clas.abap

@@ -1088,6 +1088,13 @@ CLASS z2ui5_cl_demo_app_000 IMPLEMENTATION.
              class     = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
          ).
 
+        panel->generic_tile(
+             header    = 'Cell Coloring'
+             press     =  client->_event( 'z2ui5_cl_demo_app_305' )
+             mode      = 'LineMode'
+             class     = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
+         ).
+
         panel->generic_tile(
             header    = 'ui.Table I'
             subheader = 'Simple example'

src/z2ui5_cl_demo_app_305.clas.abap

@@ -0,0 +1,117 @@
+CLASS z2ui5_cl_demo_app_305 DEFINITION
+  PUBLIC
+  CREATE PUBLIC .
+
+  PUBLIC SECTION.
+
+    INTERFACES if_serializable_object .
+    INTERFACES z2ui5_if_app .
+
+    TYPES:
+      BEGIN OF ty_row,
+        title TYPE string,
+        value TYPE string,
+      END OF ty_row .
+
+    DATA:
+      t_tab TYPE STANDARD TABLE OF ty_row WITH EMPTY KEY.
+
+  PROTECTED SECTION.
+    DATA client TYPE REF TO z2ui5_if_client.
+
+    METHODS set_view.
+
+ENDCLASS.
+
+
+CLASS z2ui5_cl_demo_app_305 IMPLEMENTATION.
+
+  METHOD set_view.
+
+    DATA(view) = z2ui5_cl_xml_view=>factory( ).
+    DATA(page) = view->shell(
+                    )->page(
+                      title          = 'abap2UI5 - Tables and cell colors'
+                      navbuttonpress = client->_event( 'BACK' )
+                      shownavbutton  = abap_true ).
+
+    page->_generic(
+            name   = `style`
+            ns     = `html`
+       )->_cc_plain_xml(
+           `td:has([data-color="red"]){ `
+        && `    background-color: red;`
+        && `}`
+        && ``
+        && `td:has([data-color="green"]){`
+        && `    background-color: green;`
+        && `}`
+        && ``
+        && `td:has([data-color="blue"]){`
+        && `    background-color: blue;`
+        && `}`
+        && ``
+        && `td:has([data-color="orange"]){`
+        && `    background-color: orange;`
+        && `}`
+        && ``
+        && `td:has([data-color="grey"]){`
+        && `    background-color: grey;`
+        && `}`
+        && ``
+        && `td:has([data-color="yellow"]){`
+        && `    background-color: yellow;`
+        && `}` ).
+
+    DATA(tab) = page->table(
+            items = client->_bind_edit( t_tab )
+            mode  = 'MultiSelect'
+        )->header_toolbar(
+            )->overflow_toolbar(
+                )->title( 'change cell color'
+        )->get_parent( )->get_parent( ).
+
+    tab->columns(
+        )->column(
+            )->text( 'Title' )->get_parent(
+        )->column(
+            )->text( 'Color' )->get_parent( ).
+
+    tab->items( )->column_list_item(
+      )->cells(
+        )->text( text = '{TITLE}'
+          )->get(
+            )->custom_data(
+              )->core_custom_data( key = 'color' value = '{VALUE}' writetodom = abap_true
+            )->get_parent(
+          )->get_parent(
+        )->input( value = '{VALUE}' enabled = abap_true ).
+
+    client->view_display( view->stringify( ) ).
+
+  ENDMETHOD.
+
+
+  METHOD z2ui5_if_app~main.
+
+    me->client = client.
+
+    IF z2ui5_if_app~check_initialized = abap_false.
+      t_tab = VALUE #(
+          ( title = 'entry 01'  value = 'red'    )
+          ( title = 'entry 02'  value = 'blue'   )
+          ( title = 'entry 03'  value = 'green'  )
+          ( title = 'entry 04'  value = 'yellow' )
+          ( title = 'entry 05'  value = 'orange' )
+          ( title = 'entry 06'  value = 'grey'   ) ).
+
+      set_view( ).
+    ENDIF.
+
+    CASE client->get( )-event.
+      WHEN 'BACK'.
+        client->nav_app_leave( ).
+    ENDCASE.
+
+  ENDMETHOD.
+ENDCLASS.

src/z2ui5_cl_demo_app_305.clas.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
+ <asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
+  <asx:values>
+   <VSEOCLASS>
+    <CLSNAME>Z2UI5_CL_DEMO_APP_305</CLSNAME>
+    <LANGU>E</LANGU>
+    <DESCRIPT>tab - editable</DESCRIPT>
+    <STATE>1</STATE>
+    <CLSCCINCL>X</CLSCCINCL>
+    <FIXPT>X</FIXPT>
+    <UNICODE>X</UNICODE>
+   </VSEOCLASS>
+  </asx:values>
+ </asx:abap>
+</abapGit>