Home / GitHub Page

Create a plugin for filtering table rows

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:

  1. Find every tags (e.g. #car, #money, …) in a table
  2. Render these labels on top of the table with a checkbox before each one.
  3. Every tr element in a table which contains some tag in any cell would have CSS class bound with a tag name.
  4. 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

  1. Does such a plugin make sense to you?
  2. Would this plugin be merged into master branch if done properly?
  3. How to differ a classic table from a filtrable table in markdown?

Thanks for your opinions!

1 Like

Hmm, I feel it’s a bit too specialised to be integrated to the main app :confused:

I also think that it is too specialized.

However, I just had a crazy idea. What about a plugin system? So people could install thwir own plugins?
Is this doable? How complicated would that be? This would start an entire new ecosystem, like package control for Sublime Text. As I said, just a crazy idea. But I think the forum is a good place for crazy ideas. :rofl:

1 Like

I thought about that before. I’d like it if it was possible to have a “plugins” directory in the profile folder, then you just drop a few JS files in there and they are executed at runtime. That’s probably possible to do.

The more complex thing with plugins though is how to update them from the app, how to discover them, how to make sure they are compatible with the current runtime, etc. That’s probably the part that would require the most work.

2 Likes