@@ -115,75 +115,73 @@ export const DataListPagination: React.FunctionComponent = () => {
115
115
) ;
116
116
117
117
return (
118
- < React . Fragment >
119
- < DashboardWrapper mainContainerId = "main-content-datalist-view-pagination" breadcrumb = { null } >
120
- < PageSection variant = { PageSectionVariants . light } >
121
- < TextContent >
122
- < Text component = "h1" > Projects</ Text >
123
- < Text component = "p" > This is a demo that showcases PatternFly Data List</ Text >
124
- </ TextContent >
125
- </ PageSection >
126
- < PageSection isFilled >
127
- < Toolbar id = "toolbar-group-types" >
128
- < ToolbarContent > { toolbarItems } </ ToolbarContent >
129
- </ Toolbar >
130
- < DataList aria-label = "Demo data list" >
131
- { paginatedRows . map ( ( row , rowIndex ) => {
132
- const { name, threads, applications, workspaces, lastModified } = row ;
133
- return (
134
- < DataListItem aria-labelledby = { `Demo-item-${ rowIndex } ` } key = { rowIndex } >
135
- < DataListItemRow >
136
- < DataListItemCells
137
- dataListCells = { [
138
- < DataListCell isFilled = { false } key = "buttons1" >
139
- < Flex direction = { { default : 'column' } } >
140
- < FlexItem >
141
- < Text id = { `Demo-item-${ rowIndex } ` } component = { TextVariants . p } >
142
- { name }
143
- </ Text >
144
- </ FlexItem >
145
- < FlexItem >
146
- < Text component = { TextVariants . small } >
147
- Working repo for
148
- < a href = "http://www.patternfly.org/" > PatternFly</ a >
149
- </ Text >
150
- </ FlexItem >
151
- < FlexItem >
152
- < Flex spaceItems = { { default : 'spaceItemsSm' } } >
153
- < FlexItem >
154
- < CodeBranchIcon /> { threads }
155
- </ FlexItem >
156
- < FlexItem >
157
- < CodeIcon /> { applications }
158
- </ FlexItem >
159
- < FlexItem >
160
- < CubeIcon /> { workspaces }
161
- </ FlexItem >
162
- < FlexItem > Updated { lastModified } </ FlexItem >
163
- </ Flex >
164
- </ FlexItem >
165
- </ Flex >
166
- </ DataListCell > ,
167
- < DataListCell isFilled = { false } alignRight key = "secondary content align" >
168
- < Flex >
169
- < FlexItem >
170
- < Button variant = "secondary" > Action</ Button >
171
- </ FlexItem >
172
- < FlexItem >
173
- < a href = "#" > Link</ a >
174
- </ FlexItem >
175
- </ Flex >
176
- </ DataListCell >
177
- ] }
178
- />
179
- </ DataListItemRow >
180
- </ DataListItem >
181
- ) ;
182
- } ) }
183
- </ DataList >
184
- { renderPagination ( 'bottom-pagination' , PaginationVariant . bottom , true , true ) }
185
- </ PageSection >
186
- </ DashboardWrapper >
187
- </ React . Fragment >
118
+ < DashboardWrapper mainContainerId = "main-content-datalist-view-pagination" breadcrumb = { null } >
119
+ < PageSection variant = { PageSectionVariants . light } >
120
+ < TextContent >
121
+ < Text component = "h1" > Projects</ Text >
122
+ < Text component = "p" > This is a demo that showcases PatternFly Data List</ Text >
123
+ </ TextContent >
124
+ </ PageSection >
125
+ < PageSection isFilled >
126
+ < Toolbar id = "toolbar-group-types" >
127
+ < ToolbarContent > { toolbarItems } </ ToolbarContent >
128
+ </ Toolbar >
129
+ < DataList aria-label = "Demo data list" >
130
+ { paginatedRows . map ( ( row , rowIndex ) => {
131
+ const { name, threads, applications, workspaces, lastModified } = row ;
132
+ return (
133
+ < DataListItem aria-labelledby = { `Demo-item-${ rowIndex } ` } key = { rowIndex } >
134
+ < DataListItemRow >
135
+ < DataListItemCells
136
+ dataListCells = { [
137
+ < DataListCell isFilled = { false } key = "buttons1" >
138
+ < Flex direction = { { default : 'column' } } >
139
+ < FlexItem >
140
+ < Text id = { `Demo-item-${ rowIndex } ` } component = { TextVariants . p } >
141
+ { name }
142
+ </ Text >
143
+ </ FlexItem >
144
+ < FlexItem >
145
+ < Text component = { TextVariants . small } >
146
+ Working repo for
147
+ < a href = "http://www.patternfly.org/" > PatternFly</ a >
148
+ </ Text >
149
+ </ FlexItem >
150
+ < FlexItem >
151
+ < Flex spaceItems = { { default : 'spaceItemsSm' } } >
152
+ < FlexItem >
153
+ < CodeBranchIcon /> { threads }
154
+ </ FlexItem >
155
+ < FlexItem >
156
+ < CodeIcon /> { applications }
157
+ </ FlexItem >
158
+ < FlexItem >
159
+ < CubeIcon /> { workspaces }
160
+ </ FlexItem >
161
+ < FlexItem > Updated { lastModified } </ FlexItem >
162
+ </ Flex >
163
+ </ FlexItem >
164
+ </ Flex >
165
+ </ DataListCell > ,
166
+ < DataListCell isFilled = { false } alignRight key = "secondary content align" >
167
+ < Flex >
168
+ < FlexItem >
169
+ < Button variant = "secondary" > Action</ Button >
170
+ </ FlexItem >
171
+ < FlexItem >
172
+ < a href = "#" > Link</ a >
173
+ </ FlexItem >
174
+ </ Flex >
175
+ </ DataListCell >
176
+ ] }
177
+ />
178
+ </ DataListItemRow >
179
+ </ DataListItem >
180
+ ) ;
181
+ } ) }
182
+ </ DataList >
183
+ { renderPagination ( 'bottom-pagination' , PaginationVariant . bottom , true , true ) }
184
+ </ PageSection >
185
+ </ DashboardWrapper >
188
186
) ;
189
187
} ;
0 commit comments