Logo Logo Nue Package
Getting Started Introduction
Getting Started Gulp
Getting Started Customization
Getting Started Credits
Getting Started Changelog
Design & Graphics Bootstrap Icons
Design & Graphics Illustrations
Components Accordion
Components Alerts
Components Avatars
Components Badge
Components Breadcrumb
Components Buttons
Components Button group
Components Cards
Components Collapse
Components Column divider
Components Devices
Components Divider
Components Dropdowns
Components Icons
Components List Group
Components Lists
Components Legend Indicator
Components Modal
Components Offcanvas
Components Page Header
Components Pagination
Components Popovers
Components Progress
Components Profile
Components Shapes
Components Sliding Image
Components Spinners
Components Steps
Components Tab
Components Toasts
Components Tooltips
Components Typography
Navbars Navbar
Navbars Navs
Navbars Mega Menu
Navbars Navbar Vertical Aside
Navbars Scrollspy
Tables Tables
Tables Datatables
Tables Sticky Header
Basic forms Basic forms
Basic forms Checks and switches
Basic forms Input group
Utilities Backgrounds
Utilities Borders
Utilities Colors
Utilities Links
Utilities Position
Utilities Rotations
Utilities Shadows
Utilities Sizing
Utilities Spacing
Utilities Z-index
Utilities Opacity
Advanced forms Advanced select
Advanced forms Datepicker
Advanced forms Date Range Picker
Advanced forms Calendar (Fullcalendar)
Advanced forms File attachments
Advanced forms Drag’ n’ drop file uploads
Advanced forms WYSIWYG Editor
Advanced forms Quantity counter
Advanced forms Copy to Clipboard
Advanced forms Input mask
Advanced forms Step forms (Wizards)
Advanced forms Wizards
Advanced forms Add field
Advanced forms Toggle password
Advanced forms Count characters
Advanced forms Form Search
Advanced forms Toggle switch
Advanced forms Google reCAPTCHA
Others Chart.js
Others Counter
Others Circles.js (Pie Chart)
Others Fullscreen Lightbox
Others Leaflet
Others JSVectorMap
Others SortableJS
Others Sticky block
Others Go To

No Results

  • Preview Demo
Logo Nµe
  • Nue
  • UI (HTML)
  • Getting Started
  • Introduction
  • Credits
  • Design & Graphics
  • Bootstrap Icons
  • Iconify Design
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Button Group
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Sliding Image
  • Spinners
  • Steps
  • Tab
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Navbar Vertical Aside
  • Scrollspy
  • Tables
  • Tables
  • Datatables
  • Sticky Header
  • Basic Forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • Datepicker (Flatpickr)
  • Date Range Picker
  • Calendar (Fullcalendar)
  • File Attachments
  • Drag n' Drop Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Copy to Clipboard
  • Input Mask
  • Step Forms (Wizards)
  • Add Field
  • Toggle Password
  • Count Characters
  • Form Search
  • Toggle Switch
  • Google reCAPTCHA
  • Charts
  • Chart.js
  • Counter
  • Circles.js (Pie Chart)
  • Others
  • Fullscreen Lightbox
  • Leaflet
  • JSVectorMap
  • SortableJS
  • Sticky Block
  • Go To
  • Utility
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Shadows
  • Sizing
  • Spacing
  • Z-Index
  • Opacity

Sticky Header

Make a table thead sticky to the top of a page, card or any other content.

Cara Pakai

Copy-paste script berikut sebelum tag penutup <body>

    
      <script>
        $(document).on('ready', function () {
          // INITIALIZATION OF STICKY HEADER
          // =======================================================
          new NueTableStickyHeader('.js-sticky-header', {
            offsetTop: "60px"
          }).init();
        });
      </script>
    
  

  • Preview
  • HTML
