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,35 @@ 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
+
-`onResize` - a callback that will return the source event and the new width of the column
67
+
-`width` - a default width value for a column
68
+
-`minWidth` - the minimum width a column may shrink to
69
+
-`increment` - how many pixels the column will move left or right for keyboard navigation
A tree table includes expandable rows and custom icons for leaf and parent nodes.
77
+
A tree table includes expandable rows and custom icons for leaf and parent nodes.
52
78
To enable a tree table, pass the `isTreeTable` flag to the `<DataViewTable>` component.
53
79
54
-
55
80
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.
81
+
82
+
-`row`: Defines the content for each cell in the row.
83
+
-`id`: Unique identifier for the row that's used for matching selected items.
84
+
-`children` (optional): Defines the children rows.
59
85
60
86
To update a row's icon to reflect its expansion state, pass `collapsedIcon`, `expandedIcon`, and `leafIcon` to `<DataViewTable>`.
61
87
@@ -68,17 +94,21 @@ To disable row selection, pass the `isSelectDisabled` function to `selection` pr
68
94
```
69
95
70
96
## Sorting
97
+
71
98
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
99
73
100
### Sorting example
101
+
74
102
```js file="./SortingExample.tsx"
75
103
76
104
```
105
+
77
106
### Sorting state
78
107
79
108
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
109
81
110
**Initial values:**
111
+
82
112
-`initialSort` object to set default `sortBy` and `direction` values:
83
113
-`sortBy`: Key of the initial column to sort.
84
114
-`direction`: Default sorting direction (`asc` or `desc`).
@@ -88,44 +118,47 @@ The `useDataViewSort` hook manages the sorting state of a data view and provides
88
118
- Customizable parameter names for the URL:
89
119
-`sortByParam`: Name of the URL parameter for the column key.
90
120
-`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.
121
+
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
122
93
123
**Return values:**
124
+
94
125
-`sortBy`: Key of the column currently being sorted.
95
126
-`direction`: Current sorting direction (`asc` or `desc`).
96
127
-`onSort`: Function to handle sorting changes programmatically or via user interaction.
97
128
98
129
## States
99
130
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.
131
+
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
132
102
133
### Empty
103
-
When there is no data to render in the data view, you can instead display an empty state.
104
134
105
-
You can create your empty state by passing a [PatternFly empty state](/components/empty-state) to the `empty` key of `headStates` or `bodyStates`.
135
+
When there is no data to render in the data view, you can instead display an empty state.
136
+
137
+
You can create your empty state by passing a [PatternFly empty state](/components/empty-state) to the `empty` key of `headStates` or `bodyStates`.
106
138
107
139
```js file="./DataViewTableEmptyExample.tsx"
108
140
109
141
```
110
142
111
143
### Error
144
+
112
145
When there is a data connection or retrieval error, you can display an error state.
113
146
114
147
The error state will be displayed when the data view `activeState` value is `error`.
115
148
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`.
149
+
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
150
118
151
```js file="./DataViewTableErrorExample.tsx"
119
152
120
153
```
121
154
122
155
### Loading
156
+
123
157
To indicate that data is loading, you can display a loading state.
124
158
125
159
The loading state will be displayed when the data view `activeState` value is `loading`.
126
160
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
-
161
+
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