Skip to content

chore(Table): update sticky header table data #7851

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
nicolethoen merged 7 commits into from
Aug 24, 2022
Merged

chore(Table): update sticky header table data #7851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
509c9fe
sticky header PR feedback
jenny-s51 Aug 22, 2022
da76781
adjust spacing
jenny-s51 Aug 22, 2022
b135411
use dashboard wrapper
jenny-s51 Aug 23, 2022
40cf2c6
unused imports
jenny-s51 Aug 23, 2022
894f88c
add truncate modifiers and cell widths
jenny-s51 Aug 23, 2022
3457808
widen location column
jenny-s51 Aug 23, 2022
d0b0fdb
add support for tooltips
jenny-s51 Aug 23, 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
265 changes: 49 additions & 216 deletions packages/react-table/src/docs/demos/Table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ section: components

import {
Checkbox,
Label,
PageSection,
ToolbarExpandIconWrapper,
ToolbarContent,
Expand Down Expand Up @@ -46,6 +47,7 @@ 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';
import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
import { rows, columns } from '../examples/Data.jsx';

## Demos

Expand Down Expand Up @@ -2784,234 +2786,65 @@ class ComplexPaginationTableDemo extends React.Component {

```js isFullscreen
import React from 'react';
import {
Avatar,
Brand,
Breadcrumb,
BreadcrumbItem,
Button,
ButtonVariant,
Dropdown,
DropdownGroup,
DropdownToggle,
DropdownItem,
KebabToggle,
Nav,
NavItem,
NavList,
Page,
PageHeader,
PageSection,
PageSectionVariants,
PageSidebar,
SkipToContent,
TextContent,
Text,
PageHeaderTools,
PageHeaderToolsGroup,
PageHeaderToolsItem
} from '@patternfly/react-core';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
import { Label, PageSection } from '@patternfly/react-core';
import { Table, TableHeader, TableBody } from '@patternfly/react-table';
import { rows } from '../examples/Data.jsx';

class PageLayoutDefaultNav extends React.Component {
constructor(props) {
super(props);
this.state = {
isDropdownOpen: false,
isKebabDropdownOpen: false,
activeItem: 0,
res: []
};
this.onDropdownToggle = isDropdownOpen => {
this.setState({
isDropdownOpen
});
};

this.onDropdownSelect = event => {
this.setState({
isDropdownOpen: !this.state.isDropdownOpen
});
};

this.onKebabDropdownToggle = isKebabDropdownOpen => {
this.setState({
isKebabDropdownOpen
});
};

this.onKebabDropdownSelect = event => {
this.setState({
isKebabDropdownOpen: !this.state.isKebabDropdownOpen
});
};

this.onNavSelect = result => {
this.setState({
activeItem: result.itemId
});
};
}

fetch(page, perPage) {
this.setState({ loading: true });
fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${perPage}`)
.then(resp => resp.json())
.then(resp => this.setState({ res: resp, perPage, page, total: 100 }))
.catch(err => this.setState({ error: err, perPage: 0, page: 0, total: 0 }));
}

componentDidMount() {
this.fetch(this.state.page || 1, this.state.perPage || 20);
}

