mi6 / mi6/ic-ui-kit

Internal issue 3214 - ic-data-table slotted content in sortable columns

Open
#4,360 1 comment 0 reactions 0 assignees View on GitHub
data-table component
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.