feat(DataTable): add support for actions and different layouts #2953
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
🦋 Changeset detectedLatest commit: 2ec85f0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
size-limit report 📦
|
|
Quick question for you @mperrotti, should the title of the table align to the top edge of the actions container? Or do we want them to be aligned vertically centered? Top-aligned
Centered |
joshblack
temporarily deployed
to
github-pages
GitHub Actions
Inactive
langermank
approved these changes
Feb 28, 2023
Vertically centered is good. I know PageHeader does top-aligned, but that's because they have a different set of layout problems where vertically-centered is more likely to create weird whitespace. |
mperrotti
approved these changes
Mar 1, 2023
| const StyledTableContainer = styled.div` | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| grid-template-areas: |
Merged
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.
Closes https://github.com/github/primer/issues/1889
Add support for the different layouts for a
DataTable(excluding filter). This adds a couple of stories that show support for the table with both a single action and multiple actions. It also includes support for a footer but this will be implemented by paginationThis PR adds two new components to accomplish this:
Table.DividerandTable.Actions. It extendsTable.Containerto be a CSS Grid with different areas for the parts of the table.Feedback
I would love to hear what you all think about this approach for the layout and if there are any other alternatives that I should explore here or that you suggest using!
If folks feel good with this, I'll make sure to add in some quick tests and docs examples for them 👍
Changelog
New
Table.Dividerfor rendering a divider in a tableTable.Actionsfor rendering a group of actions for a tableChanged
sxprop toTable.ContainerTable.Containeris now a CSS Grid.Tableclass name forTablecomponentRemoved