mkirby

[
  {
    "id": 1,
    "coords": "G-18",
    "name": "Black Barrow",
    "unlocked": false,
    "completed": false,
    "unlocks_when_completed": [],
    "locks_when_completed": []
  },

mkirby

//let's add some styling touches and address spacing
//and lets hide the names of scenarios that are not unlocked yet

import React, {useState} from "react";
import scenarios from "./scenarios.json";
import { Table, Icon, Checkbox, Menu } from "semantic-ui-react";

function renderScenarioRows(scenarios, scenarioPage) {
  // lets diplay 15 rows of data on each page
  let startingIndex = scenarioPage * 15 - 15;

mkirby

//we have lots of rows of data - so why don't we paginate the table data!

//render the rows of data, including checkboxes which we need to import
  //iterate over the array of scenarios
  //for each scenario return 1 table row of data

//to change through the pages of data we need to..
  //track the current page
  //track the last page
  //add a menu of two buttons, to change the page number

mkirby

//render the rows of data, including checkboxes
  //iterate over the array of scenarios
  //for each scenario return 1 table row of data
  //import useState from react

import React, {useState} from "react";
import scenarios from "./scenarios.json";
import { Table, Icon, Checkbox } from "semantic-ui-react";

function renderScenarioRows(scenarios) {

mkirby

//create the table title and column names
//we're using both icons and text for column names!
  //don't forget to import Icon from SUIR

import React from "react";
import scenarios from "./scenarios.json";
import { Table, Icon } from "semantic-ui-react";

function ScenarioTable() {
  return (

mkirby

//build out the table structure
  // 1. add the header
  // 2. add the body
  // 3. add the footer

import React from "react";
import scenarios from "./scenarios.json";
import { Table } from "semantic-ui-react";

function ScenarioTable() {

mkirby

//import, create, and export a base functional component setup

import React from "react";
import scenarios from "./scenarios.json";
import { Table } from "semantic-ui-react";

function ScenarioTable() {
  return (
    <div className="scenario__table">
      <Table>