Skip to content

feat(table): expandable table demo #7277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 12 commits into from
May 12, 2022
Merged

feat(table): expandable table demo #7277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
46f69b9
full screen demo for bulk-select example
jenny-s51 Apr 18, 2022
958df9c
format
jenny-s51 Apr 19, 2022
bde7990
convert to full page demo
jenny-s51 Apr 20, 2022
911f4e9
rename column
jenny-s51 Apr 20, 2022
aa2f1d1
revert bulk selct
jenny-s51 Apr 20, 2022
9b3db89
revert imports
jenny-s51 Apr 20, 2022
3f35601
format
jenny-s51 Apr 20, 2022
ae95516
add imports
jenny-s51 Apr 20, 2022
1eab385
add isFullscreen flag
jenny-s51 May 4, 2022
e86b677
remove select all
jenny-s51 May 9, 2022
7a05da7
PR feedback from Matt
jenny-s51 May 11, 2022
e52746d
remove toolbar
jenny-s51 May 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/react-table/src/demos/Table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: Table
section: components
---

import { Checkbox, ToolbarExpandIconWrapper, ToolbarContent } from '@patternfly/react-core';
import { Checkbox, PageSection, ToolbarExpandIconWrapper, ToolbarContent } from '@patternfly/react-core';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
Expand All @@ -21,6 +21,7 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';

### Bulk select

Expand Down Expand Up @@ -265,7 +266,7 @@ class BulkSelectTableDemo extends React.Component {

### Expand/collapse all

```js file="table-demos/ExpandCollapseAll.jsx"
```js isFullscreen file="table-demos/ExpandCollapseAll.jsx"
```

### Column management
Expand Down Expand Up @@ -3034,7 +3035,7 @@ class LoadingStateDemo extends React.Component {
props: { colSpan: 8 },
title: (
<Bullseye>
<Spinner size="xl" aria-labelledby="loading-table-demo"/>
<Spinner size="xl" aria-labelledby="loading-table-demo" />
</Bullseye>
)
}
Expand Down
42 changes: 27 additions & 15 deletions packages/react-table/src/demos/table-demos/ExpandCollapseAll.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { Table, TableHeader, TableBody, expandable } from '@patternfly/react-table';
import { Card, PageSection, Table, TableHeader, TableBody, expandable } from '@patternfly/react-table';
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
class ExpandCollapseAllTableDemo extends React.Component {
Expand All @@ -13,7 +14,7 @@ class ExpandCollapseAllTableDemo extends React.Component {
collapseAllAriaLabel: 'Expand all',
columns: [
{
title: 'Header cell1',
title: 'Repositories',
cellFormatters: [expandable]
},
'Branches',
Expand Down Expand Up @@ -120,19 +121,30 @@ class ExpandCollapseAllTableDemo extends React.Component {

return (
<React.Fragment>
<Table
aria-label="Collapsible table"
onSelect={this.onSelect}
onCollapse={this.onCollapse}
rows={rows}
cells={columns}
canSelectAll={true}
canCollapseAll={true}
collapseAllAriaLabel={collapseAllAriaLabel}
>
<TableHeader />
<TableBody />
</Table>
<DashboardWrapper hasPageTemplateTitle>
<PageSection
padding={{
default: 'noPadding',
xl: 'padding'
}}
>
<Card component="div">
<Table
aria-label="Collapsible table"
onSelect={this.onSelect}
onCollapse={this.onCollapse}
rows={rows}
cells={columns}
canSelectAll={false}
canCollapseAll={true}
collapseAllAriaLabel={collapseAllAriaLabel}
>
<TableHeader />
<TableBody />
</Table>
</Card>
</PageSection>
</DashboardWrapper>
</React.Fragment>
);
}
Expand Down