{"id":285,"date":"2019-10-04T05:49:01","date_gmt":"2019-10-04T05:49:01","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=285"},"modified":"2019-10-10T08:21:16","modified_gmt":"2019-10-10T08:21:16","slug":"grid-list","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/grid-list\/","title":{"rendered":"Grid List"},"content":{"rendered":"\n

You can add the component on any page in the template. You need to follow the steps given below: \u200c<\/p>\n\n\n\n

Step 1:<\/strong> You need to create an array that contains the data for the grid list. Also you need to add the code of grid list in the page where you want to add the component. Please check the code snippet given below, we have added the grid list in the Ecommerce Dashboard:<\/p>\n\n\n\n

\/**
 * Ecommerce Dashboard
*\/
import React, { Component } from 'react'
...
\/\/ GridList data
const tileData = [
   {
      img: require('Assets\/img\/gallery-1.jpg'),
      title: 'Gallery 1',
      author: 'author',
      cols: 1.3,
   },
   ...
   {
      img: require('Assets\/img\/gallery-4.jpg'),
      title: 'Gallery 4',
      author: 'author',
      cols: .66,
   }
 ]

export default class EcommerceDashboard extends Component {
    ...
    return (
         ...
         \/\/ Grid List Code
         <div>
            <GridList>
               {tileData.map(tile => (
                 <GridListTile key={tile.img} cols={tile.cols || 1}>
                    <img src={tile.img} alt={tile.title} \/>
                 <\/GridListTile>
               ))}
            <\/GridList>
          <\/div>
        <\/div>
      <\/div> <\/pre>\n\n\n\n
Step 2:<\/strong> Now Import the component from its parent library.<\/p>\n\n\n\n
import GridList from '@material-ui\/core\/GridList';
import GridListTile from '@material-ui\/core\/GridListTile';<\/pre>\n\n\n\n
We have given you an example of adding an image only grid list on the Ecommerce Dashboard.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
You can check some other layouts of grid list below. For adding any of the below layout in the template, please check their relative code in the src->routes->components->grid-list->components<\/code> folder.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n    1    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
You can add the component on any page in the template. You need to follow the steps given below: \u200c Step 1: You need to create an array that contains the data for the grid list. Also you need to add the code of grid list in the page where you want to add the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":27,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/285"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/comments?post=285"}],"version-history":[{"count":3,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/285\/revisions"}],"predecessor-version":[{"id":518,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/285\/revisions\/518"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}