Trim all rows except one

Tags: #<Tag:0x00007f8b291900f8>
#1

Hello! I want to filter data in a spreadsheet. The plan is:

  1. Click on a row you want to filter at (it remains visual);
  2. All the others rows get disappeared (or become half-transparent);
  3. On repeated click all trimmed data gets back.

This feature is similar to the one in Table Visual in Power BI (https://docs.microsoft.com/ru-ru/power-bi/visuals/power-bi-visualization-tables)

And this is the current demo https://jsfiddle.net/n8ahts2u/2/. Here I use trimRows() plugin inside the afterOnCellMouseDown hook. The only difference in this fiddle is, a selected row must delete (trim) itself, but it doesn’t happen, too.

#2

Hey @n.schipkov

to be honest I’m not familiar with BI but the first question that comes to my mind is

  • do you allow to change anything in the table: content, move, filter, resize?

cause if you do, disappearing rows on a mouse click may all those options to be UI-impossible.

ps. In the 2nd step, you mentioned that

All the others rows get disappeared

and in the last paragraph

a selected row must delete (trim) itself,

so my second question is, what should be gone and what stays?

#3

Hello, Aleksandra! I’ll answer your 2nd question first: in the fiddle, the current row must delete itself, only because I decided to build a bit more simple solution for now

#4

And about allowance to change anything in a table: do you mean that if editing cells is enabled, then trimming is impossible?..

#5

Maybe, there’s someone in your team who is accidentally familiar with Power BI?

#6

Thank you for sharing additional information.

in the fiddle, the current row must delete itself, only because I decided to build a bit more simple solution for now

Truly understandable, thank you for clarification.

do you mean that if editing cells is enabled, then trimming is impossible?

Yes. I can imagine a situation when user is able to edit a cell and he tried to do it but he can’t cause the row is gone once he clicks it.

But… if you don’t allow to edit, sort or move data you can simply use the afterOnCellMouseDown hook. Here’s an example https://jsfiddle.net/9bz3ytws/

ps. I have no news about Power BI.

#7

Alright then, and if I want to have possibility to filter data on a row click and a capability to edit cells both?

#8

Alright then, and if I want to have possibility to filter data on a row click and a capability to edit cells both?

That’s it’s a matter of changing the navigation. Maybe you could filter the rows on one action and edit them on another?
Handsontable allows you to change the logic for click (left and right mouse button) and handling 2-key keyboard combinations so it is a matter of choosing the best option to satisfy your customers.

#9

For now, this is my current solution:

afterOnCellMouseDown: (event, coords, TD) => {

  • let array = this.hot.getData();
  • var row = coords.row;

var plugin = this.hot.getPlugin('trimRows');

for (var i =0; i < this.hot.countRows; ++i){

  • plugin.trimRow(i);

}

this.hot.alter('insert_row', 0, 1);
this.hot.setDataAtCell(0,0, array[row][0];
this.hot.setDataAtCell(0,1, array[row][1];
}

As a result, if have a table with 2 columns, I get the result I want, but I then need the table to be capable of getting untrimmed, when I click the row again.

#10

Interesting. Glad to see a progress, @n.schipkov

the trimmed row cannot be clicked as it is hidden. And as I suppose, when you click neighbor rows they also get trimmed. Maybe you need a button or a key-combination to use the untrimRows() method.

#11

The situation is, that I must use the remaining row (well, which I insert) - to click on it, so the previously trimmed rows returned again and/or table got rendered itself back to default. That’s exactly how Power BI Table works. I think I should choose some time and find any GIF or video to show its capabilities.

#12

If you have a general idea you could write down the visual and physical indexes that are taking part in this process and then we’ll be able to draw a map on how to process those changes.

#13