Bootstrap - Extra

   
   
 bootstrap  javascript  
 frontend  
Article Series

Bootstrap5 article series.

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Step Ten: Using third party library.

In web development context, we need to be coexist with other library, such as datatable and chartjs.

1: Chapter Overview

I want to explore dashboard. But what good is dashboard without content? So I decide to create the content first, that we can add it later to our beloved dashboard.

There is no need to setup any internal javascript nor stylesheet.

Nunjucks Directory Structure

I invite you to inspect the code yourself on my GitHub repository

❯ tree -C views
views
├── 101-soccer-table.njk
├── 102-datatables.njk
├── 103-chartjs.njk
├── contents
│   ├── 101-main.njk
│   ├── 101-soccer-table.njk
│   ├── 102-data-table.njk
│   ├── 102-main.njk
│   ├── 103-chart.njk
│   ├── 103-main.njk
│   ├── soccer-tbody.njk
│   └── soccer-thead.njk
├── heads
│   ├── links-blog.njk
│   ├── links-chart.njk
│   ├── links-datatables.njk
│   ├── meta.njk
│   └── style-icons.njk
├── layouts
│   └── base.njk
└── shared
    ├── footer.njk
    ├── navbar-button.njk
    ├── navbar-collapse.njk
    ├── navbar-dropdown.njk
    ├── navbar.njk
    └── symbols.njk

5 directories, 23 files

Bootstrap5: Nunjucks NERDTree

I don’t think that I need to explain in detail for each file.

Source Code: Step-10

To obtain the source code for this chapter, please follow the link provided below:

2: Soccer Table

Before we go down to datatables, we need to know native bootstrap class.

You don’t need to know any SQL. It is just, how I built the table.

You are free to skip this article above. It has nothing to do with this article anyway.

Blocks

Nunjucks Document Source

The required chuncks is typical, as shown below:

{% extends './layouts/base.njk' %}

{% block htmlhead %}
  {% include './heads/meta.njk' %}
  {% include './heads/links-blog.njk' %}
  {% include './heads/style-icons.njk' %}
{% endblock %}

{% block header %}
  {% include './shared/symbols.njk' %}
  {% include './shared/navbar.njk' %}
{% endblock %}

{% block content %}
  <!-- responsive colored main layout -->
  <div class="row layout-base maxwidth">
    {% include './contents/101-soccer-table.njk' %}
  </div>
{% endblock %}

{% block footer %}
  {% include './shared/footer.njk' %}
{% endblock %}

Table Class

There is nothing special in main class. It is just wrapper element.

The table element is, using native bootstrap class.

<table class="table table-striped table-hover">
  {% include './soccer-thead.njk' %}
  {% include './soccer-tbody.njk' %}
</table>

Bootstrap5: Nunjucks: Contents: Main: Table

Table: Head and Body

The table head is also plain.

<thead>
  <tr>
    <th scope="col">id</th>
    <th scope="col">name</th>
    <th scope="col">email</th>
    <th scope="col">age</th>
    <th scope="col">gender</th>
  </tr>
</thead>

The table body are also plain.

<tbody>
  <tr>
    <th scope="row">1</td>
    <td>Takumi Sato</td>
    <td><a href="mailto:takumi.sato@example.com"
      >takumi.sato@example.com</a></td>
    <td>17</td>
    <td>Male</td>
  </tr>
  ...
</tbody>

Bootstrap5: Nunjucks: Contents: Table: thead and tbody

Preview in Browser

On landscape mobile display, the layout appears as follows:

Bootstrap5: Soccer Table in Small Desktop

The layout on tablet display is illustrated in the following image:

Bootstrap5: Soccer Table in Desktop

3: Datatables

This is a third party javascript, to add advanced interaction controls to HTML tables the free and easy way.

Official Site

For a more comprehensive resource, I recommend reviewing the official site.

Blocks: HTML Head

Nunjucks Document Source

We need additional assets.

{% block htmlhead %}
  {% include './heads/meta.njk' %}
  {% include './heads/links-blog.njk' %}
  {% include './heads/style-icons.njk' %}
  {% include './heads/links-datatables.njk' %}
{% endblock %}

