Step 6: How To Create A Semantic UI React Functional Table Component

step_6_suir_functional_table_component.js

//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;
  let endingIndex = scenarioPage * 15 - 1;

  return scenarios.map((scenario, index) => {
    let [unlocked, toggleUnlocked] = useState(false);
    let [completed, toggleCompleted] = useState(false);
    
    if (index >= startingIndex && index <= endingIndex) {
      return (
        <Table.Row key={scenario.id} positive={completed}>
          <Table.Cell textAlign="center">
            {scenario.id}.
          </Table.Cell>
          <Table.Cell>
            {scenario.coords}
          </Table.Cell>
          <Table.Cell>
            {/* checkbox for if the scenario is unlocked */}
            {/* can't be unchecked if the scenario has already been marked completed */}
            <Checkbox
              onChange={() => toggleUnlocked(!unlocked)}
              checked={unlocked}
              disabled={completed}
            />
          </Table.Cell>
          <Table.Cell>
            {/* checkbox for if the scenario is completed */}
            {/* can' be checked if it's not unlocked */}
            <Checkbox
              onChange={() => toggleCompleted(!completed)}
              checked={completed}
              disabled={!unlocked}
            />
          </Table.Cell>
          <Table.Cell>
            {/* if this scenario is unlocked, then display it's name */}
            {/* if not we're hiding it */}
            {unlocked ? (
              scenario.name
            ) : (
              <p style={{ color: "transparent", backgroundColor: "lightgrey" }}>
                {scenario.name}
              </p>
            )}
          </Table.Cell>
        </Table.Row>
      );
    };
    return null;
  });
};

function ScenarioTable() {
  const [scenarioPage, changeScenarioPage] = useState(1);
  const maxScenarioPage = Math.ceil(scenarios.length / 15);
  
  const changePage = (value) => {
    let newPage = scenarioPage + value;
    if (newPage < 1) {
      newPage = 1;
    } else if (newPage > maxScenarioPage) {
      newPage = maxScenarioPage;
    }
    changeScenarioPage(newPage);
  };
  
  return (
    <div className="scenario__table">
      <Table striped unstackable size="small" compact="very" color="orange">
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell colSpan="5" textAlign="center">
              <h1>Scenarios</h1>
            </Table.HeaderCell>
          </Table.Row>
          <Table.Row textAlign="center">
            <Table.HeaderCell width="2">Id</Table.HeaderCell>
            <Table.HeaderCell width="2">
              <Icon name="location arrow" />
            </Table.HeaderCell>
            <Table.HeaderCell width="1">
              <Icon name="unlock" />
            </Table.HeaderCell>
            <Table.HeaderCell width="1">
              <Icon name="check" />
            </Table.HeaderCell>
            <Table.HeaderCell>Name</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {renderScenarioRows(scenarios, scenarioPage)}
        </Table.Body>

        <Table.Footer>
          <Table.Row textAlign="center">
            <Table.HeaderCell colSpan="5">
              <Menu pagination>
                <Menu.Item
                  as="a"
                  icon
                  onClick={() => changePage(-1)}
                  disabled={scenarioPage === 1}
                >
                  <Icon name="chevron left" />
                </Menu.Item>
                <Menu.Item
                  as="a"
                  icon
                  onClick={() => changePage(1)}
                  disabled={scenarioPage === maxScenarioPage}
                >
                  <Icon name="chevron right" />
                </Menu.Item>
              </Menu>
            </Table.HeaderCell>
          </Table.Row>
        </Table.Footer>
      </Table>
    </div>
  );
}

export default ScenarioTable;