@patternfly/react-table 6.2.0-prerelease.5 → 6.2.0-prerelease.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/components/package.json +1 -1
- package/deprecated/package.json +1 -1
- package/dist/dynamic/components/Table/package.json +1 -1
- package/dist/dynamic/components/Table/utils/decorators/package.json +1 -1
- package/dist/dynamic/components/Table/utils/package.json +1 -1
- package/dist/dynamic/deprecated/components/Table/base/package.json +1 -1
- package/dist/dynamic/deprecated/components/Table/package.json +1 -1
- package/dist/dynamic/deprecated/components/package.json +1 -1
- package/dist/umd/assets/{output-D7Q7dHtz.css → output-IOn0hf7i.css} +3996 -3996
- package/package.json +3 -3
- package/src/demos/Table.md +5 -1
- package/src/demos/examples/TableColumnManagement.tsx +211 -204
- package/src/demos/examples/TableColumnManagementWithDraggable.tsx +306 -555
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-table",
|
|
3
|
-
"version": "6.2.0-prerelease.
|
|
3
|
+
"version": "6.2.0-prerelease.6",
|
|
4
4
|
"description": "This library provides a set of React table components for use with the PatternFly 4",
|
|
5
5
|
"main": "dist/js/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@patternfly/react-core": "^6.2.0-prerelease.
|
|
43
|
+
"@patternfly/react-core": "^6.2.0-prerelease.5",
|
|
44
44
|
"@patternfly/react-icons": "^6.2.0-prerelease.0",
|
|
45
45
|
"@patternfly/react-styles": "^6.2.0-prerelease.0",
|
|
46
46
|
"@patternfly/react-tokens": "^6.2.0-prerelease.0",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"react": "^17 || ^18",
|
|
52
52
|
"react-dom": "^17 || ^18"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "f53d2dd019b4f2aa57980fcd87b5b2e5fdde902a"
|
|
55
55
|
}
|
package/src/demos/Table.md
CHANGED
|
@@ -40,8 +40,12 @@ NavItem,
|
|
|
40
40
|
NavList,
|
|
41
41
|
PageSidebar,
|
|
42
42
|
PageSidebarBody,
|
|
43
|
+
Modal,
|
|
44
|
+
ModalHeader,
|
|
45
|
+
ModalBody,
|
|
46
|
+
ModalFooter,
|
|
43
47
|
} from '@patternfly/react-core';
|
|
44
|
-
import {
|
|
48
|
+
import { DragDropSort } from '@patternfly/react-drag-drop';
|
|
45
49
|
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
|
|
46
50
|
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
|
|
47
51
|
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
|
|
@@ -2,7 +2,6 @@ import React from 'react';
|
|
|
2
2
|
|
|
3
3
|
import {
|
|
4
4
|
Button,
|
|
5
|
-
Card,
|
|
6
5
|
Content,
|
|
7
6
|
DataList,
|
|
8
7
|
DataListCheck,
|
|
@@ -16,6 +15,9 @@ import {
|
|
|
16
15
|
ToolbarItem,
|
|
17
16
|
MenuToggle,
|
|
18
17
|
Modal,
|
|
18
|
+
ModalHeader,
|
|
19
|
+
ModalBody,
|
|
20
|
+
ModalFooter,
|
|
19
21
|
OverflowMenu,
|
|
20
22
|
OverflowMenuGroup,
|
|
21
23
|
OverflowMenuItem,
|
|
@@ -207,173 +209,180 @@ export const TableColumnManagement: React.FunctionComponent = () => {
|
|
|
207
209
|
|
|
208
210
|
const renderModal = () => (
|
|
209
211
|
<Modal
|
|
210
|
-
title="Manage columns"
|
|
211
212
|
isOpen={isModalOpen}
|
|
212
213
|
variant="small"
|
|
213
|
-
description={
|
|
214
|
-
<Content>
|
|
215
|
-
<p>Selected categories will be displayed in the table.</p>
|
|
216
|
-
<Button isInline onClick={selectAllColumns} variant="link">
|
|
217
|
-
Select all
|
|
218
|
-
</Button>
|
|
219
|
-
</Content>
|
|
220
|
-
}
|
|
221
214
|
onClose={handleModalToggle}
|
|
222
|
-
|
|
215
|
+
aria-labelledby="basic-modal-title"
|
|
216
|
+
aria-describedby="modal-box-body-basic"
|
|
217
|
+
>
|
|
218
|
+
<ModalHeader
|
|
219
|
+
title="Manage columns"
|
|
220
|
+
labelId="basic-modal-title"
|
|
221
|
+
description={
|
|
222
|
+
<Content>
|
|
223
|
+
<p>Selected categories will be displayed in the table.</p>
|
|
224
|
+
<Button isInline onClick={selectAllColumns} variant="secondary">
|
|
225
|
+
Select all
|
|
226
|
+
</Button>
|
|
227
|
+
</Content>
|
|
228
|
+
}
|
|
229
|
+
/>
|
|
230
|
+
<ModalBody id="modal-box-body-basic">
|
|
231
|
+
<DataList aria-label="Table column management" id="table-column-management" isCompact>
|
|
232
|
+
<DataListItem aria-labelledby="table-column-management-item1">
|
|
233
|
+
<DataListItemRow>
|
|
234
|
+
<DataListCheck
|
|
235
|
+
aria-labelledby="table-column-management-item1"
|
|
236
|
+
isChecked={checkedState[0]}
|
|
237
|
+
name="check1"
|
|
238
|
+
id="check1"
|
|
239
|
+
onChange={handleChange}
|
|
240
|
+
/>
|
|
241
|
+
<DataListItemCells
|
|
242
|
+
dataListCells={[
|
|
243
|
+
<DataListCell id="table-column-management-item1" key="table-column-management-item1">
|
|
244
|
+
<label htmlFor="check1">{columns[0]}</label>
|
|
245
|
+
</DataListCell>
|
|
246
|
+
]}
|
|
247
|
+
/>
|
|
248
|
+
</DataListItemRow>
|
|
249
|
+
</DataListItem>
|
|
250
|
+
<DataListItem aria-labelledby="table-column-management-item2">
|
|
251
|
+
<DataListItemRow>
|
|
252
|
+
<DataListCheck
|
|
253
|
+
aria-labelledby="table-column-management-item2"
|
|
254
|
+
isChecked={checkedState[1]}
|
|
255
|
+
name="check2"
|
|
256
|
+
id="check2"
|
|
257
|
+
onChange={handleChange}
|
|
258
|
+
/>
|
|
259
|
+
<DataListItemCells
|
|
260
|
+
dataListCells={[
|
|
261
|
+
<DataListCell id="table-column-management-item2" key="table-column-management-item2">
|
|
262
|
+
<label htmlFor="check2">{columns[1]}</label>
|
|
263
|
+
</DataListCell>
|
|
264
|
+
]}
|
|
265
|
+
/>
|
|
266
|
+
</DataListItemRow>
|
|
267
|
+
</DataListItem>
|
|
268
|
+
<DataListItem aria-labelledby="table-column-management-item3">
|
|
269
|
+
<DataListItemRow>
|
|
270
|
+
<DataListCheck
|
|
271
|
+
aria-labelledby="table-column-management-item3"
|
|
272
|
+
isChecked={checkedState[2]}
|
|
273
|
+
name="check3"
|
|
274
|
+
id="check3"
|
|
275
|
+
onChange={handleChange}
|
|
276
|
+
/>
|
|
277
|
+
<DataListItemCells
|
|
278
|
+
dataListCells={[
|
|
279
|
+
<DataListCell id="table-column-management-item3" key="table-column-management-item3">
|
|
280
|
+
<label htmlFor="check3">{columns[2]}</label>
|
|
281
|
+
</DataListCell>
|
|
282
|
+
]}
|
|
283
|
+
/>
|
|
284
|
+
</DataListItemRow>
|
|
285
|
+
</DataListItem>
|
|
286
|
+
<DataListItem aria-labelledby="table-column-management-item4">
|
|
287
|
+
<DataListItemRow>
|
|
288
|
+
<DataListCheck
|
|
289
|
+
aria-labelledby="table-column-management-item4"
|
|
290
|
+
isChecked={checkedState[3]}
|
|
291
|
+
name="check4"
|
|
292
|
+
id="check4"
|
|
293
|
+
onChange={handleChange}
|
|
294
|
+
/>
|
|
295
|
+
<DataListItemCells
|
|
296
|
+
dataListCells={[
|
|
297
|
+
<DataListCell id="table-column-management-item4" key="table-column-management-item4">
|
|
298
|
+
<label htmlFor="check4">{columns[3]}</label>
|
|
299
|
+
</DataListCell>
|
|
300
|
+
]}
|
|
301
|
+
/>
|
|
302
|
+
</DataListItemRow>
|
|
303
|
+
</DataListItem>
|
|
304
|
+
<DataListItem aria-labelledby="table-column-management-item4">
|
|
305
|
+
<DataListItemRow>
|
|
306
|
+
<DataListCheck
|
|
307
|
+
aria-labelledby="table-column-management-item4"
|
|
308
|
+
isChecked={checkedState[4]}
|
|
309
|
+
name="check5"
|
|
310
|
+
id="check5"
|
|
311
|
+
onChange={handleChange}
|
|
312
|
+
/>
|
|
313
|
+
<DataListItemCells
|
|
314
|
+
dataListCells={[
|
|
315
|
+
<DataListCell id="table-column-management-item4" key="table-column-management-item4">
|
|
316
|
+
<label htmlFor="check5">{columns[4]}</label>
|
|
317
|
+
</DataListCell>
|
|
318
|
+
]}
|
|
319
|
+
/>
|
|
320
|
+
</DataListItemRow>
|
|
321
|
+
</DataListItem>
|
|
322
|
+
<DataListItem aria-labelledby="table-column-management-item5">
|
|
323
|
+
<DataListItemRow>
|
|
324
|
+
<DataListCheck
|
|
325
|
+
aria-labelledby="table-column-management-item5"
|
|
326
|
+
isChecked={checkedState[5]}
|
|
327
|
+
name="check6"
|
|
328
|
+
id="check6"
|
|
329
|
+
onChange={handleChange}
|
|
330
|
+
/>
|
|
331
|
+
<DataListItemCells
|
|
332
|
+
dataListCells={[
|
|
333
|
+
<DataListCell id="table-column-management-item5" key="table-column-management-item5">
|
|
334
|
+
<label htmlFor="check6">{columns[5]}</label>
|
|
335
|
+
</DataListCell>
|
|
336
|
+
]}
|
|
337
|
+
/>
|
|
338
|
+
</DataListItemRow>
|
|
339
|
+
</DataListItem>
|
|
340
|
+
<DataListItem aria-labelledby="table-column-management-item6">
|
|
341
|
+
<DataListItemRow>
|
|
342
|
+
<DataListCheck
|
|
343
|
+
aria-labelledby="table-column-management-item6"
|
|
344
|
+
isChecked={checkedState[6]}
|
|
345
|
+
name="check7"
|
|
346
|
+
id="check7"
|
|
347
|
+
onChange={handleChange}
|
|
348
|
+
/>
|
|
349
|
+
<DataListItemCells
|
|
350
|
+
dataListCells={[
|
|
351
|
+
<DataListCell id="table-column-management-item6" key="table-column-management-item5">
|
|
352
|
+
<label htmlFor="check7">{columns[6]}</label>
|
|
353
|
+
</DataListCell>
|
|
354
|
+
]}
|
|
355
|
+
/>
|
|
356
|
+
</DataListItemRow>
|
|
357
|
+
</DataListItem>
|
|
358
|
+
<DataListItem aria-labelledby="table-column-management-item5">
|
|
359
|
+
<DataListItemRow>
|
|
360
|
+
<DataListCheck
|
|
361
|
+
aria-labelledby="table-column-management-item5"
|
|
362
|
+
isChecked={checkedState[7]}
|
|
363
|
+
name="check8"
|
|
364
|
+
id="check8"
|
|
365
|
+
onChange={handleChange}
|
|
366
|
+
/>
|
|
367
|
+
<DataListItemCells
|
|
368
|
+
dataListCells={[
|
|
369
|
+
<DataListCell id="table-column-management-item7" key="table-column-management-item7">
|
|
370
|
+
<label htmlFor="check8">{columns[7]}</label>
|
|
371
|
+
</DataListCell>
|
|
372
|
+
]}
|
|
373
|
+
/>
|
|
374
|
+
</DataListItemRow>
|
|
375
|
+
</DataListItem>
|
|
376
|
+
</DataList>
|
|
377
|
+
</ModalBody>
|
|
378
|
+
<ModalFooter>
|
|
223
379
|
<Button key="save" variant="primary" onClick={onSave}>
|
|
224
380
|
Save
|
|
225
|
-
</Button
|
|
381
|
+
</Button>
|
|
226
382
|
<Button key="cancel" variant="link" onClick={handleModalToggle}>
|
|
227
383
|
Cancel
|
|
228
384
|
</Button>
|
|
229
|
-
|
|
230
|
-
>
|
|
231
|
-
<DataList aria-label="Table column management" id="table-column-management" isCompact>
|
|
232
|
-
<DataListItem aria-labelledby="table-column-management-item1">
|
|
233
|
-
<DataListItemRow>
|
|
234
|
-
<DataListCheck
|
|
235
|
-
aria-labelledby="table-column-management-item1"
|
|
236
|
-
checked={checkedState[0]}
|
|
237
|
-
name="check1"
|
|
238
|
-
id="check1"
|
|
239
|
-
onChange={handleChange}
|
|
240
|
-
/>
|
|
241
|
-
<DataListItemCells
|
|
242
|
-
dataListCells={[
|
|
243
|
-
<DataListCell id="table-column-management-item1" key="table-column-management-item1">
|
|
244
|
-
<label htmlFor="check1">{columns[0]}</label>
|
|
245
|
-
</DataListCell>
|
|
246
|
-
]}
|
|
247
|
-
/>
|
|
248
|
-
</DataListItemRow>
|
|
249
|
-
</DataListItem>
|
|
250
|
-
<DataListItem aria-labelledby="table-column-management-item2">
|
|
251
|
-
<DataListItemRow>
|
|
252
|
-
<DataListCheck
|
|
253
|
-
aria-labelledby="table-column-management-item2"
|
|
254
|
-
checked={checkedState[1]}
|
|
255
|
-
name="check2"
|
|
256
|
-
id="check2"
|
|
257
|
-
onChange={handleChange}
|
|
258
|
-
/>
|
|
259
|
-
<DataListItemCells
|
|
260
|
-
dataListCells={[
|
|
261
|
-
<DataListCell id="table-column-management-item2" key="table-column-management-item2">
|
|
262
|
-
<label htmlFor="check2">{columns[1]}</label>
|
|
263
|
-
</DataListCell>
|
|
264
|
-
]}
|
|
265
|
-
/>
|
|
266
|
-
</DataListItemRow>
|
|
267
|
-
</DataListItem>
|
|
268
|
-
<DataListItem aria-labelledby="table-column-management-item3">
|
|
269
|
-
<DataListItemRow>
|
|
270
|
-
<DataListCheck
|
|
271
|
-
aria-labelledby="table-column-management-item3"
|
|
272
|
-
checked={checkedState[2]}
|
|
273
|
-
name="check3"
|
|
274
|
-
id="check3"
|
|
275
|
-
onChange={handleChange}
|
|
276
|
-
/>
|
|
277
|
-
<DataListItemCells
|
|
278
|
-
dataListCells={[
|
|
279
|
-
<DataListCell id="table-column-management-item3" key="table-column-management-item3">
|
|
280
|
-
<label htmlFor="check3">{columns[2]}</label>
|
|
281
|
-
</DataListCell>
|
|
282
|
-
]}
|
|
283
|
-
/>
|
|
284
|
-
</DataListItemRow>
|
|
285
|
-
</DataListItem>
|
|
286
|
-
<DataListItem aria-labelledby="table-column-management-item4">
|
|
287
|
-
<DataListItemRow>
|
|
288
|
-
<DataListCheck
|
|
289
|
-
aria-labelledby="table-column-management-item4"
|
|
290
|
-
checked={checkedState[3]}
|
|
291
|
-
name="check4"
|
|
292
|
-
id="check4"
|
|
293
|
-
onChange={handleChange}
|
|
294
|
-
/>
|
|
295
|
-
<DataListItemCells
|
|
296
|
-
dataListCells={[
|
|
297
|
-
<DataListCell id="table-column-management-item4" key="table-column-management-item4">
|
|
298
|
-
<label htmlFor="check4">{columns[3]}</label>
|
|
299
|
-
</DataListCell>
|
|
300
|
-
]}
|
|
301
|
-
/>
|
|
302
|
-
</DataListItemRow>
|
|
303
|
-
</DataListItem>
|
|
304
|
-
<DataListItem aria-labelledby="table-column-management-item4">
|
|
305
|
-
<DataListItemRow>
|
|
306
|
-
<DataListCheck
|
|
307
|
-
aria-labelledby="table-column-management-item4"
|
|
308
|
-
checked={checkedState[4]}
|
|
309
|
-
name="check5"
|
|
310
|
-
id="check5"
|
|
311
|
-
onChange={handleChange}
|
|
312
|
-
/>
|
|
313
|
-
<DataListItemCells
|
|
314
|
-
dataListCells={[
|
|
315
|
-
<DataListCell id="table-column-management-item4" key="table-column-management-item4">
|
|
316
|
-
<label htmlFor="check5">{columns[4]}</label>
|
|
317
|
-
</DataListCell>
|
|
318
|
-
]}
|
|
319
|
-
/>
|
|
320
|
-
</DataListItemRow>
|
|
321
|
-
</DataListItem>
|
|
322
|
-
<DataListItem aria-labelledby="table-column-management-item5">
|
|
323
|
-
<DataListItemRow>
|
|
324
|
-
<DataListCheck
|
|
325
|
-
aria-labelledby="table-column-management-item5"
|
|
326
|
-
checked={checkedState[5]}
|
|
327
|
-
name="check6"
|
|
328
|
-
id="check6"
|
|
329
|
-
onChange={handleChange}
|
|
330
|
-
/>
|
|
331
|
-
<DataListItemCells
|
|
332
|
-
dataListCells={[
|
|
333
|
-
<DataListCell id="table-column-management-item5" key="table-column-management-item5">
|
|
334
|
-
<label htmlFor="check6">{columns[5]}</label>
|
|
335
|
-
</DataListCell>
|
|
336
|
-
]}
|
|
337
|
-
/>
|
|
338
|
-
</DataListItemRow>
|
|
339
|
-
</DataListItem>
|
|
340
|
-
<DataListItem aria-labelledby="table-column-management-item6">
|
|
341
|
-
<DataListItemRow>
|
|
342
|
-
<DataListCheck
|
|
343
|
-
aria-labelledby="table-column-management-item6"
|
|
344
|
-
checked={checkedState[6]}
|
|
345
|
-
name="check7"
|
|
346
|
-
id="check7"
|
|
347
|
-
onChange={handleChange}
|
|
348
|
-
/>
|
|
349
|
-
<DataListItemCells
|
|
350
|
-
dataListCells={[
|
|
351
|
-
<DataListCell id="table-column-management-item6" key="table-column-management-item5">
|
|
352
|
-
<label htmlFor="check7">{columns[6]}</label>
|
|
353
|
-
</DataListCell>
|
|
354
|
-
]}
|
|
355
|
-
/>
|
|
356
|
-
</DataListItemRow>
|
|
357
|
-
</DataListItem>
|
|
358
|
-
<DataListItem aria-labelledby="table-column-management-item5">
|
|
359
|
-
<DataListItemRow>
|
|
360
|
-
<DataListCheck
|
|
361
|
-
aria-labelledby="table-column-management-item5"
|
|
362
|
-
checked={checkedState[7]}
|
|
363
|
-
name="check8"
|
|
364
|
-
id="check8"
|
|
365
|
-
onChange={handleChange}
|
|
366
|
-
/>
|
|
367
|
-
<DataListItemCells
|
|
368
|
-
dataListCells={[
|
|
369
|
-
<DataListCell id="table-column-management-item7" key="table-column-management-item7">
|
|
370
|
-
<label htmlFor="check8">{columns[7]}</label>
|
|
371
|
-
</DataListCell>
|
|
372
|
-
]}
|
|
373
|
-
/>
|
|
374
|
-
</DataListItemRow>
|
|
375
|
-
</DataListItem>
|
|
376
|
-
</DataList>
|
|
385
|
+
</ModalFooter>
|
|
377
386
|
</Modal>
|
|
378
387
|
);
|
|
379
388
|
|
|
@@ -399,7 +408,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
|
|
|
399
408
|
Choose one
|
|
400
409
|
</span>
|
|
401
410
|
<ToolbarContent>
|
|
402
|
-
<ToolbarItem
|
|
411
|
+
<ToolbarItem>
|
|
403
412
|
<OverflowMenu breakpoint="md">
|
|
404
413
|
<OverflowMenuItem>
|
|
405
414
|
<MenuToggle icon={<FilterIcon />}>Name</MenuToggle>
|
|
@@ -429,50 +438,48 @@ export const TableColumnManagement: React.FunctionComponent = () => {
|
|
|
429
438
|
<React.Fragment>
|
|
430
439
|
<DashboardWrapper hasPageTemplateTitle>
|
|
431
440
|
<PageSection isFilled>
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
<
|
|
435
|
-
<
|
|
436
|
-
|
|
437
|
-
{
|
|
438
|
-
<Th key={columnIndex}>{column}</Th>
|
|
439
|
-
))}
|
|
440
|
-
</Tr>
|
|
441
|
-
</Thead>
|
|
442
|
-
<Tbody>
|
|
443
|
-
{paginatedRows.map((row, rowIndex) => (
|
|
444
|
-
<Tr key={rowIndex}>
|
|
445
|
-
<>
|
|
446
|
-
{Object.entries(row).map(([key, value]) =>
|
|
447
|
-
// eslint-disable-next-line no-nested-ternary
|
|
448
|
-
key === 'status' ? (
|
|
449
|
-
// eslint-disable-next-line react/jsx-key
|
|
450
|
-
<Td width={15} dataLabel="Status">
|
|
451
|
-
{renderLabel(value as string)}
|
|
452
|
-
</Td>
|
|
453
|
-
) : key === 'url' ? (
|
|
454
|
-
<Td width={10} dataLabel="URL" modifier="truncate">
|
|
455
|
-
<TableText>
|
|
456
|
-
<a href="#">{row.url}</a>
|
|
457
|
-
</TableText>
|
|
458
|
-
</Td>
|
|
459
|
-
) : (
|
|
460
|
-
<Td
|
|
461
|
-
width={key === 'name' ? 15 : 10}
|
|
462
|
-
dataLabel={key === 'lastModified' ? 'Last modified' : capitalize(key)}
|
|
463
|
-
>
|
|
464
|
-
{value as string}
|
|
465
|
-
</Td>
|
|
466
|
-
)
|
|
467
|
-
)}
|
|
468
|
-
</>
|
|
469
|
-
</Tr>
|
|
441
|
+
{toolbarItems}
|
|
442
|
+
<Table variant="compact" aria-label="Column Management Table">
|
|
443
|
+
<Thead>
|
|
444
|
+
<Tr>
|
|
445
|
+
{managedColumns.map((column, columnIndex) => (
|
|
446
|
+
<Th key={columnIndex}>{column}</Th>
|
|
470
447
|
))}
|
|
471
|
-
</
|
|
472
|
-
</
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
448
|
+
</Tr>
|
|
449
|
+
</Thead>
|
|
450
|
+
<Tbody>
|
|
451
|
+
{paginatedRows.map((row, rowIndex) => (
|
|
452
|
+
<Tr key={rowIndex}>
|
|
453
|
+
<>
|
|
454
|
+
{Object.entries(row).map(([key, value], idx) =>
|
|
455
|
+
// eslint-disable-next-line no-nested-ternary
|
|
456
|
+
key === 'status' ? (
|
|
457
|
+
<Td width={15} dataLabel="Status" key={`${idx}-${value}`}>
|
|
458
|
+
{renderLabel(value as string)}
|
|
459
|
+
</Td>
|
|
460
|
+
) : key === 'url' ? (
|
|
461
|
+
<Td width={10} dataLabel="URL" modifier="truncate" key={`${idx}-${value}`}>
|
|
462
|
+
<TableText>
|
|
463
|
+
<a href="#">{row.url}</a>
|
|
464
|
+
</TableText>
|
|
465
|
+
</Td>
|
|
466
|
+
) : (
|
|
467
|
+
<Td
|
|
468
|
+
width={key === 'name' ? 15 : 10}
|
|
469
|
+
dataLabel={key === 'lastModified' ? 'Last modified' : capitalize(key)}
|
|
470
|
+
key={`${idx}-${value}`}
|
|
471
|
+
>
|
|
472
|
+
{value as string}
|
|
473
|
+
</Td>
|
|
474
|
+
)
|
|
475
|
+
)}
|
|
476
|
+
</>
|
|
477
|
+
</Tr>
|
|
478
|
+
))}
|
|
479
|
+
</Tbody>
|
|
480
|
+
</Table>
|
|
481
|
+
{renderPagination('bottom', false)}
|
|
482
|
+
{renderModal()}
|
|
476
483
|
</PageSection>
|
|
477
484
|
</DashboardWrapper>
|
|
478
485
|
</React.Fragment>
|