diff --git a/packages/react-core/src/demos/RTL/RTL.md b/packages/react-core/src/demos/RTL/RTL.md index 4acdb73d5fb..a839b4d8271 100644 --- a/packages/react-core/src/demos/RTL/RTL.md +++ b/packages/react-core/src/demos/RTL/RTL.md @@ -15,16 +15,17 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-icon'; import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; -import './examples/TableColumnManagement.css'; +import './examples/PaginatedTable.css'; ## Demos This demonstrates how the UI adapts to the writing mode of the page. -### Table column management +### Paginated table -```js file="./examples/TableColumnManagement.jsx" isFullscreen +```js file="./examples/PaginatedTable.jsx" isFullscreen ``` diff --git a/packages/react-core/src/demos/RTL/examples/TableColumnManagement.css b/packages/react-core/src/demos/RTL/examples/PaginatedTable.css similarity index 100% rename from packages/react-core/src/demos/RTL/examples/TableColumnManagement.css rename to packages/react-core/src/demos/RTL/examples/PaginatedTable.css diff --git a/packages/react-core/src/demos/RTL/examples/TableColumnManagement.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx similarity index 94% rename from packages/react-core/src/demos/RTL/examples/TableColumnManagement.jsx rename to packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx index ccf1870eecc..6b18af0e6e0 100644 --- a/packages/react-core/src/demos/RTL/examples/TableColumnManagement.jsx +++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx @@ -38,10 +38,11 @@ import { Toolbar, ToolbarContent, ToolbarGroup, - ToolbarItem + ToolbarItem, + Truncate } from '@patternfly/react-core'; -import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; +import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import { capitalize } from '../../../helpers'; import translationsEn from './examples/translations.en.json'; import translationsHe from './examples/translations.he.json'; @@ -55,9 +56,10 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-icon'; import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; -export const ColumnManagementAction = () => { +export const PaginatedTableAction = () => { const [translation, setTranslation] = React.useState(translationsEn); const [page, setPage] = React.useState(1); const [perPage, setPerPage] = React.useState(10); @@ -69,6 +71,7 @@ export const ColumnManagementAction = () => { translation.table.columns.modified, translation.table.columns.url ]; + const numRows = 25; const getRandomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; const createRows = () => { @@ -196,7 +199,14 @@ export const ColumnManagementAction = () => { case 'Stopped': case 'עצר': return ( -