T
TanStack•3y ago
criminal-purple

Row locking while sorting

Hello, I am struggling to found out if React Table v7 has a feature to lock certain rows if the user decides to sort them? For example if there's a table of fruits and if the user decides to sort them in any way, apples will always be locked in the top row.
5 Replies
like-gold
like-gold•3y ago
Are you asking about locking rows or columns? You seem to be interchanging the two terms. Anyways, for columns, it does a feature called "column pinning" which sounds like what you want. That is on v8, not sure about v7. https://tanstack.com/table/v8/docs/guide/column-pinning
Column Pinning | TanStack Table Docs
Examples Want to skip to the implementation? Check out these examples:
criminal-purple
criminal-purpleOP•3y ago
My apologies, I have updated the post to say rows, not columns
like-gold
like-gold•3y ago
From my initial research, seems like you would have to implement a custom sort on your table.
like-gold
like-gold•3y ago
https://tanstack.com/table/v8/docs/api/features/sorting#table-options
Sorting | TanStack Table Docs
State Sorting state is stored on the table using the following shape:
like-gold
like-gold•3y ago
just spitballing here, but something like: 
    myCustomSorting: (rowA: any, rowB: any, columnId: any): number =>
      rowA.getValue(columnId).value === 'apple' ? 2 : rowA.getValue(columnId).value < rowB.getValue(columnId).value ? 1 : -1,
  },
    myCustomSorting: (rowA: any, rowB: any, columnId: any): number =>
      rowA.getValue(columnId).value === 'apple' ? 2 : rowA.getValue(columnId).value < rowB.getValue(columnId).value ? 1 : -1,
  },

Did you find this page helpful?