CODEWITHSUNDEEP
ionic-frameworkionic4
Dodo_Jesus
Dodo_Jesus

Reputation: 159

How can I fuse columns vertically together like with rowspan in HTML in an ion-grid table?

Ok here I am, asking yet another question that's probably already been answered but I couldn't find the answer in the ionic-documentations so here goes nothing:
I got an Ion-grid with 3 columns and around 20 Rows and I would like to fuse the 3rd column of the last 4 rows together just like you can do in HTML with rowspan.

I know that you can combine them horizontally by adding size="..." to the ion-col, but I didn't see any option to do it vertically.

The grid looks basically like this:

<ion-grid>
 <ion-row>
  <ion-col>Sum random text</ion-col>
  <ion-col>Sum random number</ion-col>
  <ion-col>Sum random radio-button</ion-col>
 </ion-row>
...     //Just the same thing a few times

        //the last 4 rows belong together and therefore I only want
        //One button for all 4 of them -> the 3rd column of the last 4 rows
        //should be one single field
</ion-grid>

Upvotes: 1

Views: 2546

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

So doing some research it seems that this is the way you could do it:

<ion-grid>
    <ion-row>
        <ion-col size="3">Sum random text</ion-col>
        <ion-col size="3">Sum random number</ion-col>
        <ion-col size="3">Sum random radio-button</ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-row size="6">
                <ion-col>This is cell row 1</ion-col>
            </ion-row>
            <ion-row size="6">
                <ion-col>This is cell row 2</ion-col>
            </ion-row>
            <ion-row size="6">
                <ion-col>This is cell row 2</ion-col>
            </ion-row>
        </ion-col>
        <ion-col>
            <ion-col>This cell is the 3 rows "merged"<ion-col>
        </ion-col>
    </ion-row>
</ion-grid>

This is just written off the top of my head so it will probably need some tweaking.

Upvotes: 1

Related Questions