See Codepen demo

Set up steps

Based on tutorial for Jekyll.

  1. Add datatables CSS.
  2. Add any custom CSS, like font-family.
  3. Add jQuery JS.
  4. Add jQuery datatable JS.
  5. Add table (HTML, or Markdown with pre-processor in Codepen or your templating engine). No special class is needed, you just need to reference your table in the next step.
  6. Add JS snippet to run jQuery DataTable set up your table.

You datatable will be generated.

Samples

  • styles.css 
      body {
    font-family: Arial
  }
  • main.js or inline script tag. 
      $(document).ready(function () {
    $("#example").DataTable();
  });
  • index.html head tag: 
      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>

  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  • index.html body tag: 
      <h1>Datatables Markdown Demo</h1>

  <br>

  <div id="my-table">

  | Food    | Description                           | Category | Sample type |
  | ------- | ------------------------------------- | -------- | ----------- |
  | Apples  | A small, somewhat round ...           | Fruit    | Fuji        |
  | Bananas | A long and curved, often-yellow ...   | Fruit    | Snow        |
  | Kiwis   | A small, hairy-skinned sweet ...      | Fruit    | Golden      |
  | Oranges | A spherical, orange-colored sweet ... | Fruit    | Navel       |

  </div>