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
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
<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
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
<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>