Docs

Tailwind DataTable

Tailwind DataTable component simplifies the creation of interactive data tables for web applications. With features like sorting, pagination, and customizable layouts, for managing and displaying large datasets from static table or remote API endpoints.

Features

Basic Usage

Tailwind DataTable example that loads data from a local HTML table element and enables pagination and sorting features for the dataset

<div class="grid w-full space-y-5">
  <div class="kt-card">
    <div class="kt-card-header min-h-16">
      <input
        type="text"
        placeholder="Search..."
        class="kt-input sm:w-48"
        data-kt-datatable-search="#kt_datatable_basic"
      /><button type="button" class="kt-btn kt-btn-outline">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        >Add
      </button>
    </div>
    <div
      id="kt_datatable_basic"
      class="kt-card-table"
      data-kt-datatable="true"
      data-kt-datatable-page-size="5"
      data-kt-datatable-state-save="true"
    >
      <div class="kt-table-wrapper kt-scrollable">
        <table class="kt-table" data-kt-datatable-table="true">
          <thead>
            <tr>
              <th scope="col" class="w-30" data-kt-datatable-column="label">
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">Label</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th scope="col" class="w-20" data-kt-datatable-column="method">
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">Method</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th scope="col" class="w-24" data-kt-datatable-column="status">
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">Status</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th
                scope="col"
                class="w-24"
                data-kt-datatable-column="lastSession"
              >
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">Last Session</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th
                scope="col"
                class="w-16"
                data-kt-datatable-column="actions"
              ></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Guy Hawkins</td>
              <td>Web</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>22 Jul 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>Sales Dept</td>
              <td>SSH</td>
              <td>
                <span class="kt-badge kt-badge-destructive">Rejected</span>
              </td>
              <td>18 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>Sales Dept</td>
              <td>Kerberos</td>
              <td><span class="kt-badge kt-badge-primary">Verified</span></td>
              <td>15 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>Legal Dept</td>
              <td>Token</td>
              <td><span class="kt-badge kt-badge-warning">Pending</span></td>
              <td>30 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>Finance Dept</td>
              <td>API Key</td>
              <td><span class="kt-badge kt-badge-warning">Pending</span></td>
              <td>28 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>Design Dept</td>
              <td>FIDO U2F</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>16 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>Compliance Dept</td>
              <td>OpenID</td>
              <td>
                <span class="kt-badge kt-badge-destructive">Rejected</span>
              </td>
              <td>11 Aug, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>Alice Smith</td>
              <td>Biometric</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>19 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>HR Dept</td>
              <td>Basic auth</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>6 Aug, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>Guy Hawkins</td>
              <td>Web</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>22 Jul 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>Sales Dept</td>
              <td>SSH</td>
              <td>
                <span class="kt-badge kt-badge-destructive">Rejected</span>
              </td>
              <td>18 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>Sales Dept</td>
              <td>Kerberos</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>15 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>Legal Dept</td>
              <td>Token</td>
              <td><span class="kt-badge kt-badge-warning">Pending</span></td>
              <td>30 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--begin:pagination-->
      <div class="kt-datatable-toolbar">
        <div class="kt-datatable-length">
          Show<select
            class="kt-select kt-select-sm w-16"
            name="perpage"
            data-kt-datatable-size="true"
          ></select
          >per page
        </div>
        <div class="kt-datatable-info">
          <span data-kt-datatable-info="true"></span>
          <div
            class="kt-datatable-pagination"
            data-kt-datatable-pagination="true"
          ></div>
        </div>
      </div>
      <!--end:pagination-->
    </div>
  </div>
</div>

Remote Data Source

Tailwind DataTable example that loads data from a remote API endpoint and enables server-side pagination and sorting features for the dataset.

