Skip to content

Conversation

kimkscott
Copy link
Contributor

@kimkscott kimkscott commented Mar 28, 2024

This is a partial, draft, PR to enhance DataTableColumns to disallow changing the order of selected columns.

This PR addresses this issue: #7170

A new attribute, pinOrder, can be specified in an object in the options property. This attribute pins the order of this column in DataTableColumns.

This is implemented using the existing pinned property of the List component.

Here is a description of requirements provided by Taylor Seamans:

  1. Whichever item is effectively the “first” reorderable item should have the up arrow button disabled
  2. If an item that isn’t the leftmost is not reorderable, then the items around it should shift while keeping its order fixed
  3. This behavior should work for both drag + drop as well as using the arrow keys

What does this PR do?

Where should the reviewer start?

What testing has been done on this PR?

How should this be manually tested?

Do Jest tests follow these best practices?

  • screen is used for querying.
  • The correct query is used. (Refer to this list of queries)
  • asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

image

Do the grommet docs need to be updated?

Should this PR be mentioned in the release notes?

Is this change backwards compatible or is it a breaking change?

kimkscott and others added 2 commits March 28, 2024 11:54
This is a partial, draft, PR to enhance DataTableColumns to
disallow changing the order of selected columns.

This PR addresses this issue: grommet#7170

A new attribute, pinOrder, can be specified in an object in
the options property.  This attribute pins the order of this
column in DataTableColumns.

This is implemented using the existing pinned property of the
List component.

Here is a description of requirements provided by Taylor Seamans:
1. Whichever item is effectively the “first” reorderable item should have the up arrow button disabled
2. If an item that isn’t the leftmost is not reorderable, then the items around it should shift while keeping its order fixed
3. This behavior should work for both drag + drop as well as using the arrow keys
property: string;
label: string;
disabled?: boolean;
pinOrder?: boolean;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
pinOrder?: boolean;
pinned?: boolean;

@@ -10,6 +10,7 @@ if (process.env.NODE_ENV !== 'production') {
PropTypes.shape({
disabled: PropTypes.bool,
label: PropTypes.string,
pinOrder: PropTypes.bool,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
pinOrder: PropTypes.bool,
pinned: PropTypes.bool,

@britt6612
Copy link
Collaborator

Looking at enhancing/changing current style

Screen Shot 2024-04-08 at 8 28 26 PM

@taysea
Copy link
Collaborator

taysea commented Apr 9, 2024

Closing this PR since the work will be continued by #7193

@taysea taysea closed this Apr 9, 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.

3 participants