Skip to content

chore(DataList): added bottom static pagination demo #11403

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.

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
merged 3 commits into from
Jan 10, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
import React from 'react';
import {
Button,
Content,
ContentVariants,
DataList,
DataListItem,
DataListCell,
DataListItemRow,
DataListItemCells,
Flex,
FlexItem,
MenuToggle,
MenuToggleCheckbox,
OverflowMenu,
OverflowMenuControl,
OverflowMenuItem,
PageSection,
Pagination,
Toolbar,
ToolbarItem,
ToolbarContent,
PaginationVariant
} from '@patternfly/react-core';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';

export const DataListStaticBottomPagination: React.FunctionComponent = () => {
const [page, setPage] = React.useState<number | undefined>(1);
const [perPage, setPerPage] = React.useState<number>(10);
const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));

const handleSetPage = (
_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
newPage: number,
_perPage: number | undefined,
startIdx: number | undefined,
endIdx: number | undefined
) => {
setPaginatedRows(rows?.slice(startIdx, endIdx));
setPage(newPage);
};

const handlePerPageSelect = (
_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
newPerPage: number,
newPage: number | undefined,
startIdx: number | undefined,
endIdx: number | undefined
) => {
setPaginatedRows(rows.slice(startIdx, endIdx));
setPage(newPage);
setPerPage(newPerPage);
};

const renderPagination = (variant: PaginationVariant, isCompact: boolean, isSticky: boolean, isStatic: boolean) => (
<Pagination
id={`datalist-${variant}-pagination`}
variant={variant}
itemCount={rows.length}
page={page}
perPage={perPage}
isCompact={isCompact}
isSticky={isSticky}
isStatic={isStatic}
onSetPage={handleSetPage}
onPerPageSelect={handlePerPageSelect}
titles={{
paginationAriaLabel: `${variant} pagination`
}}
/>
);

const toolbarItems = (
<React.Fragment>
<ToolbarItem>
<MenuToggle
aria-label="Select data list items"
splitButtonItems={[
<MenuToggleCheckbox
id="split-dropdown-checkbox"
key="split-dropdown-checkbox"
aria-label={'Select all data list items'}
/>
]}
></MenuToggle>
</ToolbarItem>
<ToolbarItem>
<MenuToggle>Filter by creator name</MenuToggle>
</ToolbarItem>
<ToolbarItem>
<OverflowMenu breakpoint="md">
<OverflowMenuItem>
<Button variant="primary">Create instance</Button>
</OverflowMenuItem>
<OverflowMenuControl hasAdditionalOptions>
<MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain">
<EllipsisVIcon />
</MenuToggle>
</OverflowMenuControl>
</OverflowMenu>
</ToolbarItem>
<ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
{renderPagination(PaginationVariant.top, true, false, false)}
</ToolbarItem>
</React.Fragment>
);

return (
<DashboardWrapper mainContainerId="main-content-datalist-view-pagination" breadcrumb={null}>
<PageSection>
<Content>
<Content component="h1">Projects</Content>
<Content component="p">This is a demo that showcases PatternFly Data List</Content>
</Content>
</PageSection>
<PageSection isFilled>
<Toolbar id="toolbar-group-types">
<ToolbarContent>{toolbarItems}</ToolbarContent>
</Toolbar>
<DataList aria-label="Demo data list">
{paginatedRows.map((row, rowIndex) => {
const { name, threads, applications, workspaces, lastModified } = row;
return (
<DataListItem aria-labelledby={`Demo-item-${rowIndex}`} key={rowIndex}>
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell isFilled={false} key="buttons1">
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
<FlexItem>
<Content id={`Demo-item-${rowIndex}`} component={ContentVariants.p}>
{name}
</Content>
</FlexItem>
<FlexItem>
<Content component={ContentVariants.small}>
Working repo for
<a href="http://www.patternfly.org/">PatternFly</a>
</Content>
</FlexItem>
</Flex>
<Flex flexWrap={{ default: 'wrap' }}>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<CodeBranchIcon /> {threads}
</FlexItem>
</Flex>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<CodeIcon /> {applications}
</FlexItem>
</Flex>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<CubeIcon /> {workspaces}
</FlexItem>
</Flex>
<FlexItem> Updated {lastModified}</FlexItem>
</Flex>
</Flex>
</DataListCell>,
<DataListCell isFilled={false} alignRight key="secondary content align">
<Flex>
<FlexItem>
<Button variant="secondary">Action</Button>
</FlexItem>
<FlexItem>
<a href="#">Link</a>
</FlexItem>
</Flex>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
);
})}
</DataList>
{renderPagination(PaginationVariant.bottom, false, false, true)}
</PageSection>
</DashboardWrapper>
);
};
6 changes: 6 additions & 0 deletions packages/react-core/src/demos/DataListDemo.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';

## Demos

Expand All @@ -28,3 +29,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard

```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
```

### Static bottom pagination

```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
```
Loading
Loading