React-table: How to sort table without first row in React-table ?

[olejka91]

Are there anyways to pin a row in a table and to sort only data under that row.

I want to step back into previous folder and I made a node to quit, but when I sort data, this node sorts with data. How to avoid this and to pin it to the top of the table?

[aaronschwartz]

This could get tricky. My best guess would be to modify the accessor on the column your sorting by to include some identifier if it is a pinned row. Maybe you could change it to something like

accessor: (x)=>`x.filename:${shouldbepinned}`

Then you'll need to provide a custom sortMethod that parses the shouldbepinned value and makes sure that those are always sorted to the beginning of the list.

[olejka91]

Thank you so much, but I found another way) I decided to add
QuitArrowButton as a separate component

С уважением,
Олег Волков.

On Tue, Jun 27, 2017 at 6:13 PM, Aaron Schwartz [e-mail]
wrote:

This could get tricky. My best guess would be to modify the accessor on
the column your sorting by to include some identifier if it is a pinned
row. Maybe you could change it to something like

accessor: (x)=>x.filename:${shouldbepinned}`

Then you'll need to provide a custom sortMethod that parses the
shouldbepinned value and makes sure that those are always sorted to the
beginning of the list.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/373#issuecomment-311390241,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ARLNVcnUFJ19sOsg6E-L2BTVc9pKty17ks5sIRwxgaJpZM4OGn3I
.

[flood4life]

I'm facing the same problem.
@aaronschwartz not sure if it's possible. sortMethod defines the _relation_ between elements, e.g. it says if a is lesser, equal or greater than b. So it is possible to make the pinned item either lesser or greater than any other item. Therefore, it will be on either the top or the bottom of the table. It's impossible to tell the sort order from within the sortMethod.

[aaronschwartz]

@flood4life You're right. If you need that level of sorting then I think you need to do the following:

• Disable build in sorting on the column with the sortable prop
• Add an onClick callback to the column header
• In the callback, sort the data being passed to the table however you like

[flood4life]

@aaronschwartz this seems like doing too much work that has already been done. Maybe a better way is to mock server-side data (https://react-table.js.org/#/story/server-side-data)? That way it is possible to obtain full control over sorting logic.

[aaronschwartz]

You could do that too. But then you need to take control of the paging and filtering as well. This isn't a use case many people asked for. If you have an elegant way to implement it in the table I'm sure it would be considered for a PR.

[tannerlinsley]

Right. manual mode would be better suited for this. Or, in another thread we could easily add the sort direction to the params that get passed to custom sort methods here: https://github.com/tannerlinsley/react-table/blob/master/src/methods.js#L396-L400. That would make it possible for you to infer the visual "top" of the list and keep some records at the top regardless. If anyone would like to PR that, open it up!

[flood4life]

@tannerlinsley this thought has crossed my mind. However, what do you think of sticky prop that would accept the number of first n rows in the original data that should not be sorted? Surely, it's more complicated than adding the sort direction to sortMethod arguments, but it would allow for a much simpler setup for the end user.

[nuplo]

Hi, is there any progress with a "sticky row" on the top of table? I need to use it in my project, but all possible ways which I tried so far look too complicated.

I need to keep row with particular id on the top, but when I try to sort by name, or any other column, I don't have access to this id.
How can I solve this problem? Could you help me please?

[Dylan-Jannetty]

Any update on "sticky row"?

[tannerlinsley]

In v7, sticky row's now fall under the responsibility of rendering in user-land. This is awesome, because now you can use any sticky-row rendering approach you want.

https://codesandbox.io/s/tannerlinsleyreact-table-basic-bdpgn

[Dylan-Jannetty]

Thank you for the speedy reply!