search

pupudu / window-table

Windowing Table for React based on React Window
https://window-table.netlify.com/
170 stars 13 forks source link

Sorting possible? #24

Closed steverob closed 4 years ago

steverob commented 5 years ago

Is there any example of doing sort by column? Anyone has done this? Thanks!

pupudu commented 5 years ago

Hi @steverob Thank you for creating this issue. Yes, sorting is possible, but unfortunately, I don't have a live example yet. I will add an example to the website as soon as possible. I will keep you updated on that.

Until then, if you have time, you can use these materials to do it your self

  1. Custom components: https://window-table.now.sh/docz-guides-adding-event-listeners-adding-event-listeners#custom-components
  2. https://window-table.now.sh/docz-components-api-window-table#headercell-reactcomponent-1

Basically, the idea here is to pass in a sort function as a click event listener to the header cells. I'll try to add an example to the site asap. I am also considering embedding this functionality to the library itself. I will keep you updated.

Thanks

steverob commented 5 years ago

Thanks @pupudu. I'll go over these. Also I have another question. I have a table that needs to be filtered based on a certain flag (boolean). What do you think would be the most performant way to implement this?

Right now, I'm planning to pass a pre-filtered (using Array.filter()) data array into WindowTable based on the flag state. Is this fine or does this need to be integrated into createFilter in some way? Thanks!

steverob commented 5 years ago

@pupudu btw, those doc links are 404-ing.

pupudu commented 5 years ago

@steverob Ah bummer, my bad. There's an issue with the now static build it seems.

Please go to https://window-table.now.sh and follow these paths for the moment

  1. Guides -> Adding Event Listeners -> Custom Components
  2. Components API -> WindowTable -> Header Cell

With regards to the filtering question, what you suggest definitely works. The createFilter is there only as a way to make the process easier and performant. It's totally fine if you can do it outside of window table

steverob commented 5 years ago

Thanks a lot. You can close this issue :)

Regards Steve Robinson On Jul 24, 2019, 9:32 PM -0500, Pubudu Dodangoda notifications@github.com, wrote:

@steverob Ah bummer, my bad. There's an issue with the now static build it seems. Please follow these paths for the moment

  1. Guides -> Adding Event Listeners -> Custom Components
  2. Components API -> WindowTable -> Header Cell

With regards to the filtering question, what you suggest definitely works. The createFilter is there only as a way to make the process easier and performant. It's totally fine if you can do it outside of window table — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

pupudu commented 5 years ago

Cheers. I'll keep this open until I add the docs and the guide for sorting. Thanks Steve

pupudu commented 5 years ago

PS: A bit more about the word "performant" in my last comment...

Since we are rendering a large amount of data, filtering and sorting are quite expensive operations. That's the main reason why filtering and sorting are not provided by react-window or react-virtualized at the moment.

For example, if we implement filtering naively, the page will become laggy upon each keystroke. Therefore we need to debounce the keystrokes to make the user experience better. If you have seen Dan Abramov's time-slicing talk, you will see this idea there as well.

The benefit of using createFilter is, these cases are handled in an optimal way. For instance, when react ships time-slicing feature, we can change the internal behavior of createFillter to use time-slicing instead of debouncing.

steverob commented 5 years ago

Lots of concepts to read up on. Thanks for the write up!

-- Regards Steve Robinson

On 24-Jul-2019, at 9:40 PM, Pubudu Dodangoda notifications@github.com wrote:

PS: A bit more about the word "performant" in my last comment...

Since we are rendering a large amount of data, filtering and sorting are quite expensive operations. That's the main reason why filtering and sorting are not provided by react-window or react-virtualized at the moment.

For example, if we implement filtering naively, the page will become laggy upon each keystroke. Therefore we need to debounce the keystrokes to make the user experience better. If you have seen Dan Abramov's time-slicing talk, you will see this idea there as well.

The benefit of using createFilter is, these cases are handled in an optimal way. For instance, when react ships time-slicing feature, we can change the internal behavior of createFillter to use time-slicing instead of debouncing.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

pupudu commented 4 years ago

Closing in favor of #8