Svelte Tables
Our Svelte Tables are designed to be opt-in due to the widespread use of tables across third-party widgets like calendars and date pickers.
Keep reading some Svelte Tables examples to see how these tables work.
Examples
| Project | Budget | Status | Users | Completion | |
|---|---|---|---|---|---|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
|
Vue Paper UI Kit PRO
|
$2200 USD | completed |
|
100%
|
|
|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
Copy
<Card noBody>
<div class="card-header border-0">
<div class="row">
<div class="col-6">
<h3 class="mb-0">Light Table</h3>
</div>
</div>
</div>
<div class="row w-100 mx-0">
<table
bind:this={tableElement}
class="table-responsive table-flush align-items-center w-100
border-bottom-0" style="width: 100%">
<thead
class="border-top thead pagevisitsthead">
<tr class="">
<th
class=""
style="min-width: 310px; width: 30%"
rowspan="1"
colspan="1">
Project
<span class="caret-wrapper">
<i class="sort-caret ascending" />
<i class="sort-caret descending" />
</span>
</th>
<th
class=""
style="min-width: 140px; width: 10%"
rowspan="1"
colspan="1">
Budget
<span class="caret-wrapper">
<i class="sort-caret ascending" />
<i class="sort-caret descending" />
</span>
</th>
<th
class=""
style="min-width: 170px; width: 10%"
rowspan="1"
colspan="1">
Status
<span class="caret-wrapper">
<i class="sort-caret ascending" />
<i class="sort-caret descending" />
</span>
</th>
<th
class=""
style="min-width: 190px; width: 10%"
rowspan="1"
colspan="1">
Users
</th>
<th
class=""
style="min-width: 240px; width: 30%"
rowspan="1"
colspan="1">
Completion
<span class="caret-wrapper">
<i class="sort-caret ascending" />
<i class="sort-caret descending" />
</span>
</th>
<th
class=""
style="min-width: 180px; width: 10%"
rowspan="1"
colspan="1" />
</tr>
</thead>
<tbody class="tbody pagevisitsTbody">
{#each projects as project, i}
<tr
class="border-top">
<td
class="thPadding"
rowspan="1"
colspan="1"
style="min-width: 310px; width: 30%">
<div class="media align-items-center">
<a href="#!" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src={project.img} />
</a>
<div class="media-body">
<span class="font-weight-600 name mb-0 text-sm">
{project.title}
</span>
</div>
</div>
</td>
<td
class="thPadding"
rowspan="1"
colspan="1"
style="min-width: 140px;width: 10%">
{project.budget}
</td>
<td
class="thPadding"
rowspan="1"
colspan="1"
style="min-width: 170px; width: 10%">
<Badge className="badge-dot mr-4">
<i class={`bg-${project.statusType}`} />
<span class="status">{project.status}</span>
</Badge>
</td>
<td
class="thPadding"
rowspan="1"
colspan="1"
style="min-width: 190px; width: 10%">
<div class="avatar-group">
<a
href="#!"
class="avatar avatar-sm rounded-circle"
data-toggle="tooltip"
data-original-title="Ryan Tompson">
<img
alt="Image placeholder"
src="../../img/theme/team-1.jpg" />
</a>
<a
href="#!"
data-toggle="tooltip"
class="avatar avatar-sm rounded-circle"
data-original-title="Romina Hadid">
<img
alt="Image placeholder"
src="../../img/theme/team-2.jpg" />
</a>
<a
href="#!"
data-toggle="tooltip"
class="avatar avatar-sm rounded-circle"
data-original-title="Alexander Smith">
<img
alt="Image placeholder"
src="../../img/theme/team-3.jpg" />
</a>
<a
href="#!"
data-toggle="tooltip"
class="avatar avatar-sm rounded-circle"
data-original-title="Jessica Doe">
<img
alt="Image placeholder"
src="../../img/theme/team-4.jpg" />
</a>
</div>
</td>
<td class="thPadding" style="min-width: 240px; width: 30%">
<div class="d-xl-flex align-items-center">
<span class="completion mr-2">{project.completion}%</span>
<div
class="my-auto d-xl-flex align-items-center"
style="width: {project.completion}%">
<BaseProgress
progressClasses="mb-0"
type={project.statusType}
value={project.completion} />
</div>
</div>
</td>
<td
class="thPadding d-xl-flex justify-content-center"
style="min-width: 180px; width: 10%">
<BaseDropdown
menuOnRight
tagClasses="nav-item"
tag="li"
titleTag="a"
titleClasses="nav-link pr-0"
isOpen="false">
<span
class="btn btn-sm btn-icon-only text-light nav-link mr-0"
slot="title-container"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-ellipsis-v mt-2" />
</span>
<div class="dropdown-item" href="#!">
Action
</div>
<div class="dropdown-item" href="#!">
Another action
</div>
<div class="dropdown-item" href="#!">
Something else here
</div>
</BaseDropdown>
</td>
</tr>
{/each}
</tbody>
</table>
<div class="card-footer py-4 d-flex justify-content-end flex-row w-100">
<BasePagination currentPage={currentPage} per-page="10" total="50"></BasePagination>
</div>
</div>
</Card>Dark Tables Example
| Project | Budget | Status | Users | Completion | |
|---|---|---|---|---|---|
|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
|
|
Vue Paper UI Kit PRO
|
$2200 USD | completed |
|
100%
|
|
|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
Copy
<Card noBody className="bg-default shadow">
<div class="card-header border-0 bg-transparent">
<div class="row">
<div class="col-6">
<h3 class="mb-0 text-white">Dark Table</h3>
</div>
</div>
</div>
<div class="row w-100 mx-0">
<table
bind:this={tableElement}
class="table-responsive table-dark align-items-center w-100
border-bottom-0" style="width:100%">
<thead
class="thead pagevisitsthead">
<tr class="thead-dark">
<th
class=""
style="min-width: 310px; width: 30%"
rowspan="1"
colspan="1">
Project
<span class="caret-wrapper">
<i class="sort-caret ascending" />
<i class="sort-caret descending" />
</span>
</th>
<th
class=""
style="min-width: 140px; width: 10%"
rowspan="1"
colspan="1">
Budget
<span class="caret-wrapper">
<i class="sort-caret ascending" />
<i class="sort-caret descending" />
</span>
</th>
<th
class=""
style="min-width: 170px; width: 10%"
rowspan="1"
colspan="1">
Status
<span class="caret-wrapper">
<i class="sort-caret ascending" />
<i class="sort-caret descending" />
</span>
</th>
<th
class=""
style="min-width: 190px; width: 10%"
rowspan="1"
colspan="1">
Users
</th>
<th
class=""
style="min-width: 240px; width: 30%"
rowspan="1"
colspan="1">
Completion
<span class="caret-wrapper">
<i class="sort-caret ascending" />
<i class="sort-caret descending" />
</span>
</th>
<th
class=""
style="min-width: 180px; width: 10%"
rowspan="1"
colspan="1" />
</tr>
</thead>
<tbody class="pagevisitsTbody">
{#each projects as project, i}
<tr
class="">
<td
class="thPadding"
rowspan="1"
colspan="1"
style="min-width: 310px; width: 30%">
<div class="media align-items-center">
<a href="#!" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src={project.img} />
</a>
<div class="media-body">
<span class="font-weight-600 name mb-0 text-sm">
{project.title}
</span>
</div>
</div>
</td>
<td
class="thPadding"
rowspan="1"
colspan="1"
style="min-width: 140px; width: 10%">
{project.budget}
</td>
<td
class="thPadding"
rowspan="1"
colspan="1"
style="min-width: 170px; width: 10%">
<Badge className="badge-dot mr-4">
<i class={`bg-${project.statusType}`} />
<span class="status">{project.status}</span>
</Badge>
</td>
<td
class="thPadding"
rowspan="1"
colspan="1"
style="min-width: 190px; width: 10%">
<div class="avatar-group">
<a
href="#!"
class="avatar avatar-sm rounded-circle"
data-toggle="tooltip"
data-original-title="Ryan Tompson">
<img
alt="Image placeholder"
src="../../img/theme/team-1.jpg" />
</a>
<a
href="#!"
data-toggle="tooltip"
class="avatar avatar-sm rounded-circle"
data-original-title="Romina Hadid">
<img
alt="Image placeholder"
src="../../img/theme/team-2.jpg" />
</a>
<a
href="#!"
data-toggle="tooltip"
class="avatar avatar-sm rounded-circle"
data-original-title="Alexander Smith">
<img
alt="Image placeholder"
src="../../img/theme/team-3.jpg" />
</a>
<a
href="#!"
data-toggle="tooltip"
class="avatar avatar-sm rounded-circle"
data-original-title="Jessica Doe">
<img
alt="Image placeholder"
src="../../img/theme/team-4.jpg" />
</a>
</div>
</td>
<td class="thPadding" style="min-width: 240px; width: 30%">
<div class="d-flex align-items-center">
<span class="completion mr-2">{project.completion}%</span>
<div
class="my-auto d-flex align-items-center"
style="width: {project.completion}%">
<BaseProgress
progressClasses="mb-0"
type={project.statusType}
value={project.completion} />
</div>
</div>
</td>
<td
class="thPadding d-flex justify-content-center"
style="min-width: 180px; width: 10%">
<BaseDropdown
menuOnRight
tagClasses="nav-item"
tag="li"
titleTag="a"
titleClasses="nav-link pr-0"
isOpen="false">
<span
class="btn btn-sm btn-icon-only text-light nav-link mr-0"
slot="title-container"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-ellipsis-v mt-2" />
</span>
<div class="dropdown-item" href="#!">Action</div>
<div class="dropdown-item" href="#!">Another action</div>
<div class="dropdown-item" href="#!">Something else here</div>
</BaseDropdown>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</Card>