{% extends 'layouts/vertical.html' %}

{% block title %}Javascript Source Datatables{% endblock title %}

{% block extra_css %}

<!-- Datatables css -->
<link href="{{ config.ASSETS_ROOT }}/plugins/datatables/responsive.bootstrap5.min.css" rel="stylesheet" type="text/css">

{% endblock extra_css %}

{% block page_content %}

<div class="container-fluid">

    {% set title='Javascript Source' %}
    {% set subtitle='Datatables' %}
    {% include 'partials/page-title.html' %}

    <div class="row justify-content-center">
        <div class="col-xxl-10">
            <div class="card">
                <div class="card-header justify-content-between">
                    <h4 class="card-title"> Example </h4>
                    <a href="/https://datatables.net/examples/data_sources/js_array" target="_blank"
                       class="icon-link icon-link-hover link-primary fw-semibold">View Docs <i
                            class="ti ti-arrow-right bi align-middle fs-lg"></i></a>
                </div>

                <div class="card-body">
                    <table id="datatables-javascript-source"
                           class="table table-striped dt-responsive align-middle mb-0">
                        <thead class="thead-sm text-uppercase fs-xxs">
                        <tr>
                            <th>Company</th>
                            <th>Symbol</th>
                            <th>Price</th>
                            <th>Change</th>
                            <th>Volume</th>
                            <th>Market Cap</th>
                            <th>Rating</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                    </table>
                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div> <!-- end row-->
</div>
<!-- container -->

{% endblock page_content %}

{% block extra_javascript %}

<!-- Datatables js -->
<script src="{{ config.ASSETS_ROOT }}/plugins/datatables/dataTables.min.js"></script>
<script src="{{ config.ASSETS_ROOT }}/plugins/datatables/dataTables.bootstrap5.min.js"></script>
<script src="{{ config.ASSETS_ROOT }}/plugins/datatables/dataTables.responsive.min.js"></script>
<script src="{{ config.ASSETS_ROOT }}/plugins/datatables/responsive.bootstrap5.min.js"></script>
<!-- Page js -->
<script src="{{ config.ASSETS_ROOT }}/js/pages/datatables-javascript-source.js"></script>

{% endblock extra_javascript %}