Tables
1 · Orders table
2 · Ranking table
Top Selling Items
Full report| # | Item | Category | Qty | Sales |
|---|---|---|---|---|
| 1 | Beef BurgerBurgers |
Burgers | 128 | SAR 3,072 |
| 2 | Chicken ShawarmaShawarma |
Shawarma | 112 | SAR 1,792 |
| 3 | Fresh JuiceDrinks |
Drinks | 96 | SAR 960 |
| 4 | French FriesSides |
Sides | 81 | SAR 648 |
3 · People table with toolbar
Staff
| User | Role | Availability | Last login | Actions |
|---|---|---|---|---|
AK Ahmed Khanahmed@futex.com |
Manager | Online | Today, 09:14 | |
SR Sara Razasara@futex.com |
Cashier | On break | Today, 08:50 | |
MH Mona Hasanmona@futex.com |
Waiter | Offline | Yesterday, 10:30 PM |
4 · Financial table with totals
Cashier Shifts
Export| Date | Cashier | Cash | Card | Total | Variance | Status |
|---|---|---|---|---|---|---|
| 20 Oct 2026 | SR Sara RazaCounter 1 |
SAR 1,240.00 | SAR 2,180.00 | SAR 3,420.00 | SAR 25.00 | Open |
| 19 Oct 2026 | AK Ahmed KhanCounter 2 |
SAR 980.00 | SAR 1,950.00 | SAR 2,930.00 | SAR 10.00 | Closed |
| 18 Oct 2026 | MH Mona HasanCounter 1 |
SAR 1,100.00 | SAR 2,040.00 | SAR 3,140.00 | SAR 0.00 | Closed |
| Total | SAR 3,320.00 | SAR 6,170.00 | SAR 9,490.00 | - SAR 15.00 | ||
5 · Compact striped table
Inventory
Manage| Item | SKU | Stock | Status |
|---|---|---|---|
| Burger Buns | BUN-001 | 240 pcs | In stock |
| Chicken Fillet | CHK-014 | 36 kg | Low stock |
| Cheddar Slices | CHS-007 | 0 pkt | Out of stock |
| Soft Drinks | DRK-020 | 180 cans | In stock |
6 · Simple plain table
Payment Methods
| Method | Transactions | Amount | Share |
|---|---|---|---|
| Cash | 142 | SAR 9,480 | 38% |
| Card | 188 | SAR 13,250 | 53% |
| Online | 31 | SAR 2,140 | 9% |
/* ---------- Colour tokens (c-*) ---------- */
.c-blue {
--c: var(--blue-2563eb);
--bg: var(--blue-e0ebff);
}
.c-indigo {
--c: var(--indigo-2a2f8f);
--bg: var(--blue-e8ebff);
}
.c-purple {
--c: var(--indigo-5b3fd1);
--bg: var(--indigo-efeaff);
}
.c-green {
--c: var(--green-168a57);
--bg: var(--green-dcf5e8);
}
.c-orange {
--c: var(--orange-b45f06);
--bg: var(--orange-fff1de);
}
.c-red {
--c: var(--red-d63a3a);
--bg: var(--red-fde4e4);
}
.c-yellow {
--c: var(--yellow-9a6b00);
--bg: var(--yellow-fff3c4);
}
.c-teal {
--c: var(--teal-0f8a8a);
--bg: var(--teal-d9f4f4);
}
.c-gray {
--c: var(--blue-5d6680);
--bg: var(--blue-eceff6);
}
/* ---------- Card wrapper, header and scroll ---------- */
.table-responsive {
scrollbar-width: none;
-ms-overflow-style: none;
}
.table-responsive::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.pg-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--card);
box-shadow: var(--shadow2);
}
.pg-card-h {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 16px;
}
.pg-card-h h6 {
margin: 0;
font-family: var(--font-head);
font-weight: 800;
color: var(--brand-deep);
}
.pg-link {
font-size: .8rem;
font-weight: 700;
color: var(--brand);
text-decoration: none;
}
.pg-link:hover {
text-decoration: underline;
}
.pg-card-table {
overflow: hidden;
transition: box-shadow .25s ease;
}
.pg-card-table:hover {
box-shadow: 0 14px 34px rgba(var(--blue-1e2978-rgb),.10);
}
.pg-card-table .pg-card-h h6 {
display: flex;
align-items: center;
gap: 8px;
}
.pg-card-table .pg-card-h h6 i {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
font-size: .9rem;
color: var(--brand-deep);
background: linear-gradient(135deg,var(--blue-eef1ff),var(--blue-dfe6ff));
}
.pg-card-table .pg-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 600;
transition: gap .2s ease;
}
.pg-card-table .pg-link:hover {
gap: 8px;
}
.pg-card-table .table-responsive {
overflow-x: auto;
}
/* ---------- Table base and modifiers (pg-table*) ---------- */
.pg-table {
margin: 0;
font-size: .85rem;
}
.pg-table th {
padding: .7rem .9rem;
border-bottom: 1px solid var(--line);
background: var(--blue-f6f8ff);
white-space: nowrap;
font-size: .78rem;
font-weight: 700;
color: var(--brand-deep);
}
.pg-table td {
padding: .7rem .9rem;
border-color: var(--blue-eef1fa);
vertical-align: middle;
}
.pg-table tbody tr {
transition: background .2s;
}
.pg-table tbody tr:hover {
background: var(--blue-f6f8ff);
}
.pg-table small {
display: block;
color: var(--muted);
font-size: .74rem;
}
.pg-table .num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.pg-table {
margin: 0;
border-collapse: separate;
border-spacing: 0;
}
.pg-table thead th {
font-size: .68rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
white-space: nowrap;
color: var(--blue-6b7694);
background: linear-gradient(180deg,var(--blue-f6f8ff),var(--blue-eef2fd));
padding: 12px 16px;
border-top: 1px solid var(--blue-e6ebf7);
border-bottom: 1px solid var(--blue-e1e7f5);
}
.pg-table tbody td {
padding: 10px;
vertical-align: middle;
font-size: .84rem;
color: var(--blue-4a5370);
border-bottom: 1px dashed var(--blue-e8ecf6);
background: transparent;
transition: background .2s ease;
}
.pg-table tbody tr:last-child td {
border-bottom: 0;
}
.pg-table tbody tr:hover td {
background: linear-gradient(90deg,var(--blue-f5f7ff),var(--blue-fafbff));
}
.pg-table tbody tr:hover td:first-child {
box-shadow: inset 3px 0 0 var(--brand-deep);
}
.pg-table .num {
text-align: right;
}
.pg-table .ctr {
text-align: center;
}
.pg-table .nowrap {
white-space: nowrap;
}
.pg-table-compact thead th {
padding: 9px 12px;
}
.pg-table-compact tbody td {
padding: 8px 12px;
font-size: .8rem;
}
.pg-table-striped tbody tr:nth-child(even) td {
background: var(--blue-fafbff);
}
.pg-table-plain tbody td {
border-bottom-style: solid;
}
.pg-table tfoot td {
padding: 12px 16px;
font-weight: 700;
color: var(--blue-1f2a55);
background: var(--blue-f6f8ff);
border-top: 1px solid var(--blue-e1e7f5);
}
.pg-table tbody tr:hover .t-media > img {
transform: scale(1.08) rotate(-3deg);
}
.pg-table td:not(.num) .t-bar {
margin-left: 0;
}
@media (max-width:575.98px) {
.pg-table thead th,
.pg-table tbody td {
padding: 11px 12px;
}
}
.pg-table td.num {
font-variant-numeric: tabular-nums;
}
/* ---------- Cell components (t-*) ---------- */
.t-amt {
color: var(--blue-1f2a55);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.t-muted {
color: var(--blue-98a1bb);
}
.t-id {
display: inline-block;
padding: 3px 10px;
border-radius: 8px;
font-weight: 700;
font-size: .8rem;
color: var(--c,var(--blue-1a63e8));
background: var(--bg);
text-decoration: none;
transition: all .2s ease;
}
.t-id:hover {
color: var(--white);
background: var(--c,var(--blue-1a63e8));
transform: translateY(-1px);
}
.t-time {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--blue-6b7694);
white-space: nowrap;
}
.t-time i {
color: var(--blue-a3adc7);
font-size: .8rem;
}
.t-rank {
width: 26px;
height: 26px;
border-radius: 24%;
display: inline-grid;
place-items: center;
font-size: 0.74rem;
font-weight: 800;
color: var(--blue-6b7694);
background: var(--blue-e0ebff);
}
.t-rank.gold {
color: var(--orange-7a4b00);
background: linear-gradient(135deg,var(--yellow-ffe58a),var(--yellow-f5b82e));
box-shadow: 0 4px 10px rgba(var(--yellow-f5b82e-rgb),.45);
}
.t-rank.silver {
color: var(--blue-4b5563);
background: linear-gradient(135deg,var(--blue-f3f4f6),var(--blue-c9ced8));
box-shadow: 0 4px 10px rgba(var(--blue-96a0b4-rgb),.4);
}
.t-rank.bronze {
color: var(--orange-6b3410);
background: linear-gradient(135deg,var(--orange-ffd2ae),var(--orange-e08a4b));
box-shadow: 0 4px 10px rgba(var(--orange-e08a4b-rgb),.4);
}
.t-media {
display: flex;
align-items: center;
gap: 12px;
}
.t-media b {
display: block;
color: var(--blue-1f2a55);
font-size: .86rem;
line-height: 1.2;
}
.t-media small {
display: block;
color: var(--blue-98a1bb);
font-size: .72rem;
margin-top: 2px;
}
.t-media > img {
width: 42px;
height: 42px;
border-radius: 12px;
object-fit: cover;
flex: none;
box-shadow: 0 0 0 2px var(--white),0 0 0 3px var(--blue-e3e8f6),0 6px 12px rgba(var(--blue-1e2978-rgb),.14);
transition: transform .25s ease;
}
.t-media .av {
width: 42px;
height: 42px;
border-radius: 50%;
flex: none;
display: grid;
place-items: center;
font-weight: 700;
font-size: .8rem;
color: var(--c,var(--indigo-2a2f8f));
background: var(--bg);
}
.t-pill {
display: inline-block;
min-width: 38px;
padding: 3px 10px;
border-radius: 20px;
text-align: center;
font-weight: 700;
font-size: .78rem;
color: var(--c,var(--indigo-2a2f8f));
background: var(--bg);
}
.t-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 8px;
font-size: .76rem;
font-weight: 600;
white-space: nowrap;
color: var(--c,var(--blue-5d6680));
background: var(--bg);
}
.t-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 20px;
font-size: .74rem;
font-weight: 700;
white-space: nowrap;
color: var(--c,var(--blue-5d6680));
background: var(--bg);
}
.t-status::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.t-status.live::before {
animation: tPulse 1.4s ease-in-out infinite;
}
.t-bar {
height: 5px;
border-radius: 5px;
background: var(--blue-edf0f8);
margin: 6px 0 0 auto;
width: 110px;
overflow: hidden;
}
.t-bar i {
display: block;
height: 100%;
width: var(--w,0);
border-radius: 5px;
background: linear-gradient(90deg,var(--blue-6c7bff),var(--c,var(--indigo-2a2f8f)));
transform-origin: left;
animation: tGrow .9s cubic-bezier(.2,.8,.2,1) both;
}
.t-actions {
display: inline-flex;
gap: 6px;
}
.t-actions a,
.t-actions button {
width: 30px;
height: 30px;
border: 0;
border-radius: 9px;
display: grid;
place-items: center;
font-size: .85rem;
color: var(--c,var(--blue-5d6680));
background: var(--bg);
text-decoration: none;
cursor: pointer;
transition: all .2s ease;
}
.t-actions a:hover,
.t-actions button:hover {
color: var(--white);
background: var(--c,var(--blue-5d6680));
transform: translateY(-2px);
}
@media (max-width:575.98px) {
.t-bar {
width: 80px;
}
}
.t-stack {
display: block;
line-height: 1.25;
color: var(--blue-1f2a55);
font-weight: 600;
white-space: nowrap;
}
.t-stack small {
display: block;
color: var(--blue-98a1bb);
font-weight: 400;
font-size: .72rem;
margin-top: 2px;
}
.t-date {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: var(--blue-1f2a55);
white-space: nowrap;
}
.t-date i {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
font-size: .85rem;
color: var(--c,var(--indigo-2a2f8f));
background: var(--bg);
}
.t-money {
display: inline-flex;
align-items: center;
gap: 7px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.t-money::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c,var(--blue-98a1bb));
}
.t-total {
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--c,var(--indigo-2a2f8f));
background: var(--bg);
}
.t-var {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px 10px 3px 6px;
border-radius: 20px;
font-size: .78rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--c,var(--blue-5d6680));
background: var(--bg);
}
.t-var i {
font-size: 1.05rem;
line-height: 1;
}
.t-dot {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.t-dot::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c,var(--blue-98a1bb));
}
/* ---------- Avatar ---------- */
.av {
flex: none;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg,var(--brand-2),var(--brand));
color: var(--white);
font-family: var(--font-head);
font-weight: 800;
font-size: .8rem;
box-shadow: 0 6px 12px -6px rgba(var(--brand-rgb),.7);
}
.av.is-amber {
background: linear-gradient(135deg,var(--orange-ffbf47),var(--orange-f08a00));
}
.av.is-green {
background: linear-gradient(135deg,var(--green-34c98a),var(--green-0e9a56));
}
/* ---------- Table footer and pager ---------- */
.t-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid var(--blue-e6ebf7);
background: var(--blue-fafbff);
font-size: .8rem;
color: var(--blue-6b7694);
}
.t-pager {
display: inline-flex;
gap: 6px;
}
.t-pager button {
min-width: 32px;
height: 32px;
padding: 0 8px;
border: 1px solid var(--blue-e1e7f5);
border-radius: 9px;
background: var(--card);
color: var(--blue-4a5370);
font-weight: 600;
font-size: .8rem;
cursor: pointer;
transition: all .2s ease;
}
.t-pager button:hover {
color: var(--brand-deep);
border-color: var(--brand-deep);
transform: translateY(-1px);
}
.t-pager button.active {
color: var(--white);
border-color: transparent;
background: linear-gradient(135deg,var(--blue-6c7bff),var(--brand-deep));
box-shadow: 0 6px 14px rgba(var(--indigo-2a2f8f-rgb),.28);
}
/* ---------- Add button (btn-solid) ---------- */
.btn-solid {
background: linear-gradient(135deg,var(--blue-1c63f0),var(--blue-0f49c4));
color: var(--white);
border: 0;
font-weight: 600;
box-shadow: 0 4px 12px rgba(var(--blue-1456d9-rgb),.3);
}
.btn-solid:hover {
color: var(--white);
box-shadow: 0 6px 16px rgba(var(--blue-1456d9-rgb),.4);
transform: translateY(-1px);
}
.btn-solid {
background: linear-gradient(135deg, var(--brand-2), var(--brand) 55%, var(--brand-deep));
background-size: 160% 160%;
background-position: 0% 50%;
box-shadow: 0 8px 18px -8px rgba(var(--brand-rgb),.65), inset 0 1px 0 rgba(var(--white-rgb),.25);
transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease);
}
.btn-solid:hover {
background-position: 100% 50%;
transform: translateY(-2px);
box-shadow: 0 14px 24px -10px rgba(var(--brand-rgb),.7), inset 0 1px 0 rgba(var(--white-rgb),.3);
}
/* ---------- Animations ---------- */
@keyframes tGrow {
from {
transform: scaleX(0)
}
to {
transform: scaleX(1)
}
}
@keyframes tPulse {
0% {
box-shadow: 0 0 0 0 rgba(var(--blue-2563eb-rgb),.55)
}
70% {
box-shadow: 0 0 0 6px rgba(var(--blue-2563eb-rgb),0)
}
100% {
box-shadow: 0 0 0 0 rgba(var(--blue-2563eb-rgb),0)
}
}