[sparkle] - enh: DataTable
#6622
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 4 commits
August 1, 2024 15:15
…aTable - Added a new `initialColumnOrder` prop to `DataTable` component for setting the initial state of column sorting - Updated `DataTable` stories to demonstrate usage with the new `initialColumnOrder` property
- Adjust the size of the sorting icon to 'xs' to improve visual appearance - Streamline opacity control for better clarity when the column is sorted or not
- Added a hover style to DataTable rows to indicate interactivity when 'onMoreClick' is provided - The hover style changes the border bottom color and applies opacity for better visual feedback
- Update the project version in package-lock.json and package.json for new release
JulesBelveze
force-pushed
the
sparkle/enhance-datatable
branch
from
6150f4c to
3fa71be
Compare
albandum
reviewed
Aug 1, 2024
sparkle/src/components/DataTable.tsx
Outdated
| @@ -197,7 +202,9 @@ DataTable.Row = function Row({ | |||
| <tr | |||
| className={classNames( | |||
| "s-border-b s-border-structure-200 s-text-sm", | |||
| onClick ? "s-cursor-pointer" : "", | |||
| onClick | |||
| ? "s-cursor-pointer hover:s-border-b-neutral-500 hover:s-opacity-70" | |||
There was a problem hiding this comment.
Maybe let's only do the border, opacity drop looks a little odd no?
The best would be to add a light grey background to the child 's
There was a problem hiding this comment.
@albandum something like this?
There was a problem hiding this comment.
Much better - no need for the border change anymore
Remove the border change and mergeable 👍
- Added a gray background to rows on hover to enhance the visibility of the currently selected row
albandum
approved these changes
Aug 1, 2024
- Simplify hover state CSS by removing border color change on row clickability indication.
albandum
pushed a commit
that referenced
this pull request
Aug 28, 2024
* [sparkle] - feature: allow initial column order configuration for DataTable - Added a new `initialColumnOrder` prop to `DataTable` component for setting the initial state of column sorting - Updated `DataTable` stories to demonstrate usage with the new `initialColumnOrder` property * [sparkle] - refactor: update icon size and opacity logic in DataTable - Adjust the size of the sorting icon to 'xs' to improve visual appearance - Streamline opacity control for better clarity when the column is sorted or not * [sparkle] - feature: enhance row hover effect in DataTable component - Added a hover style to DataTable rows to indicate interactivity when 'onMoreClick' is provided - The hover style changes the border bottom color and applies opacity for better visual feedback * [sparkle] - feature: bump package version to 0.2.200 - Update the project version in package-lock.json and package.json for new release * [sparkle] - fix: improve row hover visual feedback in DataTable - Added a gray background to rows on hover to enhance the visibility of the currently selected row * [sparkle] - refactor: streamline DataTable row hover styling - Simplify hover state CSS by removing border color change on row clickability indication. --------- Co-authored-by: Jules <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR aims at enhancing the
DataTablecomponent, which includes:Risk
Breaking UI
Deploy Plan
frontin another PR