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
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
<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
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
<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>