creating a table in ionic

Question

I am in need of creating a table in Ionic  I thought of using Ionic grid but could not achieve what I wanted  How can I do this  Here is an image of something similar to what i want     I can use this but how can I divide the rows like in the picture    lt div class  list  gt      lt div class  item item-divider  gt      Candy Bars    lt  div gt      lt a class  item  href     gt      Butterfinger    lt  a gt           lt  div gt

User · Answer

html file    lt ion-card-content gt   lt div class  summary row  gt         lt div  class  summarycell  gt Header 1 lt  div gt         lt div  class  summarycell  gt Header 2 lt  div gt         lt div  class  summarycell  gt Header 3 lt  div gt         lt div  class  summarycell  gt Header 4 lt  div gt         lt div  class  summarycell  gt Header 5 lt  div gt         lt div  class  summarycell  gt Header 6 lt  div gt         lt div  class  summarycell  gt Header 7 lt  div gt        lt  div gt       lt div  class  summary row  gt         lt div  class  summarycell  gt          Cell1        lt  div gt         lt div  class  summarycell  gt            Cell2        lt  div gt           lt div  class  summarycell  gt              Cell3            lt  div gt          lt div  class  summarycell  gt          Cell5        lt  div gt         lt div  class  summarycell  gt            Cell6          lt  div gt           lt div  class  summarycell  gt              Cell7            lt  div gt             lt div  class  summarycell  gt                Cell8              lt  div gt       lt  div gt          scss file    x000D   x000D   row  x000D      display  flex  x000D      flex-wrap  wrap  x000D      width  max-content  x000D    x000D   row first-child  summarycell  x000D      font-weight  bold  x000D      text-align  center  x000D    x000D   cell  x000D      overflow  auto  x000D      word-wrap  break-word  x000D      width  27vw  x000D      border  1px solid  b3b3b3  x000D      padding  10px  x000D      text-align  right  x000D    x000D   cell nth-child 2   x000D    x000D   cell first-child  x000D      width 41vw  x000D      text-align  left  x000D    x000D   x000D   x000D

User · Answer

This should probably be a comment  however  I don t have enough reputation to comment   I suggest you really use the table  HTML  instead of ion-row and ion-col  Things will not look nice when one of the cell s content is too long   One worse case looks like this     10   20   30   40     1   2   3100   41     Higher fidelity example fork from  jpoveda

User · Answer

The flexbox grid should do what you want  You re not clear as to what limitation you ran into  so it s hard to address your specifics   Here s a codepen with a working sample that generates your table with the first couple rows and a header  http   codepen io anon pen pjzKMZ  HTML   lt html ng-app  ionicApp  gt    lt head gt       lt meta charset  utf-8  gt       lt meta name  viewport  content  initial-scale 1  maximum-scale 1  user-scalable no  width device-width  gt        lt title gt Ionic Template lt  title gt        lt link href    code ionicframework com nightly css ionic css  rel  stylesheet  gt       lt script src    code ionicframework com nightly js ionic bundle js  gt  lt  script gt    lt  head gt      lt body ng-controller  MyCtrl as ctrl  gt       lt ion-header-bar class  bar-stable  gt           lt h1 class  title  gt Service Provider Details lt  h1 gt       lt  ion-header-bar gt       lt ion-content gt           lt div class  row header  gt             lt div class  col  gt Utility Company Name lt  div gt             lt div class  col  gt Service Code lt  div gt             lt div class  col  gt Pay Limit lt  div gt             lt div class  col  gt Account Number to Use lt  div gt             lt div class  col  gt  lt  div gt           lt  div gt           lt div class  row  ng-repeat  data in ctrl data  gt             lt div class  col  gt   data name   lt  div gt             lt div class  col  gt   data code   lt  div gt             lt div class  col  gt LK   data limit   lt  div gt             lt div class  col  gt   data account   lt  div gt             lt div class  col  gt  lt button class  button  ng-click  ctrl add  index   gt Add lt  button gt  lt  div gt           lt  div gt       lt  ion-content gt     lt  body gt    lt  html gt    CSS  body       cursor  url  http   ionicframework com img finger png    auto      header  col       background-color lightgrey      col       border  solid 1px grey      border-bottom-style  none      border-right-style  none      col last-child       border-right  solid 1px grey      row last-child  col       border-bottom  solid 1px grey      Javascript  angular module  ionicApp     ionic      controller  MyCtrl   function  scope         var ctrl   this       ctrl add   add      ctrl data                           name   AiA               code   AI101               limit  25000              account   Life Insurance                                   name   Cargills               code   CF001               limit  30000              account   Food City                                    function add index            window alert  Added      index

User · Answer

the issue of too long content  beenotung can be resolved by this css class     col    max-width  20   important      example fork from  jpoveda

User · Answer

You should consider using an angular plug-in to handle the heavy lifting for you  unless you particularly enjoy typing hundreds of lines of knarly error prone ion-grid code  Simon Grimm has a cracking step by step tutorial that anyone can follow   https   devdactic com ionic-datatable-ngx-datatable   This shows how to use ngx-datatable  But there are many other options  ng2-table is good     The dead simple example goes like this    lt ion-content gt     lt ngx-datatable class  fullscreen   ngClass   tablestyle   rows   rows   columnMode    force    sortType    multi    reorderable   false  gt       lt ngx-datatable-column name  Name  gt  lt  ngx-datatable-column gt       lt ngx-datatable-column name  Gender  gt  lt  ngx-datatable-column gt       lt ngx-datatable-column name  Age  gt  lt  ngx-datatable-column gt     lt  ngx-datatable gt   lt  ion-content gt    And the ts   rows                  name    Ethel Price          gender    female          age   22                     name    Claudine Neal          gender    female          age   55                     name    Beryl Rice          gender    female          age   67                     name    Simon Grimm          gender    male          age   28              Since the original poster expressed their frustration of how difficult it is to achieve this with ion-grid  I think the correct answer should not be constrained by this as a prerequisite  You would be nuts to roll your own  given how good this is