NamePositionCountryStatus
Amanda Harvey amanda@example.com
Director Human resourcesUnited Kingdom Code: GB Active
A
Anne Richard anne@example.com
Seller Branding productsUnited States Code: US Pending
David Harrison david@example.com
Unknown UnknownUnited States Code: US Active
Finch Hoot finch@example.com
Designer IT departmentArgentina Code: AR Suspended
B
Bob Dean bob@example.com
Executive director MarketingAustria Code: AT Active
Ella Lauda ella@example.com
Co-founder All departmentsUnited Kingdom Code: GB Active
L
Lori Hunter hunter@example.com
Developer Mobile appEstonia Code: EE Active
M
Mark Colbert mark@example.com
Executive director Human resourcesCanada Code: CA Active
Costa Quinn costa@example.com
Co-founder All departmentsFrance Code: FR Pending
R
Rachel Doe rachel@example.com
Accountant FinanceUnited States Code: US Active
Linda Bates linda@example.com
Unknown UnknownUnited Kingdom Code: UK Suspended
B
Brian Halligan brian@example.com
Director AccountingFrance Code: FR Active
C
Chris Mathew chris@example.com
Developer Mobile appSwitzerland Code: CH Pending
Clarice Boone clarice@example.com
Seller Branding productsUnited Kingdom Code: UK Active
L
Lewis Clarke lewis@example.com
Co-founder IT departmentSwitzerland Code: CH Pending
Sam Kart sam@example.com
Designer BrandingCanada Code: CA Pending
J
Johnny Appleseed johnny@example.com
Accountant Human resourcesUnited States Code: US Active
P
Phileas Fogg phileas@example.com
Designer BrandingSpain Code: ES Suspended
Mark Williams mark@example.com
Co-founder BrandingUnited Kingdom Code: GB Active
T
Timothy Silva timothy@example.com
Developer Mobile appItaly Code: IT Pending
G
Gary Bishop gary@example.com
Developer Mobile appLatvia Code: LV Active
Y
Yorker Scogings yorker@example.com
Seller Branding productsNorway Code: NO Suspended
F
Frank Phillips frank@example.com
Unknown UnknownNorway Code: NO Suspended
E
Elizabeth Carter eliz@example.com
Unknown UnknownUnited States Code: UK Pending
        
          <div class="js-sticky-header">
            <!-- Table -->
            <div class="table-responsive">
              <table class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle">
                <thead class="thead-light">
                  <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Position</th>
                    <th scope="col">Country</th>
                    <th scope="col">Status</th>
                  </tr>
                </thead>

                <tbody>
                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-circle">
                          <img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img10.jpg" alt="">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Amanda Harvey <i class="tio-verified text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
                          <span class="d-block fs-6 text-body">amanda@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Director</span>
                      <span class="d-block fs-6">Human resources</span>
                    </td>
                    <td>United Kingdom <span class="visually-hidden">Code: GB</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-primary avatar-circle">
                          <span class="avatar-initials">A</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Anne Richard</span>
                          <span class="d-block fs-6 text-body">anne@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Seller</span>
                      <span class="d-block fs-6">Branding products</span>
                    </td>
                    <td>United States <span class="visually-hidden">Code: US</span></td>
                    <td>
                      <span class="legend-indicator bg-warning"></span>Pending
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-circle">
                          <img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img3.jpg" alt="">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">David Harrison</span>
                          <span class="d-block fs-6 text-body">david@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Unknown</span>
                      <span class="d-block fs-6">Unknown</span>
                    </td>
                    <td>United States <span class="visually-hidden">Code: US</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-circle">
                          <img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img5.jpg" alt="">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Finch Hoot</span>
                          <span class="d-block fs-6 text-body">finch@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Designer</span>
                      <span class="d-block fs-6">IT department</span>
                    </td>
                    <td>Argentina <span class="visually-hidden">Code: AR</span></td>
                    <td>
                      <span class="legend-indicator bg-danger"></span>Suspended
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-dark avatar-circle">
                          <span class="avatar-initials">B</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Bob Dean</span>
                          <span class="d-block fs-6 text-body">bob@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Executive director</span>
                      <span class="d-block fs-6">Marketing</span>
                    </td>
                    <td>Austria <span class="visually-hidden">Code: AT</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-circle">
                          <img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img9.jpg" alt="">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Ella Lauda <i class="tio-verified text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
                          <span class="d-block fs-6 text-body">ella@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Co-founder</span>
                      <span class="d-block fs-6">All departments</span>
                    </td>
                    <td>United Kingdom <span class="visually-hidden">Code: GB</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-info avatar-circle">
                          <span class="avatar-initials">L</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Lori Hunter</span>
                          <span class="d-block fs-6 text-body">hunter@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Developer</span>
                      <span class="d-block fs-6">Mobile app</span>
                    </td>
                    <td>Estonia <span class="visually-hidden">Code: EE</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-primary avatar-circle">
                          <span class="avatar-initials">M</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Mark Colbert</span>
                          <span class="d-block fs-6 text-body">mark@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Executive director</span>
                      <span class="d-block fs-6">Human resources</span>
                    </td>
                    <td>Canada <span class="visually-hidden">Code: CA</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-circle">
                          <img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img6.jpg" alt="">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Costa Quinn</span>
                          <span class="d-block fs-6 text-body">costa@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Co-founder</span>
                      <span class="d-block fs-6">All departments</span>
                    </td>
                    <td>France <span class="visually-hidden">Code: FR</span></td>
                    <td>
                      <span class="legend-indicator bg-warning"></span>Pending
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-danger avatar-circle">
                          <span class="avatar-initials">R</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Rachel Doe <i class="tio-verified text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
                          <span class="d-block fs-6 text-body">rachel@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Accountant</span>
                      <span class="d-block fs-6">Finance</span>
                    </td>
                    <td>United States <span class="visually-hidden">Code: US</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-circle">
                          <img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img8.jpg" alt="">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Linda Bates</span>
                          <span class="d-block fs-6 text-body">linda@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Unknown</span>
                      <span class="d-block fs-6">Unknown</span>
                    </td>
                    <td>United Kingdom <span class="visually-hidden">Code: UK</span></td>
                    <td>
                      <span class="legend-indicator bg-danger"></span>Suspended
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-info avatar-circle">
                          <span class="avatar-initials">B</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Brian Halligan</span>
                          <span class="d-block fs-6 text-body">brian@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Director</span>
                      <span class="d-block fs-6">Accounting</span>
                    </td>
                    <td>France <span class="visually-hidden">Code: FR</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-dark avatar-circle">
                          <span class="avatar-initials">C</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Chris Mathew</span>
                          <span class="d-block fs-6 text-body">chris@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Developer</span>
                      <span class="d-block fs-6">Mobile app</span>
                    </td>
                    <td>Switzerland <span class="visually-hidden">Code: CH</span></td>
                    <td>
                      <span class="legend-indicator bg-warning"></span>Pending
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-circle">
                          <img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img7.jpg" alt="">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Clarice Boone <i class="tio-verified text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
                          <span class="d-block fs-6 text-body">clarice@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Seller</span>
                      <span class="d-block fs-6">Branding products</span>
                    </td>
                    <td>United Kingdom <span class="visually-hidden">Code: UK</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-dark avatar-circle">
                          <span class="avatar-initials">L</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Lewis Clarke</span>
                          <span class="d-block fs-6 text-body">lewis@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Co-founder</span>
                      <span class="d-block fs-6">IT department</span>
                    </td>
                    <td>Switzerland <span class="visually-hidden">Code: CH</span></td>
                    <td>
                      <span class="legend-indicator bg-warning"></span>Pending
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-circle">
                          <img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img4.jpg" alt="">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Sam Kart</span>
                          <span class="d-block fs-6 text-body">sam@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Designer</span>
                      <span class="d-block fs-6">Branding</span>
                    </td>
                    <td>Canada <span class="visually-hidden">Code: CA</span></td>
                    <td>
                      <span class="legend-indicator bg-warning"></span>Pending
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-danger avatar-circle">
                          <span class="avatar-initials">J</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Johnny Appleseed</span>
                          <span class="d-block fs-6 text-body">johnny@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Accountant</span>
                      <span class="d-block fs-6">Human resources</span>
                    </td>
                    <td>United States <span class="visually-hidden">Code: US</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-danger avatar-circle">
                          <span class="avatar-initials">P</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Phileas Fogg</span>
                          <span class="d-block fs-6 text-body">phileas@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Designer</span>
                      <span class="d-block fs-6">Branding</span>
                    </td>
                    <td>Spain <span class="visually-hidden">Code: ES</span></td>
                    <td>
                      <span class="legend-indicator bg-danger"></span>Suspended
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-circle">
                          <img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img6.jpg" alt="">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Mark Williams <i class="tio-verified text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
                          <span class="d-block fs-6 text-body">mark@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Co-founder</span>
                      <span class="d-block fs-6">Branding</span>
                    </td>
                    <td>United Kingdom <span class="visually-hidden">Code: GB</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-dark avatar-circle">
                          <span class="avatar-initials">T</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Timothy Silva</span>
                          <span class="d-block fs-6 text-body">timothy@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Developer</span>
                      <span class="d-block fs-6">Mobile app</span>
                    </td>
                    <td>Italy <span class="visually-hidden">Code: IT</span></td>
                    <td>
                      <span class="legend-indicator bg-warning"></span>Pending
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-dark avatar-circle">
                          <span class="avatar-initials">G</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Gary Bishop <i class="tio-verified text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top endorsed"></i></span>
                          <span class="d-block fs-6 text-body">gary@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Developer</span>
                      <span class="d-block fs-6">Mobile app</span>
                    </td>
                    <td>Latvia <span class="visually-hidden">Code: LV</span></td>
                    <td>
                      <span class="legend-indicator bg-success"></span>Active
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-dark avatar-circle">
                          <span class="avatar-initials">Y</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Yorker Scogings</span>
                          <span class="d-block fs-6 text-body">yorker@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Seller</span>
                      <span class="d-block fs-6">Branding products</span>
                    </td>
                    <td>Norway <span class="visually-hidden">Code: NO</span></td>
                    <td>
                      <span class="legend-indicator bg-danger"></span>Suspended
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-info avatar-circle">
                          <span class="avatar-initials">F</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Frank Phillips</span>
                          <span class="d-block fs-6 text-body">frank@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Unknown</span>
                      <span class="d-block fs-6">Unknown</span>
                    </td>
                    <td>Norway <span class="visually-hidden">Code: NO</span></td>
                    <td>
                      <span class="legend-indicator bg-danger"></span>Suspended
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <a class="d-flex align-items-center" href="">
                        <div class="avatar avatar-soft-primary avatar-circle">
                          <span class="avatar-initials">E</span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <span class="d-block h5 text-inherit mb-0">Elizabeth Carter</span>
                          <span class="d-block fs-6 text-body">eliz@example.com</span>
                        </div>
                      </a>
                    </td>
                    <td>
                      <span class="d-block h5 mb-0">Unknown</span>
                      <span class="d-block fs-6">Unknown</span>
                    </td>
                    <td>United States <span class="visually-hidden">Code: UK</span></td>
                    <td>
                      <span class="legend-indicator bg-warning"></span>Pending
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- End Table -->
          </div>
        
      

Methods

ParametersDescriptionDefault value

offsetTop

Add custom offset from top in px0