Skip to content

Commit 045e369

Browse files
andytaylorandytaylor
committed
ARTEMIS-5419 - add scrollbar to tables
1 parent 3b93547 commit 045e369

File tree

2 files changed

+89
-84
lines changed

2 files changed

+89
-84
lines changed

‎artemis-console-extension/artemis-extension/src/artemis-extension/artemis/messages/MessagesTable.tsx‎

Lines changed: 51 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
import React, { useContext, useEffect, useState } from 'react'
1818
import { Column } from '../table/ArtemisTable';
1919
import { artemisService } from '../artemis-service';
20-
import { Toolbar, ToolbarContent, ToolbarItem, Text, SearchInput, Button, PaginationVariant, Pagination, DataList, DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, Modal, TextContent, Icon, ModalVariant } from '@patternfly/react-core';
20+
import { Toolbar, ToolbarContent, ToolbarItem, Text, SearchInput, Button, PaginationVariant, Pagination, DataList, DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, Modal, TextContent, Icon, ModalVariant, PageSection } from '@patternfly/react-core';
2121
import { Thead, Tr, Th, Tbody, Td, ActionsColumn, IAction, Table } from '@patternfly/react-table';
2222
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
2323
import { createQueueObjectName } from '../util/jmx';
@@ -341,55 +341,57 @@ export const MessagesTable: React.FunctionComponent<MessageProps> = props => {
341341
</ToolbarItem>
342342
</ToolbarContent>
343343
</Toolbar>
344-
<Table id='message-table' variant="compact" aria-label="Column Management Table">
345-
<Thead>
346-
<Tr >
347-
<Th
348-
select={{
349-
onSelect: (_event, isSelecting) => selectAllMessages(isSelecting),
350-
isSelected: areAllMessagesSelected
351-
}}
352-
/>
353-
{columns.map((column, id) => {
354-
if (column.visible) {
355-
return <Th key={id}>{column.name}</Th>
356-
} else return ''
357-
}
358-
)}
359-
</Tr>
360-
</Thead>
361-
<Tbody>
362-
{rows.map((row, rowIndex) => (
363-
<Tr key={rowIndex}>
364-
<>
365-
<Td
366-
select={{
367-
rowIndex,
368-
onSelect: (_event, isSelecting) => onSelectMessage(Number(artemisService.getKeyByValue(row, "messageID")), rowIndex, isSelecting),
369-
isSelected: isMessageSelected(Number(artemisService.getKeyByValue(row, "messageID")))
370-
}}
371-
/>
372-
{columns.map((column, id) => {
373-
if (column.visible) {
374-
const text = artemisService.getKeyByValue(row, column.id);
375-
if (column.link) {
376-
return <Td key={id}><Link to="" onClick={() => { if (column.link) { column.link(row) } }}>{text}</Link></Td>
377-
} else {
378-
return <Td key={id}>{text}</Td>
379-
}
380-
} else return ''
381-
}
382-
)}
383-
<td>
384-
<ActionsColumn
385-
items={getRowActions(row, rowIndex)}
386-
/>
387-
</td>
388-
</>
344+
<PageSection hasOverflowScroll frameBorder='false' aria-label='artemis-data-table' style={{ paddingTop: '0', paddingBottom: '0', paddingLeft: '0', paddingRight: '0' }} >
345+
<Table id='message-table' variant="compact" aria-label="Column Management Table">
346+
<Thead>
347+
<Tr >
348+
<Th
349+
select={{
350+
onSelect: (_event, isSelecting) => selectAllMessages(isSelecting),
351+
isSelected: areAllMessagesSelected
352+
}}
353+
/>
354+
{columns.map((column, id) => {
355+
if (column.visible) {
356+
return <Th key={id}>{column.name}</Th>
357+
} else return ''
358+
}
359+
)}
389360
</Tr>
390-
))}
391-
</Tbody>
392-
</Table>
361+
</Thead>
362+
<Tbody>
363+
{rows.map((row, rowIndex) => (
364+
<Tr key={rowIndex}>
365+
<>
366+
<Td
367+
select={{
368+
rowIndex,
369+
onSelect: (_event, isSelecting) => onSelectMessage(Number(artemisService.getKeyByValue(row, "messageID")), rowIndex, isSelecting),
370+
isSelected: isMessageSelected(Number(artemisService.getKeyByValue(row, "messageID")))
371+
}}
372+
/>
373+
{columns.map((column, id) => {
374+
if (column.visible) {
375+
const text = artemisService.getKeyByValue(row, column.id);
376+
if (column.link) {
377+
return <Td key={id}><Link to="" onClick={() => { if (column.link) { column.link(row) } }}>{text}</Link></Td>
378+
} else {
379+
return <Td key={id}>{text}</Td>
380+
}
381+
} else return ''
382+
}
383+
)}
384+
<Td isActionCell>
385+
<ActionsColumn
386+
items={getRowActions(row, rowIndex)}
387+
/>
388+
</Td>
389+
</>
390+
</Tr>
391+
))}
392+
</Tbody>
393+
</Table>
394+
</PageSection>
393395
<Pagination
394396
itemCount={resultsSize}
395397
page={page}

‎artemis-console-extension/artemis-extension/src/artemis-extension/artemis/table/ArtemisTable.tsx‎

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ import {
3737
SearchInput,
3838
MenuToggleElement,
3939
MenuToggle,
40-
SelectList
40+
SelectList,
41+
PageSection
4142
} from '@patternfly/react-core';
4243
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
4344
import { Thead, Tr, Th, Tbody, Td, IAction, ActionsColumn, Table } from '@patternfly/react-table';
@@ -435,45 +436,47 @@ const operationOptions = [
435436
return (
436437
<React.Fragment>
437438
{toolbarItems}
438-
<Table variant="compact" aria-label="Data Table" id='data-table'>
439-
<Thead>
440-
<Tr >
441-
{columns.map((column, id) => {
442-
if (column.visible) {
443-
return <Th key={id}>{column.name}</Th>
444-
} else return ''
445-
}
446-
)}
447-
</Tr>
448-
</Thead>
449-
<Tbody>
450-
{rows.map((row, rowIndex) => (
451-
<Tr key={rowIndex}>
452-
<>
439+
<PageSection hasOverflowScroll frameBorder='false' aria-label='artemis-data-table' style={{ paddingTop: '0', paddingBottom: '0', paddingLeft: '0', paddingRight: '0' }} >
440+
<Table variant="compact" aria-label="Data Table" id='data-table'>
441+
<Thead>
442+
<Tr >
453443
{columns.map((column, id) => {
454444
if (column.visible) {
455-
var key = getKeyByValue(row, column.id)
456-
if(column.filter) {
457-
var filter = column.filter(row);
458-
return <Td key={id}><Link to="" onClick={() => {if (broker.navigate) { broker.navigate(column.filterTab, filter)}}}>{key}</Link></Td>
459-
} else if (column.link) {
460-
return <Td key={id}><Link to="" onClick={() => {if (column.link) {column.link(row)}}}>{key}</Link></Td>
461-
} else {
462-
return <Td key={id}>{key}</Td>
463-
}
445+
return <Th key={id}>{column.name}</Th>
464446
} else return ''
465447
}
466448
)}
467-
<td>
468-
<ActionsColumn
469-
items={getRowActions(row, rowIndex)}
470-
/>
471-
</td>
472-
</>
473-
</Tr>
474-
))}
475-
</Tbody>
476-
</Table>
449+
</Tr>
450+
</Thead>
451+
<Tbody>
452+
{rows.map((row, rowIndex) => (
453+
<Tr key={rowIndex}>
454+
<>
455+
{columns.map((column, id) => {
456+
if (column.visible) {
457+
var key = getKeyByValue(row, column.id)
458+
if(column.filter) {
459+
var filter = column.filter(row);
460+
return <Td key={id}><Link to="" onClick={() => {if (broker.navigate) { broker.navigate(column.filterTab, filter)}}}>{key}</Link></Td>
461+
} else if (column.link) {
462+
return <Td key={id}><Link to="" onClick={() => {if (column.link) {column.link(row)}}}>{key}</Link></Td>
463+
} else {
464+
return <Td key={id}>{key}</Td>
465+
}
466+
} else return ''
467+
}
468+
)}
469+
<Td isActionCell>
470+
<ActionsColumn
471+
items={getRowActions(row, rowIndex)}
472+
/>
473+
</Td>
474+
</>
475+
</Tr>
476+
))}
477+
</Tbody>
478+
</Table>
479+
</PageSection>
477480
{renderPagination(PaginationVariant.bottom)}
478481
{renderModal()}
479482
</React.Fragment>

0 commit comments

Comments
 (0)