[Feature Request]: Putting expand button on the right hand side of the row

[tayambamwanza]

Summary

Right now the expansion panel toggle button shows on the left when the expandable is true.

An option can be added to toggle the position possibly something like expansionButtonPosition: 'left' | 'right'

Justification

It may be easier to reach the button on the right hand side. The reason I opened this one is I got a mockup design that has the expansion on the right though.

Desired UX and success metrics

Expand row button works the same but is the last column instead of the first.

Required functionality

Expand row button works the same but is the last column instead of the first.

Specific timeline issues / requests

No response

Available extra resources

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[aagonzales]

Hello @tayambamwanza! Could you explain a little more about when the toggle button would be on the left vs the right? Do you want this more from a third party theming perspective or are you proposing we change the pattern tables use at IBM?

[tayambamwanza]

@aagonzales Thank you for prompt response, lets say more from a third party theme perspective, like an optional configuration of the tables layout.

It would be the developers decision on whether to pass in the prop to enable the new layout but the table would maintain the same behaviour that it has now by default.

[JathanHibbs]

Sorry to jump in, but I am also interested in this feature. An extra property on the datatable to indicate what side the expand button is on would be super helpful, especially for RTL layouts and RTL language localization.

[tay1orjones]

@tayambamwanza @JathanHibbs This would be a big change to the interaction pattern of the component. Could you share further reasoning and research to show how this positively impacts the user experience, or the left-only expand icon detracts from the user experience? Is this for an RTL context?

[tayambamwanza]

Hi, not suggesting that the default behaviour change but rather that optionally the expand button can be on the right.

Your are correct that it can be used for RTL which is what was needed for a project I'm working on, we however created a custom implementation, so if you feel it's too much work then don't worry.

[tay1orjones]

I just tested this with dir="rtl" and the data table does respond appropriately with the expand chevrons switched to the righthand side. For an application supporting right-to-left (RTL), the styles need to be processed with RTLCSS or similar to get appropriate margin, padding, etc. but by and large the datatable with expansion does support RTL as-is.

[sstrubberg]

Hey @tayambamwanza we chatted as a team and thought this would be a good candidate for referring to our Design System Adoption Guild (DSAG) since the implications of such a feature could have adverse effects. Based on how the idea is received, we would want to move forward accepting this feature request as a community-driven initiative.

[berndfuhrmann]

I made a PR for this feature, since this would be very useful for our project.

[tay1orjones]

One update here, the DataTable is styled fully with logical properties now. RTLCSS isn't needed for RTL styling support, it's now just there by default. You can change the direction for part of your app, or just this component by using the LayoutDirection helper component.

There's no concrete examples outlined here so far. It would be great to have answers to questions like:

• What problem does this solve?
• In what way is this useful?
• When and why would someone use this mode over the default?
• Is it a potential problem for users not discovering the row is expandable due to it being so far at the end of the row when they're scanning?
• Does the amount of columns in the DataTable impact whether or not this feature should be used?

[berndfuhrmann]

@tay1orjones This is the kind of table we have in mind. Just a sketch for now:

There is a thumbnail on the left and some information in the columns. You can extend each row to see details about that row.

The thumbnail is an important visual clue for the user. It also serves as a visual identifier for the whole record. So we want it to be the first thing the user sees in the top left corner.

The state of the expand button doesn't give the user a lot. Therefore we'd rather like to display it on the right. We still want that button to be displayed, since it communicates the ability to expand the record to the user, esp. new users of our project. It also gives something to the keyboard users.

To answer your last question: If you had a huge amount of columns and they wouldn't fit on the screen or overcrowd the existing space, you might not want this. But then again, you'd likely want to move more columns into the expandable area. Otherwise it really depends on the importance of each column in relation to the need to learn that you can expand a row.

In this PR, a property is added with which you can change the side. The default still remains the left side. But if the priority of each column warrants it, I think the right side is a good choice.

By the way, different UIs display such expand buttons on the right or the left. So depending on which system a user is coming from, the expectation might be to have the expand button on the right side.

[jeanservaas]

@tayambamwanza the Carbon designers feel that this position switch only makes sense in the RTL context and as @tay1orjones, the flip is already available in RTL. It also looks above, like the justification for this is an RTL context... so really I can't see a need/rationale for a custom implementation since it's already available.

[tayambamwanza]

@tayambamwanza the Carbon designers feel that this position switch only makes sense in the RTL context and as @tay1orjones, the flip is already available in RTL. It also looks above, like the justification for this is an RTL context... so really I can't see a need/rationale for a custom implementation since it's already available.

Thank you, I didn't raise any further points on this issue so wondering why I'm mentioned 😅?

[tay1orjones]

Probably just to close the loop as you're the issue author. Thanks for opening this, I'm going to close based on the outcome determined by Jeannie.

[tay1orjones]

Some additional detail on ways to accomplish this in userland is here, https://github.com/carbon-design-system/carbon/pull/15336#issuecomment-1850433911