Bootstrap
React
Tailwind
Angular
Vue
W3Table.
W3Table is a custom table whiches gives you a table row and a <tr> select input with support select, multi-select and many other highly used options.
Table Dropdown
Drag & drop hierarchical list with mouse and touch compatibility.
| S.No. | Item | Selling Price | QTY | Action |
|---|---|---|---|---|
| 1 | Cement | ₹ 240 | 5 |
|
| 2 |
Window
|
₹ 8,640 |
|
|
| 3 | Bricks | ₹ 20 | 500 |
|
<table class="table">
<thead>
<tr>
<th class="mw-50">S.No.</th>
<th class="mw-250">Item</th>
<th class="mw-250">Selling Price</th>
<th class="mw-200 text-end">QTY</th>
<th class="mw-100 text-end">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Cement</td>
<td>₹ 240</td>
<td class="text-end">5</td>
<td class="text-end">
<div class="dropdown custom-dropdown mb-0 tbl-orders-style">
<div class="btn btn-square rounded" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item">Edit</a>
<a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="parent-row pointer">
<td>2</td>
<td>
<div class="d-flex align-items-center gap-3">
<div class="d-flex gap-1 align-items-center">
<div class="expand-btn btn btn-xs btn-square" style="transition: transform 0.3s ease;">
<i class="fas fa-chevron-right"></i>
</div>Window
</div>
</div>
</td>
<td colspan="2" class="text-end">₹ 8,640</td>
<td class="text-end">
<div class="dropdown custom-dropdown mb-0 tbl-orders-style">
<div class="btn btn-square rounded" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item">Edit</a>
<a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="child-row" style="display: none;">
<td class="ps-4">2.1</td>
<td>
<div class="d-flex gap-2 align-items-center">
<i class="fa-solid fa-arrow-right"></i>
Wooden Frame
</div>
</td>
<td>₹ 55</td>
<td class="text-end">20</td>
<td class="text-end">
<div class="dropdown custom-dropdown mb-0 tbl-orders-style">
<div class="btn btn-square rounded" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item">Edit</a>
<a class="dropdown-item text-danger">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="child-row" style="display: none;">
<td class="ps-4">2.2</td>
<td>
<div class="d-flex gap-2 align-items-center">
<i class="fa-solid fa-arrow-right"></i>
Glass
</div>
</td>
<td>₹ 550</td>
<td class="text-end">2</td>
<td class="text-end">
<div class="dropdown custom-dropdown mb-0 tbl-orders-style">
<div class="btn btn-square rounded" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item">Edit</a>
<a class="dropdown-item text-danger">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>Bricks</td>
<td>₹ 20</td>
<td class="text-end">500</td>
<td class="text-end">
<div class="dropdown custom-dropdown mb-0 tbl-orders-style">
<div class="btn btn-square rounded" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item">Edit</a>
<a class="dropdown-item text-danger" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>