Loading :: جاري التحميل

Table

A table is a structured format for displaying data in rows and columns, which helps users to understand and interact with complex information efficiently. It is a crucial element in many user interfaces, particularly for applications that require the organization, analysis, or manipulation of large amounts of data.

Compnent Demo

# Column 01 Column 02 Column 03 Column 04 Column 05 Action
Link -- -- -- Tags
Link -- -- -- Tags
Link -- -- -- Tags
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Column 01</th>
      <th scope="col">Column 02</th>
      <th scope="col">Column 03</th>
      <th scope="col">Column 04</th>
      <th scope="col">Column 05</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="form-check check-sm check-primary">
          <input class="form-check-input" type="checkbox" value="" id="checkrA">
        </div>
      </td>
      <td>
        <a href="#" class="lnk lnk-primary lnk-md">Link</a>
      </td>
      <td>--</td>
      <td>--</td>
      <td>--</td>
      <td>
        <span class="dga-tag tag-neutral tag-sm">Tags</span>
      </td>
      <td class="action-cell">
        <button type="button" class="action-button dga-btn btn-sm dga-transparent">
          <i class="dga-icon dga-arrow-left-02StrokeRounded-solid"></i>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <div class="form-check check-sm check-primary">
          <input class="form-check-input" type="checkbox" value="" id="checkrB">
        </div>
      </td>
      <td>
        <a href="#" class="lnk lnk-primary lnk-md">Link</a>
      </td>
      <td>--</td>
      <td>--</td>
      <td>--</td>
      <td>
        <span class="dga-tag tag-neutral tag-sm">Tags</span>
      </td>
      <td class="action-cell">
        <button type="button" class="action-button dga-btn btn-sm dga-transparent">
          <i class="dga-icon dga-arrow-left-02StrokeRounded-solid"></i>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <div class="form-check check-sm check-primary">
          <input class="form-check-input" type="checkbox" value="" id="checkrC">
        </div>
      </td>
      <td>
        <a href="#" class="lnk lnk-primary lnk-md">Link</a>
      </td>
      <td>--</td>
      <td>--</td>
      <td>--</td>
      <td>
        <span class="dga-tag tag-neutral tag-sm">Tags</span>
      </td>
      <td class="action-cell">
        <button type="button" class="action-button dga-btn btn-sm dga-transparent">
          <i class="dga-icon dga-arrow-left-02StrokeRounded-solid"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>