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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 > 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 >
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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 = "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></ path > < path d = "M3 6h18" ></ path > < path d = "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 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 > 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
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.
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
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: Option Type Default Description apiEndpointstringundefinedURL of the API endpoint for remote data fetching. When provided, enables remote mode. requestMethod
Import the component and config type from @keenthemes/ktui for typed configuration:
import { KTDataTable, type KTDataTableConfigInterface } from '@keenthemes/ktui' ;
const element = document. querySelector < HTMLElement >( '[data-kt-datatable]' ); if ( ! element) return ;
const config : KTDataTableConfigInterface = { apiEndpoint: '/api/data' , requestMethod: 'GET' , pageSize: 20 , pageSizes: [ 10 , 20 , 50 , 100 ], stateSave: true , stateNamespace: 'my-datatable' , };
const datatable 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 > </ 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 , 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.
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 }); 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-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 }); 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 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); } The component automatically detects whether to use local or remote mode based on your configuration.
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 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 } Customize how each column is displayed and behaves using the columns configuration object.
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="${ 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; } 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); }); } } } }); By default, columns sort as strings. For currency or numeric columns, use sortType: 'numeric' so values like "£123" and "£20" order by number (e.g. 20 before 123). For custom parsing (dates, combined fields), use sortValue:
sortType'string' (default) or 'numeric'. When 'numeric', the component strips non-digits (except . and -) and compares as numbers.sortValue(cellValue, rowData) => number | string. When set, this value is used for comparison instead of the raw cell value; takes precedence over sortType.
Example — price column with numeric sort:
const datatable = new KTDataTable (element, { columns: { price: { title: 'Price' , render : ( value ) => `£${ Number ( value ). toFixed ( 2 ) }` , sortType: 'numeric' // sorts £20 before £123 }, // Or use sortValue for full control: // price: { // sortValue: (value) => Number(String(value).replace(/[^0-9.-]/g, '')) || 0 // } } }); 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.
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 Event Detail Properties initnone drawnone drewnone
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 (); 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
// 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 }); 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
