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

step_3_suir_functional_table_component.js

//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 (
    <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>
          {/* table data here */}
        </Table.Body>

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

export default ScenarioTable;