Again: keep one row at the top of the table - regardless of sorting

[sgehrig]

I know: this has been asked again and again all over GitHub, the old Spectrum chat or especially Stack Overflow, but I still could not find any real helpful hint on how to do this.
Let's assume there is a regular (more or less complex) table using react-table and some of its features such as filtering, sorting and the like. The whole page is a two column layout having the table at the left and the detail view/form at the right. The use case now is that there should be a placeholder row in the table on the left as soon as I open the "create" form on the right. That placeholder row should be the first row always - no matter if the table is (re-) sorted or filtered.
What would be the best approach?

Initially I thought of just rendering the placeholder manually into the table, but then I loose features like column renderers, column resizing, column ordering, column hiding, etc.

The next thought was to add the placeholder row manually to the rows returned from the useTable() hook. But for that to be possible I'd need to manually preprocess the placeholder just as useTable() does at around https://github.com/tannerlinsley/react-table/blob/3d76ffe38dc2de6148d6ae6fb2816dd02ae980b4/src/hooks/useTable.js#L186, which seems to be impossible as there's no utility function available.

Finally I'm back to tweaking the table sorting to ensure that my placeholder row always stays at the top. But I'm unsure how to do this without having to rewrite lots of sorting-internals. Is there a way to just prepend the array of sorters that's passed into the orderByFn (https://github.com/tannerlinsley/react-table/blob/3d76ffe38dc2de6148d6ae6fb2816dd02ae980b4/src/plugin-hooks/useSortBy.js#L288)? Or should I just use orderByFn property and the defaultOrderByFn()?

[sgehrig]

OK then... My current solution looks like this:

const orderByFn = useCallback((rows, sortFns, directions) => {
    const asc = directions && directions.length ? directions[0] : true;
    sortFns = [
        (rowA, rowB) => {
            if (rowA.id === '-1') {
                return asc ? -1 : 1;
            } else if (rowB.id === '-1') {
                return asc ? 1 : -1;
            }
            return 0;
        },
        ...sortFns
    ];
    return defaultOrderByFn(rows, sortFns, directions);
}, []),

In general that might be a useful solution. However I'd consider it a) ugly and b) hacky to have to deal with the direction in that kind of manner. If I do not check the sort direction, sorting rows descending reverses the result of my sort function. So I have to re-reverse it if required.

Any other ideas?

[sgehrig]

And I just noticed. This solution doesn't work. It messes up sorting completely even though I'm not sure why.

[sgehrig]

For now I fixed it by copying

https://github.com/tannerlinsley/react-table/blob/3d76ffe38dc2de6148d6ae6fb2816dd02ae980b4/src/plugin-hooks/useSortBy.js#L380-L392

and adding my part at the beginning. Is this the way to go? I'm rather unsure...

[IsakFriisJespersen2]

I'm searching for the same thing. I have summary row that should always be placed as row 1 regardless of sorting and pagination page. Any one has solution to this?

[pietroanello]

I've found a solution. Just use this custom sortingFns in the table option:

sortingFns: {
    avoidFirst: (rowA, rowB, columnId) => {
        const sortingDir = table.getColumn(columnId).getIsSorted()

        if (rowA.id === '0') return sortingDir === 'asc' ? -1 : 1
        if (rowB.id === '0') return sortingDir === 'asc' ? 1 : -1

        return rowA.original[columnId] > rowB.original[columnId]
          ? 1
          : rowA.original[columnId] < rowB.original[columnId]
          ? -1
          : 0
    },
},

Just change your rowA.id & rowB.id with the rowId that you want to be pinned.
Then of course in the columnDef use sortingFn: 'avoidFirst' in all sortable columns.

[KevinVandy]

Is the row pinning feature not more appropriate here? I added that feature to TanStack Table for this exact use case last year.

[pietroanello]

I hadn't seen that feature, and yeah probably is the most appropriate in general, but I only need this for a simple table without pagination, that's why that solution was good for me. Thanks!

[Manasgupta840]

ture not more appropriate here? I added that feat

if we want to pin using above props, pinned row are getting duplicated.

In above case the record having first Name : Raquel got duplicated.

any solution for this issue @KevinVandy

[KevinVandy]

There is a table option called keepPinnedRows to control that

[Manasgupta840]

There is a table option called keepPinnedRows to control that

I tried but still same issue exist

https://codesandbox.io/p/devbox/confident-clarke-5prd36