Datatable

There are few options on how to include/import Datatable into your project.

Use CDN Link the Datatables package.

<!-- CSS File -->
<link rel="stylesheet" href="https://srbthemes.kcubeinfotech.com/datatable-cdn/dataTables.bootstrap5.css">
                    
<!-- JavaScript File -->
<script src="https://srbthemes.kcubeinfotech.com/datatable-cdn/jquery-3.7.1.js"></script>
<script src="https://srbthemes.kcubeinfotech.com/datatable-cdn/dataTables.js"></script>
<script src="https://srbthemes.kcubeinfotech.com/datatable-cdn/dataTables.bootstrap5.js"></script>

Check the below example how to use and make it working Grid.js on any page.

HTML

<table class="table text-nowrap" id="basicTable">
    <thead>
        <tr class="bg-light">
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$170,750</td>
        </tr>
        ...
    </tbody>
</table>

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    setTimeout(function () {
        const thElements = document.querySelectorAll('th .dt-column-order');
        thElements.forEach(function (th) {
            th.classList.remove('dt-column-order');
        });
        const dtLengthElement = document.getElementById('dt-length-0');
        const dtSearchElement = document.getElementById('dt-search-0');
        if (dtLengthElement) {
            dtLengthElement.classList.remove('form-select-sm');
        }
        if (dtSearchElement) {
            dtSearchElement.classList.remove('form-control-sm');
        }
    }, 50);
    const table = new DataTable('#basicTable', {
        select: false,
        columnDefs: [{
            visible: false,
            searchable: false
        }]
    });
});