From b6acc9101771b50db17c59ca64080e600dbe0c69 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Thu, 28 Jul 2022 16:08:09 -0400 Subject: [PATCH] add compact table data --- packages/react-table/src/docs/demos/Table.md | 8 +- .../src/docs/demos/table-demos/Compact.jsx | 99 ++++++++++--------- .../react-table/src/docs/examples/Data.jsx | 9 +- 3 files changed, 63 insertions(+), 53 deletions(-) diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md index e5dbdba7ce1..101aa54ddac 100644 --- a/packages/react-table/src/docs/demos/Table.md +++ b/packages/react-table/src/docs/demos/Table.md @@ -302,17 +302,17 @@ class BulkSelectTableDemo extends React.Component { ### Expand/collapse all -```js isFullscreen file="table-demos/ExpandCollapseAll.jsx" +```js isFullscreen file="./table-demos/ExpandCollapseAll.jsx" ``` ### Compact -```js isFullscreen file="table-demos/Compact.jsx" +```js isFullscreen file="./table-demos/Compact.jsx" ``` ### Compound expansion -```js isFullscreen file="table-demos/CompoundExpansion.jsx" +```js isFullscreen file="./table-demos/CompoundExpansion.jsx" ``` ### Column management @@ -2852,7 +2852,7 @@ class StickyHeaderTableDemo extends React.Component { ### Sticky first column -```js isFullscreen file="table-demos/StickyFirstColumn.jsx" +```js isFullscreen file="./table-demos/StickyFirstColumn.jsx" ``` ### Sticky columns and header with toolbar diff --git a/packages/react-table/src/docs/demos/table-demos/Compact.jsx b/packages/react-table/src/docs/demos/table-demos/Compact.jsx index 49adefa1e64..e5e6ad1e361 100644 --- a/packages/react-table/src/docs/demos/table-demos/Compact.jsx +++ b/packages/react-table/src/docs/demos/table-demos/Compact.jsx @@ -12,41 +12,35 @@ import { SelectOption, PageSection } from '@patternfly/react-core'; -import { TableComposable, Thead, Tr, Th, Tbody, Td, ActionsColumn } from '@patternfly/react-table'; +import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; -import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; +import { rows, columns } from '../../examples/Data.jsx'; -export const ComposableTable = () => { +export const CompactTable = () => { const [isSelectOpen, setIsSelectOpen] = React.useState(false); + const [page, setPage] = React.useState(1); + const [perPage, setPerPage] = React.useState(10); + const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10)); + const handleSetPage = (_evt, newPage, perPage, startIdx, endIdx) => { + setPaginatedRows(rows.slice(startIdx, endIdx)); + setPage(newPage); + }; + handlePerPageSelect = (_evt, newPerPage, newPage, startIdx, endIdx) => { + setPaginatedRows(rows.slice(startIdx, endIdx)); + setPage(newPage); + setPerPage(newPerPage); + }; - const columns = ['Contributor', 'Position', 'Location', 'Last seen', 'Numbers', 'Icons']; - const rows = [ - ['Sam Jones', 'CSS guru', 'Not too sure', 'May 9, 2018', '0556'], - ['Amy Miller', 'Visual design', 'Raleigh', 'May 9, 2018', '9492'], - ['Steve Wilson', 'Visual design lead', 'Westford', 'May 9, 2018', '9929'], - ['Emma Jackson', 'Interaction design', 'Westford', 'May 9, 2018', '2217'] - ]; - - const defaultActions = () => [ - { - title: 'Settings', - // eslint-disable-next-line no-console - onClick: () => console.log(`clicked on Settings`) - }, - { - title: 'Help', - // eslint-disable-next-line no-console - onClick: () => console.log(`clicked on Help`) - } - ]; const renderPagination = (variant, isCompact) => ( { ); + const renderLabel = labelText => { + switch (labelText) { + case 'Running': + return ; + case 'Stopped': + return ; + case 'Needs Maintenance': + return ; + case 'Down': + return ; + } + }; return ( {tableToolbar} - + - {columns.map((column, columnIndex) => ( - {column} - ))} + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + {columns[5]} + {columns[6]} + + {columns[7]} + - {rows.map((row, rowIndex) => ( + {paginatedRows.map((row, rowIndex) => ( <> - {row[0]} - {row[1]} - {row[2]} - {row[3]} - {row[4]} - - - - - Action link - - - + {row.name} + {row.threads} + {row.applications} + {row.workspaces} + {renderLabel(row.status)} + {row.location} + {row.lastModified} + + + {row.url} + diff --git a/packages/react-table/src/docs/examples/Data.jsx b/packages/react-table/src/docs/examples/Data.jsx index 060c4a71857..9fe9b07c58d 100644 --- a/packages/react-table/src/docs/examples/Data.jsx +++ b/packages/react-table/src/docs/examples/Data.jsx @@ -1,6 +1,3 @@ -/* eslint-disable no-console */ -import * as React from 'react'; - const getRandomInteger = (min, max) => ( Math.floor(Math.random() * (max - min + 1)) + min ); @@ -737,7 +734,8 @@ export const rows = [ lastModified: '20 minutes ago', url: 'http://www.redhat.com/en/office-locations/Bangalore-node13' }, - { name: 'Bangalore-Node 14', + { + name: 'Bangalore-Node 14', threads: getRandomInteger(1, 20), applications: getRandomInteger(1, 50), workspaces: getRandomInteger(1, 30), @@ -746,7 +744,8 @@ export const rows = [ lastModified: '4 hours ago', url: 'http://www.redhat.com/en/office-locations/Bangalore-node14' }, - { name: 'Bangalore-Node 15', + { + name: 'Bangalore-Node 15', threads: getRandomInteger(1, 20), applications: getRandomInteger(1, 50), workspaces: getRandomInteger(1, 30),