# Reusable Grid Component To Host Pages

**URL:** <https://forum.ionicframework.com/t/reusable-grid-component-to-host-pages/130562>\
**Category:** ionic-v3\
**Created:** [May 15, 2018, 1:27pm UTC](https://forum.ionicframework.com/t/reusable-grid-component-to-host-pages/130562 "2018-05-15T13:27:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dalezak](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dalezak/32/103044_2.png) [@dalezak](https://forum.ionicframework.com/u/dalezak)\
**Post date:** [May 15, 2018, 1:27pm UTC](https://forum.ionicframework.com/t/reusable-grid-component-to-host-pages/130562/1 "2018-05-15T13:27:39Z")

</div>

We are currently using the `SplitPane` component in our app, however on the tablet and in PWA we’d like to display a third column when an item is selected in a listing.

```auto
Side Menu > Item Listing > Item Details

```

So rather than pushing another page for the Details, instead display the Details beside the Listing. What is the best way to implement this?

I know I could use `ion-grid` with different responsive column directives, but we need this on several pages. Is there a way to make this into a reusable component which can host both the Listing and the Details?

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [May 15, 2018, 7:55pm UTC](https://forum.ionicframework.com/t/reusable-grid-component-to-host-pages/130562/2 "2018-05-15T19:55:15Z")

</div>

There is a discussion of master/detail components in the Tour Of Hero’s tutorial: [https://angular.io/tutorial/toh-pt3#masterdetail-components](https://angular.io/tutorial/toh-pt3#masterdetail-components)

You might consider using a grid: [https://www.ag-grid.com/example-angular-master-detail/?framework=all](https://www.ag-grid.com/example-angular-master-detail/?framework=all)

Or you might want to consider alternatives to the hamburger menu: [https://uxplanet.org/alternatives-of-hamburger-menu-a8b0459bf994](https://uxplanet.org/alternatives-of-hamburger-menu-a8b0459bf994)

---

<div class="post-metadata">

**Author:** ![dalezak](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dalezak/32/103044_2.png) [@dalezak](https://forum.ionicframework.com/u/dalezak)\
**Post date:** [May 16, 2018, 8:14pm UTC](https://forum.ionicframework.com/t/reusable-grid-component-to-host-pages/130562/3 "2018-05-16T20:14:58Z")

</div>

Thanks for the suggestions @robinyo!

I experimented with `ion-grid` but ran into some difficulties getting scrolling to work properly in the two columns. But after a bit of research I had a brainwave… showing `ion-menu` on both the _left_ and _right_ sides!

This will work perfectly, since the main page and side menu each take care of scrolling, pull down refresh, infinite scroll, navbars, etc.

I’ll have some logic when the screen is Large or bigger, publish an event with Details content, which displays the right side menu. When the screen is less than Large, then push a Page as usual. And when there is no Details content, the right side menu will be hidden, so only two columns.

I’ll keep you posted on how things work out 👍

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [May 16, 2018, 11:15pm UTC](https://forum.ionicframework.com/t/reusable-grid-component-to-host-pages/130562/4 "2018-05-16T23:15:18Z")

</div>

> [@dalezak](#):
>
> showing ion-menu on both the left and right sides

I tried:

```auto
ionic start myApp sidemenu

```

app.html:

```auto
<ion-split-pane>

  <ion-menu [content]="content" side="left">
    <ion-header>
      <ion-toolbar>
        <ion-title>Left Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-menu [content]="content" side="right">
    <ion-header>
      <ion-toolbar>
        <ion-title>Detail</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content padding>

      <p>
        Detail content goes here.
      </p>

    </ion-content>
  </ion-menu>

  <ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>

</ion-split-pane>

```

home.html:

```auto
<ion-header>

  <ion-navbar>

    <button ion-button menuToggle="left" left>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>
      Master
    </ion-title>

    <!--
    <button ion-button menuToggle="right" right>
      <ion-icon name="menu"></ion-icon>
    </button>
    -->

  </ion-navbar>

</ion-header>

<ion-content padding>

  <p>
    Master (main) content goes here.
  </p>

</ion-content>

```

iPhone 6:

 ![01](https://global.discourse-cdn.com/ionicframework/original/3X/7/1/7150b11b601ff1d2d1dfef945c97118a4dda62f9.png)

IPad Pro:

 ![11](https://global.discourse-cdn.com/ionicframework/original/3X/a/6/a61c72b9105f53d115974b517443cad314767a45.png)

And, you can use an ‘ngIf’ to show/hide the right menu.

app.html:

```auto
  ...

        <button menuClose ion-item (click)="toggleMenu()">
          Toggle Right Menu
        </button>

  ...

  <ng-container *ngIf='showRightMenu'>
    <ion-menu [content]="content" side="right">
      <ion-header>
        <ion-toolbar>
          <ion-title>Detail</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content padding>

        <p>
          Detail content goes here.
        </p>

      </ion-content>
    </ion-menu>
  </ng-container>

  ...

```

app.component.ts:

```auto
  showRightMenu: boolean = true;

  ...

  toggleMenu() {
    this.showRightMenu = !this.showRightMenu;
  }

```

IPad Pro:

 ![24](https://global.discourse-cdn.com/ionicframework/original/3X/2/2/22838bfee899de22053a45fd4f20aecc846e89fc.png)

---

<div class="post-metadata">

**Author:** ![CMB](https://avatars.discourse-cdn.com/v4/letter/c/58f4c7/32.png) [@CMB](https://forum.ionicframework.com/u/CMB)\
**Post date:** [August 3, 2018, 4:26am UTC](https://forum.ionicframework.com/t/reusable-grid-component-to-host-pages/130562/5 "2018-08-03T04:26:43Z")

</div>

> [@dalezak](#):
>
> I’ll keep you posted on how things work out 👍

@dalezak - how did you make out? Were you able to get your List/Detail working for large and small screens? Care to share?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:35pm UTC](https://forum.ionicframework.com/t/reusable-grid-component-to-host-pages/130562/6 "2021-07-19T21:35:28Z")

</div>