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

step_5_suir_functional_table_component.js

//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
  //add a function that takes care of changing and updating the page number

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>
            {scenario.name}
          </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>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell colSpan="5" textAlign="center">
              <h1>Scenarios</h1>
            </Table.HeaderCell>
          </Table.Row>
          <Table.Row textAlign="center">
            <Table.HeaderCell>Id</Table.HeaderCell>
            <Table.HeaderCell>
              <Icon name="location arrow" />
            </Table.HeaderCell>
            <Table.HeaderCell>
              <Icon name="unlock" />
            </Table.HeaderCell>
            <Table.HeaderCell>
              <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;