feat(Table): Add columnTransforms, classNames decorator, Visibility constants, and hidden/visible breakpoints example #1858
Conversation
This file contains hidden or 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
Member
|
looking good! |
mturley
force-pushed
the
1832-table-column-visibility
branch
from
78fe6a1 to
2cd439f
Compare
Collaborator
|
PatternFly-React preview: https://1858-pr-patternfly-react-patternfly.surge.sh |
…onstants, and hidden/visible breakpoints example Closes patternfly#1832
mturley
force-pushed
the
1832-table-column-visibility
branch
from
2cd439f to
e2b80fa
Compare
mturley
changed the title
Codecov Report
@@ Coverage Diff @@
## master #1858 +/- ##
=========================================
Coverage ? 82.59%
=========================================
Files ? 622
Lines ? 6849
Branches ? 93
=========================================
Hits ? 5657
Misses ? 1152
Partials ? 40
Continue to review full report at Codecov.
|
redallen
approved these changes
Apr 26, 2019
| import styles from '@patternfly/patternfly/components/Table/table.css'; | ||
|
|
||
| const pickProperties = (object, properties) => | ||
| properties.reduce((picked, property) => ({ ...picked, [property]: object[property] }), {}); |
Contributor
There was a problem hiding this comment.
Probably a better way to do (and standardize) this across more components than just table, but this works for now.
Collaborator
Author
There was a problem hiding this comment.
Yeah I agree, I don't think there is a clean way to get a subset of an object's properties. I figured this was nicer than the repetition in my original version:
const {
hidden,
hiddenOnSm,
hiddenOnMd,
hiddenOnLg,
hiddenOnXl,
visibleOnSm,
visibleOnMd,
visibleOnLg,
visibleOnXl
} = styles.modifiers;
export const Visibility = {
hidden,
hiddenOnSm,
hiddenOnMd,
hiddenOnLg,
hiddenOnXl,
visibleOnSm,
visibleOnMd,
visibleOnLg,
visibleOnXl
};
| columns: [ | ||
| { | ||
| title: 'Repositories', | ||
| columnTransforms: [classNames(Visibility.hidden, Visibility.visibleOnMd, Visibility.hiddenOnLg)] |
mcoker
approved these changes
Apr 26, 2019
Contributor
mcoker
left a comment
mcoker
left a comment
There was a problem hiding this comment.
hidden/visible functionality looks great!!
priley86
approved these changes
Apr 26, 2019
kmcfaul
approved these changes
Apr 26, 2019
89 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
8 participants
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.
What: Closes #1832
This PR adds:
columnTransformswhich can be included in a column definition (object in thecellsarray of aTable) with an array of reactabular transform functions which will apply to every cell in the column (header and body). This complements the existing propertiestransforms(only applies to header cells) andcellTransforms(only applies to body cells).classNameswhich just applies all of its arguments as classNames to the affected cells.Visibilitywhich includes all the modifiers for column visibility as properties.