1

I would like to use the off canvas sidebar in conjunction with my table. Im using node js express app and an ejs view engine to get dynamic values for my table. Im not really sure how I'd go about creating the off canvas side bar. Im guessing I would have to use an anchor tag with my <tbody> rows.

<% if (terms.length > 0) { %>
<% terms.forEach(term => { %>
<tbody>
  <tr>
    <th scope="row"><%= term.id %></th>
    <td><%= term.term %></td>
    <td><%= term.definition %></td>

  </tr>
</tbody>

<% }) %>
<% } else { %>
<div class="alert alert-danger" role="alert">
  There are no terms or definitions to view
</div>

<% } %>

Considering the above code, I want the user to be able to click on the term ,which is. <td><%= term.term %></td> then the sidebar appears with the term, id and definition nicely presented on the off canvas.

Any help would be appreciated

MarioG8
  • 5,122
  • 4
  • 13
  • 29
ryan
  • 69
  • 1
  • 9

1 Answers1

0

I recently had to work on an old codebase with this and I "solved" it by including the slider as a component on each loop, then I passed in the record I wanted to use in the slider.

In your case, you would do these:

  1. Abstract the slider into it's own .ejs file
  2. Update your table loop to include the slider:
<% terms.forEach(term => { %>
<%- include('./path-to-your-slider-component-ejs', { term } ); %>
  1. Add an identifier to the data-bs-target used by offcanvas to target the slider you want to open up:
<a href="#" data-bs-toggle="offcanvas" data-bs-target="#yourSliderId<%= term.unique_id %>" aria-controls="yourSliderId<%= term.unique_id %>">
   View Term
</a>
  1. In your slider file, accept the passed in term and attach the term.id to the ID used in targeting it for opening like:
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="offcanvas offcanvas-end" style="width: 35%;" tabindex="-1" id="yourSliderId<%= term.unique_id %>" aria-labelledby="yourSliderId" aria-modal="true" role="dialog">

       ...
      </div>
   </div>
</div>

You can go ahead to render the remaining content as you see fit in this slider.

PS: This was the best workaround I could think of - given the situation -, hen it might not be the best approach so please consider the possible drawbacks this might have and whether using a frameworks like React or Vue might be a better way to go for your project.

Willower
  • 1,099
  • 8
  • 22