<div class="grid w-full space-y-5">
  <div class="kt-card">
    <div class="kt-card-header min-h-16">
      <input
        type="text"
        placeholder="Search..."
        class="kt-input sm:w-48"
        data-kt-datatable-search="#kt_datatable_remote_source"
      />
    </div>
    <div
      id="kt_datatable_remote_source"
      class="kt-card-table"
      data-kt-datatable-page-size="5"
      data-kt-datatable-state-save="true"
    >
      <div class="kt-table-wrapper kt-scrollable">
        <table class="kt-table" data-kt-datatable-table="true">
          <thead>
            <tr>
              <th scope="col" class="w-30" data-kt-datatable-column="label">
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">Label</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th scope="col" class="w-20" data-kt-datatable-column="method">
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">Method</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th scope="col" class="w-24" data-kt-datatable-column="status">
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">Status</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th
                scope="col"
                class="w-24"
                data-kt-datatable-column="lastSession"
              >
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">Last Session</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th scope="col" class="w-24" data-kt-datatable-column="ipAddress">
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">IP Address</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <!--begin:pagination-->
      <div class="kt-datatable-toolbar">
        <div class="kt-datatable-length">
          Show<select
            class="kt-select kt-select-sm w-16"
            name="perpage"
            data-kt-datatable-size="true"
          ></select
          >per page
        </div>
        <div class="kt-datatable-info">
          <span data-kt-datatable-info="true"></span>
          <div
            class="kt-datatable-pagination"
            data-kt-datatable-pagination="true"
          ></div>
        </div>
      </div>
      <!--end:pagination-->
    </div>
  </div>
</div>

Group Check

Tailwind DataTable example that enables group check features to easily select multiple table rows through a single checkbox.

<div class="grid w-full space-y-5">
  <div class="kt-card">
    <div class="kt-card-header min-h-16">
      <input
        type="text"
        placeholder="Search..."
        class="kt-input sm:w-48"
        data-kt-datatable-search="#kt_datatable_group_check"
      /><button type="button" class="kt-btn kt-btn-outline">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        >Add
      </button>
    </div>
    <div
      id="kt_datatable_group_check"
      class="kt-card-table"
      data-kt-datatable="true"
      data-kt-datatable-page-size="5"
      data-kt-datatable-state-save="true"
    >
      <div class="kt-table-wrapper kt-scrollable">
        <table class="kt-table kt-table-border" data-kt-datatable-table="true">
          <thead>
            <tr>
              <th scope="col" class="w-5">
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-check="true"
                />
              </th>
              <th scope="col" class="w-30" data-kt-datatable-column="label">
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">Label</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th scope="col" class="w-20" data-kt-datatable-column="method">
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">Method</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th scope="col" class="w-24" data-kt-datatable-column="status">
                <span class="kt-table-col asc"
                  ><span class="kt-table-col-label">Status</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th
                scope="col"
                class="w-24"
                data-kt-datatable-column="lastSession"
              >
                <span class="kt-table-col"
                  ><span class="kt-table-col-label">Last Session</span
                  ><span class="kt-table-col-sort"></span
                ></span>
              </th>
              <th
                scope="col"
                class="w-16"
                data-kt-datatable-column="actions"
              ></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="0"
                />
              </td>
              <td>Guy Hawkins</td>
              <td>Web</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>22 Jul 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="1"
                />
              </td>
              <td>Sales Dept</td>
              <td>SSH</td>
              <td>
                <span class="kt-badge kt-badge-destructive">Rejected</span>
              </td>
              <td>18 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="2"
                />
              </td>
              <td>Sales Dept</td>
              <td>Kerberos</td>
              <td><span class="kt-badge kt-badge-primary">Verified</span></td>
              <td>15 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="3"
                />
              </td>
              <td>Legal Dept</td>
              <td>Token</td>
              <td><span class="kt-badge kt-badge-warning">Pending</span></td>
              <td>30 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="4"
                />
              </td>
              <td>Finance Dept</td>
              <td>API Key</td>
              <td><span class="kt-badge kt-badge-warning">Pending</span></td>
              <td>28 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="5"
                />
              </td>
              <td>Design Dept</td>
              <td>FIDO U2F</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>16 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="6"
                />
              </td>
              <td>Compliance Dept</td>
              <td>OpenID</td>
              <td>
                <span class="kt-badge kt-badge-destructive">Rejected</span>
              </td>
              <td>11 Aug, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="7"
                />
              </td>
              <td>Alice Smith</td>
              <td>Biometric</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>19 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="8"
                />
              </td>
              <td>HR Dept</td>
              <td>Basic auth</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>6 Aug, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="9"
                />
              </td>
              <td>Guy Hawkins</td>
              <td>Web</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>22 Jul 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="10"
                />
              </td>
              <td>Sales Dept</td>
              <td>SSH</td>
              <td>
                <span class="kt-badge kt-badge-destructive">Rejected</span>
              </td>
              <td>18 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="11"
                />
              </td>
              <td>Sales Dept</td>
              <td>Kerberos</td>
              <td><span class="kt-badge kt-badge-success">Approved</span></td>
              <td>15 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
            <tr>
              <td>
                <input
                  type="checkbox"
                  class="kt-checkbox"
                  data-kt-datatable-row-check="true"
                  value="12"
                />
              </td>
              <td>Legal Dept</td>
              <td>Token</td>
              <td><span class="kt-badge kt-badge-warning">Pending</span></td>
              <td>30 Jul, 2024</td>
              <td class="text-end">
                <span class="inline-flex gap-2.5"
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-pencil"
                      aria-hidden="true"
                    >
                      <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
                      ></path>
                      <path d="m15 5 4 4"></path></svg></a
                  ><a
                    href="#"
                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-trash"
                      aria-hidden="true"
                    >
                      <path d="M3 6h18"></path>
                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                      <path
                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                      ></path></svg></a
                ></span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--begin:pagination-->
      <div class="kt-datatable-toolbar">
        <div class="kt-datatable-length">
          Show<select
            class="kt-select kt-select-sm w-16"
            name="perpage"
            data-kt-datatable-size="true"
          ></select
          >per page
        </div>
        <div class="kt-datatable-info">
          <span data-kt-datatable-info="true"></span>
          <div
            class="kt-datatable-pagination"
            data-kt-datatable-pagination="true"
          ></div>
        </div>
      </div>
      <!--end:pagination-->
    </div>
  </div>
