Skip to content

Commit 953a64d

Browse files
jenny-s51jenny-s51
committed
add compact table data
resolve merge conflicts fix build, move data into jsx file fix spacing revert back to paginated data, fix build issue add truncate modifier, add fixed width of 10 to column
1 parent 5ed44df commit 953a64d

File tree

3 files changed

+64
-53
lines changed

3 files changed

+64
-53
lines changed

‎packages/react-table/src/docs/demos/Table.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
4646
import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
4747
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
4848
import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
49+
import { rows, columns } from '../examples/Data.jsx'
4950

5051
## Demos
5152

@@ -300,17 +301,17 @@ class BulkSelectTableDemo extends React.Component {
300301

301302
### Expand/collapse all
302303

303-
```js isFullscreen file="table-demos/ExpandCollapseAll.jsx"
304+
```js isFullscreen file="./table-demos/ExpandCollapseAll.jsx"
304305
```
305306

306307
### Compact
307308

308-
```js isFullscreen file="table-demos/Compact.jsx"
309+
```js isFullscreen file="./table-demos/Compact.jsx"
309310
```
310311

311312
### Compound expansion
312313

313-
```js isFullscreen file="table-demos/CompoundExpansion.jsx"
314+
```js isFullscreen file="./table-demos/CompoundExpansion.jsx"
314315
```
315316

316317
### Column management
@@ -3019,7 +3020,7 @@ class PageLayoutDefaultNav extends React.Component {
30193020

30203021
### Sticky first column
30213022

3022-
```js isFullscreen file="table-demos/StickyFirstColumn.jsx"
3023+
```js isFullscreen file="./table-demos/StickyFirstColumn.jsx"
30233024
```
30243025

30253026
### Sticky columns and header with toolbar

‎packages/react-table/src/docs/demos/table-demos/Compact.jsx‎

Lines changed: 55 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -12,41 +12,35 @@ import {
1212
SelectOption,
1313
PageSection
1414
} from '@patternfly/react-core';
15-
import { TableComposable, Thead, Tr, Th, Tbody, Td, ActionsColumn } from '@patternfly/react-table';
15+
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
1616

1717
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
18-
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
1918
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
19+
import { rows, columns } from '../../examples/Data.jsx';
2020

21-
export const ComposableTable = () => {
21+
export const CompactTable = () => {
2222
const [isSelectOpen, setIsSelectOpen] = React.useState(false);
23+
const [page, setPage] = React.useState(1);
24+
const [perPage, setPerPage] = React.useState(10);
25+
const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
26+
const handleSetPage = (_evt, newPage, perPage, startIdx, endIdx) => {
27+
setPaginatedRows(rows.slice(startIdx, endIdx));
28+
setPage(newPage);
29+
};
30+
handlePerPageSelect = (_evt, newPerPage, newPage, startIdx, endIdx) => {
31+
setPaginatedRows(rows.slice(startIdx, endIdx));
32+
setPage(newPage);
33+
setPerPage(newPerPage);
34+
};
2335

24-
const columns = ['Contributor', 'Position', 'Location', 'Last seen', 'Numbers', 'Icons'];
25-
const rows = [
26-
['Sam Jones', 'CSS guru', 'Not too sure', 'May 9, 2018', '0556'],
27-
['Amy Miller', 'Visual design', 'Raleigh', 'May 9, 2018', '9492'],
28-
['Steve Wilson', 'Visual design lead', 'Westford', 'May 9, 2018', '9929'],
29-
['Emma Jackson', 'Interaction design', 'Westford', 'May 9, 2018', '2217']
30-
];
31-
32-
const defaultActions = () => [
33-
{
34-
title: 'Settings',
35-
// eslint-disable-next-line no-console
36-
onClick: () => console.log(`clicked on Settings`)
37-
},
38-
{
39-
title: 'Help',
40-
// eslint-disable-next-line no-console
41-
onClick: () => console.log(`clicked on Help`)
42-
}
43-
];
4436
const renderPagination = (variant, isCompact) => (
4537
<Pagination
4638
isCompact={isCompact}
47-
itemCount={36}
48-
page={1}
49-
perPage={10}
39+
itemCount={rows.length}
40+
page={page}
41+
perPage={perPage}
42+
onSetPage={handleSetPage}
43+
onPerPageSelect={handlePerPageSelect}
5044
variant={variant}
5145
titles={{
5246
paginationTitle: `${variant} pagination`
@@ -89,37 +83,54 @@ export const ComposableTable = () => {
8983
</Toolbar>
9084
);
9185

86+
const renderLabel = labelText => {
87+
switch (labelText) {
88+
case 'Running':
89+
return <Label color="green">{labelText}</Label>;
90+
case 'Stopped':
91+
return <Label color="orange">{labelText}</Label>;
92+
case 'Needs Maintenance':
93+
return <Label color="blue">{labelText}</Label>;
94+
case 'Down':
95+
return <Label color="red">{labelText}</Label>;
96+
}
97+
};
9298
return (
9399
<React.Fragment>
94100
<DashboardWrapper hasPageTemplateTitle>
95101
<PageSection isFilled>
96102
<Card>
97103
{tableToolbar}
98-
<TableComposable variant="compact" aria-label="Sortable Table">
104+
<TableComposable variant="compact" aria-label="Compact Table">
99105
<Thead>
100106
<Tr>
101-
{columns.map((column, columnIndex) => (
102-
<Th key={columnIndex}>{column}</Th>
103-
))}
107+
<Th key={0}>{columns[0]}</Th>
108+
<Th key={1}>{columns[1]}</Th>
109+
<Th key={2}>{columns[2]}</Th>
110+
<Th key={3}>{columns[3]}</Th>
111+
<Th key={4}>{columns[4]}</Th>
112+
<Th key={5}>{columns[5]}</Th>
113+
<Th key={6}>{columns[6]}</Th>
114+
<Th key={7} width={10}>
115+
{columns[7]}
116+
</Th>
104117
</Tr>
105118
</Thead>
106119
<Tbody>
107-
{rows.map((row, rowIndex) => (
120+
{paginatedRows.map((row, rowIndex) => (
108121
<Tr key={rowIndex}>
109122
<>
110-
<Td dataLabel={columns[0]}>{row[0]}</Td>
111-
<Td dataLabel={columns[1]}>{row[1]}</Td>
112-
<Td dataLabel={columns[2]}>{row[2]}</Td>
113-
<Td dataLabel={columns[3]}>{row[3]}</Td>
114-
<Td dataLabel={columns[4]}>{row[4]}</Td>
115-
<Td dataLabel={columns[5]}>
116-
<CheckIcon key="icon" />
117-
</Td>
118-
<Td dataLabel={'Action'}>
119-
<a href="#">Action link</a>
120-
</Td>
121-
<Td isActionCell>
122-
<ActionsColumn items={defaultActions()} />
123+
<Td dataLabel={columns[0]}>{row.name}</Td>
124+
<Td dataLabel={columns[1]}>{row.threads}</Td>
125+
<Td dataLabel={columns[2]}>{row.applications}</Td>
126+
<Td dataLabel={columns[3]}>{row.workspaces}</Td>
127+
<Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
128+
<Td dataLabel={columns[5]}>{row.location}</Td>
129+
<Td dataLabel={columns[6]}>{row.lastModified}</Td>
130+
<Td dataLabel={columns[7]} modifier="truncate">
131+
<TableText>
132+
<a href="#">{row.url}</a>
133+
</TableText>
123134
</Td>
124135
</>
125136
</Tr>

‎packages/react-table/src/docs/examples/Data.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
/* eslint-disable no-console */
2-
import * as React from 'react';
3-
41
const getRandomInteger = (min, max) => (
52
Math.floor(Math.random() * (max - min + 1)) + min
63
);
@@ -737,7 +734,8 @@ export const rows = [
737734
lastModified: '20 minutes ago',
738735
url: 'http://www.redhat.com/en/office-locations/Bangalore-node13'
739736
},
740-
{ name: 'Bangalore-Node 14',
737+
{
738+
name: 'Bangalore-Node 14',
741739
threads: getRandomInteger(1, 20),
742740
applications: getRandomInteger(1, 50),
743741
workspaces: getRandomInteger(1, 30),
@@ -746,7 +744,8 @@ export const rows = [
746744
lastModified: '4 hours ago',
747745
url: 'http://www.redhat.com/en/office-locations/Bangalore-node14'
748746
},
749-
{ name: 'Bangalore-Node 15',
747+
{
748+
name: 'Bangalore-Node 15',
750749
threads: getRandomInteger(1, 20),
751750
applications: getRandomInteger(1, 50),
752751
workspaces: getRandomInteger(1, 30),

0 commit comments

Comments
 (0)