index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CSV to HTML Table</title>
    <meta name="author" content="Nabil Freij">
    <meta content="Display of the SDO Timeline CSV file as a searchable, filterable, pretty HTML table.">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
</head>

<body>
    <div class="container-fluid">
        <main class="row">
            <div class="col">
                <h1>SDO Non-nominal Timeline</h1>

                <p>This captures data from multiple sources and is not guaranteed to be accurate.
                    It is intended to be a rough guide to the non-nominal periods of SDO.</p>

                <div id="table-container"></div>
            </div>
        </main>
        <footer class="row">
            <div class="col">
                <hr>
                <p class="text-right"><a href="https://github.com/derekeder/csv-to-html-table">CSV to HTML Table</a> by
                    <a href="http://derekeder.com">Derek
                        Eder</a></p>
            </div>
        </footer>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
    <script src="js/jquery.csv.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script src="js/csv_to_html_table.js"></script>

    <script>
        function format_link(link) {
            if (link)
                return "<a href='" + link + "' target='_blank'>" + link + "</a>";
            else return "";
        }

        CsvToHtmlTable.init({
            csv_path: "data/timeline.csv",
            element: "table-container",
            allow_download: true,
            csv_options: {
                separator: ",",
                delimiter: '"'
            },
            datatables_options: {
                lengthChange: true,
                paging: true
            },
            custom_formatting: [
                [4, format_link]
            ]
        });
    </script>
</body>

</html>