<table className="table table-dark">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Queue</th>
          <th scope="col">CallDate</th>
          <th scope="col">TimeStart</th>
          <th scope="col">SecsFromMidnight</th>
          <th scope="col">TimeEnd</th>
          <th scope="col">EndSeconds</th>
          <th scope="col">TimeSlotCapacity</th>
          <th scope="col">Available</th>
          <th scope="col">Pending</th>
          <th scope="col">CallsCommitted</th>
        </tr>
      </thead>
      <tbody>
        {this.state.availabilities.map(availability => {
          return (
            <tr>
              <td>{availability.id}</td>
            </tr>
          );
        })}
      </tbody>
    </table>

I ended up doing a bit more research and resolved the issue myself with the code sample above.

I have created a simple web application that connects successfully to MySQL database. I would now like to render the table availabilties so that it displays nicely on the webpage – ideally with a bootstrap class. Below is a code snippet where I display the header columns followed by a single <td> element that should render the unique id for each value in the table.

render() {
    return (
      <main className="container my-5">
        <h1 className="text-primary text-center">Current Availability</h1>
        <table className="table table-dark">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Queue</th>
              <th scope="col">CallDate</th>
              <th scope="col">TimeStart</th>
              <th scope="col">SecsFromMidnight</th>
              <th scope="col">TimeEnd</th>
              <th scope="col">EndSeconds</th>
              <th scope="col">TimeSlotCapacity</th>
              <th scope="col">Available</th>
              <th scope="col">Pending</th>
              <th scope="col">CallsCommitted</th>
            </tr>
          </thead>
          <tbody>
            <td>
              {this.state.availabilities.map(availability => {
                return <td>{availability.id}</td>;
              })}
            </td>
          </tbody>
        </table>
      </main>
    );
  }
}

In its current form, it appears as per below:

I would like it so the ID values are listed vertically. When I am assisted with writing up this logic, I can then proceed to do this for the other database properties.

Interface for data:

export interface IAppState {
  availabilities: Array<{
    id: string;
    queue: string;
    call_date: string;
    time_start: string;
    start_seconds_from_midnight: string;
    time_end: string;
    end_seconds_from_midnight: string;
    timeslot_capacity: string;
    available: string;
    pending: string;
    calls_committed: string;
  }>;
}

ts file for retrieving data:

import { Connection } from "./index";

export const all = async () => {
  return new Promise((resolve, reject) => {
    Connection.query("SELECT * FROM availability", (err, results) => {
      if (err) {
        return reject(err);
      }
      resolve(results);
    });
  });
};

export default {
  all
};