@patternfly/react-table 6.3.1-prerelease.20 → 6.3.1-prerelease.22

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.
Files changed (20) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/package.json +1 -1
  3. package/deprecated/package.json +1 -1
  4. package/dist/dynamic/components/Table/package.json +1 -1
  5. package/dist/dynamic/components/Table/utils/decorators/package.json +1 -1
  6. package/dist/dynamic/components/Table/utils/package.json +1 -1
  7. package/dist/dynamic/deprecated/components/Table/base/package.json +1 -1
  8. package/dist/dynamic/deprecated/components/Table/package.json +1 -1
  9. package/dist/dynamic/deprecated/components/package.json +1 -1
  10. package/dist/umd/assets/{output-vF2-t1Hj.css → output-DBMfvVdR.css} +2040 -2039
  11. package/package.json +3 -3
  12. package/src/demos/examples/TableCompact.tsx +36 -39
  13. package/src/demos/examples/TableEmptyStateDefault.tsx +34 -37
  14. package/src/demos/examples/TableEmptyStateError.tsx +30 -32
  15. package/src/demos/examples/TableEmptyStateLoading.tsx +21 -23
  16. package/src/demos/examples/TableExpandCollapseAll.tsx +48 -50
  17. package/src/demos/examples/TableSortableResponsive.tsx +77 -80
  18. package/src/demos/examples/TableStaticBottomPagination.tsx +28 -31
  19. package/src/demos/examples/TableStickyFirstColumn.tsx +81 -89
  20. package/src/demos/examples/TableStickyHeader.tsx +32 -34
