Dashboard Page Table & Modal

Page structure

The dashboard page (dashboard.html) already has the structure and <header> in place. The remaining content includes a search bar, and a table to list the products. This view will also have two buttons next to each product, to edit and delete a product.

The edit button will trigger a popup modal, this will overlay a form to edit the product. Pagination will also be included.

HTML Tables

Update the <main> section to include a search input and a table:

<!-- dashboard.html -->
<main>
  <input type="text" placeholder="Search products..." />
  <table>
    <thead> <!-- table headings --> </thead>
    <tbody> <!-- rows of products go here --> </tbody>
  </table>
</main>

The table element is used to arrange our content into rows and columns. Our example also uses the <thead> and <tbody> elements to indicate if the rows inside will be the table headings or the main body content (e.g. products).

We create rows of data using the <tr> (table row) element:

<table>
  <thead>
    <!-- add row for headings -->
    <tr>
      <th>Title</th>
      <th>Price</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

This example creates one row inside the tables head section. This row contains three cells of data, enclosed in the <th> (table header) element.

The table body is structured in a similar way:

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Price</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <!-- add rows for products -->
    <tr>
      <td>Blue t-shirt</td>
      <td>$20.95</td>
      <td>
        <button>Edit</button>
        <button>Delete</button>
      </td>
    </tr>
    <tr>
      <td>Red t-shirt</td>
      <td>$20.95</td>
      <td>
        <button>Edit</button>
        <button>Delete</button>
      </td>
    </tr>
  </tbody>
</table>

Rather than using the <th> for headings, <td> is used for table data. The order of the cells (th and td) inside each row is important. The first value in each row is the first column, and so on. The last column contains the edit and delete buttons. These are created with the html button element, later these will perform an action when clicked.

The modal section

The popup modal will later be hidden by default. It will appear when the edit button is clicked, and contain the input elements to edit product data. Below the table, add the pagination <div> and the modal content:

    <!-- ... -->
    </table>
    <!-- CONTENT START -->
    <div>1</div> <!-- pagination-->
    <div>
      <label for="edit-name">Name:</label>
      <input id="edit-name" type="text" />
      <label for="edit-price">Price:</label>
      <input id="edit-price" type="number" step=".01" />
      <div>
        <button>Save</button>
        <button>Cancel</button>
      </div>
    </div>
    <!-- CONTENT END -->
  </main>
  </body>
</html>

The modal contains input elements covered in the previous lesson. These will be used to edit the product name and price.

Alongside each there is a <label> element. This will add a text label next to each input. A link between label and input is created by adding a matching name inside of the for and id attributes:

<label for="edit-name">Name:</label>
<input id="edit-name" type="text" />

This is useful for screen readers to read out the label when the input is in focus. Additionally, clicking on the label will move the focus to the input, making it active and ready to receive user input.