Bootstrap Tables

Bootstrap Tables are designed to be opt-in due to the widespread use of tables across third-party widgets like calendars and date pickers.
Keep reading some Bootstrap Tables examples to see how these tables work.

Examples

Author	Function	Technology	Employed
John Michael john@creative-tim.com	Manager Organization	Online	23/04/18	Edit
Alexa Liras alexa@creative-tim.com	Programator Developer	Offline	11/01/19	Edit
Laurent Perrier laurent@creative-tim.com	Executive Projects	Online	19/09/17	Edit
Michael Levi michael@creative-tim.com	Programator Developer	Online	24/12/08	Edit
Richard Gran richard@creative-tim.com	Manager Executive	Offline	04/10/21	Edit
Miriam Eric miriam@creative-tim.com	Programtor Developer	Offline	14/09/20	Edit

Copy

<div class="card">
  <div class="table-responsive">
    <table class="table align-items-center mb-0">
      <thead>
        <tr>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Author</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Function</th>
          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Technology</th>
          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Employed</th>
          <th class="text-secondary opacity-7"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                <img src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-2.jpg" class="avatar avatar-sm me-3">
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">John Michael</h6>
                <p class="text-xs text-secondary mb-0">john@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
            <p class="text-xs text-secondary mb-0">Organization</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge badge-sm badge-success">Online</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">23/04/18</span>
          </td>
          <td class="align-middle">
            <a href="javascript:;" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                <img src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-3.jpg" class="avatar avatar-sm me-3">
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">Alexa Liras</h6>
                <p class="text-xs text-secondary mb-0">alexa@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Programator</p>
            <p class="text-xs text-secondary mb-0">Developer</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge badge-sm badge-secondary">Offline</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">11/01/19</span>
          </td>
          <td class="align-middle">
            <a href="#!" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                <img src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-4.jpg" class="avatar avatar-sm me-3">
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">Laurent Perrier</h6>
                <p class="text-xs text-secondary mb-0">laurent@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Executive</p>
            <p class="text-xs text-secondary mb-0">Projects</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge badge-sm badge-success">Online</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">19/09/17</span>
          </td>
          <td class="align-middle">
            <a href="#!" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                <img src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-3.jpg" class="avatar avatar-sm me-3">
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">Michael Levi</h6>
                <p class="text-xs text-secondary mb-0">michael@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Programator</p>
            <p class="text-xs text-secondary mb-0">Developer</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge badge-sm badge-success">Online</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">24/12/08</span>
          </td>
          <td class="align-middle">
            <a href="#!" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                <img src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-2.jpg" class="avatar avatar-sm me-3">
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">Richard Gran</h6>
                <p class="text-xs text-secondary mb-0">richard@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
            <p class="text-xs text-secondary mb-0">Executive</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge badge-sm badge-secondary">Offline</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">04/10/21</span>
          </td>
          <td class="align-middle">
            <a href="#!" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                <img src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/img/team-4.jpg" class="avatar avatar-sm me-3">
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">Miriam Eric</h6>
                <p class="text-xs text-secondary mb-0">miriam@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Programtor</p>
            <p class="text-xs text-secondary mb-0">Developer</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge badge-sm badge-secondary">Offline</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">14/09/20</span>
          </td>
          <td class="align-middle">
            <a href="#!" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Project Table

Project	Budget	Status	Completion
Spotify	$2,500	working	60%
Invision	$5,000	done	100%
Jira	$3,400	canceled	30%
Slack	$1,000	canceled	0%
Webdev	$14,000	working	80%
Adobe XD	$2,300	done	100%

Copy

