UIKIT Filter Table Test

by ethanpil

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css">
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest"></script>
 <div class="uk-container">
  <nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <div class="uk-navbar-item">
            <form class="uk-search uk-search-navbar">
                <span uk-search-icon></span>
                <input class="uk-search-input listjs-search" type="search" placeholder="Search...">
            </form>
        </div>

    </div>
</nav>
  
  <div class="uk-overflow-auto">
    <table class="uk-table uk-table-hover uk-table-middle uk-table-divider" id="dynamicTable">
        <thead>
            <tr>
                <th class="uk-table-shrink"></th>
                <th class="uk-table-shrink"></th>
                <th class="uk-table-shrink" data-sort="data-name">Name</th>
                <th class="uk-table-expand" data-sort="data-description">Description</th>
                <th class="uk-table-shrink">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input class="uk-checkbox" type="checkbox"></td>
                <td><img class="uk-preserve-width uk-border-circle" src="//getuikit.com/docs/images/avatar.jpg" width="40" alt=""></td>
                <td class="data-name">John Smith</td>
                <td class="data-description uk-text-truncate">Accounts Recieveable</td>
                <td class="uk-text-nowrap"><a href="" class="uk-icon-button" uk-icon="file-edit"></a><a href="" class="uk-icon-button" uk-icon="trash"></a></td>
            </tr>
            
        </tbody>
    </table>
</div>
  
</div>

JavaScript

const dataTable = new DataTable("#dynamicTable");