package/src/demos/examples/TableStaticBottomPagination.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import { Fragment, useState } from 'react';
2
2
  import {
3
3
  Button,
4
- Card,
5
4
  Toolbar,
6
5
  ToolbarContent,
7
6
  ToolbarGroup,
@@ -143,37 +142,35 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
143
142
  <Fragment>
144
143
  <DashboardWrapper hasPageTemplateTitle>
145
144
  <PageSection isFilled aria-label="Paginated table data">
146
- <Card>
147
- {tableToolbar}
148
- <Table variant="compact" aria-label="Paginated Table">
149
- <Thead>
150
- <Tr>
151
- {columns.map((column, columnIndex) => (
152
- <Th key={columnIndex}>{column}</Th>
153
- ))}
154
- </Tr>
155
- </Thead>
156
- <Tbody>
157
- {paginatedRows.map((row, rowIndex) => (
158
- <Tr key={rowIndex}>
159
- <Td dataLabel={columns[0]}>{row.name}</Td>
160
- <Td dataLabel={columns[1]}>{row.threads}</Td>
161
- <Td dataLabel={columns[2]}>{row.applications}</Td>
162
- <Td dataLabel={columns[3]}>{row.workspaces}</Td>
163
- <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
164
- <Td dataLabel={columns[5]}>{row.location}</Td>
165
- <Td dataLabel={columns[6]}>{row.lastModified}</Td>
166
- <Td dataLabel={columns[7]} modifier="truncate">
167
- <TableText>
168
- <a href="#">{row.url}</a>
169
- </TableText>
170
- </Td>
171
- </Tr>
145
+ {tableToolbar}
146
+ <Table variant="compact" aria-label="Paginated Table">
147
+ <Thead>
148
+ <Tr>
149
+ {columns.map((column, columnIndex) => (
150
+ <Th key={columnIndex}>{column}</Th>
172
151
  ))}
173
- </Tbody>
174
- </Table>
175
- {renderPagination('bottom', false)}
176
- </Card>
152
+ </Tr>
153
+ </Thead>
154
+ <Tbody>
155
+ {paginatedRows.map((row, rowIndex) => (
156
+ <Tr key={rowIndex}>
157
+ <Td dataLabel={columns[0]}>{row.name}</Td>
158
+ <Td dataLabel={columns[1]}>{row.threads}</Td>
159
+ <Td dataLabel={columns[2]}>{row.applications}</Td>
160
+ <Td dataLabel={columns[3]}>{row.workspaces}</Td>
161
+ <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
162
+ <Td dataLabel={columns[5]}>{row.location}</Td>
163
+ <Td dataLabel={columns[6]}>{row.lastModified}</Td>
164
+ <Td dataLabel={columns[7]} modifier="truncate">
165
+ <TableText>
166
+ <a href="#">{row.url}</a>
167
+ </TableText>
168
+ </Td>
169
+ </Tr>
170
+ ))}
171
+ </Tbody>
172
+ </Table>
173
+ {renderPagination('bottom', false)}
177
174
  </PageSection>
178
175
  </DashboardWrapper>
179
176
  </Fragment>
package/src/demos/examples/TableStickyFirstColumn.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useState } from 'react';
2
2
  import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
3
- import { Card, PageSection } from '@patternfly/react-core';
3
+ import { PageSection } from '@patternfly/react-core';
4
4
  import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
5
5
 
6
6
  type Direction = 'asc' | 'desc' | undefined;
@@ -140,96 +140,88 @@ export const TableStickyFirstColumn = () => {
140
140
  padding={{ default: 'noPadding', xl: 'padding' }}
141
141
  aria-label="Sticky column table data"
142
142
  >
143
- <Card component="div">
144
- <InnerScrollContainer>
145
- <Table aria-label="Sticky column table" gridBreakPoint="">
146
- <Thead>
147
- <Tr>
148
- <Th
149
- isStickyColumn
150
- stickyMinWidth="100px"
151
- hasRightBorder
152
- modifier="fitContent"
153
- sort={getSortParams(0)}
154
- >
155
- {columnNames.name}
143
+ <InnerScrollContainer>
144
+ <Table aria-label="Sticky column table" gridBreakPoint="">
145
+ <Thead>
146
+ <Tr>
147
+ <Th isStickyColumn stickyMinWidth="100px" hasRightBorder modifier="fitContent" sort={getSortParams(0)}>
148
+ {columnNames.name}
149
+ </Th>
150
+ <Th modifier="fitContent" sort={getSortParams(1)}>
151
+ {columnNames.state}
152
+ </Th>
153
+ <Th>{columnNames.header3}</Th>
154
+ <Th>{columnNames.header4}</Th>
155
+ <Th>{columnNames.header5}</Th>
156
+ <Th>{columnNames.header6}</Th>
157
+ <Th>{columnNames.header7}</Th>
158
+ <Th>{columnNames.header8}</Th>
159
+ <Th>{columnNames.header9}</Th>
160
+ <Th>{columnNames.header10}</Th>
161
+ <Th>{columnNames.header11}</Th>
162
+ <Th>{columnNames.header12}</Th>
163
+ <Th>{columnNames.header13}</Th>
164
+ <Th>{columnNames.header14}</Th>
165
+ <Th>{columnNames.header15}</Th>
166
+ <Th>{columnNames.header16}</Th>
167
+ </Tr>
168
+ </Thead>
169
+ <Tbody>
170
+ {sortedFacts.map((fact) => (
171
+ <Tr key={fact.name}>
172
+ <Th isStickyColumn stickyMinWidth="100px" hasRightBorder modifier="truncate">
173
+ {fact.name}
156
174
  </Th>
157
- <Th modifier="fitContent" sort={getSortParams(1)}>
158
- {columnNames.state}
159
- </Th>
160
- <Th>{columnNames.header3}</Th>
161
- <Th>{columnNames.header4}</Th>
162
- <Th>{columnNames.header5}</Th>
163
- <Th>{columnNames.header6}</Th>
164
- <Th>{columnNames.header7}</Th>
165
- <Th>{columnNames.header8}</Th>
166
- <Th>{columnNames.header9}</Th>
167
- <Th>{columnNames.header10}</Th>
168
- <Th>{columnNames.header11}</Th>
169
- <Th>{columnNames.header12}</Th>
170
- <Th>{columnNames.header13}</Th>
171
- <Th>{columnNames.header14}</Th>
172
- <Th>{columnNames.header15}</Th>
173
- <Th>{columnNames.header16}</Th>
175
+ <Td modifier="nowrap" dataLabel={columnNames.state}>
176
+ {fact.state}
177
+ </Td>
178
+ <Td modifier="nowrap" dataLabel={columnNames.header3}>
179
+ {fact.detail1}
180
+ </Td>
181
+ <Td modifier="nowrap" dataLabel={columnNames.header4}>
182
+ {fact.detail2}
183
+ </Td>
184
+ <Td modifier="nowrap" dataLabel={columnNames.header5}>
185
+ {fact.detail3}
186
+ </Td>
187
+ <Td modifier="nowrap" dataLabel={columnNames.header6}>
188
+ {fact.detail4}
189
+ </Td>
190
+ <Td modifier="nowrap" dataLabel={columnNames.header7}>
191
+ {fact.detail5}
192
+ </Td>
193
+ <Td modifier="nowrap" dataLabel={columnNames.header8}>
194
+ {fact.detail6}
195
+ </Td>
196
+ <Td modifier="nowrap" dataLabel={columnNames.header9}>
197
+ {fact.detail7}
198
+ </Td>
199
+ <Td modifier="nowrap" dataLabel={columnNames.header10}>
200
+ {fact.detail8}
201
+ </Td>
202
+ <Td modifier="nowrap" dataLabel={columnNames.header11}>
203
+ {fact.detail9}
204
+ </Td>
205
+ <Td modifier="nowrap" dataLabel={columnNames.header12}>
206
+ {fact.detail10}
207
+ </Td>
208
+ <Td modifier="nowrap" dataLabel={columnNames.header13}>
209
+ {fact.detail11}
210
+ </Td>
211
+ <Td modifier="nowrap" dataLabel={columnNames.header14}>
212
+ {fact.detail12}
213
+ </Td>
214
+ <Td modifier="nowrap" dataLabel={columnNames.header15}>
215
+ {fact.detail13}
216
+ </Td>
217
+ <Td modifier="nowrap" dataLabel={columnNames.header16}>
218
+ {fact.detail14}
219
+ </Td>
174
220
  </Tr>
175
- </Thead>
176
- <Tbody>
177
- {sortedFacts.map((fact) => (
178
- <Tr key={fact.name}>
179
- <Th isStickyColumn stickyMinWidth="100px" hasRightBorder modifier="truncate">
180
- {fact.name}
181
- </Th>
182
- <Td modifier="nowrap" dataLabel={columnNames.state}>
183
- {fact.state}
184
- </Td>
185
- <Td modifier="nowrap" dataLabel={columnNames.header3}>
186
- {fact.detail1}
187
- </Td>
188
- <Td modifier="nowrap" dataLabel={columnNames.header4}>
189
- {fact.detail2}
190
- </Td>
191
- <Td modifier="nowrap" dataLabel={columnNames.header5}>
192
- {fact.detail3}
193
- </Td>
194
- <Td modifier="nowrap" dataLabel={columnNames.header6}>
195
- {fact.detail4}
196
- </Td>
197
- <Td modifier="nowrap" dataLabel={columnNames.header7}>
198
- {fact.detail5}
199
- </Td>
200
- <Td modifier="nowrap" dataLabel={columnNames.header8}>
201
- {fact.detail6}
202
- </Td>
203
- <Td modifier="nowrap" dataLabel={columnNames.header9}>
204
- {fact.detail7}
205
- </Td>
206
- <Td modifier="nowrap" dataLabel={columnNames.header10}>
207
- {fact.detail8}
208
- </Td>
209
- <Td modifier="nowrap" dataLabel={columnNames.header11}>
210
- {fact.detail9}
211
- </Td>
212
- <Td modifier="nowrap" dataLabel={columnNames.header12}>
213
- {fact.detail10}
214
- </Td>
215
- <Td modifier="nowrap" dataLabel={columnNames.header13}>
216
- {fact.detail11}
217
- </Td>
218
- <Td modifier="nowrap" dataLabel={columnNames.header14}>
219
- {fact.detail12}
220
- </Td>
221
- <Td modifier="nowrap" dataLabel={columnNames.header15}>
222
- {fact.detail13}
223
- </Td>
224
- <Td modifier="nowrap" dataLabel={columnNames.header16}>
225
- {fact.detail14}
226
- </Td>
227
- </Tr>
228
- ))}
229
- </Tbody>
230
- </Table>
231
- </InnerScrollContainer>
232
- </Card>
221
+ ))}
222
+ </Tbody>
223
+ </Table>
224
+ </InnerScrollContainer>
233
225
  </PageSection>
234
226
  </DashboardWrapper>
235
227
  );
package/src/demos/examples/TableStickyHeader.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Card, Label, PageSection } from '@patternfly/react-core';
1
+ import { Label, PageSection } from '@patternfly/react-core';
2
2
  import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
3
3
  import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
4
4
  import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
@@ -20,40 +20,38 @@ export const TableStickyHeader: React.FunctionComponent = () => {
20
20
  return (
21
21
  <DashboardWrapper hasPageTemplateTitle>
22
22
  <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Sticky header table data">
23
- <Card component="div">
24
- <Table aria-label="Sticky Header Table Demo" isStickyHeader>
25
- <Thead>
26
- <Tr>
27
- <Th width={15}>{columns[0]}</Th>
28
- <Th width={10}>{columns[1]}</Th>
29
- <Th width={10}>{columns[2]}</Th>
30
- <Th width={10}>{columns[3]}</Th>
31
- <Th width={10}>{columns[4]}</Th>
32
- <Th width={15}>{columns[5]}</Th>
33
- <Th width={15}>{columns[6]}</Th>
34
- <Th width={10}>{columns[7]}</Th>
23
+ <Table aria-label="Sticky Header Table Demo" isStickyHeader>
24
+ <Thead>
25
+ <Tr>
26
+ <Th width={15}>{columns[0]}</Th>
27
+ <Th width={10}>{columns[1]}</Th>
28
+ <Th width={10}>{columns[2]}</Th>
29
+ <Th width={10}>{columns[3]}</Th>
30
+ <Th width={10}>{columns[4]}</Th>
31
+ <Th width={15}>{columns[5]}</Th>
32
+ <Th width={15}>{columns[6]}</Th>
33
+ <Th width={10}>{columns[7]}</Th>
34
+ </Tr>
35
+ </Thead>
36
+ <Tbody>
37
+ {rows.map((row) => (
38
+ <Tr key={row.name}>
39
+ <Td dataLabel={columns[0]}>{row.name}</Td>
40
+ <Td dataLabel={columns[1]}>{row.threads}</Td>
41
+ <Td dataLabel={columns[2]}>{row.applications}</Td>
42
+ <Td dataLabel={columns[3]}>{row.workspaces}</Td>
43
+ <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
44
+ <Td dataLabel={columns[5]}>{row.location}</Td>
45
+ <Td dataLabel={columns[6]}>{row.lastModified}</Td>
46
+ <Td dataLabel={columns[7]}>
47
+ <a href="#">
48
+ <TableText wrapModifier="truncate">{row.url} </TableText>
49
+ </a>
50
+ </Td>
35
51
  </Tr>
36
- </Thead>
37
- <Tbody>
38
- {rows.map((row) => (
39
- <Tr key={row.name}>
40
- <Td dataLabel={columns[0]}>{row.name}</Td>
41
- <Td dataLabel={columns[1]}>{row.threads}</Td>
42
- <Td dataLabel={columns[2]}>{row.applications}</Td>
43
- <Td dataLabel={columns[3]}>{row.workspaces}</Td>
44
- <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
45
- <Td dataLabel={columns[5]}>{row.location}</Td>
46
- <Td dataLabel={columns[6]}>{row.lastModified}</Td>
47
- <Td dataLabel={columns[7]}>
48
- <a href="#">
49
- <TableText wrapModifier="truncate">{row.url} </TableText>
50
- </a>
51
- </Td>
52
- </Tr>
53
- ))}
54
- </Tbody>
55
- </Table>
56
- </Card>
52
+ ))}
53
+ </Tbody>
54
+ </Table>
57
55
  </PageSection>
58
56
  </DashboardWrapper>
59
57
  );