</div>

API Reference

Data Attributes

Core Configuration

Attribute	Type	Default	Description
`data-kt-datatable`	boolean	`true`	Used to auto-initialize KTDataTable instances on page load. Alternatively, you can remove it and perform initialization using JavaScript.
`data-kt-datatable-table`	boolean

Search & Filtering

Attribute	Type	Default	Description
`data-kt-datatable-search`	string	`null`	Used on `<input>` elements to connect a search field to a DataTable. Value must be a CSS selector (e.g., `"#my_datatable"`) matching the DataTable container's `id` attribute.

Checkbox Selection

Attribute	Type	Default	Description
`data-kt-datatable-check`	boolean	`false`	Identifies the group checkbox control used to select multiple rows.
`data-kt-datatable-row-check`	boolean

Pagination & Info

Attribute	Type	Default	Description
`data-kt-datatable-info`	string	`null`	Identifies the element that displays the current page number and total pages.
`data-kt-datatable-size`	string

JavaScript Configuration

All advanced options are passed via JavaScript when initializing the component:

const datatable = new KTDataTable(element, {
  // Remote data configuration
  apiEndpoint: '/api/data',
  requestMethod: 'GET',
  requestHeaders: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  requestCredentials: 'include', // 'omit', 'same-origin', or 'include'
 
  // Pagination settings
  pageSize: 20,
  pageSizes: [10, 20, 50, 100],
  pageMore: true,
  pageMoreLimit: 5,
 
  // State management
  stateSave: true,
  stateNamespace:

Configuration Options

Option	Type	Default	Description
`apiEndpoint`	`string`	`undefined`	URL of the API endpoint for remote data fetching. When provided, enables remote mode.
`requestMethod`

Installation & Manual Initialization

Full Bundle Installation

Include the complete KTUI bundle to use DataTable along with other components:

<!DOCTYPE html>
<html>
  <head>
    <link href="/ktui/dist/styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div data-kt-datatable="true">
      <table class="kt-table" data-kt-datatable-table="true">
        <!-- table content -->
      </table>
    </div>
 
    <script src="/ktui/dist/ktui.min.js"></script>
  </

Manual JavaScript Initialization

You can manually initialize DataTable instances without using the data-kt-datatable attribute:

<div id="my_datatable">
  <table class="kt-table" data-kt-datatable-table="true">
    <!-- table content -->
  </table>
</div>
 
<script src="/ktui/dist/ktui.min.js"></script>
<script>
  // Wait for KTUI to load
  if (typeof window.KTDataTable !== 'undefined') {
    const element = document.getElementById('my_datatable');
    const datatable = new KTDataTable(element, {
      pageSize: 10,

Lifecycle Management

KTDataTable provides robust lifecycle management for reliable component initialization, disposal, and re-initialization. This is essential for dynamic applications, framework integrations, and scenarios where components need to be destroyed and recreated.

Initialization

DataTable can be initialized in three ways:

1. Automatic Initialization (Data Attributes):

<div data-kt-datatable="true" data-kt-datatable-page-size="10">
  <table class="kt-table" data-kt-datatable-table="true">
    <!-- table content -->
  </table>
</div>
<script src="/ktui/dist/ktui.min.js"></script>

2. Manual JavaScript Initialization:

const element = document.getElementById('my_datatable');
const datatable = new KTDataTable(element, {
  apiEndpoint: '/api/data',
  pageSize: 10
});

3. Manual Re-initialization:

// Dispose existing instance and create new one
const existingInstance = KTDataTable.getInstance(element);
if (existingInstance) {
  existingInstance.dispose();
}
const datatable = new KTDataTable(element, {
  apiEndpoint: '/api/data',
  pageSize: 20 // Updated configuration
});

Disposal

Properly dispose of DataTable instances to prevent memory leaks and clean up event listeners:

const datatable = new KTDataTable(element, options);
 
// Later, when you need to remove the component
datatable.dispose();

What dispose() does:

Removes all event listeners (search, pagination, sorting, checkboxes)
Cancels pending API requests (AbortController)
Cleans up DOM references and state
Removes component from static instance registry
Marks instance as disposed (idempotent - safe to call multiple times)

Idempotent Behavior:

// Safe to call multiple times
datatable.dispose();
datatable.dispose(); // No error, safely ignored
datatable.dispose(); // Still safe

Re-initialization

Re-initialize DataTable instances after disposal or when configuration needs to change:

Manual Disposal and Re-initialization:

// Dispose existing instance
if (datatable) {
  datatable.dispose();
}
 
// Create new instance
datatable = new KTDataTable(element, {
  apiEndpoint: '/api/data',
  pageSize: 10
});

Framework Integration

React useEffect Pattern:

import { useEffect, useRef } from 'react';
 
function DataTableComponent({ apiEndpoint, pageSize }) {
  const containerRef = useRef(null);
  const datatableRef = useRef(null);
 
  useEffect(() => {
    if (!containerRef.current) return;
 
    // Re-initialize when dependencies change
    if (datatableRef.current) {
      datatableRef.current.dispose();
    }
 
    // Wait for KTUI to load
    if (typeof window.KTDataTable !== 'undefined') {
      datatableRef.current

Vue onMounted/onUnmounted Pattern:

<template>
  <div ref="tableContainer">
    <table class="kt-table" data-kt-datatable-table="true">
      <!-- table content -->
    </table>
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
 
const tableContainer = ref(null);
let datatable = null;
 
const props = defineProps({
  apiEndpoint: String,
  pageSize: Number

Instance Management

Get Existing Instance:

const element = document.getElementById('my_datatable');
const datatable = KTDataTable.getInstance(element);
 
if (datatable) {
  // Instance exists and is active
  datatable.reload();
} else {
  // No instance found, create new one
  const newDatatable = new KTDataTable(element, options);
}

Data Modes

The component automatically detects whether to use local or remote mode based on your configuration.

Local Data Mode

When to Use:

Static data from HTML tables
Small to medium datasets (< 1000 rows)
Client-side filtering and sorting requirements
No server-side API available

How It Works: When no apiEndpoint is configured, the component operates in local mode:

Reads data from existing HTML <tbody> rows
Stores original data in component state
Applies all pagination, sorting, and search client-side
Re-renders filtered/sorted data back to the DOM

Example:

<div data-kt-datatable="true" data-kt-datatable-page-size="10">
  <table class="kt-table" data-kt-datatable-table="true">
    <thead>
      <tr>
        <th data-kt-datatable-column="name">
          <span class="kt-table-col">
            <span class="kt-table-col-label">Name</span>
            <span class="kt-table-col-sort"></span>
          </span>
        </th>
      </tr

Remote Data Mode

When to Use:

Large datasets (> 1000 rows)
Server-side pagination, filtering, and sorting
Dynamic data that changes frequently
RESTful API integration

How It Works: When apiEndpoint is configured, the component operates in remote mode:

Makes HTTP requests to the API endpoint
Sends pagination, sort, and search parameters
Receives paginated data and total count
Renders only the current page
Updates pagination controls based on total count

Example:

const datatable = new KTDataTable(element, {
  apiEndpoint: 'https://api.example.com/data',
  requestMethod: 'GET',
  requestHeaders: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  requestCredentials: 'include',
  pageSize: 20,
 
  // Transform API response if needed
  mapResponse: (response) => ({
    data: response.items,
    totalCount: response.total
  })
});

Expected API Response Format:

{
  "data": [
    { "id": 1, "name": "John", "email": "john@example.com" },
    { "id": 2, "name": "Jane", "email": "jane@example.com" }
  ],
  "totalCount": 150
}

Column Configuration

Customize how each column is displayed and behaves using the columns configuration object.

Basic Column Customization

Define custom rendering for specific columns:

const datatable = new KTDataTable(element, {
  columns: {
    status: {
      title: 'Status',
      render: (value, row, context) => {
        const badgeClass = value === 'active' ? 'kt-badge-success' : 'kt-badge-destructive';
        return `<span class="kt-badge ${badgeClass}">${value}</span>`;
      }
    },
    actions: {
      render: (value, row, context) => {
        return `
          <div class="flex gap-2">
            <button class="kt-btn kt-btn-sm" data-id="${

Render Function

The render callback receives three parameters and can return different types:

render: (
  cellData: any,           // Value of this cell
  rowData: object,         // Complete row data object
  context: KTDataTable     // DataTable instance
) => string | HTMLElement | DocumentFragment

Return Types:

HTML String:

render: (value, row) => {
  return `<span class="text-primary">${value}</span>`;
}

⚠️ Security Warning: Be careful with user-generated content. Always sanitize HTML strings to prevent XSS attacks.

DOM Element:

render: (value, row) => {
  const span = document.createElement('span');
  span.className = 'kt-badge';
  span.textContent = value; // Automatically escapes content
  return span;
}

CreatedCell Callback

For post-render cell manipulation, use createdCell:

const datatable = new KTDataTable(element, {
  columns: {
    email: {
      createdCell: (cell, cellData, rowData, row) => {
        cell.classList.add('text-primary', 'font-medium');
        cell.addEventListener('click', () => {
          console.log('Email clicked:', cellData);
        });
      }
    }
  }
});

Events

KTDataTable custom events allow you to register callback functions (event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.

Event	Description
`init`	Triggered immediately after the DataTable is initialized.
`draw`	Triggered immediately before the DataTable is drawn and displayed.
`drew`	Triggered immediately after the DataTable is drawn and displayed.

Event Handling

const datatable = new KTDataTable(element, options);
 
datatable.on('init', () => {
  console.log('DataTable initialized');
});
 
datatable.on('fetched', (event) => {
  console.log('Data fetched:', event.detail.response);
});
 
datatable.on('sort', (event) => {
  const { field, order } = event.detail;
  console.log(`Sorted by ${field} in ${order} order`

Event Detail Properties

Event	Event Detail Properties
`init`	none
`draw`	none
`drew`	none

Methods

Use KTDataTable component's API methods to programmatically control its behavior.

Method	Description
`new KTDataTable(element, options)`	Creates an instance of the KTDataTable class for the given DOM element and configuration `options`. This initializes the DataTable with the specified settings and binds it to the provided HTML element.
`sort(field: string \| number)`	Sorts the DataTable based on the specified field, which can be a column name `string` or column index `number`. This method reorders the rows according to the sort criteria applied to the field.

const datatableEl = document.querySelector('#my_datatable');
const options = {
  pageSize: 5,
  stateSave: true,
};
const datatable = new KTDataTable(datatableEl, options);
 
datatable.reload();
datatable.showSpinner();

Static Methods

Manage and interact with KTDataTable instances using these static methods of the KTDataTable JavaScript class.

Method	Description
`init()`	Automatically initializes KTDataTable objects for all elements with the `data-kt-datatable="true"` attribute on page load.
`createInstances()`	Creates KTDataTable instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
`getInstance(element)`	Returns the object associated with the given DOM element . Returns if no instance exists.

// Initialize all datatables
KTDataTable.init();
 
// Initialize pending datatables
KTDataTable.createInstances();
 
// Get datatable object
const datatableEl = document.querySelector('#my_datatable');
const datatable = KTDataTable.getInstance(datatableEl);
 
// Re-initialize with updated configuration
const existingInstance = KTDataTable.getInstance(datatableEl);
if (existingInstance) {
  existingInstance.dispose();
}
const updatedDatatable = new KTDataTable(datatableEl, {
  apiEndpoint: '/api/new-endpoint',
  pageSize: 20
});

Classes

Custom classes and Tailwind variants used by the DataTable component for styling and behavior.

Class/Variant	Description
`kt-table`	Base class for the DataTable element. Should be applied to the `<table>` element.
`datatable-initialized`	Added automatically to the DataTable container element after initialization.
`asc`	Added to sortable column elements when sorted in ascending order (via config, default: ).

PreviouseCollapse NextDismiss

On This Page

Features
API Reference