<div class="card">
  <div class="table-responsive">
    <table class="table align-items-center mb-0">
      <thead>
        <tr>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Project</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Budget</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Status</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Completion</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="d-flex px-2">
              <div>
                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-spotify.svg" class="avatar avatar-sm rounded-circle me-2">
              </div>
              <div class="my-auto">
                <h6 class="mb-0 text-xs">Spotify</h6>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-normal mb-0">$2,500</p>
          </td>
          <td>
            <span class="badge badge-dot me-4">
              <i class="bg-info"></i>
              <span class="text-dark text-xs">working</span>
            </span>
          </td>
          <td class="align-middle text-center">
            <div class="d-flex align-items-center">
              <span class="me-2 text-xs">60%</span>
            </div>
          </td>

          <td class="align-middle">
            <button class="btn btn-link text-secondary mb-0">
              <span class="material-symbols-rounded">
              more_vert
              </span>
            </button>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2">
              <div>
                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-invision.svg" class="avatar avatar-sm rounded-circle me-2">
              </div>
              <div class="my-auto">
                <h6 class="mb-0 text-xs">Invision</h6>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-normal mb-0">$5,000</p>
          </td>
          <td>
            <span class="badge badge-dot me-4">
              <i class="bg-success"></i>
              <span class="text-dark text-xs">done</span>
            </span>
          </td>
          <td class="align-middle text-center">
            <div class="d-flex align-items-center">
              <span class="me-2 text-xs">100%</span>
            </div>
          </td>

          <td class="align-middle">
            <button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
              <span class="material-symbols-rounded">
              more_vert
              </span>
            </button>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2">
              <div>
                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-jira.svg" class="avatar avatar-sm rounded-circle me-2">
              </div>
              <div class="my-auto">
                <h6 class="mb-0 text-xs">Jira</h6>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-normal mb-0">$3,400</p>
          </td>
          <td>
            <span class="badge badge-dot me-4">
              <i class="bg-danger"></i>
              <span class="text-dark text-xs">canceled</span>
            </span>
          </td>
          <td class="align-middle text-center">
            <div class="d-flex align-items-center">
              <span class="me-2 text-xs">30%</span>
            </div>
          </td>

          <td class="align-middle">
            <button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
              <span class="material-symbols-rounded">
              more_vert
              </span>
            </button>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2">
              <div>
                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-slack.svg" class="avatar avatar-sm rounded-circle me-2">
              </div>
              <div class="my-auto">
                <h6 class="mb-0 text-xs">Slack</h6>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-normal mb-0">$1,000</p>
          </td>
          <td>
            <span class="badge badge-dot me-4">
              <i class="bg-danger"></i>
              <span class="text-dark text-xs">canceled</span>
            </span>
          </td>
          <td class="align-middle text-center">
            <div class="d-flex align-items-center">
              <span class="me-2 text-xs">0%</span>
            </div>
          </td>

          <td class="align-middle">
            <button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
              <span class="material-symbols-rounded">
              more_vert
              </span>
            </button>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2">
              <div>
                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-webdev.svg" class="avatar avatar-sm rounded-circle me-2">
              </div>
              <div class="my-auto">
                <h6 class="mb-0 text-xs">Webdev</h6>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-normal mb-0">$14,000</p>
          </td>
          <td>
            <span class="badge badge-dot me-4">
              <i class="bg-info"></i>
              <span class="text-dark text-xs">working</span>
            </span>
          </td>
          <td class="align-middle text-center">
            <div class="d-flex align-items-center">
              <span class="me-2 text-xs">80%</span>
            </div>
          </td>

          <td class="align-middle">
            <button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
              <span class="material-symbols-rounded">
              more_vert
              </span>
            </button>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2">
              <div>
                <img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/small-logos/logo-xd.svg" class="avatar avatar-sm rounded-circle me-2">
              </div>
              <div class="my-auto">
                <h6 class="mb-0 text-xs">Adobe XD</h6>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-normal mb-0">$2,300</p>
          </td>
          <td>
            <span class="badge badge-dot me-4">
              <i class="bg-success"></i>
              <span class="text-dark text-xs">done</span>
            </span>
          </td>
          <td class="align-middle text-center">
            <div class="d-flex align-items-center">
              <span class="me-2 text-xs">100%</span>
            </div>
          </td>

          <td class="align-middle">
            <button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
              <span class="material-symbols-rounded">
              more_vert
              </span>
            </button>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
  </div>

Dynamic Table with API Data

Displaying data from an API in a dynamic table enhances user experience by providing real-time information in a structured format. This tutorial will guide you through the process of integrating an API with an HTML table, using JavaScript to fetch and display data.

Prerequisites

Basic Knowledge of HTML and CSS: Understanding of HTML elements and basic styling.
JavaScript Fundamentals: Familiarity with functions, asynchronous operations, and DOM manipulation.
An API Endpoint: Access to an API that returns data in JSON format. This could be your own API or a public one.

Tutorial Overview

We will:

Set up the HTML structure for the table.
Write JavaScript code to fetch data from an API.
Dynamically populate the table with the fetched data.
Ensure the table is responsive and styled appropriately.

Step 1: Set Up the HTML Structure

Create an HTML file and add the following code to set up the table structure.

Copy

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Table with API Data</title>
  <!-- Include Bootstrap CSS for styling (optional) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://demos.creative-tim.com/material-dashboard-pro/assets/css/material-dashboard.min.css?v=2.2.2" rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="card">
      <div class="table-responsive">
        <table class="table align-items-center mb-0" id="data-table">
          <thead>
            <tr>
              <th>Author</th>
              <th>Function</th>
              <th class="text-center">Technology</th>
              <th class="text-center">Employed</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <!-- Data will be inserted here dynamically -->
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Include Bootstrap JS and dependencies (optional) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Your custom script will go here -->
</body>
</html>

Notes:

The table has an id of data-table, which we’ll use to select it in our JavaScript code.
Bootstrap CSS is included for basic styling. You can omit it or replace it with your own styles.

Step 2: Write the JavaScript to Fetch Data from the API

Below the existing code, before the closing </body> tag, add a <script> tag where we’ll write our JavaScript.

Copy

