You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import { BulkSelect } from '@patternfly/react-component-groups';
18
-
import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
18
+
import { ExclamationCircleIcon } from '@patternfly/react-icons';
19
+
import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
20
+
import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
19
21
20
22
## Data view toolbar
21
23
22
24
The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section.
23
25
24
26
Data view toolbar can contain a `pagination`, `bulkSelect` or any other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
25
27
26
-
### Basic example
28
+
### Basic toolbar example
27
29
28
30
```js file="./DataViewToolbarExample.tsx"
29
31
30
32
```
31
33
34
+
## Data view table
35
+
36
+
The **data view table** component renders your columns and rows definition into a [table](/components/table) component.
37
+
38
+
### Rows and columns customization
39
+
40
+
This example shows possible formats of `rows` and `columns` passed to the `DataViewTable` which allow you various customizations of the table header and body.
41
+
42
+
```js file="./DataViewTableExample.tsx"
43
+
44
+
```
45
+
46
+
The `DataViewTable` component accepts the following props:
47
+
48
+
-`columns` defining the column headers of the table. Each item in the array can be a `ReactNode` (for simple headers) or an object with the following properties:
49
+
-`cell` (`ReactNode`) content to display in the column header.
50
+
- optional `props` (`ThProps`) to pass to the `<Th>` component, such as `width`, `sort`, and other table header cell properties.
51
+
52
+
-`rows` defining the rows to be displayed in the table. Each item in the array can be either an array of `DataViewTd` (for simple rows) or an object with the following properties:
53
+
-`row` (`DataViewTd[]`) defining the content for each cell in the row.
54
+
- optional `id` (`string`) for the row (can be used to match items in selection).
55
+
- optional `props` (`TrProps`) to pass to the `<Tr>` component, such as `isHoverable`, `isRowSelected`, and other table row properties.
56
+
57
+
- optional `ouiaId`
58
+
59
+
- optional `props` (`TableProps`) that are passed down to the `<Table>` component, except for `onSelect`, which is managed internally.
import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
19
+
import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
20
+
import { useDataViewEventsContext, DataViewEventsContext, DataViewEventsProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
21
+
import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
22
+
23
+
The **data view events context** provides a way of listening to the data view events from the outside of the component.
24
+
25
+
### Row click subscription example
26
+
The following example demonstrates how to use the `DataViewEventsContext` to manage shared state and handle events. The `DataViewEventsProvider` is used to wrap components that need access to the shared context. This example illustrates how to set up a layout that listens for data view row click events and displays detailed information about the selected row in a [drawer component](/components/drawer).
0 commit comments