template-table

by Emmanuel Garcia

HTML

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

<head>
    <meta charset="utf-8">
    <title>Table with filters</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .jumbotron {
            color: white;
            background-image: url("https://images.unsplash.com/photo-1438109491414-7198515b166b?q=80&fm=jpg&s=cbdabf7a79c087a0b060670a6d79726c");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 30vh;
        }
        #table_filter input {
            margin-left: 10px;
        }
    </style>

</head>

<body class="bg-light">
    <div id="menu-container">
        <nav class="navbar navbar-expand-lg" style="background:transparent; position: absolute">
            <div class="container">
                <a class="font-weight-bold navbar-brand text-white" href="#">Awesome Brand</a>
            </div>
        </nav>

        <div class="jumbotron jumbotron-fluid">
            <div class="container pt-4">
                <h1 class="display-4">Table Template</h1>
                <p>An example of template of top instagram accounts.</p>
            </div>
        </div>

    </div>
    <div id="filters-container"></div>
    <div class="container-fluid" id="table-container">

        <!-- This gets replaced when we have some records -->
        <div class="text-center p-5 m-5">
            <div class="text-muted p-2">Loading table...</div>
            <div class="spinner-border text-primary" role="status"></div>
        </div>
    </div>
    <div class="container" id="footer">
        <div class="text-muted text-center p-3">Powered by <a href="https://sheet2api.com" target="_blank">sheet2api</a>
        </div>
    </div>

    <script>
        // Replace this with your sheet2api API URL
        var apiUrl =...