Data Tables Style 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit cras ultrices lectus sem.
|
Customer |
Product |
Order Number |
Date |
Status |
Confirmation |
|---|---|---|---|---|---|
Musharof Chowdhurymusharof@gmail.com |
Apple Macbook Pro M18/256 GB |
#WE234343 |
25 Dec 2024 |
Pending |
|
Shafiq Hammadshafiq@gmail.com |
iPhone 13 Pro Max4/256 GB |
#WE234343 |
25 Dec 2024 |
Pending |
|
Naimur Rahmannaim@gmail.com |
Apple watch series 7 |
#WE234343 |
25 Dec 2024 |
Cancelled |
|
Jhon Smithsmith@gmail.com |
Apple Macbook air M18/256 GB |
#WE234343 |
25 Dec 2024 |
Shipped |
HTML
<div class="rh ni bj wr nj xr">
<div class="nf oh">
<table class="yd yf rh">
<thead>
<tr
class="vi bj wr"
>
<th class="ff sl rm sm">
<p
class="gn un zn gs"
>
Customer
</p>
</th>
<th class="ff sl rl">
<p
class="gn un zn gs"
>
Product
</p>
</th>
<th class="min-w-[160px] sl rl">
<p
class="gn un zn gs"
>
Order Number
</p>
</th>
<th class="gf sl rl">
<p
class="gn un zn gs"
>
Date
</p>
</th>
<th class="hf sl rl">
<p
class="gn un zn gs"
>
Status
</p>
</th>
<th class="if sl tm nm">
<p
class="in un zn gs"
>
Confirmation
</p>
</th>
</tr>
</thead>
<tbody>
<tr
class="vi bj wr"
>
<td class="_l rm sm">
<h5 class="un">Musharof Chowdhury</h5>
<p class="mn">musharof@gmail.com</p>
</td>
<td class="_l rl">
<h5 class="un">Apple Macbook Pro M1</h5>
<p class="mn">8/256 GB</p>
</td>
<td class="_l rl">
<p>#WE234343</p>
</td>
<td class="_l rl">
<p>25 Dec 2024</p>
</td>
<td class="_l rl">
<p
class="nc mg pg th pj/10 jl am mn un go"
>
<span
class="ub jc dd he th pj"
></span>
Pending
</p>
</td>
<td class="_l tm nm in">
<button
class="nc mg pg sh ni ej ol rl un _n qq _q gp dp"
>
Confirm Order
</button>
</td>
</tr>
<tr
class="vi bj wr"
>
<td class="_l rm sm">
<h5 class="un">Shafiq Hammad</h5>
<p class="mn">shafiq@gmail.com</p>
</td>
<td class="_l rl">
<h5 class="un">iPhone 13 Pro Max</h5>
<p class="mn">4/256 GB</p>
</td>
<td class="_l rl">
<p>#WE234343</p>
</td>
<td class="_l rl">
<p>25 Dec 2024</p>
</td>
<td class="_l rl">
<p
class="nc mg pg th pj/10 jl am mn un go"
>
<span
class="ub jc dd he th pj"
></span>
Pending
</p>
</td>
<td class="_l tm nm in">
<button
class="nc mg pg sh ni ej ol rl un _n qq _q gp dp"
>
Confirm Order
</button>
</td>
</tr>
<tr
class="vi bj wr"
>
<td class="_l rm sm">
<h5 class="un">Naimur Rahman</h5>
<p class="mn">naim@gmail.com</p>
</td>
<td class="_l rl">
<h5 class="un">Apple watch series 7</h5>
</td>
<td class="_l rl">
<p>#WE234343</p>
</td>
<td class="_l rl">
<p>25 Dec 2024</p>
</td>
<td class="_l rl">
<p
class="nc mg pg th sj/10 jl am mn un fo"
>
<span
class="ub jc dd he th sj"
></span>
Cancelled
</p>
</td>
<td class="_l tm nm in"></td>
</tr>
<tr class="vi cj">
<td class="_l rm sm">
<h5 class="un">Jhon Smith</h5>
<p class="mn">smith@gmail.com</p>
</td>
<td class="_l rl">
<h5 class="un">Apple Macbook air M1</h5>
<p class="mn">8/256 GB</p>
</td>
<td class="_l rl">
<p>#WE234343</p>
</td>
<td class="_l rl">
<p>25 Dec 2024</p>
</td>
<td class="_l rl">
<p
class="nc mg pg th xj/10 jl am mn un io"
>
<span
class="ub jc dd he th xj"
></span>
Shipped
</p>
</td>
<td class="_l tm nm in"></td>
</tr>
</tbody>
</table>
</div>
</div>
Data Tables Style 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit cras ultrices lectus sem.
|
Product Name |
Category |
Price |
Sold |
Profit |
|
|---|---|---|---|---|---|
Apple Watch Series 7 |
Electronics |
$269 |
22 |
$45 |
|
Macbook Pro M1 |
Electronics |
$546 |
34 |
$125 |
|
Dell Inspiron 15 |
Electronics |
$444 |
64 |
$247 |
|
HP Probook 450 |
Electronics |
$499 |
72 |
$103 |
|
HTML
<div class="rh ni bj wr nj xr">
<div class="nf oh">
<table class="yd yf">
<thead>
<tr
class="vi bj wr"
>
<th class="jf sl um rm">
<p
class="gn un zn gs"
>
Product Name
</p>
</th>
<th class="kf sl rl">
<p
class="gn un zn gs"
>
Category
</p>
</th>
<th class="kf sl rl">
<p
class="gn un zn gs"
>
Price
</p>
</th>
<th class="kf sl rl">
<p
class="gn un zn gs"
>
Sold
</p>
</th>
<th class="kf sl tm vm">
<p
class="gn un zn gs"
>
Profit
</p>
</th>
</tr>
</thead>
<tbody>
<tr
class="vi bj wr"
>
<td class="vl wm km">
<div class="lc mg">
<label
for="checkbox-1"
class="cg dg lc"
>
<div class="h">
<input
type="checkbox"
id="checkbox-1"
class="lp d"
/>
<div
class="sw pb cd ge lc mg pg wh oi bj wr wj yr eo"
>
<span class="oo">
<svg
width="14"
height="14"
viewBox="0 0 10 10"
class="ok"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.62796 2.20602C8.79068 2.36874 8.79068 2.63256 8.62796 2.79528L4.04463 7.37861C3.88191 7.54133 3.61809 7.54133 3.45537 7.37861L1.37204 5.29528C1.20932 5.13256 1.20932 4.86874 1.37204 4.70602C1.53476 4.5433 1.79858 4.5433 1.96129 4.70602L3.75 6.49473L8.03871 2.20602C8.20142 2.0433 8.46524 2.0433 8.62796 2.20602Z"
fill=""
/>
</svg>
</span>
</div>
</div>
</label>
<div class="lc mg">
<img
src="https://cdn.tailgrids.com/2.0/image/application/images/tables/table-12/image-01.jpg"
alt="product"
class="pb ed ie sh qk rk"
/>
<p class="mn">Apple Watch Series 7</p>
</div>
</div>
</td>
<td class="vl rl">
<p class="mn">Electronics</p>
</td>
<td class="vl rl">
<p class="mn">$269</p>
</td>
<td class="vl rl">
<p class="mn">22</p>
</td>
<td class="vl rl">
<p class="mn">$45</p>
</td>
<td class="vl tm xm">
<div
x-data="{openDropDown: false}"
class="h in"
>
<button @click="openDropDown = !openDropDown">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13C5.55228 13 6 12.5523 6 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13C19.5523 13 20 12.5523 20 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="g m n na de eh sh so nj xr ni bj wr vk"
>
<button
class="yd sh ol ll gn mn tq js"
>
Edit
</button>
<button
class="yd sh ol ll gn mn tq js"
>
Delete
</button>
</div>
</div>
</td>
</tr>
<tr
class="vi bj wr"
>
<td class="vl wm km">
<div class="lc mg">
<label
for="checkbox-2"
class="cg dg lc"
>
<div class="h">
<input
type="checkbox"
id="checkbox-2"
class="lp d"
/>
<div
class="sw pb cd ge lc mg pg wh oi bj wr wj yr eo"
>
<span class="oo">
<svg
width="14"
height="14"
viewBox="0 0 10 10"
class="ok"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.62796 2.20602C8.79068 2.36874 8.79068 2.63256 8.62796 2.79528L4.04463 7.37861C3.88191 7.54133 3.61809 7.54133 3.45537 7.37861L1.37204 5.29528C1.20932 5.13256 1.20932 4.86874 1.37204 4.70602C1.53476 4.5433 1.79858 4.5433 1.96129 4.70602L3.75 6.49473L8.03871 2.20602C8.20142 2.0433 8.46524 2.0433 8.62796 2.20602Z"
fill=""
/>
</svg>
</span>
</div>
</div>
</label>
<div class="lc mg">
<img
src="https://cdn.tailgrids.com/2.0/image/application/images/tables/table-12/image-02.jpg"
alt="product"
class="pb ed ie sh qk rk"
/>
<p class="mn">Macbook Pro M1</p>
</div>
</div>
</td>
<td class="vl rl">
<p class="mn">Electronics</p>
</td>
<td class="vl rl">
<p class="mn">$546</p>
</td>
<td class="vl rl">
<p class="mn">34</p>
</td>
<td class="vl rl">
<p class="mn">$125</p>
</td>
<td class="vl tm xm">
<div
x-data="{openDropDown: false}"
class="h in"
>
<button @click="openDropDown = !openDropDown">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13C5.55228 13 6 12.5523 6 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13C19.5523 13 20 12.5523 20 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="g m n na de eh sh so nj xr ni bj wr vk"
>
<button
class="yd sh ol ll gn mn tq js"
>
Edit
</button>
<button
class="yd sh ol ll gn mn tq js"
>
Delete
</button>
</div>
</div>
</td>
</tr>
<tr
class="vi bj wr"
>
<td class="vl wm km">
<div class="lc mg">
<label
for="checkbox-3"
class="cg dg lc"
>
<div class="h">
<input
type="checkbox"
id="checkbox-3"
class="lp d"
/>
<div
class="sw pb cd ge lc mg pg wh oi bj wr wj yr eo"
>
<span class="oo">
<svg
width="14"
height="14"
viewBox="0 0 10 10"
class="ok"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.62796 2.20602C8.79068 2.36874 8.79068 2.63256 8.62796 2.79528L4.04463 7.37861C3.88191 7.54133 3.61809 7.54133 3.45537 7.37861L1.37204 5.29528C1.20932 5.13256 1.20932 4.86874 1.37204 4.70602C1.53476 4.5433 1.79858 4.5433 1.96129 4.70602L3.75 6.49473L8.03871 2.20602C8.20142 2.0433 8.46524 2.0433 8.62796 2.20602Z"
fill=""
/>
</svg>
</span>
</div>
</div>
</label>
<div class="lc mg">
<img
src="https://cdn.tailgrids.com/2.0/image/application/images/tables/table-12/image-03.jpg"
alt="product"
class="pb ed ie sh qk rk"
/>
<p class="mn">Dell Inspiron 15</p>
</div>
</div>
</td>
<td class="vl rl">
<p class="mn">Electronics</p>
</td>
<td class="vl rl">
<p class="mn">$444</p>
</td>
<td class="vl rl">
<p class="mn">64</p>
</td>
<td class="vl rl">
<p class="mn">$247</p>
</td>
<td class="vl tm xm">
<div
x-data="{openDropDown: false}"
class="h in"
>
<button @click="openDropDown = !openDropDown">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13C5.55228 13 6 12.5523 6 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13C19.5523 13 20 12.5523 20 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="g m n na de eh sh so nj xr ni bj wr vk"
>
<button
class="yd sh ol ll gn mn tq js"
>
Edit
</button>
<button
class="yd sh ol ll gn mn tq js"
>
Delete
</button>
</div>
</div>
</td>
</tr>
<tr
class="vi bj wr"
>
<td class="vl wm km">
<div class="lc mg">
<label
for="checkbox-4"
class="cg dg lc"
>
<div class="h">
<input
type="checkbox"
id="checkbox-4"
class="lp d"
/>
<div
class="sw pb cd ge lc mg pg wh oi bj wr wj yr eo"
>
<span class="oo">
<svg
width="14"
height="14"
viewBox="0 0 10 10"
class="ok"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.62796 2.20602C8.79068 2.36874 8.79068 2.63256 8.62796 2.79528L4.04463 7.37861C3.88191 7.54133 3.61809 7.54133 3.45537 7.37861L1.37204 5.29528C1.20932 5.13256 1.20932 4.86874 1.37204 4.70602C1.53476 4.5433 1.79858 4.5433 1.96129 4.70602L3.75 6.49473L8.03871 2.20602C8.20142 2.0433 8.46524 2.0433 8.62796 2.20602Z"
fill=""
/>
</svg>
</span>
</div>
</div>
</label>
<div class="lc mg">
<img
src="https://cdn.tailgrids.com/2.0/image/application/images/tables/table-12/image-04.jpg"
alt="product"
class="pb ed ie sh qk rk"
/>
<p class="mn">HP Probook 450</p>
</div>
</div>
</td>
<td class="vl rl">
<p class="mn">Electronics</p>
</td>
<td class="vl rl">
<p class="mn">$499</p>
</td>
<td class="vl rl">
<p class="mn">72</p>
</td>
<td class="vl rl">
<p class="mn">$103</p>
</td>
<td class="vl tm xm">
<div
x-data="{openDropDown: false}"
class="h in"
>
<button @click="openDropDown = !openDropDown">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13C5.55228 13 6 12.5523 6 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13C19.5523 13 20 12.5523 20 12Z"
stroke="#637381"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<div
x-show="openDropDown"
@click.outside="openDropDown = false"
class="g m p na de eh sh so nj xr ni bj wr vk"
>
<button
class="yd sh ol ll gn mn tq js"
>
Edit
</button>
<button
class="yd sh ol ll gn mn tq js"
>
Delete
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>