Skip to content

Conversation

ericsoderberghp
Copy link
Contributor

@ericsoderberghp ericsoderberghp commented Sep 21, 2022

This is an exploration into adding a Data component.

Simple

At it's simplest, one could do something like:

<Data data={...} view={{ search: 'a', properties: { status: { label: 'Status' } }>
  <DataTable columns={...} />
</Data>

Preview

Variations

data driven containers

Substitute List or Cards for DataTable, or include them all, it works. Cards is new here as well. See the stories under "Data" for examples.

custom layout

New components include DataSearch, DataFilters, DataFilter, and DataSummary. Using these within a Data allows the caller to customize the layout or various details. See the "Data/Inline" story for an example of a custom layout

where to put filters

DataFilters can be shown inline, as the dropContents of a DropButton, or as the content of a Layer toggled by a Button. See the stories under "DataFilters" for examples of each.

Notes

This is just an initial draft to foster discussion.

@MikeKingdom
Copy link
Collaborator

Cool idea

@jcfilben jcfilben linked an issue Sep 27, 2022 that may be closed by this pull request
@ericsoderberghp ericsoderberghp changed the title DRAFT - explore adding a <Data /> component <Data /> component Dec 7, 2022
test('renders', () => {
const { container } = render(
<Grommet>
<Data data={data}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

looks strange here like there is an extra gap

Screen Shot 2022-12-16 at 1 25 31 PM

Copy link
Collaborator

Choose a reason for hiding this comment

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

but above you have gap='small' soo not sure what it could be

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Refactored Toolbar and the story.

Copy link
Collaborator

Choose a reason for hiding this comment

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

sounds good I can take a look

Copy link
Collaborator

@britt6612 britt6612 left a comment

Choose a reason for hiding this comment

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

LGTM!
Fixed merge conflicts from feedback files..
Besides the story Jessica pointed out..Also thank you for cleaning up the reset button. The file structure is a lot better as well now that they are all clumped together.

Copy link
Collaborator

@jcfilben jcfilben left a comment

Choose a reason for hiding this comment

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

Looks good!

@ericsoderberghp ericsoderberghp merged commit 7c45cc9 into master Dec 21, 2022
@ericsoderberghp ericsoderberghp deleted the feat/data branch December 21, 2022 00:45
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.

Enhancement - Explore Filters Component
5 participants