@@ -115,75 +115,73 @@ export const DataListPagination: React.FunctionComponent = () => {
115115 ) ;
116116
117117 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 >
188186 ) ;
189187} ;
0 commit comments