Local HTML rows with search, sort, pagination, and toolbar controls.
< 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" /> </ 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div > Rows from an API. See the demo.js tab for apiEndpoint, mapResponse, and custom columns.render.
Default request query parameters: page, size, sortField, sortOrder, search, filters.
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 > < 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 >192.168.1.10</ 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 >192.168.1.11</ td > </ tr > < tr > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > < td >192.168.1.2</ td > </ tr > < tr > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > < td >192.168.1.12</ td > </ tr > < tr > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > < td >10.0.0.2</ td > </ tr > < tr > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > < td >192.168.1.4</ td > </ tr > < tr > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > < td >192.168.1.13</ td > </ tr > < tr > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > < td >192.168.1.14</ td > </ tr > < tr > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > < td >192.168.1.1</ td > </ tr > < tr > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > < td >10.0.0.5</ td > </ tr > < tr > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > < td >10.0.0.6</ td > </ tr > < tr > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > < td >10.0.0.7</ td > </ tr > < tr > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > < td >10.0.0.8</ td > </ tr > < tr > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > < td >10.0.0.9</ td > </ tr > < tr > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > < td >10.0.0.10</ td > </ tr > < tr > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > < td >10.0.0.11</ td > </ tr > < tr > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > < td >10.0.0.12</ td > </ tr > < tr > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > < td >10.0.0.15</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Header checkbox plus per-row checkboxes.
< 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" /> </ 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "2" /> </ td > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "3" /> </ td > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "4" /> </ td > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "5" /> </ td > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "6" /> </ td > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "7" /> </ td > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "8" /> </ td > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "9" /> </ td > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "10" /> </ td > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "11" /> </ td > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "12" /> </ td > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "13" /> </ td > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "14" /> </ td > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "15" /> </ td > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "16" /> </ td > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "17" /> </ td > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div > Keep critical left and right columns visible while horizontally scrolling wide tables.
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_locked_columns" /> </ div > < div id = "kt_datatable_locked_columns" class = "kt-card-table" > < div class = "kt-table-wrapper kt-scrollable max-w-full overflow-auto" > < table class = "kt-table min-w-[980px]" data-kt-datatable-table = "true" > < thead > < tr > < th data-kt-datatable-column = "id" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >ID</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th 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 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 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 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 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 > < th data-kt-datatable-column = "region" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Region</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th data-kt-datatable-column = "team" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Team</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > </ tr > </ thead > < tbody > < tr > < td >1</ td > < td >Accounting</ td > < td >Web</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >22 Jul 2024</ td > < td >192.168.1.10</ td > < td >EU-West</ td > < td >Ops</ td > </ tr > < tr > < td >2</ td > < td >Compliance</ td > < td >SSH</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >18 Jul 2024</ td > < td >192.168.1.11</ td > < td >US-East</ td > < td >Security</ td > </ tr > < tr > < td >3</ td > < td >Support</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >15 Jul 2024</ td > < td >192.168.1.2</ td > < td >APAC</ td > < td >Service</ td > </ tr > < tr > < td >4</ td > < td >Legal</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >30 Jul 2024</ td > < td >192.168.1.12</ td > < td >EU-Central</ td > < td >Audit</ td > </ tr > < tr > < td >5</ td > < td >Sales</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >28 Jul 2024</ td > < td >10.0.0.2</ td > < td >US-West</ td > < td >Growth</ td > </ tr > < tr > < td >6</ td > < td >Finance</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >16 Jul 2024</ td > < td >192.168.1.4</ td > < td >MEA</ td > < td >Treasury</ td > </ tr > < tr > < td >7</ td > < td >Operations</ td > < td >OpenID</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >11 Aug 2024</ td > < td >192.168.1.13</ td > < td >LATAM</ td > < td >Platform</ td > </ tr > < tr > < td >8</ td > < td >Marketing</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >19 Jul 2024</ td > < td >192.168.1.14</ td > < td >ANZ</ td > < td >Brand</ td > </ tr > < tr > < td >9</ td > < td >Engineering</ td > < td >Basic auth</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >06 Aug 2024</ td > < td >192.168.1.1</ td > < td >EU-West</ td > < td >Product</ td > </ tr > < tr > < td >10</ td > < td >Procurement</ td > < td >OAuth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >01 Aug 2024</ td > < td >10.0.0.5</ td > < td >US-East</ td > < td >Supply</ td > </ tr > < tr > < td >11</ td > < td >HR</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >03 Aug 2024</ td > < td >10.0.0.6</ td > < td >APAC</ td > < td >People</ td > </ tr > < tr > < td >12</ td > < td >IT</ td > < td >LDAP</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >05 Aug 2024</ td > < td >10.0.0.7</ td > < td >EU-Central</ td > < td >Infra</ td > </ tr > < tr > < td >13</ td > < td >Security</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >07 Aug 2024</ td > < td >10.0.0.8</ td > < td >US-West</ td > < td >Labs</ td > </ tr > < tr > < td >14</ td > < td >Research</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >09 Aug 2024</ td > < td >10.0.0.9</ td > < td >MEA</ td > < td >Revenue</ td > </ tr > < tr > < td >15</ td > < td >Logistics</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >10 Aug 2024</ td > < td >10.0.0.10</ td > < td >LATAM</ td > < td >Compliance</ td > </ tr > < tr > < td >16</ td > < td >Customer Success</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >12 Aug 2024</ td > < td >10.0.0.11</ td > < td >ANZ</ td > < td >Ops</ td > </ tr > < tr > < td >17</ td > < td >Partnerships</ td > < td >Certificate</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >14 Aug 2024</ td > < td >10.0.0.12</ td > < td >EU-West</ td > < td >Security</ td > </ tr > < tr > < td >18</ td > < td >Platform</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >15 Aug 2024</ td > < td >10.0.0.15</ td > < td >US-East</ td > < td >Service</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Keep the header and selected top/bottom rows fixed while vertically scrolling.
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_locked_rows" /> </ div > < div id = "kt_datatable_locked_rows" class = "kt-card-table" > < div class = "kt-table-wrapper kt-scrollable max-h-[420px] overflow-auto" > < table class = "kt-table" data-kt-datatable-table = "true" > < thead > < tr > < th data-kt-datatable-column = "id" >ID</ th > < th data-kt-datatable-column = "label" >Label</ th > < th data-kt-datatable-column = "method" >Method</ th > < th data-kt-datatable-column = "status" >Status</ th > < th data-kt-datatable-column = "lastSession" >Last Session</ th > < th data-kt-datatable-column = "ipAddress" >IP Address</ th > </ tr > </ thead > < tbody > < tr > < td >1</ td > < td >Accounting</ td > < td >Web</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >22 Jul 2024</ td > < td >192.168.1.10</ td > </ tr > < tr > < td >2</ td > < td >Compliance</ td > < td >SSH</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >18 Jul 2024</ td > < td >192.168.1.11</ td > </ tr > < tr > < td >3</ td > < td >Support</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >15 Jul 2024</ td > < td >192.168.1.2</ td > </ tr > < tr > < td >4</ td > < td >Legal</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >30 Jul 2024</ td > < td >192.168.1.12</ td > </ tr > < tr > < td >5</ td > < td >Sales</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >28 Jul 2024</ td > < td >10.0.0.2</ td > </ tr > < tr > < td >6</ td > < td >Finance</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >16 Jul 2024</ td > < td >192.168.1.4</ td > </ tr > < tr > < td >7</ td > < td >Operations</ td > < td >OpenID</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >11 Aug 2024</ td > < td >192.168.1.13</ td > </ tr > < tr > < td >8</ td > < td >Marketing</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >19 Jul 2024</ td > < td >192.168.1.14</ td > </ tr > < tr > < td >9</ td > < td >Engineering</ td > < td >Basic auth</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >06 Aug 2024</ td > < td >192.168.1.1</ td > </ tr > < tr > < td >10</ td > < td >Procurement</ td > < td >OAuth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >01 Aug 2024</ td > < td >10.0.0.5</ td > </ tr > < tr > < td >11</ td > < td >HR</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >03 Aug 2024</ td > < td >10.0.0.6</ td > </ tr > < tr > < td >12</ td > < td >IT</ td > < td >LDAP</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >05 Aug 2024</ td > < td >10.0.0.7</ td > </ tr > < tr > < td >13</ td > < td >Security</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >07 Aug 2024</ td > < td >10.0.0.8</ td > </ tr > < tr > < td >14</ td > < td >Research</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >09 Aug 2024</ td > < td >10.0.0.9</ td > </ tr > < tr > < td >15</ td > < td >Logistics</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >10 Aug 2024</ td > < td >10.0.0.10</ td > </ tr > < tr > < td >16</ td > < td >Customer Success</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >12 Aug 2024</ td > < td >10.0.0.11</ td > </ tr > < tr > < td >17</ td > < td >Partnerships</ td > < td >Certificate</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >14 Aug 2024</ td > < td >10.0.0.12</ td > </ tr > < tr > < td >18</ td > < td >Platform</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >15 Aug 2024</ td > < td >10.0.0.15</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Combine sticky header, sticky rows, and locked columns for dense operational grids.
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_locked_combined" /> </ div > < div id = "kt_datatable_locked_combined" class = "kt-card-table" > < div class = "kt-table-wrapper kt-scrollable max-h-[420px] overflow-auto" > < table class = "kt-table min-w-[980px]" data-kt-datatable-table = "true" > < thead > < tr > < th data-kt-datatable-column = "id" >ID</ th > < th data-kt-datatable-column = "label" >Label</ th > < th data-kt-datatable-column = "method" >Method</ th > < th data-kt-datatable-column = "status" >Status</ th > < th data-kt-datatable-column = "lastSession" >Last Session</ th > < th data-kt-datatable-column = "ipAddress" >IP Address</ th > < th data-kt-datatable-column = "region" >Region</ th > < th data-kt-datatable-column = "team" >Team</ th > </ tr > </ thead > < tbody > < tr > < td >1</ td > < td >Accounting</ td > < td >Web</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >22 Jul 2024</ td > < td >192.168.1.10</ td > < td >EU-West</ td > < td >Ops</ td > </ tr > < tr > < td >2</ td > < td >Compliance</ td > < td >SSH</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >18 Jul 2024</ td > < td >192.168.1.11</ td > < td >US-East</ td > < td >Security</ td > </ tr > < tr > < td >3</ td > < td >Support</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >15 Jul 2024</ td > < td >192.168.1.2</ td > < td >APAC</ td > < td >Service</ td > </ tr > < tr > < td >4</ td > < td >Legal</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >30 Jul 2024</ td > < td >192.168.1.12</ td > < td >EU-Central</ td > < td >Audit</ td > </ tr > < tr > < td >5</ td > < td >Sales</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >28 Jul 2024</ td > < td >10.0.0.2</ td > < td >US-West</ td > < td >Growth</ td > </ tr > < tr > < td >6</ td > < td >Finance</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >16 Jul 2024</ td > < td >192.168.1.4</ td > < td >MEA</ td > < td >Treasury</ td > </ tr > < tr > < td >7</ td > < td >Operations</ td > < td >OpenID</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >11 Aug 2024</ td > < td >192.168.1.13</ td > < td >LATAM</ td > < td >Platform</ td > </ tr > < tr > < td >8</ td > < td >Marketing</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >19 Jul 2024</ td > < td >192.168.1.14</ td > < td >ANZ</ td > < td >Brand</ td > </ tr > < tr > < td >9</ td > < td >Engineering</ td > < td >Basic auth</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >06 Aug 2024</ td > < td >192.168.1.1</ td > < td >EU-West</ td > < td >Product</ td > </ tr > < tr > < td >10</ td > < td >Procurement</ td > < td >OAuth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >01 Aug 2024</ td > < td >10.0.0.5</ td > < td >US-East</ td > < td >Supply</ td > </ tr > < tr > < td >11</ td > < td >HR</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >03 Aug 2024</ td > < td >10.0.0.6</ td > < td >APAC</ td > < td >People</ td > </ tr > < tr > < td >12</ td > < td >IT</ td > < td >LDAP</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >05 Aug 2024</ td > < td >10.0.0.7</ td > < td >EU-Central</ td > < td >Infra</ td > </ tr > < tr > < td >13</ td > < td >Security</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >07 Aug 2024</ td > < td >10.0.0.8</ td > < td >US-West</ td > < td >Labs</ td > </ tr > < tr > < td >14</ td > < td >Research</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >09 Aug 2024</ td > < td >10.0.0.9</ td > < td >MEA</ td > < td >Revenue</ td > </ tr > < tr > < td >15</ td > < td >Logistics</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >10 Aug 2024</ td > < td >10.0.0.10</ td > < td >LATAM</ td > < td >Compliance</ td > </ tr > < tr > < td >16</ td > < td >Customer Success</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >12 Aug 2024</ td > < td >10.0.0.11</ td > < td >ANZ</ td > < td >Ops</ td > </ tr > < tr > < td >17</ td > < td >Partnerships</ td > < td >Certificate</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >14 Aug 2024</ td > < td >10.0.0.12</ td > < td >EU-West</ td > < td >Security</ td > </ tr > < tr > < td >18</ td > < td >Platform</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >15 Aug 2024</ td > < td >10.0.0.15</ td > < td >US-East</ td > < td >Service</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Disable sorting on specific headers with data-kt-datatable-column-sort="false".
< 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_non_sortable" /> </ div > < div id = "kt_datatable_non_sortable" 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" data-kt-datatable-column-sort = "false" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Method (fixed)</ 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div > Call KTDataTable.getInstance(element) after auto-init, then reload() from your own controls.
index.html demo.js
< div class = "grid w-full space-y-5" > < div class = "kt-card" > < div class = "kt-card-header min-h-16 flex w-full flex-wrap items-center justify-between gap-3" > < input type = "text" placeholder = "Search..." class = "kt-input sm:w-48" data-kt-datatable-search = "#kt_datatable_programmatic" />< button type = "button" id = "kt_datatable_programmatic_reload_btn" class = "kt-btn kt-btn-sm kt-btn-primary shrink-0" > Reload </ button > </ div > < div id = "kt_datatable_programmatic" 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Subscribe with datatable.on('sort', …) (see demo.js tab).
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_events" /> </ div > < div id = "kt_datatable_events" 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-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" >< 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "2" /> </ td > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "3" /> </ td > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "4" /> </ td > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "5" /> </ td > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "6" /> </ td > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "7" /> </ td > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "8" /> </ td > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "9" /> </ td > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "10" /> </ td > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "11" /> </ td > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "12" /> </ td > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "13" /> </ td > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "14" /> </ td > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "15" /> </ td > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "16" /> </ td > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "17" /> </ td > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > < div class = "kt-card" > < div class = "kt-card-header border-b border-border py-2.5 text-xs font-medium text-muted-foreground" > Console — logs all events via both < code >.on()</ code > and <!-- --> < code >addEventListener</ code > patterns </ div > < pre id = "kt_datatable_events_log" class = "kt-card-content max-h-48 overflow-y-auto p-4 font-mono text-xs leading-relaxed text-muted-foreground" > Waiting for events…</ pre > </ div > </ div >
Use setFilter({ column, type, value }) to update server-side filters, then call reload() so the next request includes them. The built-in query string sends filters as JSON; mapRequest can reshape that for your API (this demo maps a status filter to a plain status query parameter).
The preview uses the docs-only endpoint /api/docs/datatable
index.html demo.js
< div class = "grid w-full space-y-5" > < div class = "kt-card" > < div class = "kt-card-header min-h-16 flex flex-wrap items-center gap-3" > < input type = "text" placeholder = "Search..." class = "kt-input kt-input-sm sm:w-48" data-kt-datatable-search = "#kt_datatable_remote_filters" />< label class = "flex items-center gap-2 text-sm" >< span class = "text-muted-foreground" >Status</ span >< select id = "kt_datatable_remote_filters_status" class = "kt-select kt-select-sm w-44" > < option value = "" selected = "" >All</ option > < option value = "kt-badge-success" >Active</ option > < option value = "kt-badge-destructive" >Rejected</ option > < option value = "kt-badge-warning" >Pending</ option > < option value = "kt-badge-primary" >Verified</ option > < option value = "kt-badge-secondary" >Draft</ option > < option value = "kt-badge-info" >In Review</ option > < option value = "kt-badge-mono" >Archived</ option > </ select ></ label >< button type = "button" id = "kt_datatable_remote_filters_apply" class = "kt-btn kt-btn-sm kt-btn-primary" > Apply filter </ button > </ div > < div id = "kt_datatable_remote_filters" class = "kt-card-table relative" data-kt-datatable-page-size = "5" > < 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 > < 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 >192.168.1.10</ 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 >192.168.1.11</ td > </ tr > < tr > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > < td >192.168.1.2</ td > </ tr > < tr > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > < td >192.168.1.12</ td > </ tr > < tr > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > < td >10.0.0.2</ td > </ tr > < tr > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > < td >192.168.1.4</ td > </ tr > < tr > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > < td >192.168.1.13</ td > </ tr > < tr > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > < td >192.168.1.14</ td > </ tr > < tr > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > < td >192.168.1.1</ td > </ tr > < tr > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > < td >10.0.0.5</ td > </ tr > < tr > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > < td >10.0.0.6</ td > </ tr > < tr > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > < td >10.0.0.7</ td > </ tr > < tr > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > < td >10.0.0.8</ td > </ tr > < tr > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > < td >10.0.0.9</ td > </ tr > < tr > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > < td >10.0.0.10</ td > </ tr > < tr > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > < td >10.0.0.11</ td > </ tr > < tr > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > < td >10.0.0.12</ td > </ tr > < tr > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > < td >10.0.0.15</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Non-sortable actions header plus columns.actions.render for trailing controls (icons are inline SVG in the demo script).
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_actions" /> </ div > < div id = "kt_datatable_remote_actions" class = "kt-card-table relative" data-kt-datatable-page-size = "5" > < 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-28 text-end" data-kt-datatable-column = "actions" data-kt-datatable-column-sort = "false" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Actions</ span ></ span > </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Override local sorting and matching: salary cells use currency text while the sort callback parses numeric amounts; search matches name, department, and office, but not salary.
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 name, department, or office…" class = "kt-input sm:w-72" data-kt-datatable-search = "#kt_datatable_local_callbacks" /> </ div > < div id = "kt_datatable_local_callbacks" class = "kt-card-table" data-kt-datatable-page-size = "5" > < div class = "kt-table-wrapper kt-scrollable" > < table class = "kt-table" data-kt-datatable-table = "true" > < thead > < tr > < th scope = "col" class = "w-40" 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 > < th scope = "col" class = "w-32" data-kt-datatable-column = "department" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Department</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th scope = "col" class = "w-28" data-kt-datatable-column = "office" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Office</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th scope = "col" class = "w-28" 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-28 text-end" data-kt-datatable-column = "salary" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Salary</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > </ tr > </ thead > < tbody > < tr > < td >Ana Costa</ td > < td >Engineering</ td > < td >New York</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td class = "text-end font-mono text-sm" >$118,400</ td > </ tr > < tr > < td >Ben Okafor</ td > < td >Design</ td > < td >London</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td class = "text-end font-mono text-sm" >$96,200</ td > </ tr > < tr > < td >Chen Wei</ td > < td >Support</ td > < td >Singapore</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td class = "text-end font-mono text-sm" >$124,900</ td > </ tr > < tr > < td >Dana Singh</ td > < td >Finance</ td > < td >Austin</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td class = "text-end font-mono text-sm" >$72,500</ td > </ tr > < tr > < td >Eli Navarro</ td > < td >Marketing</ td > < td >Berlin</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td class = "text-end font-mono text-sm" >$131,000</ td > </ tr > < tr > < td >Fatima Noor</ td > < td >Operations</ td > < td >Dubai</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td class = "text-end font-mono text-sm" >$88,300</ td > </ tr > < tr > < td >Gus Park</ td > < td >Engineering</ td > < td >Toronto</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td class = "text-end font-mono text-sm" >$91,750</ td > </ tr > < tr > < td >Hana Ito</ td > < td >Design</ td > < td >Tokyo</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td class = "text-end font-mono text-sm" >$69,900</ td > </ tr > < tr > < td >Ivan Petrov</ td > < td >Support</ td > < td >New York</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td class = "text-end font-mono text-sm" >$102,000</ td > </ tr > < tr > < td >Jules Martin</ td > < td >Finance</ td > < td >London</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td class = "text-end font-mono text-sm" >$119,500</ td > </ tr > < tr > < td >Kira Bloom</ td > < td >Marketing</ td > < td >Singapore</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td class = "text-end font-mono text-sm" >$84,200</ td > </ tr > < tr > < td >Leo Santos</ td > < td >Operations</ td > < td >Austin</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td class = "text-end font-mono text-sm" >$97,600</ td > </ tr > < tr > < td >Ana Costa</ td > < td >Engineering</ td > < td >Berlin</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td class = "text-end font-mono text-sm" >$118,400</ td > </ tr > < tr > < td >Ben Okafor</ td > < td >Design</ td > < td >Dubai</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td class = "text-end font-mono text-sm" >$96,200</ td > </ tr > < tr > < td >Chen Wei</ td > < td >Support</ td > < td >Toronto</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td class = "text-end font-mono text-sm" >$124,900</ td > </ tr > < tr > < td >Dana Singh</ td > < td >Finance</ td > < td >Tokyo</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td class = "text-end font-mono text-sm" >$72,500</ td > </ tr > < tr > < td >Eli Navarro</ td > < td >Marketing</ td > < td >New York</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td class = "text-end font-mono text-sm" >$131,000</ td > </ tr > < tr > < td >Fatima Noor</ td > < td >Operations</ td > < td >London</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td class = "text-end font-mono text-sm" >$88,300</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Two tables: one adds slow via mapRequest so the default loading overlay stays visible longer; the other requests an empty page and sets infoEmpty for the placeholder row.
index.html demo.js
< div class = "grid w-full gap-8" > < div class = "space-y-3" > < h3 class = "text-base font-medium" >Slow request (spinner)</ h3 > < p class = "text-muted-foreground text-sm" > < code class = "text-foreground" >mapRequest</ code > adds a <!-- --> < code class = "text-foreground" >slow</ code > millisecond delay so the default loading overlay is visible on each fetch. </ p > < 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_slow" /> </ div > < div id = "kt_datatable_remote_slow" class = "kt-card-table relative" data-kt-datatable-page-size = "5" > < 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 > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div > < div class = "space-y-3" > < h3 class = "text-base font-medium" >Empty result</ h3 > < p class = "text-muted-foreground text-sm" > Uses < code class = "text-foreground" >mapRequest</ code > with < code class = "text-foreground" >empty=1</ code > <!-- --> and a custom < code class = "text-foreground" >infoEmpty</ code > template. </ p > < div class = "kt-card" > < div id = "kt_datatable_remote_empty" class = "kt-card-table relative" data-kt-datatable-page-size = "5" > < 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 > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div > </ div >
Remote pagination with checkboxes rendered from columns.id.render, checkbox.preserveSelection: true, and stable row id values from the API.
index.html demo.js
< div class = "grid w-full space-y-5" > < div class = "kt-card" > < div class = "kt-card-header min-h-16 flex flex-wrap items-center gap-3" > < input type = "text" placeholder = "Search..." class = "kt-input sm:w-48" data-kt-datatable-search = "#kt_datatable_remote_selection" />< button type = "button" id = "kt_datatable_remote_selection_log" class = "kt-btn kt-btn-sm kt-btn-outline" > Log selection </ button > </ div > < div id = "kt_datatable_remote_selection" class = "kt-card-table relative" data-kt-datatable-page-size = "5" > < div class = "kt-table-wrapper kt-scrollable" > < table class = "kt-table" data-kt-datatable-table = "true" > < thead > < tr > < th scope = "col" class = "w-10" data-kt-datatable-column = "id" data-kt-datatable-column-sort = "false" > < 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" >< 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 > </ 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 > </ 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 > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "2" /> </ td > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "3" /> </ td > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "4" /> </ td > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "5" /> </ td > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "6" /> </ td > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "7" /> </ td > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "8" /> </ td > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "9" /> </ td > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "10" /> </ td > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "11" /> </ td > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "12" /> </ td > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "13" /> </ td > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "14" /> </ td > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "15" /> </ td > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "16" /> </ td > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "17" /> </ td > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Sort, paginate, select rows, then refresh the page — your state persists via stateSave: true and localStorage. Uses stateNamespace to isolate from other demos.
< 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_state_persistence" /> </ div > < div id = "kt_datatable_state_persistence" class = "kt-card-table" data-kt-datatable = "true" data-kt-datatable-page-size = "5" data-kt-datatable-state-save = "true" data-kt-datatable-state-namespace = "kt-docs-state-demo" > < 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" >< 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 > </ 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 > </ 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 > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "2" /> </ td > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "3" /> </ td > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "4" /> </ td > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "5" /> </ td > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "6" /> </ td > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "7" /> </ td > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "8" /> </ td > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "9" /> </ td > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "10" /> </ td > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "11" /> </ td > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "12" /> </ td > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "13" /> </ td > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "14" /> </ td > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "15" /> </ td > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "16" /> </ td > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "17" /> </ td > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > < div class = "kt-card" > < div class = "kt-card-content" > < div class = "flex items-center gap-2 text-sm text-muted-foreground" > < 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-info size-4 shrink-0" aria-hidden = "true" > < circle cx = "12" cy = "12" r = "10" ></ circle > < path d = "M12 16v-4" ></ path > < path d = "M12 8h.01" ></ path ></ svg >< span >State is saved to localStorage. Sort, paginate, select rows, then refresh the page — your state persists.</ span > </ div > </ div > </ div > </ div > Column-level filtering with setFilter({ column, type, value }) on local data. Chain multiple filters and call reload() to apply.
index.html demo.js
< div class = "grid w-full space-y-5" > < div class = "kt-card" > < div class = "kt-card-header flex flex-wrap items-center gap-x-3 gap-y-2.5 py-4" > < input type = "text" placeholder = "Search..." class = "kt-input kt-input-sm sm:w-48" data-kt-datatable-search = "#kt_datatable_local_filters" />< label class = "flex items-center gap-2 text-sm" >< span class = "text-muted-foreground" >Status</ span >< select id = "kt_datatable_local_filters_status" class = "kt-select kt-select-sm w-44" > < option value = "" selected = "" >All</ option > < option value = "kt-badge-success" >Active</ option > < option value = "kt-badge-destructive" >Rejected</ option > < option value = "kt-badge-warning" >Pending</ option > < option value = "kt-badge-primary" >Verified</ option > < option value = "kt-badge-secondary" >Draft</ option > < option value = "kt-badge-info" >In Review</ option > < option value = "kt-badge-mono" >Archived</ option > </ select ></ label >< label class = "flex items-center gap-2 text-sm" >< span class = "text-muted-foreground" >Method</ span >< select id = "kt_datatable_local_filters_method" class = "kt-select kt-select-sm w-36" > < option value = "" selected = "" >All</ option > < option value = "API Key" >API Key</ option > < option value = "Basic auth" >Basic auth</ option > < option value = "Biometric" >Biometric</ option > < option value = "Certificate" >Certificate</ option > < option value = "FIDO U2F" >FIDO U2F</ option > < option value = "FIDO2" >FIDO2</ option > < option value = "Kerberos" >Kerberos</ option > < option value = "LDAP" >LDAP</ option > < option value = "Magic Link" >Magic Link</ option > < option value = "OAuth" >OAuth</ option > < option value = "OpenID" >OpenID</ option > < option value = "Passkey" >Passkey</ option > < option value = "SAML" >SAML</ option > < option value = "SSH" >SSH</ option > < option value = "Smart Card" >Smart Card</ option > < option value = "Token" >Token</ option > < option value = "Web" >Web</ option > < option value = "WebAuthn" >WebAuthn</ option > </ select ></ label > < div class = "flex items-center gap-2" > < button type = "button" id = "kt_datatable_local_filters_clear" class = "kt-btn kt-btn-sm kt-btn-outline" > Clear</ button >< button type = "button" id = "kt_datatable_local_filters_apply" class = "kt-btn kt-btn-sm kt-btn-primary" > Apply </ button > </ div > </ div > < div id = "kt_datatable_local_filters" class = "kt-card-table relative" data-kt-datatable-page-size = "5" > < 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 > </ 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 > </ 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 > </ tr > < tr > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > </ tr > < tr > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > </ tr > < tr > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > </ tr > < tr > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > </ tr > < tr > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > </ tr > < tr > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > </ tr > < tr > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > </ tr > < tr > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > </ tr > < tr > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > </ tr > < tr > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > </ tr > < tr > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > </ tr > < tr > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > </ tr > < tr > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > </ tr > < tr > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > </ tr > < tr > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > </ tr > < tr > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Checkbox selection with a dynamic toolbar that appears when rows are checked. Shows selected count plus bulk action buttons (Delete, Export, Tag).
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_bulk_actions" /> </ div > < div id = "kt_datatable_bulk_actions" class = "kt-card-table" data-kt-datatable-page-size = "5" > < div id = "kt_datatable_bulk_actions_bar" class = "hidden items-center gap-3 rounded-t-lg border-b border-border bg-muted/50 px-4 py-2.5 text-sm" > < span id = "kt_datatable_bulk_actions_count" class = "font-medium" >0 selected</ span > < div class = "flex gap-2" > < button type = "button" class = "kt-btn kt-btn-sm kt-btn-destructive-outline" data-kt-datatable-bulk-action = "delete" > Delete</ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-outline" data-kt-datatable-bulk-action = "export" > Export</ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-outline" data-kt-datatable-bulk-action = "tag" > Tag </ button > </ div > </ div > < 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ 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" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "2" /> </ td > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "3" /> </ td > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "4" /> </ td > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "5" /> </ td > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "6" /> </ td > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "7" /> </ td > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "8" /> </ td > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "9" /> </ td > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "10" /> </ td > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "11" /> </ td > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "12" /> </ td > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "13" /> </ td > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "14" /> </ td > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "15" /> </ td > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "16" /> </ td > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "17" /> </ td > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > < td class = "text-end" > < span class = "inline-flex gap-2.5" >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Edit" > < 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 ></ button >< button type = "button" class = "kt-btn kt-btn-sm kt-btn-icon kt-btn-outline" aria-label = "Delete" > < 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 ></ button ></ span > </ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
tableLayout: 'fixed' with <colgroup> keeps column widths stable across pagination. Without it, the browser recalculates widths per page based on content.
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_fixed_layout" /> </ div > < div id = "kt_datatable_fixed_layout" class = "kt-card-table" > < div class = "kt-table-wrapper kt-scrollable" > < table class = "kt-table" style = "table-layout: fixed; width: 100%" data-kt-datatable-table = "true" > < colgroup > < col style = "width: 50px" /> < col style = "width: 120px" /> < col style = "width: 90px" /> < col style = "width: 100px" /> < col style = "width: 110px" /> < col style = "width: 110px" /> < col style = "width: 90px" /> < col /> </ colgroup > < thead > < tr > < th scope = "col" data-kt-datatable-column = "id" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >ID</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th scope = "col" 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" 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" 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" 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" 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 > < th scope = "col" data-kt-datatable-column = "region" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Region</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th scope = "col" data-kt-datatable-column = "team" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Team</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > </ tr > </ thead > < tbody > < tr > < td >1</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Accounting </ td > < td >Web</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >22 Jul 2024</ td > < td >192.168.1.10</ td > < td >EU-West</ td > < td >Ops</ td > </ tr > < tr > < td >2</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Compliance </ td > < td >SSH</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >18 Jul 2024</ td > < td >192.168.1.11</ td > < td >US-East</ td > < td >Security</ td > </ tr > < tr > < td >3</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Support </ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >15 Jul 2024</ td > < td >192.168.1.2</ td > < td >APAC</ td > < td >Service</ td > </ tr > < tr > < td >4</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Legal </ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >30 Jul 2024</ td > < td >192.168.1.12</ td > < td >EU-Central</ td > < td >Audit</ td > </ tr > < tr > < td >5</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Sales </ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >28 Jul 2024</ td > < td >10.0.0.2</ td > < td >US-West</ td > < td >Growth</ td > </ tr > < tr > < td >6</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Finance </ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >16 Jul 2024</ td > < td >192.168.1.4</ td > < td >MEA</ td > < td >Treasury</ td > </ tr > < tr > < td >7</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Operations </ td > < td >OpenID</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >11 Aug 2024</ td > < td >192.168.1.13</ td > < td >LATAM</ td > < td >Platform</ td > </ tr > < tr > < td >8</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Marketing </ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >19 Jul 2024</ td > < td >192.168.1.14</ td > < td >ANZ</ td > < td >Brand</ td > </ tr > < tr > < td >9</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Engineering </ td > < td >Basic auth</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >06 Aug 2024</ td > < td >192.168.1.1</ td > < td >EU-West</ td > < td >Product</ td > </ tr > < tr > < td >10</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Procurement </ td > < td >OAuth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >01 Aug 2024</ td > < td >10.0.0.5</ td > < td >US-East</ td > < td >Supply</ td > </ tr > < tr > < td >11</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > HR </ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >03 Aug 2024</ td > < td >10.0.0.6</ td > < td >APAC</ td > < td >People</ td > </ tr > < tr > < td >12</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > IT </ td > < td >LDAP</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >05 Aug 2024</ td > < td >10.0.0.7</ td > < td >EU-Central</ td > < td >Infra</ td > </ tr > < tr > < td >13</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Security </ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >07 Aug 2024</ td > < td >10.0.0.8</ td > < td >US-West</ td > < td >Labs</ td > </ tr > < tr > < td >14</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Research </ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >09 Aug 2024</ td > < td >10.0.0.9</ td > < td >MEA</ td > < td >Revenue</ td > </ tr > < tr > < td >15</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Logistics </ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >10 Aug 2024</ td > < td >10.0.0.10</ td > < td >LATAM</ td > < td >Compliance</ td > </ tr > < tr > < td >16</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Customer Success </ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >12 Aug 2024</ td > < td >10.0.0.11</ td > < td >ANZ</ td > < td >Ops</ td > </ tr > < tr > < td >17</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Partnerships </ td > < td >Certificate</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >14 Aug 2024</ td > < td >10.0.0.12</ td > < td >EU-West</ td > < td >Security</ td > </ tr > < tr > < td >18</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Platform </ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >15 Aug 2024</ td > < td >10.0.0.15</ td > < td >US-East</ td > < td >Service</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Explicit column widths via columns[key].width or data-kt-datatable-column-width on <th>. Text truncation with ellipsis on fixed-width columns; one flex column absorbs remaining space.
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_column_widths" /> </ div > < div id = "kt_datatable_column_widths" class = "kt-card-table" > < div class = "kt-table-wrapper kt-scrollable" > < table class = "kt-table" style = "table-layout: fixed; width: 100%" data-kt-datatable-table = "true" > < colgroup > < col style = "width: 60px" /> < col style = "width: 140px" /> < col style = "width: 100px" /> < col style = "width: 110px" /> < col style = "width: 120px" /> < col /> </ colgroup > < thead > < tr > < th scope = "col" data-kt-datatable-column = "id" data-kt-datatable-column-width = "60px" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >ID</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th scope = "col" data-kt-datatable-column = "label" data-kt-datatable-column-width = "140px" > < 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" data-kt-datatable-column = "method" data-kt-datatable-column-width = "100px" > < 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" data-kt-datatable-column = "status" data-kt-datatable-column-width = "110px" > < 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" data-kt-datatable-column = "lastSession" data-kt-datatable-column-width = "120px" > < 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" 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 > < tr > < td >1</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Accounting </ td > < td >Web</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >22 Jul 2024</ td > < td >192.168.1.10</ td > </ tr > < tr > < td >2</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Compliance </ td > < td >SSH</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >18 Jul 2024</ td > < td >192.168.1.11</ td > </ tr > < tr > < td >3</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Support </ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >15 Jul 2024</ td > < td >192.168.1.2</ td > </ tr > < tr > < td >4</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Legal </ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >30 Jul 2024</ td > < td >192.168.1.12</ td > </ tr > < tr > < td >5</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Sales </ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >28 Jul 2024</ td > < td >10.0.0.2</ td > </ tr > < tr > < td >6</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Finance </ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >16 Jul 2024</ td > < td >192.168.1.4</ td > </ tr > < tr > < td >7</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Operations </ td > < td >OpenID</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >11 Aug 2024</ td > < td >192.168.1.13</ td > </ tr > < tr > < td >8</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Marketing </ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >19 Jul 2024</ td > < td >192.168.1.14</ td > </ tr > < tr > < td >9</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Engineering </ td > < td >Basic auth</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >06 Aug 2024</ td > < td >192.168.1.1</ td > </ tr > < tr > < td >10</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Procurement </ td > < td >OAuth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >01 Aug 2024</ td > < td >10.0.0.5</ td > </ tr > < tr > < td >11</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > HR </ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >03 Aug 2024</ td > < td >10.0.0.6</ td > </ tr > < tr > < td >12</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > IT </ td > < td >LDAP</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >05 Aug 2024</ td > < td >10.0.0.7</ td > </ tr > < tr > < td >13</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Security </ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >07 Aug 2024</ td > < td >10.0.0.8</ td > </ tr > < tr > < td >14</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Research </ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >09 Aug 2024</ td > < td >10.0.0.9</ td > </ tr > < tr > < td >15</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Logistics </ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >10 Aug 2024</ td > < td >10.0.0.10</ td > </ tr > < tr > < td >16</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Customer Success </ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >12 Aug 2024</ td > < td >10.0.0.11</ td > </ tr > < tr > < td >17</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Partnerships </ td > < td >Certificate</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >14 Aug 2024</ td > < td >10.0.0.12</ td > </ tr > < tr > < td >18</ td > < td class = "overflow-hidden text-ellipsis whitespace-nowrap" > Platform </ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >15 Aug 2024</ td > < td >10.0.0.15</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Rich cell content via columns[key].render — avatars with names, color-coded stock levels, star ratings, category badges, and monospace prices.
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_custom_cells" /> </ div > < div id = "kt_datatable_custom_cells" class = "kt-card-table" data-kt-datatable-page-size = "5" > < div class = "kt-table-wrapper kt-scrollable" > < table class = "kt-table" data-kt-datatable-table = "true" > < thead > < tr > < th scope = "col" class = "w-48" data-kt-datatable-column = "name" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Product</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th scope = "col" class = "w-24" data-kt-datatable-column = "sku" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >SKU</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th scope = "col" class = "w-24" data-kt-datatable-column = "price" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Price</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th scope = "col" class = "w-28" data-kt-datatable-column = "stock" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Stock</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th scope = "col" class = "w-28" data-kt-datatable-column = "category" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Category</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th scope = "col" class = "w-28" data-kt-datatable-column = "rating" > < span class = "kt-table-col" >< span class = "kt-table-col-label" >Rating</ span >< span class = "kt-table-col-sort" ></ span ></ span > </ th > < th scope = "col" class = "w-28" 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 > </ tr > </ thead > < tbody > < tr > < td >Wireless Headphones</ td > < td >WH-1000</ td > < td >$149.00</ td > < td >82</ td > < td >Audio</ td > < td >4.6</ td > < td >Approved</ td > </ tr > < tr > < td >USB-C Hub</ td > < td >UCH-300</ td > < td >$59.00</ td > < td >134</ td > < td >Accessories</ td > < td >4.2</ td > < td >Rejected</ td > </ tr > < tr > < td >Mechanical Keyboard</ td > < td >MK-870</ td > < td >$129.00</ td > < td >47</ td > < td >Peripherals</ td > < td >4.8</ td > < td >Pending</ td > </ tr > < tr > < td >Webcam HD</ td > < td >WC-1080</ td > < td >$89.00</ td > < td >23</ td > < td >Video</ td > < td >4.1</ td > < td >Verified</ td > </ tr > < tr > < td >Monitor Stand</ td > < td >MS-200</ td > < td >$45.00</ td > < td >91</ td > < td >Furniture</ td > < td >3.9</ td > < td >Draft</ td > </ tr > < tr > < td >Desk Lamp</ td > < td >DL-LED</ td > < td >$39.00</ td > < td >67</ td > < td >Lighting</ td > < td >4.4</ td > < td >In Review</ td > </ tr > < tr > < td >Ergonomic Mouse</ td > < td >EM-500</ td > < td >$79.00</ td > < td >8</ td > < td >Peripherals</ td > < td >4.7</ td > < td >Archived</ td > </ tr > < tr > < td >Cable Organizer</ td > < td >CO-PRO</ td > < td >$19.00</ td > < td >150</ td > < td >Accessories</ td > < td >3.5</ td > < td >Active</ td > </ tr > < tr > < td >Laptop Sleeve</ td > < td >LS-1560</ td > < td >$35.00</ td > < td >56</ td > < td >Protection</ td > < td >4</ td > < td >Suspended</ td > </ tr > < tr > < td >Screen Protector</ td > < td >SP-GLASS</ td > < td >$15.00</ td > < td >110</ td > < td >Protection</ td > < td >3.8</ td > < td >Expiring</ td > </ tr > < tr > < td >Charging Dock</ td > < td >CD-100</ td > < td >$69.00</ td > < td >42</ td > < td >Charging</ td > < td >4.3</ td > < td >Approved</ td > </ tr > < tr > < td >Bluetooth Speaker</ td > < td >BS-360</ td > < td >$99.00</ td > < td >28</ td > < td >Audio</ td > < td >4.5</ td > < td >Rejected</ td > </ tr > < tr > < td >Trackpad</ td > < td >TP-MAGIC</ td > < td >$149.00</ td > < td >19</ td > < td >Peripherals</ td > < td >4.6</ td > < td >Pending</ td > </ tr > < tr > < td >USB Microphone</ td > < td >UM-COND</ td > < td >$119.00</ td > < td >73</ td > < td >Audio</ td > < td >4.9</ td > < td >Verified</ td > </ tr > < tr > < td >Ring Light</ td > < td >RL-12</ td > < td >$29.00</ td > < td >95</ td > < td >Lighting</ td > < td >4.2</ td > < td >Draft</ td > </ tr > < tr > < td >Desk Mat</ td > < td >DM-XXL</ td > < td >$25.00</ td > < td >5</ td > < td >Accessories</ td > < td >3.7</ td > < td >In Review</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div >
Visual variants: default, bordered (kt-table-border), striped (alternating row colors), and compact (tighter spacing).
< div class = "grid w-full space-y-5" > < div class = "kt-card" > < div class = "kt-card-header" > < h3 class = "kt-card-title" >Default Style</ h3 > </ div > < div id = "kt_datatable_style_default" class = "kt-card-table" data-kt-datatable = "true" data-kt-datatable-page-size = "5" > < 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 > </ 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 > </ 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 > </ tr > < tr > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > </ tr > < tr > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > </ tr > < tr > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > </ tr > < tr > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > </ tr > < tr > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > </ tr > < tr > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > </ tr > < tr > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > </ tr > < tr > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > </ tr > < tr > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > </ tr > < tr > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > </ tr > < tr > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > </ tr > < tr > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > </ tr > < tr > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > </ tr > < tr > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > </ tr > < tr > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > </ tr > < tr > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > < div class = "kt-card" > < div class = "kt-card-header" > < h3 class = "kt-card-title" >Bordered Style</ h3 > </ div > < div id = "kt_datatable_style_bordered" class = "kt-card-table" data-kt-datatable = "true" data-kt-datatable-page-size = "5" > < 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-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 > </ 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 > </ 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 > </ tr > < tr > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > </ tr > < tr > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > </ tr > < tr > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > </ tr > < tr > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > </ tr > < tr > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > </ tr > < tr > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > </ tr > < tr > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > </ tr > < tr > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > </ tr > < tr > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > </ tr > < tr > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > </ tr > < tr > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > </ tr > < tr > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > </ tr > < tr > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > </ tr > < tr > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > </ tr > < tr > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > </ tr > < tr > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > < div class = "kt-card" > < div class = "kt-card-header" > < h3 class = "kt-card-title" >Striped Style</ h3 > </ div > < div id = "kt_datatable_style_striped" class = "kt-card-table" data-kt-datatable = "true" data-kt-datatable-page-size = "5" > < div class = "kt-table-wrapper kt-scrollable" > < table class = "kt-table [ & _tbody_tr:nth-child(even)]:bg-muted/30" 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 > </ 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 > </ 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 > </ tr > < tr > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > </ tr > < tr > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > </ tr > < tr > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > </ tr > < tr > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > </ tr > < tr > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > </ tr > < tr > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > </ tr > < tr > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > </ tr > < tr > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > </ tr > < tr > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > </ tr > < tr > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > </ tr > < tr > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > </ tr > < tr > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > </ tr > < tr > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > </ tr > < tr > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > </ tr > < tr > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > </ tr > < tr > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > < div class = "kt-card" > < div class = "kt-card-header" > < h3 class = "kt-card-title" >Compact Style</ h3 > </ div > < div id = "kt_datatable_style_compact" class = "kt-card-table" data-kt-datatable = "true" data-kt-datatable-page-size = "5" > < div class = "kt-table-wrapper kt-scrollable" > < table class = "kt-table [ & _td]:py-1.5 [ & _th]:h-8" 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 > </ 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 > </ 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 > </ tr > < tr > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > </ tr > < tr > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > </ tr > < tr > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > </ tr > < tr > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > </ tr > < tr > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > </ tr > < tr > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > </ tr > < tr > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > </ tr > < tr > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > </ tr > < tr > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > </ tr > < tr > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > </ tr > < tr > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > </ tr > < tr > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > </ tr > < tr > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > </ tr > < tr > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > </ tr > < tr > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > </ tr > < tr > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div > Grouped columns using colspan and rowspan in <thead> for logical column grouping (e.g., "Authentication" spanning Label + Method + Status).
Default empty behavior vs. custom empty state with icon and helper text for better UX when there's no data.
< div class = "grid w-full space-y-5" > < div class = "kt-card" > < div class = "kt-card-header min-h-16" > < h3 class = "kt-card-title" >Default Empty State</ h3 > </ div > < div id = "kt_datatable_empty_default" class = "kt-card-table" data-kt-datatable = "true" data-kt-datatable-page-size = "5" > < 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 > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > < div class = "kt-card" > < div class = "kt-card-header min-h-16" > < h3 class = "kt-card-title" >Custom Empty State</ h3 > </ div > < div id = "kt_datatable_empty_custom" class = "kt-card-table" data-kt-datatable = "true" data-kt-datatable-page-size = "5" data-kt-datatable-info-empty = ' < div class="flex flex-col items-center justify-center py-10 text-center" >< svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground/50" >< path d="M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3" >< /path >< path d="M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3" >< /path >< path d="m9 12 3-3 3 3" >< /path >< path d="M12 15V9" >< /path >< /svg >< p class="text-sm font-medium text-foreground" > No records found < /p >< p class="text-sm text-muted-foreground" > Try adjusting your search or filter to find what you are looking for. < /p >< /div > ' > < 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 > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > </ div > Interactive buttons calling goPage(), sort(), search(), setPageSize(), getState(), and getChecked() — the full JavaScript API surface.
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" id = "kt_datatable_api_search" data-kt-datatable-search = "#kt_datatable_api_demo" /> </ div > < div id = "kt_datatable_api_demo" class = "kt-card-table" > < div class = "kt-table-wrapper kt-scrollable" > < table class = "kt-table" 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" >< 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 > </ 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 > </ 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 > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "2" /> </ td > < td >Legal Dept</ td > < td >Kerberos</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >15 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "3" /> </ td > < td >Finance Dept</ td > < td >Token</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >30 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "4" /> </ td > < td >Design Dept</ td > < td >API Key</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >28 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "5" /> </ td > < td >Compliance Dept</ td > < td >FIDO U2F</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >16 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "6" /> </ td > < td >Alice Smith</ td > < td >OpenID</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >11 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "7" /> </ td > < td >HR Dept</ td > < td >Biometric</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >19 Jul 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "8" /> </ td > < td >Platform Team</ td > < td >Basic auth</ td > < td > < span class = "kt-badge kt-badge-destructive" >Suspended</ span > </ td > < td >06 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "9" /> </ td > < td >Security Ops</ td > < td >OAuth</ td > < td >< span class = "kt-badge kt-badge-warning" >Expiring</ span ></ td > < td >01 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "10" /> </ td > < td >Data Team</ td > < td >SAML</ td > < td >< span class = "kt-badge kt-badge-success" >Approved</ span ></ td > < td >03 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "11" /> </ td > < td >Mobile Squad</ td > < td >LDAP</ td > < td > < span class = "kt-badge kt-badge-destructive" >Rejected</ span > </ td > < td >05 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "12" /> </ td > < td >Infra Bot</ td > < td >Passkey</ td > < td >< span class = "kt-badge kt-badge-warning" >Pending</ span ></ td > < td >07 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "13" /> </ td > < td >QA Lab</ td > < td >Magic Link</ td > < td >< span class = "kt-badge kt-badge-primary" >Verified</ span ></ td > < td >09 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "14" /> </ td > < td >Docs Guild</ td > < td >Smart Card</ td > < td >< span class = "kt-badge kt-badge-secondary" >Draft</ span ></ td > < td >10 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "15" /> </ td > < td >Support Tier 1</ td > < td >WebAuthn</ td > < td >< span class = "kt-badge kt-badge-info" >In Review</ span ></ td > < td >12 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "16" /> </ td > < td >Release Train</ td > < td >Certificate</ td > < td >< span class = "kt-badge kt-badge-mono" >Archived</ span ></ td > < td >14 Aug 2024</ td > </ tr > < tr > < td > < input type = "checkbox" class = "kt-checkbox" data-kt-datatable-row-check = "true" value = "17" /> </ td > < td >Archive User</ td > < td >FIDO2</ td > < td >< span class = "kt-badge kt-badge-success" >Active</ span ></ td > < td >15 Aug 2024</ td > </ tr > </ tbody > </ table > </ div > < template > <!--begin:pagination--> </ template > < 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 > < template > <!--end:pagination--> </ template > </ div > </ div > < div class = "kt-card min-w-0" > < div class = "kt-card-content w-full min-w-0" > < div class = "flex flex-wrap gap-2" > < button type = "button" id = "kt_datatable_api_page1" class = "kt-btn kt-btn-sm kt-btn-outline" > Page 1</ button >< button type = "button" id = "kt_datatable_api_page2" class = "kt-btn kt-btn-sm kt-btn-outline" > Page 2</ button >< button type = "button" id = "kt_datatable_api_page3" class = "kt-btn kt-btn-sm kt-btn-outline" > Page 3</ button >< button type = "button" id = "kt_datatable_api_page4" class = "kt-btn kt-btn-sm kt-btn-outline" > Page 4 </ button > </ div > < div class = "mt-3 flex flex-wrap gap-2" > < button type = "button" id = "kt_datatable_api_sort" class = "kt-btn kt-btn-sm kt-btn-outline" > Sort by Status (asc)</ button >< button type = "button" id = "kt_datatable_api_search_btn" class = "kt-btn kt-btn-sm kt-btn-outline" > Search ' Web ' </ button >< button type = "button" id = "kt_datatable_api_pagesize" class = "kt-btn kt-btn-sm kt-btn-outline" > Set Page Size 10</ button >< button type = "button" id = "kt_datatable_api_state" class = "kt-btn kt-btn-sm kt-btn-primary" > Show State</ button >< button type = "button" id = "kt_datatable_api_reset" class = "kt-btn kt-btn-sm kt-btn-destructive-outline" > Reset </ button > </ div > < pre id = "kt_datatable_api_state_output" class = "mt-3 box-border w-full min-w-0 max-w-full max-h-32 min-h-24 overflow-auto rounded bg-muted p-3 font-mono text-xs whitespace-pre-wrap break-words" ></ pre > </ div > </ div > </ div >
Attribute Use data-kt-datatable="true"Auto-initializes the component. data-kt-datatable-table="true"Marks the table element. data-kt-datatable-column="name"Maps a <th> to a row field.
Option Default Use apiEndpointundefinedEnables remote mode. requestMethod'GET'API request method.
Method Use sort(field, order?)Sort by a column field or index. Omit order to toggle; pass asc, desc, or '' to clear. search(query)Search local data or send search to remote mode. goPage(page)
Static helpers: KTDataTable.getInstance(element), KTDataTable.createInstances(), KTDataTable.reinit().
datatable. on ( 'sort' , ( payload ) => { console. log (payload.field, payload.order); });
datatable. on ( 'update' , () => { const state = datatable. getState (); console. log (state.page, state.pageSize, state.totalItems); });
datatable. on ( 'checked' , ( payload ) => { console. log (payload.value); }); Events are notifications, not queries. Most carry no payload — call getState() or getChecked() when you need data. Only sort, checked/unchecked, change, fetchError, and error carry event-specific payloads.
Event Payload Use update— Data changed (pagination, sort, search, reload). Call getState() for details. sort{ field, order }Column header clicked.
import { KTDataTable, type KTDataTableConfigInterface } from '@keenthemes/ktui' ;
const element = document. querySelector < HTMLElement >( '#my_datatable' ); if ( ! element) return ;
const config : KTDataTableConfigInterface = { apiEndpoint: '/api/users' , pageSize: 20 , lockedLayout: { stickyHeader: true , stickyRows: { top: 1 , bottom: 1 }, stickyColumns: { left: [ 'id' , 'name' ], right: [ 'actions' ] }, }, };
const Class or variant Use kt-tableBase table class. datatable-initializedAdded after initialization. asc / descActive sort classes.
