Please help me to verify an idea of a plugin.
I would like to be able to hide some rows from a table. Seeing just a relevant rows would make my life easier.
Use case:
I use Joplin for almost everything including a diary. I write a diary records in tables. To navigate easier in the diary tables I’ve created a separate tables for different types of life events. E.g.
Diary of expenses
| date | event |
|---|---|
| 1.2. | Paid a repair of the car |
| 2.2. | Paid a debt to Pablo |
Personal diary
| date | event |
|---|---|
| 1.4. | Vacation in a tent |
| 2.6. | Started a new job |
This works but it’s uncomfortable to work with because sometimes I want to see data from more table at once. I would like to see all the records in one table. But simply merging all the tables together would make a navigation hard in case I want to see just e.g. financial events.
Solution
Put all the records in one table and mark records with a tag(s). There would be a mechanism to show/hide table rows only with a specific tag(s).
| date | event | tags |
|---|---|---|
| 1.2. | Paid a repair of the car | #car |
| 2.2. | Paid a debt to Pablo | #money |
| 1.4. | Vacation in a tent | #car #vacation |
| 2.6. | Started a new job | #job |
Implementation
I would create a plugin for markdown-it called markdown-it-filtrable which would create a special version of a table. Hiding and showing of the cells would be done via CSS without any JS. The flow would be like this:
- Find every tags (e.g.
#car,#money, …) in a table - Render these labels on top of the table with a checkbox before each one.
- Every
trelement in a table which contains some tag in any cell would have CSS class bound with a tag name. - When clicking on any tag checkbox the row with corresponding CSS class would be hidden/shown.
A table would be rendered like:
<input type='checkbox' name='car' checked>#car
<input type='checkbox' name='money' checked>#money
<input type='checkbox' name='vacation' checked>#vacation
<input type='checkbox' name='job' checked>#job
<style>
input[name|='car']:not(:checked) ~ table.filtrable .car { display: none; }
input[name|='money']:not(:checked) ~ table.filtrable .money { display: none; }
input[name|='vacation']:not(:checked) ~ table.filtrable .vacation { display: none; }
input[name|='job']:not(:checked) ~ table.filtrable .job { display: none; }
input[name|='car']:checked ~ table.filtrable .car { display: table-row; }
input[name|='money']:checked ~ table.filtrable .money { display: table-row; }
input[name|='vacation']:checked ~ table.filtrable .vacation { display: table-row; }
input[name|='job']:checked ~ table.filtrable .job { display: table-row; }
</style>
<table class="filtrable">
<thead>
<tr>
<th>Date</th>
<th>Event</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<tr class="car">
<td>1.2.</td>
<td>Paid a repair of the car</td>
<td>#car</td>
</tr>
<tr class="money">
<td>2.2.</td>
<td>Paid a debt to Pablo</td>
<td>#money</td>
</tr>
<tr class="car vacation">
<td>1.4.</td>
<td>Vacation in a tent</td>
<td>#car #vacation</td>
</tr>
<tr class="job">
<td>2.6.</td>
<td>Started a new job</td>
<td>#job</td>
</tr>
</tbody>
</table>
Working example: https://codepen.io/leonmaxa/pen/xxKLJNX?editors=1100
Questions
- Does such a plugin make sense to you?
- Would this plugin be merged into master branch if done properly?
- How to differ a classic table from a filtrable table in markdown?
Thanks for your opinions!
