Note: Data view lives in its own package @patternfly/react-data-view
If you notice a bug, or if you have a suggestion for improving the data view extension or its documentation, please file an issue in the react-data-view repository. Before doing so, please make sure there is not already a pre-existing issue.
The data view extension enables you to display datasets in organized layouts, with data representations and interactive toolbars for actions like selection and pagination.
Layout
A data view should contain a header, the data representation, and a footer. These parts are organized in a stack layout.
The data view toolbars and sub-components that display the data (like a card view or table) are always passed as children to the <DataView> component.
Modularity
The extension's modular architecture lets you efficiently create consistent data views, either by using predefined sub-components and hooks, or by defining your own. You can choose the tools that suit your needs and easily replace any part with a custom implementation.
The <DataViewToolbar> component extends the PatternFly toolbar to support the most common needs. For more details, refer to the data view toolbar examples. You can also use a custom toolbar component if needed for your use case.
Data can be presented using the predefined <DataViewTable> component, which is an abstraction above the PatternFly table. For more details, refer to the data view table examples. If you have more specific data display needs, you can pass a custom implementation as a <DataView> child. In the near future, we are also planning to introduce a predefined card view component.
| Data selection table head cell | ||||||
|---|---|---|---|---|---|---|
| Repository one | Branch one | Pull request one | Workspace one | Timestamp one | ||
| Repository two | Branch two | Pull request two | Workspace two | Timestamp two | ||
| Repository three | Branch three | Pull request three | Workspace three | Timestamp three | ||
| Repository four | Branch four | Pull request four | Workspace four | Timestamp four | ||
| Repository five | Branch five | Pull request five | Workspace five | Timestamp five |
Events context
The <DataViewEventsContext> component is an advanced feature that enables external listening of data view events. In order to share data view context with your other UI components, both your components and your data view should be wrapped with the <DataViewEventsProvider>. This is demonstrated in the following example.
Row click subscription example
This example uses the <DataViewEventsProvider> to display details about a selected row in a drawer component.
| Data selection table head cell | Repositories | Branches | Pull requests | Workspaces | Last commit | |
|---|---|---|---|---|---|---|
| Repository one | Branch one | Pull request one | Workspace one | Timestamp one | ||
| Repository two | Branch two | Pull request two | Workspace two | Timestamp two | ||
| Repository three | Branch three | Pull request three | Workspace three | Timestamp three | ||
| Repository four | Branch four | Pull request four | Workspace four | Timestamp four | ||
| Repository five | Branch five | Pull request five | Workspace five | Timestamp five | ||
| Repository six | Branch six | Pull request six | Workspace six | Timestamp six |
Props
DataView
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content rendered inside the data view | |
| activeState | DataViewState | string | Currently active state | |
| ouiaId | string | Custom OUIA ID | |
| selection | DataViewSelection | Selection context configuration |