Stylesheet and Javascript

While the required assets can be obtained using CDN.

  <link rel="stylesheet"
        href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />

  <script type="text/javascript" language="javascript"
    src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script
    src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>

Bootstrap5: Nunjucks: Heads: Links: Datatables

Table Class

The only difference is the additional table classes and id. While the thead and tbody remains intact.

<table
    id="myTable"
    class="display table 
           table-striped table-hover">
  {% include './soccer-thead.njk' %}
  {% include './soccer-tbody.njk' %}
</table>

Bootstrap5: Nunjucks: Contents: Main: Table

Nunjucks Document Source

Now we need to pull the trigger for specific id element. I put the javascript configuration inside the HTML document. For longer configuration I prefer external javascript, with defer parameter.

{% block footer %}
  {% include './shared/footer.njk' %}

  <script>
  $(document).ready( function () {
    $('#myTable').DataTable({
      "pageLength": 5 
    });
  } );
  </script>
{% endblock %}

There are so many parameter that we can configure. You can find out yourself in official site.

Bootstrap5: Nunjucks: Datatables: Javascript Configuration

That’s all, the tables will magically shown differently.

Preview in Browser

On landscape mobile display, the layout appears as follows:

Bootstrap5: Datatables in Small Desktop

The layout on tablet display is illustrated in the following image:

Bootstrap5: Datatables in Desktop

4: ChartJS

There are some good charting libraries. chartjs is just one of them. This means, you might consider to try other library as well.

Official Site

To obtain a deeper understanding of the subject matter, I suggest referring to the official site.

Blocks: HTML Head

Nunjucks Document Source

As usual, we need to manage our assets.

{% block htmlhead %}
  {% include './heads/meta.njk' %}
  {% include './heads/links-blog.njk' %}
  {% include './heads/style-icons.njk' %}
  {% include './heads/links-datatables.njk' %}
{% endblock %}

Bootstrap5: Nunjucks: ChartJS: HTML Heads

Javascript: Library

While the required assets can be obtained using CDN.

  • [gitlab.com/…/views/heads/links-chart.njk][njk-h-103-chart]
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script defer src="assets/js/barchart-config.js"></script>

Note that I put the configuration as external javascript. Since the configuration is long, I prefer external javascript with defer parameter.

Bootstrap5: Nunjucks: Heads: Links: ChartJS

Javascript: Configuration

Easy right?

The official documentation give you various interesting configuration.

First we need to prepare the data.

(() => {
  'use strict'

  const ctx = document.getElementById('myChart')

  const data = [
    { year: 2010, count: 10, color: '#BBDEFB' },
    { year: 2011, count: 20, color: '#90CAF9' },
    { year: 2012, count: 15, color: '#64B5F6' },
    { year: 2013, count: 25, color: '#42A5F5' },
    { year: 2014, count: 22, color: '#1E88E5' },
    { year: 2015, count: 30, color: '#1976D2' },
    { year: 2016, count: 28, color: '#1565C0' },
  ];
  
  const myChart = new Chart(ctx, {
    ...
  })
})()

Bootstrap5: Javascript: ChartJS Configuration

Then we set the parameter configuration

(() => {
  ...
  
  const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.map(row => row.year),
      datasets: [{
        label: 'year',
        data: data.map(row => row.count),
        borderWidth: 1,
        backgroundColor: data.map(row => row.color),
      }]
    },
    options: {
      scales: {
        y: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
      legend: {
        display: false
      }
    }
  })
})()

Bootstrap5: Javascript: ChartJS Configuration

It is self explanatory.

Preview in Browser

On landscape mobile display, the layout appears as follows:

Bootstrap5: ChartJS in Small Desktop

The layout on tablet display is illustrated in the following image:

Bootstrap5: ChartJS in Desktop

I don’t know how the internal really works. I guess magic stuff happened.

What is Next 🤔?

Now that the parts are ready, We need to gathering up all into one dashboard page.

Consider continue reading [ Bootstrap 5 - Dashboard ].