Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨(react) make optional DataGrid row selection #339

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

NathanVss
Copy link
Member

@NathanVss NathanVss commented Aug 21, 2024

Hi there πŸ‘‹

When using the selection feature on another project we realized that we needed to make some row non selectable at all by hiding the checkbox completely.

Result

Capture d’écran 2024-08-21 aΜ€ 16 20 35

Use case

We are building a file explorer in which we want to allow users to select files but not the folders, see:
Capture d’écran 2024-08-21 aΜ€ 16 21 08

@NathanVss NathanVss self-assigned this Aug 21, 2024
Copy link

changeset-bot bot commented Aug 21, 2024

πŸ¦‹ Changeset detected

Latest commit: 60d17e3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@openfun/cunningham-react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@NathanVss NathanVss force-pushed the feat/datagrid-hide-select-checkboxes branch from e2adb7d to 486f028 Compare August 21, 2024 14:22
@NathanVss NathanVss marked this pull request as draft August 21, 2024 14:23
When using the selection feature on another project we realized that
we needed to make some row non selectable at all by hiding the checkbox
completely.
@NathanVss NathanVss force-pushed the feat/datagrid-hide-select-checkboxes branch from 486f028 to 60d17e3 Compare August 21, 2024 14:24
@NathanVss NathanVss marked this pull request as ready for review August 21, 2024 14:25
return (
<Checkbox
checked={row.getIsSelected()}
disabled={!row.getCanSelect}
Copy link
Member

@jbpenrath jbpenrath Aug 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your change highlights this logic is wrong

Suggested change
disabled={!row.getCanSelect}
disabled={!row.getCanSelect()}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right on this, but we need a way to hide checkboxes, not just grey them out. WDYT about adding a props on DataGrid named hideSelectCellWhenDisabled ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(ping) :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woops! I did not our reply ...
Ok let's do that

@@ -70,6 +70,10 @@ below the table.

<Canvas sourceState="shown" of={Stories.ClientSideWithPagination}/>

You can also make a row non selectable by setting using `enableRowSelection` as a callback function that returns a boolean based on a condition.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
You can also make a row non selectable by setting using `enableRowSelection` as a callback function that returns a boolean based on a condition.
You can also make a row non selectable by setting `enableRowSelection` prop with a callback function that returns a boolean based on a condition.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants