-
Notifications
You must be signed in to change notification settings - Fork 357
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
chore(Table) convert demos to ts #9621
Merged
tlabaj
merged 15 commits into
patternfly:main
from
Dominik-Petrik:table-convertDemosToTS
Nov 17, 2023
Merged
Changes from all commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
7e4fd93
chore(table) convert to TS
Dominik-Petrik 93b0acd
update import paths
jenny-s51 c905387
fix more import paths
jenny-s51 f275b0a
try import from dist/esm
jenny-s51 bb93d3a
fix build
jenny-s51 e748e8b
convert remaining table demos to ts, WIP draggable logic
jenny-s51 1cf4855
revert col management with draggable to previous dnd implementation
jenny-s51 b868b8b
align file names with demo names, cleanup types, fix TS errors in dem…
jenny-s51 f8b54d0
update fileNames in table.md
jenny-s51 3886ee7
PR feedback from Eric
jenny-s51 e47c99a
fix category dropdown
jenny-s51 7483d4a
fix demos, remove table actions that do not support main purpose of c…
jenny-s51 50818b7
add fix for a11y tests as suggested by Eric
jenny-s51 e553f14
update toolbar snap
jenny-s51 89126a1
add param type to labelText
jenny-s51 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,159 @@ | ||
--- | ||
id: Table | ||
section: components | ||
--- | ||
|
||
import { | ||
Checkbox, | ||
Label, | ||
PageSection, | ||
ToolbarExpandIconWrapper, | ||
ToolbarContent, | ||
Toolbar, | ||
ToolbarItem, | ||
SearchInput, | ||
Masthead, | ||
MastheadToggle, | ||
MastheadMain, | ||
MastheadContent, | ||
SkipToContent, | ||
Breadcrumb, | ||
BreadcrumbItem, | ||
Page, | ||
PageSectionVariants, | ||
TextContent, | ||
Text, | ||
Divider } from '@patternfly/react-core'; | ||
import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated'; | ||
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; | ||
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon'; | ||
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'; | ||
import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon'; | ||
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; | ||
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; | ||
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; | ||
import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon'; | ||
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; | ||
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 globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200'; | ||
import imgBrand from '@patternfly/react-core/src/components/assets/pfLogo.svg'; | ||
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; | ||
import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; | ||
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 BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon'; | ||
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; | ||
import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper'; | ||
import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData'; | ||
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; | ||
|
||
## Demos | ||
|
||
### Bulk select | ||
|
||
```js isFullscreen file="./examples/TableBulkSelect.tsx" | ||
``` | ||
|
||
### Expand/collapse all | ||
|
||
```js isFullscreen file="./examples/TableExpandCollapseAll.tsx" | ||
|
||
``` | ||
|
||
### Compact | ||
|
||
```js isFullscreen file="./examples/TableCompact.tsx" | ||
|
||
``` | ||
|
||
### Compound expansion | ||
|
||
```js isFullscreen file="./examples/TableCompoundExpansion.tsx" | ||
|
||
``` | ||
|
||
### Column management | ||
|
||
```js isFullscreen file="./examples/TableColumnManagement.tsx" | ||
|
||
``` | ||
|
||
### Column management with draggable | ||
|
||
```js isFullscreen file="./examples/TableColumnManagementWithDraggable.tsx" | ||
``` | ||
|
||
### Filterable | ||
|
||
```js isFullscreen file="./examples/TableFilterable.tsx" | ||
``` | ||
|
||
### Sortable - responsive | ||
|
||
```js isFullscreen file="./examples/TableSortableResponsive.tsx" | ||
|
||
``` | ||
|
||
### Automatic pagination | ||
|
||
The below example illustrates the `isLastFullPageShown` prop, which makes the following changes when the user sets the number of items to display per page to an amount that exceeds the remaining amount of data: | ||
|
||
- The component automatically changes the page back to the last full page of results, rather than defaulting to the final page of results. | ||
|
||
To demonstrate this, navigate to the last page of data below using the `>>` navigation arrows, then use the dropdown selector to change the view to 5 per page. | ||
|
||
- The default behavior would show the last page of results, which would only contain the last two rows (rows 11 - 12). | ||
- The `isLastFullPageShown` prop navigates you back to the previous page which does contain a full page of 5 rows (rows 6 - 10). | ||
|
||
```js isFullscreen file="./examples/TableAutomaticPagination.tsx" | ||
``` | ||
|
||
### Static bottom pagination on mobile | ||
|
||
```ts isFullscreen file="./examples/TableStaticBottomPagination.tsx" | ||
|
||
``` | ||
|
||
### Sticky header | ||
|
||
```js isFullscreen file="./examples/TableStickyHeader.tsx" | ||
|
||
``` | ||
|
||
### Sticky first column | ||
|
||
```js isFullscreen file="./examples/TableStickyFirstColumn.tsx" | ||
|
||
``` | ||
|
||
### Sticky columns and header with toolbar | ||
|
||
A toolbar may be added above a sticky table either inside or outside the `OuterScrollContainer`. | ||
|
||
```js isFullscreen file="../components/Table/examples/TableStickyColumnsAndHeader.tsx" | ||
|
||
``` | ||
|
||
## Empty states | ||
|
||
These examples demonstrate the use of an [Empty State component](/components/empty-state) inside of a [Table](/components/table). Empty states are useful in a table when a filter returns no results, while data is loading, or when any type of error or exception condition occurs. | ||
|
||
### Empty | ||
|
||
```js isFullscreen file="./examples/TableEmptyStateDefault.tsx" | ||
``` | ||
|
||
### Loading | ||
|
||
```js isFullscreen file="./examples/TableEmptyStateLoading.tsx" | ||
``` | ||
|
||
### Error | ||
|
||
```js isFullscreen file="./examples/TableEmptyStateError.tsx" | ||
``` |
101 changes: 101 additions & 0 deletions
101
packages/react-table/src/demos/examples/TableAutomaticPagination.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
import React from 'react'; | ||
import { Pagination } from '@patternfly/react-core'; | ||
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; | ||
|
||
export const TableAutomaticPagination: React.FunctionComponent = () => { | ||
const columns = { | ||
firstColumn: 'First column', | ||
secondColumn: 'Second column', | ||
thirdColumn: 'Third column' | ||
}; | ||
|
||
const defaultRows = [ | ||
{ firstColumn: 'Row 1 column 1', secondColumn: 'Row 1 column 2', thirdColumn: 'Row 1 column 3' }, | ||
{ firstColumn: 'Row 2 column 1', secondColumn: 'Row 2 column 2', thirdColumn: 'Row 2 column 3' }, | ||
{ firstColumn: 'Row 3 column 1', secondColumn: 'Row 3 column 2', thirdColumn: 'Row 3 column 3' }, | ||
{ firstColumn: 'Row 4 column 1', secondColumn: 'Row 4 column 2', thirdColumn: 'Row 4 column 3' }, | ||
{ firstColumn: 'Row 5 column 1', secondColumn: 'Row 5 column 2', thirdColumn: 'Row 5 column 3' }, | ||
{ firstColumn: 'Row 6 column 1', secondColumn: 'Row 6 column 2', thirdColumn: 'Row 6 column 3' }, | ||
{ firstColumn: 'Row 7 column 1', secondColumn: 'Row 7 column 2', thirdColumn: 'Row 7 column 3' }, | ||
{ firstColumn: 'Row 8 column 1', secondColumn: 'Row 8 column 2', thirdColumn: 'Row 8 column 3' }, | ||
{ firstColumn: 'Row 9 column 1', secondColumn: 'Row 9 column 2', thirdColumn: 'Row 9 column 3' }, | ||
{ firstColumn: 'Row 10 column 1', secondColumn: 'Row 10 column 2', thirdColumn: 'Row 10 column 3' }, | ||
{ firstColumn: 'Row 11 column 1', secondColumn: 'Row 11 column 2', thirdColumn: 'Row 11 column 3' }, | ||
{ firstColumn: 'Row 12 column 1', secondColumn: 'Row 12 column 2', thirdColumn: 'Row 12 column 3' } | ||
]; | ||
const defaultPerPage = 10; | ||
|
||
const [perPage, setPerPage] = React.useState(defaultPerPage); | ||
const [page, setPage] = React.useState(1); | ||
const [rows, setRows] = React.useState(defaultRows.slice(0, defaultPerPage)); | ||
|
||
const handleSetPage = ( | ||
_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, | ||
newPage: number, | ||
_perPage: number, | ||
startIdx: number, | ||
endIdx: number | ||
) => { | ||
setPage(newPage); | ||
setRows(defaultRows.slice(startIdx, endIdx)); | ||
}; | ||
|
||
const handlePerPageSelect = ( | ||
_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, | ||
newPerPage: number, | ||
newPage: number, | ||
startIdx: number, | ||
endIdx: number | ||
) => { | ||
setPerPage(newPerPage); | ||
setPage(newPage); | ||
setRows(defaultRows.slice(startIdx, endIdx)); | ||
}; | ||
|
||
const renderPagination = (variant = 'top') => ( | ||
<Pagination | ||
isCompact | ||
itemCount={defaultRows.length} | ||
page={page} | ||
perPage={perPage} | ||
isLastFullPageShown | ||
onSetPage={handleSetPage} | ||
onPerPageSelect={handlePerPageSelect} | ||
perPageOptions={[ | ||
{ title: '3', value: 3 }, | ||
{ title: '5', value: 5 }, | ||
{ title: '12', value: 12 }, | ||
{ title: '20', value: 20 } | ||
]} | ||
titles={{ | ||
paginationAriaLabel: `${variant} pagination` | ||
}} | ||
/> | ||
); | ||
|
||
return ( | ||
<React.Fragment> | ||
{renderPagination()} | ||
<Table aria-label="Automated Pagination Table Demo"> | ||
<Thead> | ||
<Tr> | ||
<Th>{columns.firstColumn}</Th> | ||
<Th>{columns.secondColumn}</Th> | ||
<Th>{columns.thirdColumn}</Th> | ||
</Tr> | ||
</Thead> | ||
<Tbody> | ||
{rows.map((row, rowIndex) => ( | ||
<Tr key={rowIndex}> | ||
<> | ||
<Td dataLabel={columns.firstColumn}>{row.firstColumn}</Td> | ||
<Td dataLabel={columns.secondColumn}>{row.secondColumn}</Td> | ||
<Td dataLabel={columns.thirdColumn}>{row.thirdColumn}</Td> | ||
</> | ||
</Tr> | ||
))} | ||
</Tbody> | ||
</Table> | ||
</React.Fragment> | ||
); | ||
}; |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As an FYI, Jenny and I discussed this and I opened #9827 as an investigation as to whether this should be a temporary fix or not