Internal issue 3214 - ic-data-table slotted content in sortable columns
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
Copied and pasted from my post in the support channel:
Hi, I have a requirement to add slotted content to a column of the data table, where the slotted content is associated with the other data on its row. Hopefully my example explains this a bit better:
[https://stackblitz.com/edit/faho5dkg?file=src%2Fapp.tsx&hideExplorer=1|https://stackblitz.com/edit/faho5dkg?file=src%2Fapp.tsx&hideExplorer=1]
(Note: in that stackblitz, when you sort the Names column, the buttons in the final column don't sort with it, that's the bug)
In the example, I used the method of adding slotted content that's in the documentation, but this breaks when the columns are sortable, as the slotted content stays in the same row (also demonstrated in the example).
It's presumably possible for me to work around this by overwriting the built-in sorting functionality and using my own so I always know which row an element should be in but that seems like a bit of a faff. Is there an alternative ICDS-approved way to get around this?
Contributor guide
Research direction
Start with the linked StackBlitz example and the data table documentation's slotted-content approach. Reproduce the issue by sorting the Names column, then trace the sortable-column and slotted-content handling; done means the buttons in the final column remain associated with their original row after sorting.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100