Skip to content

DataViews: Split the components into composable components. #63646

@youknowriad

Description

@youknowriad

Part of #55083

Right now, when you render the DataViews component, it gets rendered all in one including:

  • Search bar
  • Filters
  • View Config
  • Layout switcher
  • Pagination
  • Layouts

This approach provides a straightforward way to use DataViews but lacks flexibility. For instance in #55101 we want to add a "toggle" to show the dataviews sidebar at the right of the view config dropdown. That toggle doesn't have anything to do with DataViews so it shouldn't rendered within the dataviews component.

We have two options:

Short Term option

Just have some kind of slot prop to inject UI there. I'll probably use this approach initially.

Long Term option

Expose the underlying DataViews component and allow composition:

<DataViews>
    <HStack>
        <DataViews.Search />
        <DataViews.Filters />
        <DataViews.BulkActions />
        <DataViews.LayoutSwitcher />
        <DataViews.ViewConfig />
        <Button>My custom Button</Button>
     </HStack>
      <DataViews.Layout />
      <DataViews.Pagination />
      <DataViews.BulkActionToolbar />
</DataViews>

Any thoughts @ntsekouras @ellatrix @oandregal @jorgefilipecosta
Also components team as they're exploring a similar pattern for the components package. @ciampo @mirka @DaniGuardiola

Metadata

Metadata

Assignees

Labels

[Feature] DataViewsWork surrounding upgrading and evolving views in the site editor and beyond[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions