|
| 1 | +import React from 'react'; |
| 2 | +import { TableComposable, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table'; |
| 3 | + |
| 4 | +interface Fact { |
| 5 | + name: string; |
| 6 | + state: string; |
| 7 | + detail1: string; |
| 8 | + detail2: string; |
| 9 | + detail3: string; |
| 10 | + detail4: string; |
| 11 | + detail5: string; |
| 12 | + detail6: string; |
| 13 | + detail7: string; |
| 14 | +} |
| 15 | + |
| 16 | +export const ComposableTableRightStickyColumn: React.FunctionComponent = () => { |
| 17 | + // In real usage, this data would come from some external source like an API via props. |
| 18 | + const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({ |
| 19 | + name: `Fact ${index + 1}`, |
| 20 | + state: `State ${index + 1}`, |
| 21 | + detail1: `Test cell ${index + 1}-3`, |
| 22 | + detail2: `Test cell ${index + 1}-4`, |
| 23 | + detail3: `Test cell ${index + 1}-5`, |
| 24 | + detail4: `Test cell ${index + 1}-6`, |
| 25 | + detail5: `Test cell ${index + 1}-7`, |
| 26 | + detail6: `Test cell ${index + 1}-8`, |
| 27 | + detail7: `Test cell ${index + 1}-9` |
| 28 | + })); |
| 29 | + |
| 30 | + const columnNames = { |
| 31 | + name: 'Fact', |
| 32 | + state: 'State', |
| 33 | + header3: 'Header 3', |
| 34 | + header4: 'Header 4', |
| 35 | + header5: 'Header 5', |
| 36 | + header6: 'Header 6', |
| 37 | + header7: 'Header 7', |
| 38 | + header8: 'Header 8', |
| 39 | + header9: 'Header 9' |
| 40 | + }; |
| 41 | + |
| 42 | + // Index of the currently sorted column |
| 43 | + // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key |
| 44 | + // as the identifier of the sorted column. See the "Compound expandable" example. |
| 45 | + const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null); |
| 46 | + |
| 47 | + // Sort direction of the currently sorted column |
| 48 | + const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null); |
| 49 | + |
| 50 | + // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index. |
| 51 | + // This example is trivial since our data objects just contain strings, but if the data was more complex |
| 52 | + // this would be a place to return simplified string or number versions of each column to sort by. |
| 53 | + const getSortableRowValues = (fact: Fact): (string | number)[] => { |
| 54 | + const { name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7 } = fact; |
| 55 | + return [name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7]; |
| 56 | + }; |
| 57 | + |
| 58 | + // Note that we perform the sort as part of the component's render logic and not in onSort. |
| 59 | + // We shouldn't store the list of data in state because we don't want to have to sync that with props. |
| 60 | + let sortedFacts = facts; |
| 61 | + if (activeSortIndex !== null) { |
| 62 | + sortedFacts = facts.sort((a, b) => { |
| 63 | + const aValue = getSortableRowValues(a)[activeSortIndex]; |
| 64 | + const bValue = getSortableRowValues(b)[activeSortIndex]; |
| 65 | + if (aValue === bValue) { |
| 66 | + return 0; |
| 67 | + } |
| 68 | + if (activeSortDirection === 'asc') { |
| 69 | + return aValue > bValue ? 1 : -1; |
| 70 | + } else { |
| 71 | + return bValue > aValue ? 1 : -1; |
| 72 | + } |
| 73 | + }); |
| 74 | + } |
| 75 | + |
| 76 | + const getSortParams = (columnIndex: number): ThProps['sort'] => ({ |
| 77 | + sortBy: { |
| 78 | + index: activeSortIndex, |
| 79 | + direction: activeSortDirection |
| 80 | + }, |
| 81 | + onSort: (_event, index, direction) => { |
| 82 | + setActiveSortIndex(index); |
| 83 | + setActiveSortDirection(direction); |
| 84 | + }, |
| 85 | + columnIndex |
| 86 | + }); |
| 87 | + |
| 88 | + return ( |
| 89 | + <InnerScrollContainer> |
| 90 | + <TableComposable aria-label="Sticky column table" gridBreakPoint=""> |
| 91 | + <Thead> |
| 92 | + <Tr> |
| 93 | + <Th modifier="truncate" sort={getSortParams(0)}> |
| 94 | + {columnNames.name} |
| 95 | + </Th> |
| 96 | + <Th modifier="truncate" sort={getSortParams(1)}> |
| 97 | + {columnNames.state} |
| 98 | + </Th> |
| 99 | + <Th modifier="truncate">{columnNames.header3}</Th> |
| 100 | + <Th modifier="truncate">{columnNames.header4}</Th> |
| 101 | + <Th modifier="truncate">{columnNames.header5}</Th> |
| 102 | + <Th modifier="truncate">{columnNames.header6}</Th> |
| 103 | + <Th modifier="truncate">{columnNames.header7}</Th> |
| 104 | + <Th isStickyColumn hasLeftBorder stickyMinWidth="130px" stickyRightOffset="130px" modifier="truncate"> |
| 105 | + {columnNames.header8} |
| 106 | + </Th> |
| 107 | + <Th isStickyColumn stickyMinWidth="130px" modifier="truncate"> |
| 108 | + {columnNames.header9} |
| 109 | + </Th> |
| 110 | + </Tr> |
| 111 | + </Thead> |
| 112 | + <Tbody> |
| 113 | + {sortedFacts.map(fact => ( |
| 114 | + <Tr key={fact.name}> |
| 115 | + <Th modifier="nowrap">{fact.name}</Th> |
| 116 | + <Td modifier="nowrap" dataLabel={columnNames.state}> |
| 117 | + {fact.state} |
| 118 | + </Td> |
| 119 | + <Td modifier="nowrap" dataLabel={columnNames.header3}> |
| 120 | + {fact.detail1} |
| 121 | + </Td> |
| 122 | + <Td modifier="nowrap" dataLabel={columnNames.header4}> |
| 123 | + {fact.detail2} |
| 124 | + </Td> |
| 125 | + <Td modifier="nowrap" dataLabel={columnNames.header5}> |
| 126 | + {fact.detail3} |
| 127 | + </Td> |
| 128 | + <Td modifier="nowrap" dataLabel={columnNames.header6}> |
| 129 | + {fact.detail4} |
| 130 | + </Td> |
| 131 | + <Td modifier="nowrap" dataLabel={columnNames.header7}> |
| 132 | + {fact.detail5} |
| 133 | + </Td> |
| 134 | + <Td |
| 135 | + isStickyColumn |
| 136 | + hasLeftBorder |
| 137 | + stickyMinWidth="130px" |
| 138 | + stickyRightOffset="130px" |
| 139 | + modifier="nowrap" |
| 140 | + dataLabel={columnNames.header8} |
| 141 | + > |
| 142 | + {fact.detail6} |
| 143 | + </Td> |
| 144 | + <Td isStickyColumn stickyMinWidth="130px" modifier="nowrap" dataLabel={columnNames.header9}> |
| 145 | + {fact.detail7} |
| 146 | + </Td> |
| 147 | + </Tr> |
| 148 | + ))} |
| 149 | + </Tbody> |
| 150 | + </TableComposable> |
| 151 | + </InnerScrollContainer> |
| 152 | + ); |
| 153 | +}; |
0 commit comments