<script>
  // Function to fetch data from the API and populate the table
  async function fetchData() {
    try {
      const response = await fetch('YOUR_API_ENDPOINT'); // Replace with your API endpoint
      const data = await response.json();

      const tableBody = document.querySelector('#data-table tbody');
      tableBody.innerHTML = ''; // Clear existing data if any

      data.forEach(user => {
        const row = document.createElement('tr');

        row.innerHTML = `
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                <img src="${user.avatar}" class="avatar avatar-sm me-3" alt="Avatar">
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">${user.name}</h6>
                <p class="text-xs text-secondary mb-0">${user.email}</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">${user.position}</p>
            <p class="text-xs text-secondary mb-0">${user.department}</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge badge-sm ${user.status === 'Online' ? 'bg-success' : 'bg-secondary'}">${user.status}</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">${user.employmentDate}</span>
          </td>
          <td class="align-middle">
            <a href="#!" class="text-secondary font-weight-normal text-xs" data-bs-toggle="tooltip" title="Edit user">
              Edit
            </a>
          </td>
        `;
        
        tableBody.appendChild(row);
      });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }

  // Call fetchData to load the table data when the page loads
  window.onload = fetchData;
</script>

Explanation:

async function fetchData(): An asynchronous function that allows us to use await for promises.
fetch(‘YOUR_API_ENDPOINT’): Replace 'YOUR_API_ENDPOINT' with the URL of your API.
response.json(): Parses the JSON data returned by the API.
document.querySelector(‘#data-table tbody’): Selects the <tbody> of the table to insert rows.
data.forEach(user => { … }): Iterates over each item in the data array to create table rows.

Step 3: Replace the Placeholder API with Your Own

In the script, replace 'YOUR_API_ENDPOINT' with the actual URL of your API. For example:

Copy

const response = await fetch('https://api.example.com/users');

Ensure that your API returns data in the following format or adjust the code accordingly:

Copy

[
 {
    "avatar": "URL_TO_IMAGE",
    "name": "User Name",
    "email": "user@example.com",
    "position": "Position Title",
    "department": "Department Name",
    "status": "Online or Offline",
    "employmentDate": "DD/MM/YY"
  },
  ...
]

Step 4: Test the Implementation

Run the HTML File: Open the HTML file in a web browser.
Check for Data: The table should populate with data fetched from your API.
Verify Console for Errors: Open the browser’s developer console to check for any errors.

Step 5: Handling CORS Issues (If Any)

If you encounter a Cross-Origin Resource Sharing (CORS) error, you might need to adjust your API settings to allow requests from your domain or use a proxy.

Complete Code Example

Here’s the full HTML code with the JavaScript included:

Author	Function	Technology	Employed
John Michael john@creative-tim.com	Manager Organization	Online	23/04/18	Edit
Alexa Liras alexa@creative-tim.com	Programator Developer	Offline	11/01/19	Edit
Laurent Perrier laurent@creative-tim.com	Executive Projects	Online	19/09/17	Edit
Michael Levi michael@creative-tim.com	Programator Developer	Online	24/12/08	Edit
Richard Gran richard@creative-tim.com	Manager Executive	Offline	04/10/21	Edit
Miriam Eric miriam@creative-tim.com	Programtor Developer	Offline	14/09/20	Edit

Copy

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Table with API Data</title>
  <!-- Include Bootstrap CSS for styling (optional) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://demos.creative-tim.com/material-dashboard-pro/assets/css/material-dashboard.min.css?v=2.2.2" rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="card">
      <div class="table-responsive">
        <table class="table align-items-center mb-0" id="data-table">
          <thead>
            <tr>
              <th>Author</th>
              <th>Function</th>
              <th class="text-center">Technology</th>
              <th class="text-center">Employed</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <!-- Data will be inserted here dynamically -->
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Include Bootstrap JS and dependencies (optional) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

  <script>
    // Function to fetch data from the API and populate the table
    async function fetchData() {
      try {
        const response = await fetch('YOUR_API_ENDPOINT'); // Replace with your API endpoint
        const data = await response.json();

        const tableBody = document.querySelector('#data-table tbody');
        tableBody.innerHTML = ''; // Clear existing data if any

        data.forEach(user => {
          const row = document.createElement('tr');

          row.innerHTML = `
            <td>
              <div class="d-flex px-2 py-1">
                <div>
                  <img src="${user.avatar}" class="avatar avatar-sm me-3" alt="Avatar">
                </div>
                <div class="d-flex flex-column justify-content-center">
                  <h6 class="mb-0 text-xs">${user.name}</h6>
                  <p class="text-xs text-secondary mb-0">${user.email}</p>
                </div>
              </div>
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">${user.position}</p>
              <p class="text-xs text-secondary mb-0">${user.department}</p>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="badge badge-sm ${user.status === 'Online' ? 'bg-success' : 'bg-secondary'}">${user.status}</span>
            </td>
            <td class="align-middle text-center">
              <span class="text-secondary text-xs font-weight-normal">${user.employmentDate}</span>
            </td>
            <td class="align-middle">
              <a href="#!" class="text-secondary font-weight-normal text-xs" data-bs-toggle="tooltip" title="Edit user">
                Edit
              </a>
            </td>
          `;
          
          tableBody.appendChild(row);
        });
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    // Call fetchData to load the table data when the page loads
    window.onload = fetchData;
  </script>
</body>
</html>