rising-crimson

Sticky rows @ top/bottom

Is there a(n easy) way to put rows on a fixed index position? I want to create a datatable with sorting but keep the row + subrows on a fixed position. Because the row also have subRows I cannot use the footer for it right? I hope someone got a solution or can put me in the right direction. Thanks!

10 Replies

conscious-sapphire•3y ago

The simple answer to this is to use position: “sticky” with CSS. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#sticky_positioning

Positioning - Learn web development | MDN

I'm sure you had fun playing with basic positioning. While it's not an ideal method to use for entire layouts, there are many specific objectives it's suited for.

rising-crimsonOP•3y ago

I chose the wrong words in my post, sorry. I ment that I want to place the row on a fixed index. So always on top or bottom. I want to use it to show the totals (in multiple rows). I will update my post.

conscious-sapphire•3y ago

Ok. I think I get ya. I’d approach this by simply making a new <tr> that only has the data you need. Either you’re getting the totals from your payload or working them out by one of the available functions provided by tanstack table. Either way, by rendering a new row, it won’t be affected by sorting.

rising-crimsonOP•3y ago

Thanks for your help! What I came up with is the following: Create 2 rows with subRows. Because undefined columns wont be sorted by default (sortUndefined option) the second row has only the totals and the first row all the 'normal' rows. Seems to work as expected.

graceful-beige•3y ago

This seems to be one of the use cases I’ll be working on in a few days. So following this. If I understand correctly, you have a table with let’s say five elements. The first two stay fixed, the rest can be sorted. Is this your use case?

rising-crimsonOP•3y ago

In my case the last row in the data I pass contains the totals (with subRows). I want this row to always stay on the initial position (in my case last). I think your case is the same idea right? Maybe add a property on a Row to make its index fixed? Maybe there are better ways to do this.. not sure

graceful-beige•3y ago

Yep. I’ll be working on this in the next few workdays, I’ll get back as to how (if) I can solve it Hey @Mahoek . Look at this implementation:

<tbody>
                    {table.getRowModel().rows.map(
                        (row, index) =>
                            index <= 1 && (
                                <sc.StyledTr displayBorder={!!firstSortableRowAfter && firstSortableRowAfter === row.index} key={row.id}>
                                    {row.getVisibleCells().map((cell) => (
                                        <td
                                            key={cell.id}
                                            style={
                                                isColumnResizeable
                                                    ? {
                                                          width: cell.column.getSize(),
                                                      }
                                                    : undefined
                                            }
                                        >
                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                        </td>
                                    ))}
                                </sc.StyledTr>
                            ),
                    )}
                    <DndProvider backend={HTML5Backend}>
                        {table.getRowModel().rows.map((row, index) => index > 1 && <DraggableRow key={row.id} row={row} reorderRow={reorderRow} />)}
                    </DndProvider>
                </tbody>

<tbody>
                    {table.getRowModel().rows.map(
                        (row, index) =>
                            index <= 1 && (
                                <sc.StyledTr displayBorder={!!firstSortableRowAfter && firstSortableRowAfter === row.index} key={row.id}>
                                    {row.getVisibleCells().map((cell) => (
                                        <td
                                            key={cell.id}
                                            style={
                                                isColumnResizeable
                                                    ? {
                                                          width: cell.column.getSize(),
                                                      }
                                                    : undefined
                                            }
                                        >
                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                        </td>
                                    ))}
                                </sc.StyledTr>
                            ),
                    )}
                    <DndProvider backend={HTML5Backend}>
                        {table.getRowModel().rows.map((row, index) => index > 1 && <DraggableRow key={row.id} row={row} reorderRow={reorderRow} />)}
                    </DndProvider>
                </tbody>

My first two rows must remain fixed, the rest must be draggable. What I did is set up 1 provider, using the same dataset displaying the first 2 rows as normal rows, the rest are draggable. Never mind the styles cause I still need to figure out the handle with a wrapper, but here's a video: will repost the video with obfuscated text

graceful-beige•3y ago

rising-crimsonOP•3y ago

Thanks! 👍

graceful-beige•3y ago

Gaming

Programming

Sticky rows @ top/bottom

Did you find this page helpful?