Skip to content

chore(table demos): update filterable demo from deprecated to new table #9055

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
merged 6 commits into from
May 11, 2023
Merged

chore(table demos): update filterable demo from deprecated to new table #9055

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f6e4851
chore(table-demos): update filterable example from legacy to new table
jenny-s51 May 4, 2023
352508f
PR feedback from Nicole
jenny-s51 May 8, 2023
563658f
add missing imports
jenny-s51 May 10, 2023
9fa5154
sentence case
jenny-s51 May 10, 2023
e9268d4
remove whitespace
jenny-s51 May 10, 2023
171707e
remove whitespace
jenny-s51 May 10, 2023
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
140 changes: 76 additions & 64 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 @@ -1076,11 +1076,21 @@ class ColumnManagementAction extends React.Component {

### Filterable

```js
```js isFullscreen
import React from 'react';
import {
Badge,
Button,
Bullseye,
EmptyState,
EmptyStateActions,
EmptyStateBody,
EmptyStateIcon,
EmptyStateHeader,
EmptyStateFooter,
Label,
MenuToggle,
MenuToggleElement,
Toolbar,
ToolbarItem,
ToolbarContent,
Expand All @@ -1090,17 +1100,12 @@ import {
Title,
Select,
SelectOption,
SearchInput,
EmptyState,
EmptyStateActions,
EmptyStateBody,
EmptyStateIcon,
EmptyStateHeader,
EmptyStateFooter
SearchInput
} from '@patternfly/react-core';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { rows, columns } from '../../examples/Data.jsx';

class FilterTableDemo extends React.Component {
constructor(props) {
Expand All @@ -1115,27 +1120,8 @@ class FilterTableDemo extends React.Component {
isFilterDropdownOpen: false,
isCategoryDropdownOpen: false,
nameInput: '',
columns: [
{ title: 'Servers' },
{ title: 'Threads' },
{ title: 'Applications' },
{ title: 'Workspaces' },
{ title: 'Status' },
{ title: 'Location' }
],
rows: [
{ cells: ['US-Node 1', '5', '25', '5', 'Stopped', 'Raleigh'] },
{ cells: ['US-Node 2', '5', '30', '2', 'Down', 'Westford'] },
{ cells: ['US-Node 3', '13', '35', '12', 'Degraded', 'Boston'] },
{ cells: ['US-Node 4', '2', '5', '18', 'Needs Maintainence', 'Raleigh'] },
{ cells: ['US-Node 5', '7', '30', '5', 'Running', 'Boston'] },
{ cells: ['US-Node 6', '5', '20', '15', 'Stopped', 'Raleigh'] },
{ cells: ['CZ-Node 1', '12', '48', '13', 'Down', 'Brno'] },
{ cells: ['CZ-Node 2', '3', '8', '20', 'Running', 'Brno'] },
{ cells: ['CZ-Remote-Node 1', '15', '20', '10', 'Down', 'Brno'] },
{ cells: ['Bangalore-Node 1', '20', '30', '30', 'Running', 'Bangalore'] }
],
inputValue: ''
inputValue: '',
rows: rows.slice(0, 10)
};

this.onDelete = (type = '', id = '') => {
Expand Down Expand Up @@ -1186,22 +1172,6 @@ class FilterTableDemo extends React.Component {
this.setState({ inputValue: newValue });
};

this.onRowSelect = (event, isSelected, rowId) => {
let rows;
if (rowId === -1) {
rows = this.state.rows.map((oneRow) => {
oneRow.selected = isSelected;
return oneRow;
});
} else {
rows = [...this.state.rows];
rows[rowId].selected = isSelected;
}
this.setState({
rows
});
};

this.onStatusSelect = (event, selection) => {
const checked = event.target.checked;
this.setState((prevState) => {
Expand Down Expand Up @@ -1291,10 +1261,9 @@ class FilterTableDemo extends React.Component {

const locationMenuItems = [
<SelectOption key="raleigh" itemId="Raleigh">Raleigh</SelectOption>,
<SelectOption key="westford" itemId="Westford">Westford</SelectOption>,
<SelectOption key="san francisco" itemId="San Francisco">San Francisco</SelectOption>,
<SelectOption key="boston" itemId="Boston">Boston</SelectOption>,
<SelectOption key="brno" itemId="Brno">Brno</SelectOption>,
<SelectOption key="bangalore" itemId="Bangalore">Bangalore</SelectOption>
<SelectOption key="atlanta" itemId="Atlanta">Atlanta</SelectOption>,
];

const statusMenuItems = [
Expand Down Expand Up @@ -1333,10 +1302,10 @@ class FilterTableDemo extends React.Component {
<SelectOption
hasCheckbox
key="statusMaint"
itemId="Needs Maintainence"
isSelected={filters.status.includes("Needs Maintainence")}
itemId="Needs maintenance"
isSelected={filters.status.includes("Needs maintenance")}
>
Needs Maintainence
Needs maintenance
</SelectOption>
];

Expand Down Expand Up @@ -1402,7 +1371,6 @@ class FilterTableDemo extends React.Component {
minWidth="100px"
onSelect={this.onStatusSelect}
selected={filters.status}
minWidth="200px"
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
Expand All @@ -1428,7 +1396,6 @@ class FilterTableDemo extends React.Component {
}

renderToolbar() {
const { filters } = this.state;
return (
<Toolbar id="toolbar-with-chip-groups" clearAllFilters={this.onDelete} collapseListedFiltersBreakpoint="xl">
<ToolbarContent>
Expand All @@ -1450,16 +1417,16 @@ class FilterTableDemo extends React.Component {
}

render() {
const { loading, rows, columns, filters } = this.state;
const { loading, filters, rows } = this.state;

const filteredRows =
filters.name.length > 0 || filters.location.length > 0 || filters.status.length > 0
? rows.filter((row) => {
return (
(filters.name.length === 0 ||
filters.name.some((name) => row.cells[0].toLowerCase().includes(name.toLowerCase()))) &&
(filters.location.length === 0 || filters.location.includes(row.cells[5])) &&
(filters.status.length === 0 || filters.status.includes(row.cells[4]))
filters.name.some((name) => row.name.toLowerCase().includes(name.toLowerCase()))) &&
(filters.location.length === 0 || filters.location.includes(row.location)) &&
(filters.status.length === 0 || filters.status.includes(row.status))
);
})
: rows;
Expand Down Expand Up @@ -1519,14 +1486,59 @@ class FilterTableDemo extends React.Component {
}
];
}
const onSelect = loading || filteredRows.length === 0 ? null : this.onRowSelect; // To remove the select box when there are no rows

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>
{this.renderToolbar()}
<TableDeprecated cells={columns} rows={tableRows} onSelect={onSelect} aria-label="Filterable Table Demo">
<TableHeader />
<TableBody />
</TableDeprecated>
<Table aria-label="Filterable Table Demo">
<Thead>
<Tr>
<Th key={0}>{columns[0]}</Th>
<Th key={1}>{columns[1]}</Th>
<Th key={2}>{columns[2]}</Th>
<Th key={3}>{columns[3]}</Th>
<Th key={4}>{columns[4]}</Th>
<Th key={5}>{columns[5]}</Th>
<Th key={6}>{columns[6]}</Th>
<Th key={7} width={10}>
{columns[7]}
</Th>
</Tr>
</Thead>
<Tbody>
{filteredRows.slice(0, 10).map((row, rowIndex) => (
<Tr key={rowIndex}>
<>
<Td dataLabel={columns[0]}>{row.name}</Td>
<Td dataLabel={columns[1]}>{row.threads}</Td>
<Td dataLabel={columns[2]}>{row.applications}</Td>
<Td dataLabel={columns[3]}>{row.workspaces}</Td>
<Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
<Td dataLabel={columns[5]}>{row.location}</Td>
<Td dataLabel={columns[6]}>{row.lastModified}</Td>
<Td dataLabel={columns[7]} modifier="truncate">
<TableText>
<a href="#">{row.url}</a>
</TableText>
</Td>
</>
</Tr>
))}
</Tbody>
</Table>
</React.Fragment>
);
}
Expand Down Expand Up @@ -1659,7 +1671,7 @@ class StickyHeaderTableDemo extends React.Component {
return <Label color="green">{labelText}</Label>;
case 'Stopped':
return <Label color="orange">{labelText}</Label>;
case 'Needs Maintenance':
case 'Needs maintenance':
return <Label color="blue">{labelText}</Label>;
case 'Down':
return <Label color="red">{labelText}</Label>;
Expand Down