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.
My code is exactly the same as the tutorial found here: https://www.youtube.com/watch?v=P9s6dsdu_9c. I will post a screenshot below of how mine looks atm and all relevant code below that.
code: App.js
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 (
<div className="ms-grid" dir="ltr">
<div className="ms-grid-row">
<div className="ms-grid-col ms-sm1 ms-xl1">
<Navigation />
</div>
<div className="ms-Grid-col ms-sm11 ms-xl11 main-element">
<div className="ms-Grid-row">
<CardsSection />
</div>
<div className="ms-Grid-row">
<Table />
</div>
</div>
</div>
</div>
);
}
export default App;
Navigation.js
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 = () => {
initializeIcons(); //initalizing so we can see icons when we use them
return (
<Nav
groups={Links}
selectedKey="key1"
styles={navigationStyles}
/>
)
}
export default Navigation;
Card.js
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= () => {
initializeIcons();//initailizing icons so can be used
return (
<div style={container}>
{cards.map((card) => (
<div className="s-Grid-col ms-sm3 ms-xl3">
<Card styles={styles.cardStyle}>
<Card.Section>
<Card.Item>
<i style={icon} className={`ms-Icon ms-Icon--${card.icon}`} aria-hidden="true"></i>
<Text styles={styles.header}>{card.title}</Text>
</Card.Item>
<Card.Item>
<Text styles={styles.amount}>{card.amount}</Text>
</Card.Item>
<Card.Item>
<Text styles={styles.percentage}>{card.percentage}%</Text>
</Card.Item>
</Card.Section>
</Card>
</div>
))}
</div>
)
}
export default CardsSection;
Table.js
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 = () => {
return (
<div data-is-scrollable={true}>
<div className={`s-Grid-col ms-sm9 ms-xl9 ${classNames.table}`}>
<DetailsList
items={operations}
columns={columns}
selectionMode={0}
/>
</div>
</div>
)
}
export default Table
In Table.js, there is a typo in the className. It has to be ms-Grid-col and not s-Grid-col