User · Answer

Simply  for me  I used ion-row and ion-col to achieve it  You can make it more neater by doing some changes by CSS    lt ion-row style  border-bottom  groove   gt         lt ion-col col-4 gt         lt ion-label  gt header lt  ion-label gt       lt  ion-col gt       lt ion-col col-4 gt         lt ion-label  gt header lt  ion-label gt       lt  ion-col gt         lt ion-col col-4 gt         lt ion-label  gt header lt  ion-label gt       lt  ion-col gt     lt  ion-row gt     lt ion-row style  border-bottom  groove   gt         lt ion-col col-4 gt         lt ion-label  gt row lt  ion-label gt       lt  ion-col gt       lt ion-col col-4 gt         lt ion-label  gt 02 02 2018 lt  ion-label gt       lt  ion-col gt         lt ion-col col-4 gt         lt ion-label  gt row lt  ion-label gt       lt  ion-col gt     lt  ion-row gt     lt ion-row style  border-bottom  groove   gt         lt ion-col col-4 gt         lt ion-label  gt row lt  ion-label gt       lt  ion-col gt       lt ion-col col-4 gt         lt ion-label  gt 02 02 2018 lt  ion-label gt       lt  ion-col gt         lt ion-col col-4 gt         lt ion-label  gt row lt  ion-label gt       lt  ion-col gt     lt  ion-row gt     lt ion-row  gt         lt ion-col col-4 gt         lt ion-label  gt row lt  ion-label gt       lt  ion-col gt       lt ion-col col-4 gt         lt ion-label  gt 02 02 2018 lt  ion-label gt       lt  ion-col gt         lt ion-col col-4 gt         lt ion-label  gt row lt  ion-label gt       lt  ion-col gt     lt  ion-row gt

User · Answer

In Ionic 2 there s a easier way to do that  See the Ionic Docs   It is more or less like the following      lt ion-grid gt     lt ion-row gt       lt ion-col gt        1 of 3      lt  ion-col gt       lt ion-col gt        2 of 3      lt  ion-col gt       lt ion-col gt        3 of 3      lt  ion-col gt     lt  ion-row gt   lt  ion-grid gt

User · Answer

css   table nth-child 2n 1        background-color  whatever color  important        html       lt ion-row class  nameClass  justify-content-center align-items-center style  height  100   gt       lt ion-col gt               lt div gt                   lt strong gt name lt  strong gt               lt  div gt           lt  ion-col gt           lt ion-col gt               lt div gt                   lt strong gt name lt  strong gt               lt  div gt           lt  ion-col gt           lt ion-col gt               lt div gt                   lt strong gt name lt  strong gt               lt  div gt           lt  ion-col gt           lt ion-col gt               lt div gt                   lt strong gt name lt  strong gt               lt  div gt           lt  ion-col gt           lt ion-col gt               lt div text-center gt                   lt strong gt name lt  strong gt               lt  div gt           lt  ion-col gt       lt  ion-row gt    row 2           lt ion-col  gt               lt div gt              name              lt  div gt            lt  ion-col gt           lt ion-col  gt               lt div gt              name              lt  div gt            lt  ion-col gt           lt ion-col  gt               lt div gt                 name              lt  div gt            lt  ion-col gt           lt ion-col gt               lt div gt                 name              lt  div gt            lt  ion-col gt           lt ion-col gt               lt div gt                   lt button gt name lt  button gt               lt  div gt            lt  ion-col gt

User · Answer

This is the way i use it  It s very simple and work very well   Ionic html     lt ion-content gt        lt ion-grid class  quot ion-text-center quot  gt        lt ion-row class  quot ion-margin quot  gt         lt ion-col gt           lt ion-title gt             lt ion-text color  quot default quot  gt              Your title remove if don t want use            lt  ion-text gt           lt  ion-title gt         lt  ion-col gt       lt  ion-row gt        lt ion-row class  quot header-row quot  gt         lt ion-col gt           lt ion-text gt Data lt  ion-text gt         lt  ion-col gt          lt ion-col gt           lt ion-text gt Cliente lt  ion-text gt         lt  ion-col gt          lt ion-col gt           lt ion-text gt Pagamento lt  ion-text gt         lt  ion-col gt       lt  ion-row gt         lt ion-row gt         lt ion-col gt           lt ion-text gt              19 10 2020          lt  ion-text gt         lt  ion-col gt            lt ion-col gt             lt ion-text gt              Nome            lt  ion-text gt           lt  ion-col gt              lt ion-col gt             lt ion-text gt              R  200            lt  ion-text gt           lt  ion-col gt       lt  ion-row gt      lt  ion-grid gt   lt  ion-content gt   CSS   header-row     background   7163AA    color   fff    font-size  18px     ion-col     border  1px solid  ECEEEF      Result of the code

[html] creating a table in ionic

Examples related to html

Examples related to angularjs

Examples related to ionic-framework