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.
index.html demo.js
< 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-datatableboolean trueUsed to auto-initialize KTDataTable instances on page load. Alternatively, you can remove it and perform initialization using JavaScript. data-kt-datatable-tableboolean
Search & Filtering
Attribute Type Default Description data-kt-datatable-searchstring nullUsed 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-checkboolean falseIdentifies the group checkbox control used to select multiple rows. data-kt-datatable-row-checkboolean
Attribute Type Default Description data-kt-datatable-infostring nullIdentifies the element that displays the current page number and total pages. data-kt-datatable-sizestring
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 apiEndpointstringundefinedURL 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 initTriggered immediately after the DataTable is initialized. drawTriggered immediately before the DataTable is drawn and displayed. drewTriggered 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 initnone drawnone drewnone
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-tableBase class for the DataTable element. Should be applied to the <table> element. datatable-initializedAdded automatically to the DataTable container element after initialization. ascAdded to sortable column elements when sorted in ascending order (via config, default: ).