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
The **data view table** component renders your data into columns and rows within a [PatternFly table](/components/table) component. You can easily customize and configure the table with these additional [data view components and props](/extensions/data-view/table#props).
29
38
30
39
## Configuring rows and columns
40
+
31
41
To define rows and columns for your table, use these props:
42
+
32
43
-`columns`: Defines the column heads of the table. Each item in the array can be a `ReactNode` for simple heads, or an object with the following properties:
33
44
-`cell`: Content to display in the column head.
34
45
-`props` (optional): (`ThProps`) to pass to the `<Th>` component, such as `width`, `sort`, and other table head cell properties.
@@ -42,20 +53,38 @@ It is also possible to disable row selection using the `isSelectDisabled` functi
42
53
If you want to have all expandable nodes open on initial load pass the `expandAll` prop to the DataViewTable component
43
54
44
55
### Table example
56
+
45
57
```js file="./DataViewTableExample.tsx"
46
58
47
59
```
48
60
61
+
### Resizable columns
62
+
63
+
To allow a column to resize, add `isResizable` to the `DataViewTable` element, and pass `resizableProps` to each applicable header cell. The `resizableProps` object consists of the following fields:
64
+
65
+
-`isResizable` - indicates that the column is resizable
66
+
-`resizeButtonAriaLabel` - an accessible name for the resizable column's resize button. This must be passed in if the column is resizable.
67
+
-`onResize` - a callback that will return the source event and the new width of the column
68
+
-`width` - a default width value for a column
69
+
-`minWidth` - the minimum width a column may shrink to
70
+
-`increment` - how many pixels the column will move left or right for keyboard navigation
71
+
-`shiftIncrement` - how many pixels the column will move left or right while shift is held for keyboard navigation
72
+
-`screenReaderText` - text that will be announced when a column is resized
A tree table includes expandable rows and custom icons for leaf and parent nodes.
80
+
A tree table includes expandable rows and custom icons for leaf and parent nodes.
52
81
To enable a tree table, pass the `isTreeTable` flag to the `<DataViewTable>` component.
53
82
54
-
55
83
Tree table rows have to be defined with following keys:
56
-
-`row`: Defines the content for each cell in the row.
57
-
-`id`: Unique identifier for the row that's used for matching selected items.
58
-
-`children` (optional): Defines the children rows.
84
+
85
+
-`row`: Defines the content for each cell in the row.
86
+
-`id`: Unique identifier for the row that's used for matching selected items.
87
+
-`children` (optional): Defines the children rows.
59
88
60
89
To update a row's icon to reflect its expansion state, pass `collapsedIcon`, `expandedIcon`, and `leafIcon` to `<DataViewTable>`.
61
90
@@ -68,17 +97,21 @@ To disable row selection, pass the `isSelectDisabled` function to `selection` pr
68
97
```
69
98
70
99
## Sorting
100
+
71
101
The following example demonstrates how to enable sorting functionality within a data view. This implementation supports dynamic sorting by column and persists the sort state in the page's URL via [React Router](https://reactrouter.com/).
72
102
73
103
### Sorting example
104
+
74
105
```js file="./SortingExample.tsx"
75
106
76
107
```
108
+
77
109
### Sorting state
78
110
79
111
The `useDataViewSort` hook manages the sorting state of a data view and provides an easy way to handle sorting logic, such as synchronization with URL parameters and the definition of default sorting behavior.
80
112
81
113
**Initial values:**
114
+
82
115
-`initialSort` object to set default `sortBy` and `direction` values:
83
116
-`sortBy`: Key of the initial column to sort.
84
117
-`direction`: Default sorting direction (`asc` or `desc`).
@@ -88,44 +121,47 @@ The `useDataViewSort` hook manages the sorting state of a data view and provides
88
121
- Customizable parameter names for the URL:
89
122
-`sortByParam`: Name of the URL parameter for the column key.
90
123
-`directionParam`: Name of the URL parameter for the sorting direction.
91
-
The `useDataViewSort` hook integrates seamlessly with [React Router](https://reactrouter.com/) to manage the sort state via URL parameters. Alternatively, you can use `URLSearchParams` and `window.history.pushState` APIs, or other routing libraries. If URL synchronization is not configured, the sort state is managed internally within the component.
124
+
The `useDataViewSort` hook integrates seamlessly with [React Router](https://reactrouter.com/) to manage the sort state via URL parameters. Alternatively, you can use `URLSearchParams` and `window.history.pushState` APIs, or other routing libraries. If URL synchronization is not configured, the sort state is managed internally within the component.
92
125
93
126
**Return values:**
127
+
94
128
-`sortBy`: Key of the column currently being sorted.
95
129
-`direction`: Current sorting direction (`asc` or `desc`).
96
130
-`onSort`: Function to handle sorting changes programmatically or via user interaction.
97
131
98
132
## States
99
133
100
-
The data view table allows you to react to the `activeState` of the data view (such as `empty`, `error`, `loading`). You can use the `headStates` and `bodyStates` props to define the table head and body for a given state.
134
+
The data view table allows you to react to the `activeState` of the data view (such as `empty`, `error`, `loading`). You can use the `headStates` and `bodyStates` props to define the table head and body for a given state.
101
135
102
136
### Empty
103
-
When there is no data to render in the data view, you can instead display an empty state.
104
137
105
-
You can create your empty state by passing a [PatternFly empty state](/components/empty-state) to the `empty` key of `headStates` or `bodyStates`.
138
+
When there is no data to render in the data view, you can instead display an empty state.
139
+
140
+
You can create your empty state by passing a [PatternFly empty state](/components/empty-state) to the `empty` key of `headStates` or `bodyStates`.
106
141
107
142
```js file="./DataViewTableEmptyExample.tsx"
108
143
109
144
```
110
145
111
146
### Error
147
+
112
148
When there is a data connection or retrieval error, you can display an error state.
113
149
114
150
The error state will be displayed when the data view `activeState` value is `error`.
115
151
116
-
You can create your error state by passing either the [component groups extension's error state](/component-groups/error-state) or a [PatternFly empty state](/components/empty-state) to the `error` key of `headStates` or `bodyStates`.
152
+
You can create your error state by passing either the [component groups extension's error state](/component-groups/error-state) or a [PatternFly empty state](/components/empty-state) to the `error` key of `headStates` or `bodyStates`.
117
153
118
154
```js file="./DataViewTableErrorExample.tsx"
119
155
120
156
```
121
157
122
158
### Loading
159
+
123
160
To indicate that data is loading, you can display a loading state.
124
161
125
162
The loading state will be displayed when the data view `activeState` value is `loading`.
126
163
127
-
You can create your loading state by passing either the [component groups extension's skeleton table](/component-groups/skeleton-table) or a customized [PatternFly empty state](/components/empty-state) to the `loading` key of `headStates` or `bodyStates`.
128
-
164
+
You can create your loading state by passing either the [component groups extension's skeleton table](/component-groups/skeleton-table) or a customized [PatternFly empty state](/components/empty-state) to the `loading` key of `headStates` or `bodyStates`.
0 commit comments