class StickyHeaderTableDemo extends React.Component {
render() {
const { isDropdownOpen, isKebabDropdownOpen, activeItem, res } = this.state;

const PageNav = (
<Nav onSelect={this.onNavSelect} aria-label="Nav">
<NavList>
<NavItem itemId={0} isActive={activeItem === 0}>
System Panel
</NavItem>
<NavItem itemId={1} isActive={activeItem === 1}>
Policy
</NavItem>
<NavItem itemId={2} isActive={activeItem === 2}>
Authentication
</NavItem>
<NavItem itemId={3} isActive={activeItem === 3}>
Network Services
</NavItem>
<NavItem itemId={4} isActive={activeItem === 4}>
Server
</NavItem>
</NavList>
</Nav>
);
const kebabDropdownItems = [
<DropdownItem>
<CogIcon /> Settings
</DropdownItem>,
<DropdownItem>
<HelpIcon /> Help
</DropdownItem>
];
const userDropdownItems = [
<DropdownGroup key="group 2">
<DropdownItem key="group 2 profile">My profile</DropdownItem>
<DropdownItem key="group 2 user" component="button">
User management
</DropdownItem>
<DropdownItem key="group 2 logout">Logout</DropdownItem>
</DropdownGroup>
];
const headerTools = (
<PageHeaderTools>
<PageHeaderToolsGroup
visibility={{
default: 'hidden',
lg: 'visible'
}} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
>
<PageHeaderToolsItem>
<Button aria-label="Settings actions" variant={ButtonVariant.plain}>
<CogIcon />
</Button>
</PageHeaderToolsItem>
<PageHeaderToolsItem>
<Button aria-label="Help actions" variant={ButtonVariant.plain}>
<QuestionCircleIcon />
</Button>
</PageHeaderToolsItem>
</PageHeaderToolsGroup>
<PageHeaderToolsGroup>
<PageHeaderToolsItem
visibility={{
lg: 'hidden'
}} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
>
<Dropdown
isPlain
position="right"
onSelect={this.onKebabDropdownSelect}
toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
isOpen={isKebabDropdownOpen}
dropdownItems={kebabDropdownItems}
/>
</PageHeaderToolsItem>
<PageHeaderToolsItem
visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
>
<Dropdown
isPlain
position="right"
onSelect={this.onDropdownSelect}
isOpen={isDropdownOpen}
toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
dropdownItems={userDropdownItems}
/>
</PageHeaderToolsItem>
</PageHeaderToolsGroup>
<Avatar src={imgAvatar} alt="Avatar image" />
</PageHeaderTools>
);

const Header = (
<PageHeader logo={<Brand src={imgBrand} alt="Patternfly Logo" />} headerTools={headerTools} showNavToggle />
);
const Sidebar = <PageSidebar nav={PageNav} />;
const pageId = 'main-content-page-layout-default-nav';
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;

const PageBreadcrumb = (
<Breadcrumb>
<BreadcrumbItem>Section home</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
<BreadcrumbItem to="#" isActive>
Section landing
</BreadcrumbItem>
</Breadcrumb>
);
const renderLabel = labelText => {
switch (labelText) {
case 'Running':
return <Label color="green">{labelText}</Label>;
case 'Stopped':
return <Label color="orange">{labelText}</Label>;
case 'Needs Maintenance':
return <Label color="blue">{labelText}</Label>;
case 'Down':
return <Label color="red">{labelText}</Label>;
}
};

return (
<React.Fragment>
<Page
header={Header}
sidebar={Sidebar}
isManagedSidebar
skipToContent={PageSkipToContent}
breadcrumb={PageBreadcrumb}
mainContainerId={pageId}
>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Main title</Text>
<Text component="p">
Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
of its relative line height of 1.5.
</Text>
</TextContent>
</PageSection>
<PageSection>
<DashboardWrapper hasPageTemplateTitle>
<PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
<Card component="div">
<Table
cells={['Title', 'Body']}
rows={res.map(post => [post.title, post.body])}
cells={[
{ title: 'Servers', transforms: [cellWidth(15)] },
{ title: 'Threads', transforms: [cellWidth(10)] },
{ title: 'Applications', transforms: [cellWidth(10)] },
{ title: 'Workspaces', transforms: [cellWidth(10)] },
{ title: 'Status', transforms: [cellWidth(10)] },
{ title: 'Location', transforms: [cellWidth(15)] },
{ title: 'Last Modified', transforms: [cellWidth(15)] },
{ title: 'URL', transforms: [cellWidth(10)] }
]}
rows={rows.map(row => [
row.name,
row.threads,
row.applications,
row.workspaces,
{ title: renderLabel(row.status) },
row.location,
row.lastModified,
{
title: (
<a href="#">
<TableText wrapModifier="truncate">{row.url} </TableText>
</a>
)
}
])}
aria-label="Sticky Header Table Demo"
isStickyHeader
>
<TableHeader />
<TableBody />
</Table>
</PageSection>
</Page>
</React.Fragment>
</Card>
</PageSection>
</DashboardWrapper>
);
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-table/src/docs/examples/Data.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export const rows = [
applications: getRandomInteger(1, 50),
workspaces: getRandomInteger(1, 30),
status: ['Stopped', 'Running', 'Down', 'Needs Maintenance'][getRandomInteger(0, 3)],
status: ['Stopped', 'Running', 'Down', 'Needs Maintenance'][getRandomInteger(0, 3)],
location: ['Raleigh', 'Boston', 'Atlanta', 'San Francisco'][getRandomInteger(0, 3)],
lastModified: '5 minutes ago',
url: 'http://www.redhat.com/en/office-locations/US-node16'
},
Expand Down