Data Tables

Data Tables

<template>
  <!-- Card component -->
  <div class="slds-card">
    <div class="slds-card__body slds-p-around_medium">
      <!-- Table component -->
      <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <!-- Table header -->
        <thead>
          <tr class="slds-text-title_caps">
            <th scope="col">
              <div class="slds-truncate" title="Name">Name</div>
            </th>
            <th scope="col">
              <div class="slds-truncate" title="Email">Email</div>
            </th>
            <th scope="col">
              <div class="slds-truncate" title="Role">Role</div>
            </th>
          </tr>
        </thead>
        <!-- Table body -->
        <tbody>
          <tr>
            <td data-label="Name">Shubham</td>
            <td data-label="Email">shubham@example.com</td>
            <td data-label="Role">Admin</td>
          </tr>
          <tr>
            <td data-label="Name">Vaishnav</td>
            <td data-label="Email">Vaishnav@example.com</td>
            <td data-label="Role">User</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>