title: Building a dashboard with fluent-ui in React and the cards and table appear at bottom of screen when they're not supposed to
body: <p>I am following a tutorial to build a dashboard using fluentui in React, and am going to customise it and change it afterwards. However I have followed the tutorial exactly and got no errors but for some reason the cards and table appear at bottom of screen, not looking like how they are styled and the table has no data in it.</p>
  <p>My code is exactly the same as the tutorial found here: <a href="https://www.youtube.com/watch?v=P9s6dsdu_9c" rel="nofollow noreferrer">https://www.youtube.com/watch?v=P9s6dsdu_9c</a>. I will post a screenshot below of how mine looks atm and all relevant code below that.</p>
  <p><a href="https://i.stack.imgur.com/fgnDX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fgnDX.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/psxxW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/psxxW.png" alt="enter image description here" /></a></p>
  <p>code:
  App.js</p>
  <pre><code>import React from 'react';
  import { BrowserRouter as Router} from 'react-router-dom';
  import './App.css';
  import 'office-ui-fabric-react/dist/css/fabric.css';
  
  
  import Chart3 from './Components/Chart/Chart3';
  import Jumbo from './Components/Jumbotron/Jumbotron';
  
  import Footer from './Components/Footer/Footer';
  import Header from './Components/Navbar/Navbar';
  import Navigation from './Navigation/Navigation';
  import CardsSection from './Components/Cards/Card';
  import Table from './Components/Table/Table';
  
  
  function App() {
    return (
      &lt;div className=&quot;ms-grid&quot; dir=&quot;ltr&quot;&gt;
        &lt;div className=&quot;ms-grid-row&quot;&gt;
          &lt;div className=&quot;ms-grid-col ms-sm1 ms-xl1&quot;&gt;
            &lt;Navigation /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;ms-Grid-col ms-sm11 ms-xl11 main-element&quot;&gt;
            &lt;div className=&quot;ms-Grid-row&quot;&gt;
              &lt;CardsSection /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;ms-Grid-row&quot;&gt;
              &lt;Table /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
     
    );
  }
  
  export default App;
  </code></pre>
  <p>Navigation.js</p>
  <pre><code>import React from 'react';
  import {Nav, initializeIcons} from '@fluentui/react';
  
  
  const Links = [
      {
          links: [
              {
                  name: 'Dashboard',
                  url: '/',
                  key: 'key1',
                  iconProps: {
                      iconName: 'News',
                      styles: {
                          root: {
                              fontSize: 20,
                              color: '#106ebe'
                          }
                      }
                  }
              },
              {
                  name: 'Settings',
                  url: '/',
                  key: 'key2',
                  iconProps: {
                      iconName: 'SwitcherStartEnd',
                      styles: {
                          root: {
                              fontSize: 20,
                              color: '#106ebe'
                          }
                      }
                  }
              },
              {
                  name: 'Charts',
                  url: '/',
                  key: 'key3',
                  iconProps: {
                      iconName: 'StackedLineChart',
                      styles: {
                          root: {
                              fontSize: 20,
                              color: '#106ebe'
                          }
                      }
                  }
              }
          ]
      }
  ]
  
  //Styling for the navigation
  const navigationStyles = {
      root: {
          height: '100vh',
          boxSizing: 'border-box',
          border: '1px solid',
          overFlowY: 'auto',
          paddingTop: '10vh'
      }
  }
  
  const Navigation = () =&gt; {
      initializeIcons(); //initalizing so we can see icons when we use them
      return (
          &lt;Nav 
              groups={Links}
              selectedKey=&quot;key1&quot;
              styles={navigationStyles}
          
          /&gt;
      )
  }
  
  export default Navigation;
  </code></pre>
  <p>Card.js</p>
  <pre><code>import React from 'react';
  import { Card } from '@uifabric/react-cards';
  import { Text, initializeIcons} from '@fluentui/react';
  import 'office-ui-fabric-react/dist/css/fabric.css';
  
  const container = {
      display: 'flex',
      justifyContent: 'center',
      margin: '10vh 0'
  }
  
  const icon = {
      fontSize: 24,
      padding: 15,
      verticalAlign: 'middle',
      paddingLeft: 0,
      color: '#0078d4'
  }
  
  const styles = {
      cardStyles: {
          root: {
              backgroundColor: 'white',
              padding: 20,
              borderTop: '5px solid #0078d4',
              width: '90%',
              maxWidth: '90%',
              margin: 'auto'
  
          }
      },
      header: {
          root: {
              fontSize: 20,
              fontWeight: 'bold',
          }
      },
      amount: {
          root: {
              fontSize: 26,
              paddingBottom: 20,
              paddingTop: 30,
          }
      },
      amount: {
          root: {
              fontSize: 16,
              fontWeight: 'bold',
              color: '#0078d4'
          }
      }
  }
  
  const cards = [
      {
          title: 'current balance',
          amount: '21',
          icon: 'Money',
          percentage: '2.3',
      },
      {
          title: 'current expenses',
          amount: '215',
          icon: 'PaymrntCard',
          percentage: '2.3',
      },
      {
          title: 'current income',
          amount: '21',
          icon: 'Savings',
          percentage: '2.3',
      },
  ]
  
  
  
  const CardsSection= () =&gt; {
      initializeIcons();//initailizing icons so can be used 
      return (
          &lt;div style={container}&gt;
              {cards.map((card) =&gt; (
                  &lt;div className=&quot;s-Grid-col ms-sm3 ms-xl3&quot;&gt;
                      &lt;Card styles={styles.cardStyle}&gt;
                          &lt;Card.Section&gt;
                              &lt;Card.Item&gt;
                                  &lt;i style={icon} className={`ms-Icon ms-Icon--${card.icon}`} aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
                                  &lt;Text styles={styles.header}&gt;{card.title}&lt;/Text&gt;
                              &lt;/Card.Item&gt;
                              &lt;Card.Item&gt;
                                  &lt;Text styles={styles.amount}&gt;{card.amount}&lt;/Text&gt;
                              &lt;/Card.Item&gt;
                              &lt;Card.Item&gt;
                                  &lt;Text styles={styles.percentage}&gt;{card.percentage}%&lt;/Text&gt;
                              &lt;/Card.Item&gt;
                          &lt;/Card.Section&gt;
                      &lt;/Card&gt;
                  &lt;/div&gt;
              ))}
          &lt;/div&gt;
      )
  }
  
  export default CardsSection;
  </code></pre>
  <p>Table.js</p>
  <pre><code>import React from 'react';
  import { DetailsList } from '@fluentui/react';
  import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
  import 'office-ui-fabric-react/dist/css/fabric.css';
  
  const operations = [
      {
          from: '0000 0284 7529 304304',
          to: '0000 9876 9876 5678 4123',
          amount: '1.343',
          date: '20-05-2020'
      },
      {
          from: '0000 0284 7529 304304',
          to: '0000 9876 9876 5678 4123',
          amount: '1.343',
          date: '20-05-2020'
      },
      {
          from: '0000 0284 7529 304304',
          to: '0000 9876 9876 5678 4123',
          amount: '1.343',
          date: '20-05-2020'
      },
      {
          from: '0000 0284 7529 304304',
          to: '0000 9876 9876 5678 4123',
          amount: '1.343',
          date: '20-05-2020'
      },
      {
          from: '0000 0284 7529 304304',
          to: '0000 9876 9876 5678 4123',
          amount: '1.343',
          date: '20-05-2020'
      }
  ]
  
  const columns = [
      { key: 'column1', name: 'From', fieldName:'From', minWidth: 100, maxWidth: 300, isResizable: true },
      { key: 'column2', name: 'To', fieldName:'To', minWidth: 100, maxWidth: 300, isResizable: true },
      { key: 'column3', name: 'Amount', fieldName:'Amount', minWidth: 100, maxWidth: 300, isResizable: true },
      { key: 'column4', name: 'Date', fieldName:'Date', minWidth: 100, maxWidth: 300, isResizable: true },
  ]
  const classNames = mergeStyleSets({
      teble: {
          margin: 'auto'
      }
  });;
  const Table = () =&gt; {
      return (
          &lt;div data-is-scrollable={true}&gt;
              &lt;div className={`s-Grid-col ms-sm9 ms-xl9 ${classNames.table}`}&gt;
                  &lt;DetailsList
                  items={operations}
                  columns={columns}
                  selectionMode={0} 
                  /&gt;
              &lt;/div&gt;
              
          &lt;/div&gt;
      )
  }
  
  export default Table
  </code></pre>