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

step_2_suir_functional_table_component.js

//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() {
  return (
    <div className="scenario__table">
      <Table>
        <Table.Header>
          {/*table title and column names */}
        </Table.Header>

        <Table.Body>
          {/* table data here */}
        </Table.Body>

        <Table.Footer>
          {/* table controls here */}
        </Table.Footer>
      </Table>
    </div>
  );
}

export default ScenarioTable;