Tables
Basic Tables
|
|
Order ID | Date | Payment Status | Total | Payment Method | Order Status |
Action
|
|---|---|---|---|---|---|---|---|
|
|
#RS9709 | January 17, 2023 02:30 PM | $176.41 | Mastercard | Delivered | ||
|
|
#RS9708 | January 22, 2023 08:09 PM | $476.41 | Visa | Processing | ||
|
|
#RS9707 | February 01, 2023 07:22 AM | $46.34 | Payoneer | Processing | ||
|
|
#RS9706 | March 18, 2023 11:19 PM | $716.6 | Credit Card | Delivered | ||
|
|
#RS9706 | April 02, 2023 03:02 AM | $156.41 | Credit Paypal | Delivered |
Basic Borderless Tables
Recent Leads
|
|
Name |
Status
|
||
|---|---|---|---|---|
|
|
 |
timmson@gmail.com |
Won Lead
|
|
|
|
 |
johanna@gmail.com |
Won Lead
|
|
|
|
 |
janny2@gmail.com |
New Lead
|
|
|
|
 |
bobby@gmail.com |
Cold Lead
|
|
|
|
 |
shawn@gmail.com |
Cold Lead
|
|
Basic No Checkboxes Tables
MMR Overview
| Metric | Value |
Status
|
|
|---|---|---|---|
| New MMR | $333.1k |
30%
|
|
| New MMR | $350k |
23%
|
|
| New MMR | $45.8k |
12%
|
|
| New MMR | $2,460.4k |
8%
|
|
| Upgrades | $1,033.4k |
9%
|
|
| Churned MMR | $4,33.1k |
67%
|
|
| Refunds | $250.3k |
23%
|
Documentation
Available Parameters
| Parameter | Type | Description |
|---|---|---|
title
|
Text | Display Title of Table component. |
classes
|
Text | Classes for Table. |
withCheckBoxes
|
Boolean
Default : false
|
Set true value for using Table Checkboxes. |
columns
|
Array of HTML Text
required |
Set list of Table Columns. Example: [
|
data
|
Array of Array HTML Text
required |
Set list of Table Data. Example: [
|
Starter Kit Codes
Starter Kit Code
{# include components/table #}
{% include "../../components/table.twig", with {
"title" : false,
"classes" : "",
"withCheckBoxes": true,
"columns" : [
"Order ID",
"Date",
"Payment Status",
"Total",
"Payment Method",
"Order Status" ,
"<div class=\"text-end\">Action</div>"
],
"data" : [
[
"<strong>#RS9709</strong>",
"January 17, 2023 <span class=\"text-dark-3\">02:30 PM</span>",
"<div class=\"text-with-icon\"><i class=\"ic ic-check-circle\"></i> <span>Paid</span></div>",
"$176.41",
"Mastercard",
"<span class=\"badge rounded-pill text-bg-success\">Delivered</span>",
"<div class=\"d-flex justify-content-end\">
<a href=\"javascript:void();\"><i class=\"ic ic-eye\"></i></a>
<a href=\"javascript:void();\" class=\"ms-2\"><i class=\"ic ic-note-pencil\"></i></a>
<a href=\"javascript:void();\" class=\"ms-2\"><i class=\"ic ic-trash\"></i></a>
</div>",
],
[
"<strong>#RS9708</strong>",
"January 22, 2023 <span class=\"text-dark-3\">08:09 PM</span>",
"<div class=\"text-with-icon\"><i class=\"ic ic-check-circle\"></i> <span>Paid</span></div>",
"$476.41",
"Visa",
"<span class=\"badge rounded-pill text-bg-warning\">Processing</span>",
"<div class=\"d-flex justify-content-end\">
<a href=\"javascript:void();\"><i class=\"ic ic-eye\"></i></a>
<a href=\"javascript:void();\" class=\"ms-2\"><i class=\"ic ic-note-pencil\"></i></a>
<a href=\"javascript:void();\" class=\"ms-2\"><i class=\"ic ic-trash\"></i></a>
</div>",
],
[
"<strong>#RS9707</strong>",
"February 01, 2023 <span class=\"text-dark-3\">07:22 AM</span>",
"<div class=\"text-with-icon\"><i class=\"ic ic-x-circle\"></i> <span>Payment Failed</span></div>",
"$46.34",
"Payoneer",
"<span class=\"badge rounded-pill text-bg-warning\">Processing</span>",
"<div class=\"d-flex justify-content-end\">
<a href=\"javascript:void();\"><i class=\"ic ic-eye\"></i></a>
<a href=\"javascript:void();\" class=\"ms-2\"><i class=\"ic ic-note-pencil\"></i></a>
<a href=\"javascript:void();\" class=\"ms-2\"><i class=\"ic ic-trash\"></i></a>
</div>",
],
[
"<strong>#RS9706</strong>",
"March 18, 2023 <span class=\"text-dark-3\">11:19 PM</span>",
"<div class=\"text-with-icon\"><i class=\"ic ic-tag\"></i> <span>Unpaid</span></div>",
"$716.6",
"Credit Card",
"<span class=\"badge rounded-pill text-bg-success\">Delivered</span>",
"<div class=\"d-flex justify-content-end\">
<a href=\"javascript:void();\"><i class=\"ic ic-eye\"></i></a>
<a href=\"javascript:void();\" class=\"ms-2\"><i class=\"ic ic-note-pencil\"></i></a>
<a href=\"javascript:void();\" class=\"ms-2\"><i class=\"ic ic-trash\"></i></a>
</div>",
],
[
"<strong>#RS9706</strong>",
"April 02, 2023 <span class=\"text-dark-3\">03:02 AM</span>",
"<div class=\"text-with-icon\"><i class=\"ic ic-check-circle\"></i> <span>Paid</span></div>",
"$156.41",
"Credit Paypal",
"<span class=\"badge rounded-pill text-bg-success\">Delivered</span>",
"<div class=\"d-flex justify-content-end\">
<a href=\"javascript:void();\"><i class=\"ic ic-eye\"></i></a>
<a href=\"javascript:void();\" class=\"ms-2\"><i class=\"ic ic-note-pencil\"></i></a>
<a href=\"javascript:void();\" class=\"ms-2\"><i class=\"ic ic-trash\"></i></a>
</div>",
],
],
} %}
Starter Kit Code
{# include components/table #}
{% include "../../components/table.twig", with {
"title" : "Recent Leads",
"classes" : "table-borderless",
"withCheckBoxes": true,
"columns" : [
"Name",
"Email",
"<div class=\"text-end\">Status</div>" ,
"",
],
"data" : [
[
"<div class=\"d-flex align-items-center\">
<div class=\"avatar avatar-size-32\">
<div class=\"avatar-image bg-dark-5\"><img src=\"assets/images/avatar-5.png\"/></div>
</div>
<strong class=\"ms-2\">Andy Timmson</strong>
</div>",
"<a href=\"\">timmson@gmail.com</a>",
"<div class=\"text-end\"><span class=\"badge rounded-pill text-bg-success\">Won Lead</span></div>",
"<div class=\"btn-group card-action-dots\">
<button type=\"button\" class=\"btn btn-sm dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
<i class=\"ic ic-three-dots\"></i>
</button>
<ul class=\"dropdown-menu\">
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 1</a></li>
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 2</a></li>
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 3</a></li>
</ul>
</div>",
],
[
"<div class=\"d-flex align-items-center\">
<div class=\"avatar avatar-size-32\">
<div class=\"avatar-image avatar-default bg-dark-5\"><img src=\"assets/images/avatar-default.svg\"/></div>
</div>
<strong class=\"ms-2\">Johanna Hand</strong>
</div>",
"<a href=\"javascript:void()\">johanna@gmail.com</a>",
"<div class=\"text-end\"><span class=\"badge rounded-pill text-bg-success\">Won Lead</span></div>",
"<div class=\"btn-group card-action-dots\">
<button type=\"button\" class=\"btn btn-sm dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
<i class=\"ic ic-three-dots\"></i>
</button>
<ul class=\"dropdown-menu\">
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 1</a></li>
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 2</a></li>
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 3</a></li>
</ul>
</div>",
],
[
"<div class=\"d-flex align-items-center\">
<div class=\"avatar avatar-size-32\">
<div class=\"avatar-image bg-dark-5\"><img src=\"assets/images/avatar-6.png\"/></div>
</div>
<strong class=\"ms-2\">Jenny Wilson</strong>
</div>",
"<a href=\"javascript:void()\">janny2@gmail.com</a>",
"<div class=\"text-end\"><span class=\"badge rounded-pill text-bg-brand-primary-1\">New Lead</span></div>",
"<div class=\"btn-group card-action-dots\">
<button type=\"button\" class=\"btn btn-sm dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
<i class=\"ic ic-three-dots\"></i>
</button>
<ul class=\"dropdown-menu\">
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 1</a></li>
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 2</a></li>
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 3</a></li>
</ul>
</div>",
],
[
"<div class=\"d-flex align-items-center\">
<div class=\"avatar avatar-size-32\">
<div class=\"avatar-image bg-dark-5\"><img src=\"assets/images/avatar-7.png\"/></div>
</div>
<strong class=\"ms-2\">Bobby Okuneva</strong>
</div>",
"<a href=\"javascript:void()\">bobby@gmail.com</a>",
"<div class=\"text-end\"><span class=\"badge rounded-pill text-bg-warning\">Cold Lead</span></div>",
"<div class=\"btn-group card-action-dots\">
<button type=\"button\" class=\"btn btn-sm dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
<i class=\"ic ic-three-dots\"></i>
</button>
<ul class=\"dropdown-menu\">
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 1</a></li>
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 2</a></li>
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 3</a></li>
</ul>
</div>",
],
[
"<div class=\"d-flex align-items-center\">
<div class=\"avatar avatar-size-32\">
<div class=\"avatar-image bg-dark-5\"><img src=\"assets/images/avatar-8.png\"/></div>
</div>
<strong class=\"ms-2\">Shawn Herzog</strong>
</div>",
"<a href=\"javascript:void()\">shawn@gmail.com</a>",
"<div class=\"text-end\"><span class=\"badge rounded-pill text-bg-warning\">Cold Lead</span></div>",
"<div class=\"btn-group card-action-dots\">
<button type=\"button\" class=\"btn btn-sm dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
<i class=\"ic ic-three-dots\"></i>
</button>
<ul class=\"dropdown-menu\">
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 1</a></li>
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 2</a></li>
<li><a class=\"dropdown-item\" href=\"javascript:void()\">Action 3</a></li>
</ul>
</div>",
],
],
} %}
Starter Kit Code
{# include components/table #}
{% include "../../components/table.twig", with {
"title" : "MMR Overview",
"classes" : "",
"withCheckBoxes": false,
"columns" : [
"Metric",
"Value",
"<div class=\"text-end\">Status</div>" ,
"",
],
"data" : [
[
"<strong>New MMR</strong>",
"<strong>$333.1k</strong>",
"<div class=\"text-end text-brand-secondary-1\"><strong>30%</strong> <i class=\"ic ic-arrow-up color\"></i></div>",
],
[
"<strong>New MMR</strong>",
"<strong>$350k</strong>",
"<div class=\"text-end text-brand-secondary-1\"><strong>23%</strong> <i class=\"ic ic-arrow-up color\"></i></div>",
],
[
"<strong>New MMR</strong>",
"<strong>$45.8k</strong>",
"<div class=\"text-end text-brand-secondary-1\"><strong>12%</strong> <i class=\"ic ic-arrow-up color\"></i></div>",
],
[
"<strong>New MMR</strong>",
"<strong>$2,460.4k</strong>",
"<div class=\"text-end text-brand-secondary-1\"><strong>8%</strong> <i class=\"ic ic-arrow-up color\"></i></div>",
],
[
"<strong>Upgrades</strong>",
"<strong>$1,033.4k</strong>",
"<div class=\"text-end text-brand-secondary-1\"><strong>9%</strong> <i class=\"ic ic-arrow-up color\"></i></div>",
],
[
"<strong>Churned MMR</strong>",
"<strong>$4,33.1k</strong>",
"<div class=\"text-end text-brand-secondary-1\"><strong>67%</strong> <i class=\"ic ic-arrow-up color\"></i></div>",
],
[
"<strong>Refunds</strong>",
"<strong>$250.3k</strong>",
"<div class=\"text-end text-brand-secondary-1\"><strong>23%</strong> <i class=\"ic ic-arrow-up color\"></i></div>",
],
],
} %}