From 085394739f7a03a69a342d8338729573b947349e Mon Sep 17 00:00:00 2001 From: Alexander Tsybulsky Date: Mon, 18 Mar 2024 12:20:00 +0200 Subject: [PATCH 1/2] html table docs draft --- src/.vuepress/public/img/ui_table_simple.png | Bin 0 -> 3992 bytes src/.vuepress/public/img/ui_table_sorted.png | Bin 0 -> 6248 bytes src/.vuepress/public/img/ui_table_styled.png | Bin 0 -> 5474 bytes src/development-guide/README.md | 1 + .../user-interface/README.md | 1 + .../user-interface/developing-ui-tables.md | 190 ++++++++++++++++++ 6 files changed, 192 insertions(+) create mode 100644 src/.vuepress/public/img/ui_table_simple.png create mode 100644 src/.vuepress/public/img/ui_table_sorted.png create mode 100644 src/.vuepress/public/img/ui_table_styled.png create mode 100644 src/development-guide/user-interface/developing-ui-tables.md diff --git a/src/.vuepress/public/img/ui_table_simple.png b/src/.vuepress/public/img/ui_table_simple.png new file mode 100644 index 0000000000000000000000000000000000000000..49d8e712bfbc27794f9ab18079b3c1f6328ebea0 GIT binary patch literal 3992 zcmb`K_fr#Eu*ZX7p@!Z;LPx2=E4@eurFSV2q(~R(T*?J0p(Ye5V(5rcA_CG0DhVN= zMg#<;8fvJ98VKca-@Jd|&b%K!XJ_Zk?tbUYoY~zp3o}DTI$k;e0KjN$q-S+$$1VxJ zapm$94&Y_IG*ls0hB^S`H-6%!L*sqV^d1249!7uacJJdvS3bGaP#1@<9?QwIEa*vc+N0r#^h#XwyzDA zK%=R-&`vy4vw52a?hagqMjw-gMIX2_Bt?zzp93TK?Z*$scGgRMYrXwK%kU*GesvpI z>v<$(_F#YKd~g0Dtm^`$18-+a2hv{q&+G_*0{dos)T75Hqo%S!lFE{(i09j%`kzRH zq9ea2fBeo(pdh0PIf6F>_tb7b5aBI*>GCFUGj{JWP`K;6Y^kf(hwUyq#<+Z*Y-!nz z8D`Xc>GMk1*MN9nLPaNvELx*>&_A4ya_&=pIe$hKw@^-|TiM8(dKTrY&RhRMNVHRu;*(A$9M<<{UFT4ZvB;(M zT3pa6aZPWn8n5+mR`HR=i;h&0ikHQm#&Z4=1d54#`#hld_uGkXWnUyT(}XQtGqH!T z;leK&X7mGD+i=$>mXE&Wp~9gn(ULNy$7y~w{nn;`S}yYW27L>ghsA5S$8F$UX*TEv zF+az(*~-nH*-ve2{ZlzX#8b=Vx@}h0*PU~k3jV0zfIeG3?+e?}VCcJuwyMK7xAOk- z9H@MK78=HSjtAA3WDC?q;7P~Zl{_N%h7G@CS$Pq8U+M1D-n;X`S9DIrwIujwyUkPz zE)!$AMS3+7SzYiCC;6}!>PZE0TTV=<>oxW$zr zfjO#4zpC>B=F=uMxtHv|6=V0xK=JJ|*z6~#bJUHfk>0-Eikuk#AF+FbI&b1t3neGnl() z0?u32fC-P6&CT>45Ao4t2BiWj^?s%}#NU@MMgGddTKwvcHX7z^_f-$PNv-^J5)D?y za+b}USQ|X2SzalgRrPk;jrN=r9(0q7Kh9u=L|kaDXlksHkDQAM}Ok=@qxh zvtaHjVs1ehj2_2q>9bmYpI~L+F(u{zS{j=P>*OgkQsR-5eu_gx@sG-I|L}>YOB%0y z*d+9!JD8W;9@5mR{-71zk+ZXG-5B@iyhLb`Rnup*_xS5~V%&}+U*^^G_S@2O%O6tw zNkj!H759vr;M)rxPf1d-`;%v}jTG??f6!{D$5zyn0vDdUwSL#%#cwxLzF4N`Cw6}I z;Ly8vdOrH@d^you#t8Ra&!8p9AgZca)Wf;O()Kif>&F1c$A6@EZ`xUAtS=pP+yrkp&Is; zQ;SdY;!@Wl9QC7S{J1~9Xqv90A?dc6Iy*yRf{%7P-fnBCD4M@d?ozq&XV_E5GqJa& zZ`UJ#;eSPP>2>z*1ip287-}AXJ7|>`)6Hld-(KdTpK*3iXlw}oz*sbg5p>+%ZU)4c zNP3R7p9TNW*1c1B02@~)x-j9rm{ij=Kb%4Xz+2#CU!K4Necq~h z&{%@)-DpvS(Y8*Z+r^HDnh@R|A>XaZIhQah!B&eg^ampUG{&0n<7?&ovq`-z{FQSPi!WMEGD_8_c|Tv==jYk!ytc0!a5S_t4&s;wuR?QD^sS$i;s zd~s?A3g{n)J|{GH86Dwsj*4PLE6+W2)RLqZ z1kmttmz&VFP9gm>9>=ih!=^J6*Y>H*I$wO~1>SY!yA5d{uL?Sd_U1X2N2dw}0oiY| zGW-WJOGGsz-=gC*Rs@o#L@tI!MRe=PgyDWwHEoyB#}Fso-x#HbyL|}4Xslv6nMM+& z^Bz5+G3y?*V4#?>hvTtkF9TrgB@4*8yf3!zlzvzQ6`%aVr39V)5wmcs>9i$KdQh}G z7JV+H16d|sf@k2#&~f^)Y=)=kp9erDIGOeR}4;E8{x zK67-9IVg)-Y996ey{bidd&i_;-$0*vk=LymdA$CzmxUISfQluj+u1<<` zMX;7x<BS&*5+wCqB4&mQOBY z>77})!Z9r#_lxSNSGJO+nw8@&a?oc2oYx04XM7e{xy|*HvYR9D-U~eblm! zLrzPR6X%48!zArXo1dRPX<~+q@BqtLm~V#2x^*TA|8rkro0C?y^_5c*?a9C}%$!c& zKDA~QPScUgO1M3ftt-((UV!#`(p^yo|6Vb@4ddD7lhYEEVs}Ag?iam|e1@40UQ6PF z*vW2c?`E+=?D98kBt$e0t^1ZFCt4Q2^AwkwhxMU5KWRYR#uNISiSL68B}oRhQFzo{AQV?3zlog3CR?mYb>=09NX z*i{d?qRgA;7Z0go#CK?3DiQcz)CuJ%#V3R4+b=8Dk>jFz^uFGkbr9$||6r)~Ftlk1 zrCcGi2NF3t&kr44_PaA5c}%)b<<4O%ux)NUwaSKLS#og>9ni(Hm;F&$5)b+`^R2HT zHZ;V$bf;s(^&%$guKJ=5ofI@FqcM9$D69H9Ooq(HG|m%!`Ig0?3>aM9FKIOuEqYjG zp#8Tvj{gOMXwDn^e^F0px$F^1-*DMv1N+=xzdaf5Gl(Q4Dhi4__RA(RaQv5#Gr|g4 z?XZ->%l4;g&ifGdW|ya))l|G{?+xof|2wIq+e@w$6NXI6@Dxw@uJ8@hgHI`>1P#H7 zbL}H2ycSIT86ww=x)PTmkE!ipdCg|pIJ85xDpb>}{Hw%klfHVy#^qIzpu(<=m-b`{ zyk=;XU^_CMDyw<^)BVneF?Ey&WOwH*a>gUNHCu!N*sAFh<&21ri*2P1oE$T!gDJPy zfqyGRqvkO8&gKj^UiWdwF)Z-*SG4p3ltZOf+*BQz zhBXL$643QR#&2-tgq4=b*;k7L;22= zNbBbQ-{7!JlSfC`{2)H~qbid&Ja&`O7RAW`@ROy6E z5%3Dq8%IbHhvJ-+`LY*ZRnzKTd_(b@JU7v3kdg{D{C6uA2#suiVCSKk~Qt(VFAmaVk98F+6dFp}T2vvlV8LU7M7zLfApD&IU`P=qUzEJUcn5m*b_!m9pX% zRs#LhFxbL_iPAMG1|d{EmmltD+g}1;oP?&|eRLWBiv%_7?zqE0WMxGEdRY6pA+=Ks zwVXoeHI|$4P2fI1=?KQ%G#CZfWl)$?1!f+1D5IOV(ucyZq?WB4?ob%sI_76U9D}eX zYZHRqaC)tZ&p8XYBh~#y1rsqI+cgv&?pX!X?4NTawgeT_g8f5bD{cNTOPb=OLh>NZ zX;pEJ_>n-__ii#JHaf^_BP4$Wqx4ZnKI;?Ouof_be{l$XEdBCf+?TS0We&)XqD>J< zQ)v#6VcS3Ej8Cr_XU)?&XCW8_AD_0{Ew>W?ErOayozqVnEZH%OWqa|;?e3hyZgi0y zk`@1q!iO%GlC>Q!F!uhh?vP`QA$0oPVW#=Peyq*QdhpUf1+qrydG%y!p#r-J6IPQT yQq+An?y6wGD|#lHD86zs{L%jd+RiR#H$Sq>g7_r@1uwU0fU&-r9#ZE~;{N~$ueOc= literal 0 HcmV?d00001 diff --git a/src/.vuepress/public/img/ui_table_sorted.png b/src/.vuepress/public/img/ui_table_sorted.png new file mode 100644 index 0000000000000000000000000000000000000000..bc732834bdacf1c7394c45dea1b5eb4bb0c5e8e2 GIT binary patch literal 6248 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 Uz!MD}bjg5wS_Yb>5W83Z0_Jpji2wiq literal 0 HcmV?d00001 diff --git a/src/.vuepress/public/img/ui_table_styled.png b/src/.vuepress/public/img/ui_table_styled.png new file mode 100644 index 0000000000000000000000000000000000000000..a35cb29bf92cb19f0a7384d547378e03d6a2d626 GIT binary patch literal 5474 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 E0F%fht^fc4 literal 0 HcmV?d00001 diff --git a/src/development-guide/README.md b/src/development-guide/README.md index 14ffabcd5..66d8c0928 100644 --- a/src/development-guide/README.md +++ b/src/development-guide/README.md @@ -35,6 +35,7 @@ Development related information - [HTML Pages](user-interface/developing-ui.md) - [HTML Forms](user-interface/developing-ui-forms.md) - [HTML Popups](user-interface/html-popups.md) +- [HTML Tables](user-interface/developing-ui-tables.md) - [CSS and Assets](user-interface/developing-ui-css.md) - [JavaScript](user-interface/developing-ui-js.md) - [Icons](user-interface/adding-icons.md) diff --git a/src/development-guide/user-interface/README.md b/src/development-guide/user-interface/README.md index 568ccf2cd..67d88f1c8 100644 --- a/src/development-guide/user-interface/README.md +++ b/src/development-guide/user-interface/README.md @@ -12,6 +12,7 @@ dir: - [HTML Pages](developing-ui.md) - [HTML Forms](developing-ui-forms.md) - [HTML Popups](html-popups.md) +- [HTML Tables](developing-ui-tables.md) - [CSS and Assets](developing-ui-css.md) - [JavaScript](developing-ui-js.md) - [Icons](adding-icons.md) diff --git a/src/development-guide/user-interface/developing-ui-tables.md b/src/development-guide/user-interface/developing-ui-tables.md new file mode 100644 index 000000000..8bebe1371 --- /dev/null +++ b/src/development-guide/user-interface/developing-ui-tables.md @@ -0,0 +1,190 @@ +--- +title: HTML Tables +category: ui +order: 70 +--- + +_The tables component is still experimental and may be a subject to change. Cross check with the actual code in the codebase (e.g. `zcl_abapgit_gui_page_codi_base` and it's subclasses)._ + +## General concept and features + +- Create an instance of `zcl_abapgit_html_table`, supplying the _renderer_ +- Define column structure with `define_column` +- Render the component, supplying the data +- While rendering, the html table instance will call the appropriate _renderer_ methods for each row and cell, yet hiding all routine table construction inside + +### Features + +- styling individual cells and rows +- auto-marking columns with `column_id` data attribute +- sorting UI support + +## Simplest table example + +Suppose you have a table of this structure: + +```abap + begin of ty_data, + id type i, + name type string, + city type string, + end of ty_data, +``` + +Define the table structure and pass the _renderer_ instance. `column_id` is the id to identify the column in further callback, in css styles, and also to be used as _default_ field name to extract the value from the table record. `column_title` is a visual name of the html table column. + +```abap + li_table = zcl_abapgit_html_table=>create( me + )->define_column( + iv_column_id = 'id' + iv_column_title = 'ID' + )->define_column( + iv_column_id = 'name' + iv_column_title = 'Name' + )->define_column( + iv_column_id = 'city' + iv_column_title = 'Location' ). +``` + +Implement rendering methods `render_cell` and, optionally, `get_row_attrs`. This can be done directly in a calling component (typically), or in separate local classes (e.g. if there are several tables in the page). + +```abap + method zif_abapgit_html_table~render_cell. + " This is the simplest form of rendering + " `iv_value` contains stringified content of `column_id` field of table record + " `content` attribute of the returning structure + " is the text value to be rendered in the cell + rs_render-content = iv_value. + endmethod. +``` + +Finally call the table `render` method to produce html. Pass the data table to be rendered. + +```abap + ri_html->add( li_table->render( + it_data = value ty_data_tab( + ( id = 1 name = 'John' city = 'London' ) + ( id = 2 name = 'Pierre' city = 'Paris' ) + ) ) ). +``` + +![Simplest table](/img/ui_table_simple.png) + +## CSS styles + +There are several approaches to style your table. First of all, you can pass element id, and css class of the table itslef to the `render` method. Passing `iv_wrap_in_div` parameter will wrap your table in another `div` with the given css class name, mostly for visual styling purposes (e.g. see padded borders and rounded corners in the screenshot below). There defauld CSS styles in abapGit to reuse if you don't want to bother with any specific styling - `default-table` and `default-table-container` respectively, for the wrapping `div`. + +```abap + ri_html->add( li_table->render( + iv_wrap_in_div = 'default-table-container' + iv_css_class = 'default-table' + iv_id = 'my-addr-tab' + it_data = ... ). +``` + +![Styled table](/img/ui_table_styled.png) + +Rendering methods `render_cell` and `get_row_attrs` allow specifying css classes for individual cells and rows. + +```abap + method zif_abapgit_html_table~get_row_attrs. + rs_attrs-css_class = 'my-tab-row'. + endmethod. + + method zif_abapgit_html_table~render_cell. + " ... + rs_render-css_class = 'my-cell'. + endmethod. +``` + +Finally, passing `iv_with_cids = abap_true` param to `render` will auto mark cells with data attribute `data-cid` with respecting `column_id`. This enables easy in-direct CSS styling or reassembling memory representation of the table in java script. + +```abap + ri_html->add( li_table->render( + iv_with_cids = abap_true + ... ). +``` + +`get_row_attrs` also allows passing custom data attribute. Again can be used in CSS styling or JS. + +```abap + method zif_abapgit_html_table~get_row_attrs. + rs_attrs-data-name = 'status'. + rs_attrs-data-value = 'error'. + endmethod. +``` + +Resulting HTML: + +```html + + + + + + + + + + + + + + + ... + +
IDNameLocation
1JohnLondon
+ +``` + +```css +table td[data-cid="id"] { font-weight: bold; } +table tr[data-kind="error"] { background-color: red; } +``` + +## Cell rendering + +You can define your column so that the `column_id` and the field to take value from differ. In the example below the `iv_value` in `render_cell` will be taken from `person_id` field of the table structure. + +```abap + li_table->define_column( + iv_column_id = 'id' + iv_column_title = 'ID' + iv_from_field = 'person_id' ). +``` + +You are not obliged to use `iv_value` in `render_cell`. Among the parameters of `render_cell` and `get_row_attrs` you will find also: + +- `is_row` - full table record being processed, to access the data flexibly and/or conditionally +- `iv_row_index` - it's index +- `iv_table_id` - table id passed to the `render` (in case, you want to render several table with the same _renderer_ instance. Though it is generally not the best practice) +- `iv_column_id` - column id of the current table column (for `render_cell` only) + +As the returning value in `render_cell` you can return a string or also an instance of `zif_abapgit_html` using the `html` attribute. Use this if you want to return a more complex html content. + +```abap + method zif_abapgit_html_table~render_cell. + rs_render-html = zcl_abapgit_html=>create( )->add_a( ... ). + endmethod. +``` + +## Sorting + +`html_table` component does not manage sorting over the data table but provides helpers to visualize it and process the appropriate events. The sorting itself is done externally. + +![Sorted table](/img/ui_table_sorted.png) + +- is_sorting_state = ls_sorting_state - speifies to indicate the sorting ... a structure `zif_abapgit_html_table=>ty_sorting_state` that defines `column_id` and `descending` value +- IV_SORTABLE + +`sapevent:sort_by:id:dsc` +`ID` + + DATA ls_sorting_req TYPE zif_abapgit_html_table=>ty_sorting_state. + ls_sorting_req = zcl_abapgit_html_table=>detect_sorting_request( ii_event->mv_action ). + IF ls_sorting_req IS NOT INITIAL. + ms_sorting_state = ls_sorting_req. + rs_handled-state = zcl_abapgit_gui=>c_event_state-re_render. + ENDIF. + +blah blah ... got to do other stuff now ... From 14227d01e83ae9762f3541d5c039f8dbf2360fc0 Mon Sep 17 00:00:00 2001 From: Alexander Tsybulsky Date: Mon, 18 Mar 2024 20:52:48 +0200 Subject: [PATCH 2/2] complete --- .../user-interface/developing-ui-tables.md | 73 +++++++++++-------- 1 file changed, 44 insertions(+), 29 deletions(-) diff --git a/src/development-guide/user-interface/developing-ui-tables.md b/src/development-guide/user-interface/developing-ui-tables.md index 8bebe1371..a45143196 100644 --- a/src/development-guide/user-interface/developing-ui-tables.md +++ b/src/development-guide/user-interface/developing-ui-tables.md @@ -4,20 +4,20 @@ category: ui order: 70 --- -_The tables component is still experimental and may be a subject to change. Cross check with the actual code in the codebase (e.g. `zcl_abapgit_gui_page_codi_base` and it's subclasses)._ +_The html-table component is still experimental and may be subject to change. Cross-check with the actual code in the codebase (e.g., `zcl_abapgit_gui_page_codi_base` and its subclasses)._ ## General concept and features -- Create an instance of `zcl_abapgit_html_table`, supplying the _renderer_ +- Create an instance of `zcl_abapgit_html_table` - Define column structure with `define_column` -- Render the component, supplying the data +- Render the component, supplying the data and the _renderer_ - While rendering, the html table instance will call the appropriate _renderer_ methods for each row and cell, yet hiding all routine table construction inside ### Features - styling individual cells and rows - auto-marking columns with `column_id` data attribute -- sorting UI support +- sorting support ## Simplest table example @@ -31,10 +31,13 @@ Suppose you have a table of this structure: end of ty_data, ``` -Define the table structure and pass the _renderer_ instance. `column_id` is the id to identify the column in further callback, in css styles, and also to be used as _default_ field name to extract the value from the table record. `column_title` is a visual name of the html table column. +Define the table structure: + +- `column_id` is the id to identify the column in further callbacks, in css styles, and also to be used as _default_ field name to extract the value from a table record. +- `column_title` is a visual name of the html table column. ```abap - li_table = zcl_abapgit_html_table=>create( me + li_table = zcl_abapgit_html_table=>create( )->define_column( iv_column_id = 'id' iv_column_title = 'ID' @@ -51,18 +54,19 @@ Implement rendering methods `render_cell` and, optionally, `get_row_attrs`. This ```abap method zif_abapgit_html_table~render_cell. " This is the simplest form of rendering - " `iv_value` contains stringified content of `column_id` field of table record + " `iv_value` contains content of `column_id` field of table record " `content` attribute of the returning structure " is the text value to be rendered in the cell - rs_render-content = iv_value. + rs_render-content = |{ iv_value }|. endmethod. ``` -Finally call the table `render` method to produce html. Pass the data table to be rendered. +Finally, call the table `render` method to produce html. Pass the data table to be rendered and the _renderer_ instance. ```abap ri_html->add( li_table->render( - it_data = value ty_data_tab( + ii_renderer = me + it_data = value ty_data_tab( ( id = 1 name = 'John' city = 'London' ) ( id = 2 name = 'Pierre' city = 'Paris' ) ) ) ). @@ -72,7 +76,12 @@ Finally call the table `render` method to produce html. Pass the data table to b ## CSS styles -There are several approaches to style your table. First of all, you can pass element id, and css class of the table itslef to the `render` method. Passing `iv_wrap_in_div` parameter will wrap your table in another `div` with the given css class name, mostly for visual styling purposes (e.g. see padded borders and rounded corners in the screenshot below). There defauld CSS styles in abapGit to reuse if you don't want to bother with any specific styling - `default-table` and `default-table-container` respectively, for the wrapping `div`. +There are several options to styling your table: + +- First, you can pass the element id, and css class of the table itself to the `render` method. +- Passing `iv_wrap_in_div` parameter will wrap your table in another `div` with the given css class name, primarily for visual styling purposes (e.g. see padded borders and rounded corners in the screenshot below). + +There are default CSS styles in abapGit to reuse if you don't want to bother with any specific styling - `default-table` and `default-table-container`, respectively, for the wrapping `div`. ```abap ri_html->add( li_table->render( @@ -97,7 +106,7 @@ Rendering methods `render_cell` and `get_row_attrs` allow specifying css classes endmethod. ``` -Finally, passing `iv_with_cids = abap_true` param to `render` will auto mark cells with data attribute `data-cid` with respecting `column_id`. This enables easy in-direct CSS styling or reassembling memory representation of the table in java script. +Finally, passing the `iv_with_cids = abap_true` param to `render` will auto-mark cells with data attribute `data-cid` with respecting `column_id`. This enables easy indirect CSS styling or reassembling memory representation of the table in Javascript. ```abap ri_html->add( li_table->render( @@ -105,7 +114,7 @@ Finally, passing `iv_with_cids = abap_true` param to `render` will auto mark cel ... ). ``` -`get_row_attrs` also allows passing custom data attribute. Again can be used in CSS styling or JS. +`get_row_attrs` also allows passing a custom data attribute. Similarly, this can be used in CSS styling or JS. ```abap method zif_abapgit_html_table~get_row_attrs. @@ -137,6 +146,8 @@ Resulting HTML: ``` +CSS example: + ```css table td[data-cid="id"] { font-weight: bold; } table tr[data-kind="error"] { background-color: red; } @@ -144,7 +155,7 @@ table tr[data-kind="error"] { background-color: red; } ## Cell rendering -You can define your column so that the `column_id` and the field to take value from differ. In the example below the `iv_value` in `render_cell` will be taken from `person_id` field of the table structure. +You can define your column so that the `column_id` and the field to take a value from have different names. In the example below the `iv_value` in `render_cell` will be taken from the `person_id` field in the table structure. ```abap li_table->define_column( @@ -156,11 +167,11 @@ You can define your column so that the `column_id` and the field to take value f You are not obliged to use `iv_value` in `render_cell`. Among the parameters of `render_cell` and `get_row_attrs` you will find also: - `is_row` - full table record being processed, to access the data flexibly and/or conditionally -- `iv_row_index` - it's index -- `iv_table_id` - table id passed to the `render` (in case, you want to render several table with the same _renderer_ instance. Though it is generally not the best practice) +- `iv_row_index` - ... its index +- `iv_table_id` - table id passed to the `render` (in case you want to render several tables with the same _renderer_ instance. Though it is generally not the best practice, better avoid it and create separate local classes for each renderer) - `iv_column_id` - column id of the current table column (for `render_cell` only) -As the returning value in `render_cell` you can return a string or also an instance of `zif_abapgit_html` using the `html` attribute. Use this if you want to return a more complex html content. +Using the `html` attribute, you can return an instance of `zif_abapgit_html`. Use this if you want to return more complex HTML content. ```abap method zif_abapgit_html_table~render_cell. @@ -170,21 +181,25 @@ As the returning value in `render_cell` you can return a string or also an insta ## Sorting -`html_table` component does not manage sorting over the data table but provides helpers to visualize it and process the appropriate events. The sorting itself is done externally. +`html_table` component does not manage sorting over the data itself but rather provides helpers to visualize it and process appropriate events. The sorting itself should be done externally. ![Sorted table](/img/ui_table_sorted.png) -- is_sorting_state = ls_sorting_state - speifies to indicate the sorting ... a structure `zif_abapgit_html_table=>ty_sorting_state` that defines `column_id` and `descending` value -- IV_SORTABLE +The sorting UI is triggered by passing `is_sorting_state` to the `render`. This is a structure consisting of two fields - `column_id` and `descending` value - which A) tells the component to visualize sorting B) tells which column is sorted and in which direction ( `descending = true/false` ). -`sapevent:sort_by:id:dsc` -`ID` +In terms of CSS styles all sorting arrow are styled with `sort-arrow` class and the active one has additionally `sort-active` class. When designing an own CSS style, please don't create `.sort-arrow` names classes, but rather specify a more complete path `table.my-tab th span.sort-arrow` to avoid conflicts with the `default-table` style. - DATA ls_sorting_req TYPE zif_abapgit_html_table=>ty_sorting_state. - ls_sorting_req = zcl_abapgit_html_table=>detect_sorting_request( ii_event->mv_action ). - IF ls_sorting_req IS NOT INITIAL. - ms_sorting_state = ls_sorting_req. - rs_handled-state = zcl_abapgit_gui=>c_event_state-re_render. - ENDIF. +You can also pass `iv_sortable = abap_false` to `define_column` to remove the sorting possibility for a fiven column (by default all collumns are sortable). + +Technical-wise sorting markers are links with events defined like `sapevent:sort_by:id:dsc` where `id` is a column id. This event must be properly processed in the host component. To simplify handling there is a helper method to identify and parse such an event. So the easiest way to handle sorting would be placing this code to the `on_event`: + +```abap + data ls_sorting_request type zif_abapgit_html_table=>ty_sorting_state. + ls_sorting_request = zcl_abapgit_html_table=>detect_sorting_request( ii_event->mv_action ). + if ls_sorting_request is not initial. + ms_sorting_state = ls_sorting_request. + rs_handled-state = zcl_abapgit_gui=>c_event_state-re_render. + endif. +``` -blah blah ... got to do other stuff now ... +... and then applying the `ms_sorting_state` elsewhere before rendering the table