Skip to content

Add Select (dropdown) column type to tables #602

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

Merged
merged 3 commits into from
Jan 8, 2024
Merged

Add Select (dropdown) column type to tables #602

merged 3 commits into from
Jan 8, 2024

Conversation

jreyesr
Copy link
Contributor

@jreyesr jreyesr commented Dec 31, 2023

Hello! I've been playing around with Lowcoder, and I wanted to have dropdowns in editable table columns, as requested in #412. I couldn't find it, so I quickly threw this together.

Let me know if any more changes are needed! I tried to touch similar files to those touched by d92f917, which added the Number column type, so hopefully not too many things have been forgotten.

Proposed changes

This PR adds a new Select column type to tables. It's specifically intended to allow inline edits to present a dropdown so users get some guidance on the allowed values, instead of a simple text field.

Example: the following screenshots show a Table component with its standard data (10 users with an ID, name, date and department). However, the Department column (which is usually a Text column) has been changed to a Select column and marked as Editable:

image

image

When editing a user's Department (by double-clicking that cell), it transforms into a dropdown:

image

Of course, clicking on the dropdown displays the available choices:

image

Once a different choice has been selected (and the cell unfocused), the cell is marked as having pending changes:

image

Saving the table emits an event which has the changed cell as part of the table's changeSet, where it would be handled as any other change. This notification is triggered on the Save Changes event of the table, and it prints {{table.changeSet}}:

image

Types of changes

  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation Update (if none of the other choices apply)

Checklist

  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works
  • I have added necessary documentation (if appropriate)
  • Any dependent changes have been merged and published in downstream modules

Copy link

netlify bot commented Dec 31, 2023

‼️ Deploy request for lowcoder-cloud rejected.

Name Link
🔨 Latest commit 1cd00c2

@jreyesr jreyesr marked this pull request as draft December 31, 2023 22:04
@jreyesr jreyesr marked this pull request as ready for review December 31, 2023 22:22
FalkWolsky
FalkWolsky previously approved these changes Jan 8, 2024
Copy link
Contributor

@FalkWolsky FalkWolsky left a comment

Choose a reason for hiding this comment

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

Thank you million times! What a valuable contribution!

@FalkWolsky FalkWolsky changed the base branch from main to dev January 8, 2024 16:20
@FalkWolsky FalkWolsky dismissed their stale review January 8, 2024 16:20

The base branch was changed.

Copy link

netlify bot commented Jan 8, 2024

👷 Deploy request for lowcoder-test pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 8f6ea6f

Copy link
Contributor

@FalkWolsky FalkWolsky left a comment

Choose a reason for hiding this comment

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

Thank you very much for this valuable contribution!!

@FalkWolsky FalkWolsky merged commit 5692cc6 into lowcoder-org:dev Jan 8, 2024
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