Add pin column to all tables via shared PinButton#694
Conversation
Cloudflare Pages preview
|
conradarcturus
left a comment
conradarcturus
left a comment
There was a problem hiding this comment.
This looks fantastic :D
I realized there are a few interaction problems but I'll mark this approved now because you have a good idea about what you are doing so you can make the update and land the new code without waiting for another approval.
|
|
||
| const CardPinButton: React.FC<Props> = ({ isPinned, onTogglePin }) => { | ||
| // The action on a pinned card is always to unpin it, so the label reflects that. | ||
| const PinButton: React.FC<Props> = ({ className, isPinned, onTogglePin }) => { |
There was a problem hiding this comment.
great idea to generalize the pin button :)
| tbody tr:hover .PinButton, | ||
| tbody tr .PinButton.pinned { | ||
| visibility: visible; | ||
| } |
There was a problem hiding this comment.
btw BaseEntityTable has styling for the first column that makes the ID column sticky so if you see lots of columns and scroll to the right the ID column stays. However that rule is for idx === 0 but now that is the Pin column. Can you update it so its idx <= 1?
While you are there, you can also fix a fun. When I added it, I did not think about conflicting styles so the background row highlight doesn't work for this column. So I would do something similar to before when we add a new value (eg. alwaysVisible) to className if idx <= 1 and do the backgroundColor and etc in this css file.
| @@ -35,7 +36,10 @@ function useColumnVisibility<T extends ObjectData>( | |||
| ); | |||
|
|
|||
| const visibleColumns = useMemo( | |||
| key: 'Pin', | ||
| label: '', | ||
| render: (object) => <TablePinCell object={object} />, | ||
| exportValue: () => '', |
There was a problem hiding this comment.
Ah! I realize since it is always visible, it will be part of the table export. You should update TableExport to omit the "Pin" column when pinned is empty.
| .CardPinButton { | ||
| /* Position the shared pin button in the card's top-right corner. The button's | ||
| own appearance (colors, icon swap) lives in pinButton.css. */ | ||
| .CardInCardList .PinButton { |
2 participants
Fixes #661
Summary: Add a far-left pin column to all tables so users can pin rows via the existing pinned page param, using the same CSS-driven PinButton interactions as cards.
Changes
User experience
Logical changes
Refactors
Screenshots