@patternfly/react-docs 5.22.11 → 5.23.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -0
- package/package.json +15 -15
- package/src/generated/components/dual-list-selector/react.js +439 -41
- package/src/generated/components/page/react-demos/sticky-section-group-alternate-syntax.png +0 -0
- package/src/generated/components/select/react.js +1 -1
- package/src/generated/components/table/react-composable.js +38 -7
- package/src/generated/components/table/react-demos/sortable---responsive.png +0 -0
- package/src/generated/components/table/react-demos.js +20 -6
- package/src/generated/components/table/react-legacy.js +24 -13
- package/src/generated/index.js +8 -8
|
@@ -15,6 +15,9 @@ import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLog
|
|
|
15
15
|
import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
|
|
16
16
|
import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
|
|
17
17
|
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
|
|
18
|
+
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
|
|
19
|
+
import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
|
|
20
|
+
import srcImportsortableresponsive from './react-demos/sortable---responsive.png';
|
|
18
21
|
import srcImportstickyheader from './react-demos/sticky-header.png';
|
|
19
22
|
const pageData = {
|
|
20
23
|
"id": "Table",
|
|
@@ -35,6 +38,7 @@ const pageData = {
|
|
|
35
38
|
"Error"
|
|
36
39
|
],
|
|
37
40
|
"fullscreenExamples": [
|
|
41
|
+
"Sortable - responsive",
|
|
38
42
|
"Sticky header"
|
|
39
43
|
]
|
|
40
44
|
};
|
|
@@ -55,11 +59,13 @@ pageData.liveContext = {
|
|
|
55
59
|
imgBrand,
|
|
56
60
|
imgAvatar,
|
|
57
61
|
AngleDownIcon,
|
|
58
|
-
AngleRightIcon
|
|
62
|
+
AngleRightIcon,
|
|
63
|
+
BarsIcon,
|
|
64
|
+
AttentionBellIcon
|
|
59
65
|
};
|
|
60
66
|
pageData.examples = {
|
|
61
67
|
'Bulk select': props =>
|
|
62
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Dropdown,\n DropdownItem,\n DropdownPosition,\n DropdownToggle,\n DropdownToggleCheckbox,\n Pagination,\n Title,\n Toolbar,\n ToolbarGroup,\n ToolbarItem\n} from '@patternfly/react-core';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\n\nclass BulkSelectTableDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n res: [],\n perPage: 20,\n page: 1,\n error: null,\n loading: true,\n selectedItems: [],\n numSelected: 0,\n isDropDownOpen: false,\n isKebabOpen: false,\n searchValue: ''\n };\n\n this.onSelect = (event, isSelected, rowId) => {\n const { selectedItems } = this.state;\n const rows = [...this.state.res];\n const id = rows[rowId].id;\n rows[rowId].selected = isSelected;\n this.setState((prevState, props) => {\n return {\n res: rows,\n selectedItems: isSelected\n ? [...prevState.selectedItems, id]\n : prevState.selectedItems.filter(itemId => itemId !== id)\n };\n });\n };\n\n this.updateSelected = () => {\n const { res, selectedItems } = this.state;\n let rows = res.map(post => {\n post.selected = selectedItems.includes(post.id);\n return post;\n });\n\n this.setState({\n res: rows\n });\n };\n\n this.handleSelectClick = newState => {\n if (newState === 'none') {\n this.setState(\n {\n selectedItems: []\n },\n this.updateSelected\n );\n } else if (newState === 'page') {\n let newRows = [];\n let rows = this.state.res.map(post => {\n const isSelected = post.selected;\n newRows = isSelected ? [...newRows] : [...newRows, post.id];\n post.selected = true;\n return post;\n });\n\n this.setState((prevState, props) => {\n return {\n selectedItems: prevState.selectedItems.concat(newRows)\n };\n }, this.updateSelected);\n } else {\n let newRows = [];\n for (var i = 1; i <= 100; i++) newRows = [...newRows, i];\n\n this.setState(\n {\n selectedItems: newRows\n },\n this.updateSelected\n );\n }\n };\n\n this.onDropDownToggle = isOpen => {\n this.setState({\n isDropDownOpen: isOpen\n });\n };\n\n this.onDropDownSelect = event => {\n this.setState((prevState, props) => {\n return { isDropDownOpen: !prevState.isDropDownOpen };\n });\n };\n
|
|
68
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Dropdown,\n DropdownItem,\n DropdownPosition,\n DropdownToggle,\n DropdownToggleCheckbox,\n Pagination,\n Title,\n Toolbar,\n ToolbarGroup,\n ToolbarItem\n} from '@patternfly/react-core';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\n\nclass BulkSelectTableDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n res: [],\n perPage: 20,\n page: 1,\n error: null,\n loading: true,\n selectedItems: [],\n numSelected: 0,\n isDropDownOpen: false,\n isKebabOpen: false,\n searchValue: ''\n };\n\n this.onSelect = (event, isSelected, rowId) => {\n const { selectedItems } = this.state;\n const rows = [...this.state.res];\n const id = rows[rowId].id;\n rows[rowId].selected = isSelected;\n this.setState((prevState, props) => {\n return {\n res: rows,\n selectedItems: isSelected\n ? [...prevState.selectedItems, id]\n : prevState.selectedItems.filter(itemId => itemId !== id)\n };\n });\n };\n\n this.updateSelected = () => {\n const { res, selectedItems } = this.state;\n let rows = res.map(post => {\n post.selected = selectedItems.includes(post.id);\n return post;\n });\n\n this.setState({\n res: rows\n });\n };\n\n this.handleSelectClick = newState => {\n if (newState === 'none') {\n this.setState(\n {\n selectedItems: []\n },\n this.updateSelected\n );\n } else if (newState === 'page') {\n let newRows = [];\n let rows = this.state.res.map(post => {\n const isSelected = post.selected;\n newRows = isSelected ? [...newRows] : [...newRows, post.id];\n post.selected = true;\n return post;\n });\n\n this.setState((prevState, props) => {\n return {\n selectedItems: prevState.selectedItems.concat(newRows)\n };\n }, this.updateSelected);\n } else {\n let newRows = [];\n for (var i = 1; i <= 100; i++) newRows = [...newRows, i];\n\n this.setState(\n {\n selectedItems: newRows\n },\n this.updateSelected\n );\n }\n };\n\n this.onDropDownToggle = isOpen => {\n this.setState({\n isDropDownOpen: isOpen\n });\n };\n\n this.onDropDownSelect = event => {\n this.setState((prevState, props) => {\n return { isDropDownOpen: !prevState.isDropDownOpen };\n });\n };\n }\n\n fetch(page, perPage) {\n this.setState({ loading: true });\n fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${perPage}`)\n .then(resp => resp.json())\n .then(resp => this.setState({ res: resp, perPage, page, loading: false }))\n .then(() => this.updateSelected())\n .catch(err => this.setState({ error: err, loading: false }));\n }\n\n componentDidMount() {\n this.fetch(this.state.page, this.state.perPage);\n }\n\n renderPagination(variant) {\n const { page, perPage } = this.state;\n return (\n <Pagination\n isCompact\n itemCount={100}\n page={page}\n perPage={perPage}\n onSetPage={(_evt, value) => {\n this.fetch(value, perPage);\n }}\n onPerPageSelect={(_evt, value) => {\n this.fetch(1, value);\n }}\n variant={variant}\n titles={{\n paginationTitle: `${variant} pagination`\n }}\n />\n );\n }\n\n buildSelectDropdown() {\n const { isDropDownOpen, selectedItems } = this.state;\n const numSelected = selectedItems.length;\n const allSelected = numSelected === 100;\n const anySelected = numSelected > 0;\n const someChecked = anySelected ? null : false;\n const isChecked = allSelected ? true : someChecked;\n\n const items = [\n <DropdownItem key=\"item-1\" onClick={() => this.handleSelectClick('none')}>\n Select none (0 items)\n </DropdownItem>,\n <DropdownItem key=\"item-2\" onClick={() => this.handleSelectClick('page')}>\n Select page ({this.state.perPage} items)\n </DropdownItem>,\n <DropdownItem key=\"item-3\" onClick={() => this.handleSelectClick('all')}>\n Select all (100 items)\n </DropdownItem>\n ];\n\n return (\n <Dropdown\n onSelect={this.onDropDownSelect}\n position={DropdownPosition.left}\n toggle={\n <DropdownToggle\n splitButtonItems={[\n <DropdownToggleCheckbox\n id=\"example-checkbox-2\"\n key=\"split-checkbox\"\n aria-label={anySelected ? 'Deselect all' : 'Select all'}\n isChecked={isChecked}\n onClick={() => {\n anySelected ? this.handleSelectClick('none') : this.handleSelectClick('all');\n }}\n ></DropdownToggleCheckbox>\n ]}\n onToggle={this.onDropDownToggle}\n >\n {numSelected !== 0 && <React.Fragment>{numSelected} selected</React.Fragment>}\n </DropdownToggle>\n }\n isOpen={isDropDownOpen}\n dropdownItems={items}\n />\n );\n }\n\n renderToolbar() {\n return (\n <React.Fragment>\n <Toolbar>\n <ToolbarGroup>\n <ToolbarItem variant=\"bulk-select\">{this.buildSelectDropdown()}</ToolbarItem>\n <ToolbarItem variant=\"pagination\">{this.renderPagination('top')}</ToolbarItem>\n </ToolbarGroup>\n </Toolbar>\n </React.Fragment>\n );\n }\n\n render() {\n const { loading, res } = this.state;\n const rows = res.map(post => ({\n cells: [post.title, post.body],\n selected: post.selected\n }));\n\n return (\n <React.Fragment>\n {this.renderToolbar()}\n {!loading && (\n <Table\n aria-label=\"Bulk Select Table Demo\"\n cells={['Title', 'Body']}\n rows={rows}\n onSelect={this.onSelect}\n canSelectAll={false}\n >\n <TableHeader />\n <TableBody />\n </Table>\n )}\n {loading && (\n <div className=\"pf-l-bullseye\">\n <Title headingLevel=\"h2\" size=\"3xl\">\n Please wait while loading data\n </Title>\n </div>\n )}\n {this.renderPagination('bottom')}\n </React.Fragment>\n );\n }\n}","title":"Bulk select","lang":"js"}}>
|
|
63
69
|
|
|
64
70
|
</Example>,
|
|
65
71
|
'Expand/collapse all': props =>
|
|
@@ -67,17 +73,24 @@ pageData.examples = {
|
|
|
67
73
|
|
|
68
74
|
</Example>,
|
|
69
75
|
'Column management': props =>
|
|
70
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Button,\n Checkbox,\n DataList,\n DataListCheck,\n DataListItem,\n DataListItemRow,\n DataListCell,\n DataListItemCells,\n Toolbar,\n ToolbarContent,\n ToolbarGroup,\n ToolbarItem,\n Modal,\n OverflowMenu,\n OverflowMenuGroup,\n OverflowMenuItem,\n OptionsMenu,\n OptionsMenuToggle,\n Pagination,\n PaginationVariant,\n Text,\n TextContent,\n ToolbarToggleGroup,\n Select,\n SelectVariant\n} from '@patternfly/react-core';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\nimport CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';\nimport CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';\n\nclass ColumnManagementAction extends React.Component {\n constructor(props) {\n super(props);\n this.actions = [\n {\n title: <a href=\"#\">Link</a>\n },\n {\n title: 'Action'\n },\n {\n isSeparator: true\n },\n {\n title: <a href=\"#\">Separated link</a>\n }\n ];\n this.defaultColumns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit', ''];\n this.defaultRows = [\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 1</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 10\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 25\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 5\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 8\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 30\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 2\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 12\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 48\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 13\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '30 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 3\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 8\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 20\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '8 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 5</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 34\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 21\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 26\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n }\n ];\n this.state = {\n filters: [],\n filteredColumns: [],\n filteredRows: [],\n columns: this.defaultColumns,\n rows: this.defaultRows,\n canSelectAll: true,\n isModalOpen: false,\n check1: true,\n check2: true,\n check3: true,\n check4: true,\n check5: true\n };\n this.onSelect = this.onSelect.bind(this);\n this.toggleSelect = this.toggleSelect.bind(this);\n this.renderModal = this.renderModal.bind(this);\n this.matchCheckboxNameToColumn = name => {\n switch (name) {\n case 'check1':\n return 'Repositories';\n case 'check2':\n return 'Branches';\n case 'check3':\n return 'Pull requests';\n case 'check4':\n return 'Workspaces';\n case 'check5':\n return 'Last commit';\n }\n };\n this.filterData = (checked, name) => {\n const { rows, columns, filters } = this.state;\n if (checked) {\n const updatedFilters = filters.filter(item => item !== name);\n const filteredColumns = this.defaultColumns.filter(column => !updatedFilters.includes(column));\n const filteredRows = this.defaultRows.map(({ ...row }) => {\n row.cells = row.cells.filter(cell => !updatedFilters.includes(cell.props.column));\n return row;\n });\n this.setState({\n filters: updatedFilters,\n filteredColumns: filteredColumns,\n filteredRows: filteredRows\n });\n } else {\n let updatedFilters = filters;\n updatedFilters.push(name);\n const filteredColumns = columns.filter(column => !filters.includes(column));\n const filteredRows = rows.map(({ ...row }) => {\n row.cells = row.cells.filter(cell => !filters.includes(cell.props.column));\n return row;\n });\n this.setState({\n filters: updatedFilters,\n filteredColumns: filteredColumns,\n filteredRows: filteredRows\n });\n }\n };\n this.unfilterAllData = () => {\n this.setState({\n filters: [],\n filteredColumns: this.defaultColumns,\n filteredRows: this.defaultRows\n });\n };\n this.handleChange = (checked, event) => {\n const target = event.target;\n const value = target.type === 'checkbox' ? target.checked : target.value;\n this.filterData(checked, this.matchCheckboxNameToColumn(target.name));\n this.setState({\n [target.name]: value\n });\n };\n this.handleModalToggle = () => {\n this.setState(({ isModalOpen }) => ({\n isModalOpen: !isModalOpen\n }));\n };\n this.onSave = () => {\n this.setState(({ filteredColumns, filteredRows, isModalOpen }) => ({\n columns: filteredColumns,\n rows: filteredRows,\n isModalOpen: !isModalOpen\n }));\n };\n this.selectAllColumns = () => {\n this.unfilterAllData();\n this.setState({\n check1: true,\n check2: true,\n check3: true,\n check4: true,\n check5: true\n });\n };\n }\n\n onSelect(event, isSelected, rowId) {\n let rows;\n if (rowId === -1) {\n rows = this.state.rows.map(oneRow => {\n oneRow.selected = isSelected;\n return oneRow;\n });\n } else {\n rows = [...this.state.rows];\n rows[rowId].selected = isSelected;\n }\n this.setState({\n rows\n });\n }\n\n toggleSelect(checked) {\n this.setState({\n canSelectAll: checked\n });\n }\n\n renderModal() {\n const { isModalOpen } = this.state;\n return (\n <Modal\n title=\"Manage columns\"\n isOpen={isModalOpen}\n variant=\"small\"\n description={\n <TextContent>\n <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text>\n <Button isInline onClick={this.selectAllColumns} variant=\"link\">\n Select all\n </Button>\n </TextContent>\n }\n onClose={this.handleModalToggle}\n actions={[\n <Button key=\"save\" variant=\"primary\" onClick={this.onSave}>\n Save\n </Button>,\n <Button key=\"cancel\" variant=\"secondary\" onClick={this.handleModalToggle}>\n Cancel\n </Button>\n ]}\n >\n <DataList aria-label=\"Table column management\" id=\"table-column-management\" isCompact>\n <DataListItem aria-labelledby=\"table-column-management-item1\">\n <DataListItemRow>\n <DataListCheck\n aria-labelledby=\"table-column-management-item1\"\n checked={this.state.check1}\n name=\"check1\"\n id=\"check1\"\n onChange={this.handleChange}\n />\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item1\" key=\"table-column-management-item1\">\n <label htmlFor=\"check1\">\n Repositories\n </label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item2\">\n <DataListItemRow>\n <DataListCheck\n aria-labelledby=\"table-column-management-item2\"\n checked={this.state.check2}\n name=\"check2\"\n id=\"check2\"\n onChange={this.handleChange}\n />\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item2\" key=\"table-column-management-item2\">\n <label htmlFor=\"check2\">\n Branches\n </label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item3\">\n <DataListItemRow>\n <DataListCheck\n aria-labelledby=\"table-column-management-item3\"\n checked={this.state.check3}\n name=\"check3\"\n id=\"check3\"\n onChange={this.handleChange}\n />\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item3\" key=\"table-column-management-item3\">\n <label htmlFor=\"check3\">\n Pull requests\n </label> \n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item4\">\n <DataListItemRow>\n <DataListCheck\n aria-labelledby=\"table-column-management-item4\"\n checked={this.state.check4}\n name=\"check4\"\n id=\"check4\"\n onChange={this.handleChange}\n />\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item4\" key=\"table-column-management-item4\">\n <label htmlFor=\"check4\">\n Workspaces\n </label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item5\">\n <DataListItemRow>\n <DataListCheck\n aria-labelledby=\"table-column-management-item5\"\n checked={this.state.check5}\n name=\"check5\"\n id=\"check5\"\n onChange={this.handleChange}\n />\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item5\" key=\"table-column-management-item5\">\n <label htmlFor=\"check5\">\n Last commit\n </label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n </DataList>\n </Modal>\n );\n }\n\n render() {\n const { canSelectAll, columns, rows } = this.state;\n\n const toolbarItems = (\n <React.Fragment>\n <span id=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-label\" hidden>\n Choose one\n </span>\n <ToolbarContent>\n <ToolbarItem variant=\"overflow-menu\">\n <OverflowMenu breakpoint=\"md\">\n <OverflowMenuItem isPersistent>\n <Select\n id=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-toggle\"\n variant={SelectVariant.single}\n aria-label=\"Select Input\"\n aria-labelledby=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-label page-layout-table-column-management-action-toolbar-top-select-checkbox-toggle\"\n placeholderText={\n <>\n <FilterIcon /> Name\n </>\n }\n />\n </OverflowMenuItem>\n <OverflowMenuItem>\n <OptionsMenu\n id=\"page-layout-table-column-management-action-toolbar-top-options-menu-toggle\"\n isPlain\n menuItems={[]}\n toggle={\n <OptionsMenuToggle\n toggleTemplate={<SortAmountDownIcon aria-hidden=\"true\" />}\n aria-label=\"Sort by\"\n hideCaret\n />\n }\n />\n </OverflowMenuItem>\n <OverflowMenuGroup groupType=\"button\" isPersistent>\n <OverflowMenuItem>\n <Button variant=\"primary\">Action</Button>\n </OverflowMenuItem>\n <OverflowMenuItem>\n <Button variant=\"link\" onClick={this.handleModalToggle}>\n Manage columns\n </Button>\n </OverflowMenuItem>\n </OverflowMenuGroup>\n </OverflowMenu>\n </ToolbarItem>\n <ToolbarItem variant=\"pagination\">\n <Pagination\n itemCount={37}\n widgetId=\"pagination-options-menu-bottom\"\n page={1}\n variant={PaginationVariant.top}\n isCompact\n />\n </ToolbarItem>\n </ToolbarContent>\n </React.Fragment>\n );\n\n return (\n <React.Fragment>\n <Table\n gridBreakPoint=\"grid-xl\"\n header={\n <React.Fragment>\n <Toolbar id=\"page-layout-table-column-management-action-toolbar-top\">{toolbarItems}</Toolbar>\n </React.Fragment>\n }\n aria-label=\"This is a table with checkboxes\"\n id=\"page-layout-table-column-management-action-table\"\n onSelect={this.onSelect}\n cells={columns}\n rows={rows}\n actions={this.actions}\n canSelectAll={canSelectAll}\n >\n <TableHeader />\n <TableBody />\n </Table>\n <Pagination\n isCompact\n id=\"page-layout-table-column-management-action-toolbar-bottom\"\n itemCount={37}\n widgetId=\"pagination-options-menu-bottom\"\n page={1}\n variant={PaginationVariant.bottom}\n />\n {this.renderModal()}\n </React.Fragment>\n );\n }\n}","title":"Column management","lang":"js"}}>
|
|
76
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Button,\n Checkbox,\n DataList,\n DataListCheck,\n DataListItem,\n DataListItemRow,\n DataListCell,\n DataListItemCells,\n Toolbar,\n ToolbarContent,\n ToolbarGroup,\n ToolbarItem,\n Modal,\n OverflowMenu,\n OverflowMenuGroup,\n OverflowMenuItem,\n OptionsMenu,\n OptionsMenuToggle,\n Pagination,\n PaginationVariant,\n Text,\n TextContent,\n ToolbarToggleGroup,\n Select,\n SelectVariant\n} from '@patternfly/react-core';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\nimport CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';\nimport CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';\n\nclass ColumnManagementAction extends React.Component {\n constructor(props) {\n super(props);\n this.actions = [\n {\n title: <a href=\"#\">Link</a>\n },\n {\n title: 'Action'\n },\n {\n isSeparator: true\n },\n {\n title: <a href=\"#\">Separated link</a>\n }\n ];\n this.defaultColumns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit', ''];\n this.defaultRows = [\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 1</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 10\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 25\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 5\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 8\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 30\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 2\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 12\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 48\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 13\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '30 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 3\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 8\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 20\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '8 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 5</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 34\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 21\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 26\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n }\n ];\n this.state = {\n filters: [],\n filteredColumns: [],\n filteredRows: [],\n columns: this.defaultColumns,\n rows: this.defaultRows,\n canSelectAll: true,\n isModalOpen: false,\n check1: true,\n check2: true,\n check3: true,\n check4: true,\n check5: true\n };\n this.onSelect = this.onSelect.bind(this);\n this.toggleSelect = this.toggleSelect.bind(this);\n this.renderModal = this.renderModal.bind(this);\n this.matchCheckboxNameToColumn = name => {\n switch (name) {\n case 'check1':\n return 'Repositories';\n case 'check2':\n return 'Branches';\n case 'check3':\n return 'Pull requests';\n case 'check4':\n return 'Workspaces';\n case 'check5':\n return 'Last commit';\n }\n };\n this.filterData = (checked, name) => {\n const { rows, columns, filters } = this.state;\n if (checked) {\n const updatedFilters = filters.filter(item => item !== name);\n const filteredColumns = this.defaultColumns.filter(column => !updatedFilters.includes(column));\n const filteredRows = this.defaultRows.map(({ ...row }) => {\n row.cells = row.cells.filter(cell => !updatedFilters.includes(cell.props.column));\n return row;\n });\n this.setState({\n filters: updatedFilters,\n filteredColumns: filteredColumns,\n filteredRows: filteredRows\n });\n } else {\n let updatedFilters = filters;\n updatedFilters.push(name);\n const filteredColumns = columns.filter(column => !filters.includes(column));\n const filteredRows = rows.map(({ ...row }) => {\n row.cells = row.cells.filter(cell => !filters.includes(cell.props.column));\n return row;\n });\n this.setState({\n filters: updatedFilters,\n filteredColumns: filteredColumns,\n filteredRows: filteredRows\n });\n }\n };\n this.unfilterAllData = () => {\n this.setState({\n filters: [],\n filteredColumns: this.defaultColumns,\n filteredRows: this.defaultRows\n });\n };\n this.handleChange = (checked, event) => {\n const target = event.target;\n const value = target.type === 'checkbox' ? target.checked : target.value;\n this.filterData(checked, this.matchCheckboxNameToColumn(target.name));\n this.setState({\n [target.name]: value\n });\n };\n this.handleModalToggle = () => {\n this.setState(({ isModalOpen }) => ({\n isModalOpen: !isModalOpen\n }));\n };\n this.onSave = () => {\n this.setState(({ filteredColumns, filteredRows, isModalOpen }) => ({\n columns: filteredColumns,\n rows: filteredRows,\n isModalOpen: !isModalOpen\n }));\n };\n this.selectAllColumns = () => {\n this.unfilterAllData();\n this.setState({\n check1: true,\n check2: true,\n check3: true,\n check4: true,\n check5: true\n });\n };\n }\n\n onSelect(event, isSelected, rowId) {\n let rows;\n if (rowId === -1) {\n rows = this.state.rows.map(oneRow => {\n oneRow.selected = isSelected;\n return oneRow;\n });\n } else {\n rows = [...this.state.rows];\n rows[rowId].selected = isSelected;\n }\n this.setState({\n rows\n });\n }\n\n toggleSelect(checked) {\n this.setState({\n canSelectAll: checked\n });\n }\n\n renderModal() {\n const { isModalOpen } = this.state;\n return (\n <Modal\n title=\"Manage columns\"\n isOpen={isModalOpen}\n variant=\"small\"\n description={\n <TextContent>\n <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text>\n <Button isInline onClick={this.selectAllColumns} variant=\"link\">\n Select all\n </Button>\n </TextContent>\n }\n onClose={this.handleModalToggle}\n actions={[\n <Button key=\"save\" variant=\"primary\" onClick={this.onSave}>\n Save\n </Button>,\n <Button key=\"cancel\" variant=\"secondary\" onClick={this.handleModalToggle}>\n Cancel\n </Button>\n ]}\n >\n <DataList aria-label=\"Table column management\" id=\"table-column-management\" isCompact>\n <DataListItem aria-labelledby=\"table-column-management-item1\">\n <DataListItemRow>\n <DataListCheck\n aria-labelledby=\"table-column-management-item1\"\n checked={this.state.check1}\n name=\"check1\"\n id=\"check1\"\n onChange={this.handleChange}\n />\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item1\" key=\"table-column-management-item1\">\n <label htmlFor=\"check1\">Repositories</label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item2\">\n <DataListItemRow>\n <DataListCheck\n aria-labelledby=\"table-column-management-item2\"\n checked={this.state.check2}\n name=\"check2\"\n id=\"check2\"\n onChange={this.handleChange}\n />\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item2\" key=\"table-column-management-item2\">\n <label htmlFor=\"check2\">Branches</label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item3\">\n <DataListItemRow>\n <DataListCheck\n aria-labelledby=\"table-column-management-item3\"\n checked={this.state.check3}\n name=\"check3\"\n id=\"check3\"\n onChange={this.handleChange}\n />\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item3\" key=\"table-column-management-item3\">\n <label htmlFor=\"check3\">Pull requests</label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item4\">\n <DataListItemRow>\n <DataListCheck\n aria-labelledby=\"table-column-management-item4\"\n checked={this.state.check4}\n name=\"check4\"\n id=\"check4\"\n onChange={this.handleChange}\n />\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item4\" key=\"table-column-management-item4\">\n <label htmlFor=\"check4\">Workspaces</label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item5\">\n <DataListItemRow>\n <DataListCheck\n aria-labelledby=\"table-column-management-item5\"\n checked={this.state.check5}\n name=\"check5\"\n id=\"check5\"\n onChange={this.handleChange}\n />\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item5\" key=\"table-column-management-item5\">\n <label htmlFor=\"check5\">Last commit</label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n </DataList>\n </Modal>\n );\n }\n\n render() {\n const { canSelectAll, columns, rows } = this.state;\n\n const toolbarItems = (\n <React.Fragment>\n <span id=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-label\" hidden>\n Choose one\n </span>\n <ToolbarContent>\n <ToolbarItem variant=\"overflow-menu\">\n <OverflowMenu breakpoint=\"md\">\n <OverflowMenuItem isPersistent>\n <Select\n id=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-toggle\"\n variant={SelectVariant.single}\n aria-label=\"Select Input\"\n aria-labelledby=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-label page-layout-table-column-management-action-toolbar-top-select-checkbox-toggle\"\n placeholderText={\n <>\n <FilterIcon /> Name\n </>\n }\n />\n </OverflowMenuItem>\n <OverflowMenuItem>\n <OptionsMenu\n id=\"page-layout-table-column-management-action-toolbar-top-options-menu-toggle\"\n isPlain\n menuItems={[]}\n toggle={\n <OptionsMenuToggle\n toggleTemplate={<SortAmountDownIcon aria-hidden=\"true\" />}\n aria-label=\"Sort by\"\n hideCaret\n />\n }\n />\n </OverflowMenuItem>\n <OverflowMenuGroup groupType=\"button\" isPersistent>\n <OverflowMenuItem>\n <Button variant=\"primary\">Action</Button>\n </OverflowMenuItem>\n <OverflowMenuItem>\n <Button variant=\"link\" onClick={this.handleModalToggle}>\n Manage columns\n </Button>\n </OverflowMenuItem>\n </OverflowMenuGroup>\n </OverflowMenu>\n </ToolbarItem>\n <ToolbarItem variant=\"pagination\">\n <Pagination\n itemCount={37}\n widgetId=\"pagination-options-menu-bottom\"\n page={1}\n variant={PaginationVariant.top}\n isCompact\n />\n </ToolbarItem>\n </ToolbarContent>\n </React.Fragment>\n );\n\n return (\n <React.Fragment>\n <Table\n gridBreakPoint=\"grid-xl\"\n header={\n <React.Fragment>\n <Toolbar id=\"page-layout-table-column-management-action-toolbar-top\">{toolbarItems}</Toolbar>\n </React.Fragment>\n }\n aria-label=\"This is a table with checkboxes\"\n id=\"page-layout-table-column-management-action-table\"\n onSelect={this.onSelect}\n cells={columns}\n rows={rows}\n actions={this.actions}\n canSelectAll={canSelectAll}\n >\n <TableHeader />\n <TableBody />\n </Table>\n <Pagination\n isCompact\n id=\"page-layout-table-column-management-action-toolbar-bottom\"\n itemCount={37}\n widgetId=\"pagination-options-menu-bottom\"\n page={1}\n variant={PaginationVariant.bottom}\n />\n {this.renderModal()}\n </React.Fragment>\n );\n }\n}","title":"Column management","lang":"js"}}>
|
|
71
77
|
|
|
72
78
|
</Example>,
|
|
73
79
|
'Column management with draggable': props =>
|
|
74
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Button,\n Checkbox,\n DataList,\n DataListCheck,\n DataListControl,\n DataListDragButton,\n DataListItem,\n DataListItemRow,\n DataListCell,\n DataListItemCells,\n Toolbar,\n ToolbarContent,\n ToolbarGroup,\n ToolbarItem,\n Modal,\n OverflowMenu,\n OverflowMenuGroup,\n OverflowMenuItem,\n OptionsMenu,\n OptionsMenuToggle,\n Pagination,\n PaginationVariant,\n Text,\n TextContent,\n ToolbarToggleGroup,\n Select,\n SelectVariant\n} from '@patternfly/react-core';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\nimport CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';\nimport CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';\n\nclass ColumnManagementAction extends React.Component {\n constructor(props) {\n super(props);\n this.actions = [\n {\n title: <a href=\"#\">Link</a>\n },\n {\n title: 'Action'\n },\n {\n isSeparator: true\n },\n {\n title: <a href=\"#\">Separated link</a>\n }\n ];\n this.defaultColumns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit', ''];\n this.defaultRows = [\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 1</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 10\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 25\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 5\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 8\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 30\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 2\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 12\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 48\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 13\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '30 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 3\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 8\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 20\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '8 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 5</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 34\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 21\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 26\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n }\n ];\n this.state = {\n filters: [],\n filteredColumns: [],\n filteredRows: [],\n columns: this.defaultColumns,\n rows: this.defaultRows,\n canSelectAll: true,\n isModalOpen: false,\n check1: true,\n check2: true,\n check3: true,\n check4: true,\n check5: true,\n liveText: '',\n id: '', \n itemOrder: ['data1', 'data2', 'data3', 'data4', 'data5']\n };\n this.onSelect = this.onSelect.bind(this);\n this.toggleSelect = this.toggleSelect.bind(this);\n this.renderModal = this.renderModal.bind(this);\n this.matchCheckboxNameToColumn = name => {\n switch (name) {\n case 'check1':\n return 'Repositories';\n case 'check2':\n return 'Branches';\n case 'check3':\n return 'Pull requests';\n case 'check4':\n return 'Workspaces';\n case 'check5':\n return 'Last commit';\n }\n };\n this.matchDataListNameToColumn = name => {\n switch (name) {\n case 'data1':\n return 'Repositories';\n case 'data2':\n return 'Branches';\n case 'data3':\n return 'Pull requests';\n case 'data4':\n return 'Workspaces';\n case 'data5':\n return 'Last commit';\n }\n };\n this.filterData = (checked, name) => {\n const { rows, columns, filters } = this.state;\n if (checked) {\n const updatedFilters = filters.filter(item => item !== name);\n const filteredColumns = this.defaultColumns.filter(column => !updatedFilters.includes(column));\n const filteredRows = this.defaultRows.map(({ ...row }) => {\n row.cells = row.cells.filter(cell => !updatedFilters.includes(cell.props.column));\n return row;\n });\n this.setState({\n filters: updatedFilters,\n filteredColumns: filteredColumns,\n filteredRows: filteredRows\n });\n } else {\n let updatedFilters = filters;\n updatedFilters.push(name);\n const filteredColumns = columns.filter(column => !filters.includes(column));\n const filteredRows = rows.map(({ ...row }) => {\n row.cells = row.cells.filter(cell => !filters.includes(cell.props.column));\n return row;\n });\n this.setState({\n filters: updatedFilters,\n filteredColumns: filteredColumns,\n filteredRows: filteredRows\n });\n }\n };\n this.unfilterAllData = () => {\n this.setState({\n filters: [],\n filteredColumns: this.defaultColumns,\n filteredRows: this.defaultRows\n });\n };\n this.handleChange = (checked, event) => {\n const target = event.target;\n const value = target.type === 'checkbox' ? target.checked : target.value;\n this.filterData(checked, this.matchCheckboxNameToColumn(target.name));\n this.setState({\n [target.name]: value\n });\n\n };\n this.handleModalToggle = () => {\n this.setState(({ isModalOpen }) => ({\n isModalOpen: !isModalOpen\n }));\n };\n this.onSave = () => {\n const orderedColumns = this.state.itemOrder.map(item => this.matchDataListNameToColumn(item));\n // concat empty string at the end for actions column\n const filteredOrderedColumns = orderedColumns.filter(col => this.state.filteredColumns.indexOf(col) > -1).concat(['']);\n const orderedRows = [];\n this.state.filteredRows.forEach(row => {\n const updatedCells = row.cells.sort((cellA, cellB) => {\n const indexA = filteredOrderedColumns.indexOf(cellA.props.column);\n const indexB = filteredOrderedColumns.indexOf(cellB.props.column);\n if (indexA < indexB) {\n return -1;\n }\n if (indexA > indexB) {\n return 1;\n }\n // a must be equal to b\n return 0;\n });\n orderedRows.push({\n cells: updatedCells\n });\n });\n this.setState(({ filteredColumns, filteredRows, isModalOpen }) => ({\n columns: filteredOrderedColumns,\n rows: orderedRows,\n isModalOpen: !isModalOpen\n }));\n };\n this.selectAllColumns = () => {\n this.unfilterAllData();\n this.setState({\n check1: true,\n check2: true,\n check3: true,\n check4: true,\n check5: true\n });\n };\n\n this.onDragStart = id => {\n this.setState({\n id: id,\n liveText: `Dragging started for item id: ${id}.`\n });\n };\n\n this.onDragMove = (oldIndex, newIndex) => {\n const { id } = this.state;\n this.setState({\n liveText: `Dragging item ${id}.`\n });\n };\n\n this.onDragCancel = () => {\n this.setState({\n liveText: `Dragging cancelled. List is unchanged.`\n });\n };\n\n this.onDragFinish = itemOrder => {\n this.setState({\n liveText: `Dragging finished`,\n itemOrder\n });\n };\n }\n\n onSelect(event, isSelected, rowId) {\n let rows;\n if (rowId === -1) {\n rows = this.state.rows.map(oneRow => {\n oneRow.selected = isSelected;\n return oneRow;\n });\n } else {\n rows = [...this.state.rows];\n rows[rowId].selected = isSelected;\n }\n this.setState({\n rows\n });\n }\n\n toggleSelect(checked) {\n this.setState({\n canSelectAll: checked\n });\n }\n \n renderModal() {\n const { isModalOpen } = this.state;\n return (\n <Modal\n title=\"Manage columns\"\n isOpen={isModalOpen}\n variant=\"small\"\n description={\n <TextContent>\n <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text>\n <Button isInline onClick={this.selectAllColumns} variant=\"link\">\n Select all\n </Button>\n </TextContent>\n }\n onClose={this.handleModalToggle}\n actions={[\n <Button key=\"save\" variant=\"primary\" onClick={this.onSave}>\n Save\n </Button>,\n <Button key=\"cancel\" variant=\"secondary\" onClick={this.handleModalToggle}>\n Cancel\n </Button>\n ]}\n >\n <DataList \n aria-label=\"Table column management\"\n id=\"table-column-management\"\n isCompact\n onDragFinish={this.onDragFinish}\n onDragStart={this.onDragStart}\n onDragMove={this.onDragMove}\n onDragCancel={this.onDragCancel}\n itemOrder={this.state.itemOrder}\n >\n <DataListItem aria-labelledby=\"table-column-management-item1\" id=\"data1\">\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby=\"table-column-management-item1\"\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck\n aria-labelledby=\"table-column-management-item1\"\n checked={this.state.check1}\n name=\"check1\"\n id=\"check1\"\n onChange={this.handleChange}\n otherControls\n />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item1\" key=\"table-column-management-item1\">\n <label htmlFor=\"check1\"> \n Repositories\n </label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item2\" id=\"data2\">\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby=\"table-column-management-item2\"\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck\n aria-labelledby=\"table-column-management-item2\"\n checked={this.state.check2}\n name=\"check2\"\n id=\"check2\"\n onChange={this.handleChange}\n otherControls\n />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item2\" key=\"table-column-management-item2\">\n <label htmlFor=\"check2\">\n Branches\n </label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item3\" id=\"data3\">\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby=\"table-column-management-item3\"\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck\n aria-labelledby=\"table-column-management-item3\"\n checked={this.state.check3}\n name=\"check3\"\n id=\"check3\"\n onChange={this.handleChange}\n otherControls\n />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item3\" key=\"table-column-management-item3\">\n <label htmlFor=\"check3\">\n Pull requests\n </label> \n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item4\" id=\"data4\">\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby=\"table-column-management-item4\"\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck\n aria-labelledby=\"table-column-management-item4\"\n checked={this.state.check4}\n name=\"check4\"\n id=\"check4\"\n onChange={this.handleChange}\n otherControls\n />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item4\" key=\"table-column-management-item4\">\n <label htmlFor=\"check4\">\n Workspaces\n </label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item5\" id=\"data5\">\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby=\"table-column-management-item5\"\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck\n aria-labelledby=\"table-column-management-item5\"\n checked={this.state.check5}\n name=\"check5\"\n id=\"check5\"\n onChange={this.handleChange}\n otherControls\n />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item5\" key=\"table-column-management-item5\">\n <label htmlFor=\"check5\">\n Last commit\n </label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n </DataList>\n </Modal>\n );\n }\n\n render() {\n const { canSelectAll, columns, rows } = this.state;\n\n const toolbarItems = (\n <React.Fragment>\n <span id=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-label\" hidden>\n Choose one\n </span>\n <ToolbarContent>\n <ToolbarItem variant=\"overflow-menu\">\n <OverflowMenu breakpoint=\"md\">\n <OverflowMenuItem isPersistent>\n <Select\n id=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-toggle\"\n variant={SelectVariant.single}\n aria-label=\"Select Input\"\n aria-labelledby=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-label page-layout-table-column-management-action-toolbar-top-select-checkbox-toggle\"\n placeholderText={\n <>\n <FilterIcon /> Name\n </>\n }\n />\n </OverflowMenuItem>\n <OverflowMenuItem>\n <OptionsMenu\n id=\"page-layout-table-column-management-action-toolbar-top-options-menu-toggle\"\n isPlain\n menuItems={[]}\n toggle={\n <OptionsMenuToggle\n toggleTemplate={<SortAmountDownIcon aria-hidden=\"true\" />}\n aria-label=\"Sort by\"\n hideCaret\n />\n }\n />\n </OverflowMenuItem>\n <OverflowMenuGroup groupType=\"button\" isPersistent>\n <OverflowMenuItem>\n <Button variant=\"primary\">Action</Button>\n </OverflowMenuItem>\n <OverflowMenuItem>\n <Button variant=\"link\" onClick={this.handleModalToggle}>\n Manage columns\n </Button>\n </OverflowMenuItem>\n </OverflowMenuGroup>\n </OverflowMenu>\n </ToolbarItem>\n <ToolbarItem variant=\"pagination\">\n <Pagination\n itemCount={37}\n widgetId=\"pagination-options-menu-bottom\"\n page={1}\n variant={PaginationVariant.top}\n isCompact\n />\n </ToolbarItem>\n </ToolbarContent>\n </React.Fragment>\n );\n\n return (\n <React.Fragment>\n <Table\n gridBreakPoint=\"grid-xl\"\n header={\n <React.Fragment>\n <Toolbar id=\"page-layout-table-column-management-action-toolbar-top\">{toolbarItems}</Toolbar>\n </React.Fragment>\n }\n aria-label=\"This is a table with checkboxes\"\n id=\"page-layout-table-column-management-action-table\"\n onSelect={this.onSelect}\n cells={columns}\n rows={rows}\n actions={this.actions}\n canSelectAll={canSelectAll}\n >\n <TableHeader />\n <TableBody />\n </Table>\n <Pagination\n isCompact\n id=\"page-layout-table-column-management-action-toolbar-bottom\"\n itemCount={37}\n widgetId=\"pagination-options-menu-bottom\"\n page={1}\n variant={PaginationVariant.bottom}\n />\n {this.renderModal()}\n </React.Fragment>\n );\n }\n}","title":"Column management with draggable","lang":"js"}}>
|
|
80
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Button,\n Checkbox,\n DataList,\n DataListCheck,\n DataListControl,\n DataListDragButton,\n DataListItem,\n DataListItemRow,\n DataListCell,\n DataListItemCells,\n Toolbar,\n ToolbarContent,\n ToolbarGroup,\n ToolbarItem,\n Modal,\n OverflowMenu,\n OverflowMenuGroup,\n OverflowMenuItem,\n OptionsMenu,\n OptionsMenuToggle,\n Pagination,\n PaginationVariant,\n Text,\n TextContent,\n ToolbarToggleGroup,\n Select,\n SelectVariant\n} from '@patternfly/react-core';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\nimport CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';\nimport CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';\n\nclass ColumnManagementAction extends React.Component {\n constructor(props) {\n super(props);\n this.actions = [\n {\n title: <a href=\"#\">Link</a>\n },\n {\n title: 'Action'\n },\n {\n isSeparator: true\n },\n {\n title: <a href=\"#\">Separated link</a>\n }\n ];\n this.defaultColumns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit', ''];\n this.defaultRows = [\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 1</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 10\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 25\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 5\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 2</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 8\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 30\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 2\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 3</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 12\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 48\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 13\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '30 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 4</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 3\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 8\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 20\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '8 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n },\n {\n cells: [\n {\n title: (\n <React.Fragment>\n <div>Node 5</div>\n <a href=\"#\">siemur/test-space</a>\n </React.Fragment>\n ),\n props: { column: 'Repositories' }\n },\n {\n title: (\n <React.Fragment>\n <CodeBranchIcon key=\"icon\" /> 34\n </React.Fragment>\n ),\n props: { column: 'Branches' }\n },\n {\n title: (\n <React.Fragment>\n <CodeIcon key=\"icon\" /> 21\n </React.Fragment>\n ),\n props: { column: 'Pull requests' }\n },\n {\n title: (\n <React.Fragment>\n <CubeIcon key=\"icon\" /> 26\n </React.Fragment>\n ),\n props: { column: 'Workspaces' }\n },\n {\n title: '2 days ago',\n props: { column: 'Last commit' }\n },\n {\n title: (\n <React.Fragment>\n <a href=\"#\">Action link</a>\n </React.Fragment>\n ),\n props: { column: '' }\n }\n ]\n }\n ];\n this.state = {\n filters: [],\n filteredColumns: [],\n filteredRows: [],\n columns: this.defaultColumns,\n rows: this.defaultRows,\n canSelectAll: true,\n isModalOpen: false,\n check1: true,\n check2: true,\n check3: true,\n check4: true,\n check5: true,\n liveText: '',\n id: '',\n itemOrder: ['data1', 'data2', 'data3', 'data4', 'data5']\n };\n this.onSelect = this.onSelect.bind(this);\n this.toggleSelect = this.toggleSelect.bind(this);\n this.renderModal = this.renderModal.bind(this);\n this.matchCheckboxNameToColumn = name => {\n switch (name) {\n case 'check1':\n return 'Repositories';\n case 'check2':\n return 'Branches';\n case 'check3':\n return 'Pull requests';\n case 'check4':\n return 'Workspaces';\n case 'check5':\n return 'Last commit';\n }\n };\n this.matchDataListNameToColumn = name => {\n switch (name) {\n case 'data1':\n return 'Repositories';\n case 'data2':\n return 'Branches';\n case 'data3':\n return 'Pull requests';\n case 'data4':\n return 'Workspaces';\n case 'data5':\n return 'Last commit';\n }\n };\n this.filterData = (checked, name) => {\n const { rows, columns, filters } = this.state;\n if (checked) {\n const updatedFilters = filters.filter(item => item !== name);\n const filteredColumns = this.defaultColumns.filter(column => !updatedFilters.includes(column));\n const filteredRows = this.defaultRows.map(({ ...row }) => {\n row.cells = row.cells.filter(cell => !updatedFilters.includes(cell.props.column));\n return row;\n });\n this.setState({\n filters: updatedFilters,\n filteredColumns: filteredColumns,\n filteredRows: filteredRows\n });\n } else {\n let updatedFilters = filters;\n updatedFilters.push(name);\n const filteredColumns = columns.filter(column => !filters.includes(column));\n const filteredRows = rows.map(({ ...row }) => {\n row.cells = row.cells.filter(cell => !filters.includes(cell.props.column));\n return row;\n });\n this.setState({\n filters: updatedFilters,\n filteredColumns: filteredColumns,\n filteredRows: filteredRows\n });\n }\n };\n this.unfilterAllData = () => {\n this.setState({\n filters: [],\n filteredColumns: this.defaultColumns,\n filteredRows: this.defaultRows\n });\n };\n this.handleChange = (checked, event) => {\n const target = event.target;\n const value = target.type === 'checkbox' ? target.checked : target.value;\n this.filterData(checked, this.matchCheckboxNameToColumn(target.name));\n this.setState({\n [target.name]: value\n });\n };\n this.handleModalToggle = () => {\n this.setState(({ isModalOpen }) => ({\n isModalOpen: !isModalOpen\n }));\n };\n this.onSave = () => {\n const orderedColumns = this.state.itemOrder.map(item => this.matchDataListNameToColumn(item));\n // concat empty string at the end for actions column\n const filteredOrderedColumns = orderedColumns\n .filter(col => this.state.filteredColumns.indexOf(col) > -1)\n .concat(['']);\n const orderedRows = [];\n this.state.filteredRows.forEach(row => {\n const updatedCells = row.cells.sort((cellA, cellB) => {\n const indexA = filteredOrderedColumns.indexOf(cellA.props.column);\n const indexB = filteredOrderedColumns.indexOf(cellB.props.column);\n if (indexA < indexB) {\n return -1;\n }\n if (indexA > indexB) {\n return 1;\n }\n // a must be equal to b\n return 0;\n });\n orderedRows.push({\n cells: updatedCells\n });\n });\n this.setState(({ filteredColumns, filteredRows, isModalOpen }) => ({\n columns: filteredOrderedColumns,\n rows: orderedRows,\n isModalOpen: !isModalOpen\n }));\n };\n this.selectAllColumns = () => {\n this.unfilterAllData();\n this.setState({\n check1: true,\n check2: true,\n check3: true,\n check4: true,\n check5: true\n });\n };\n\n this.onDragStart = id => {\n this.setState({\n id: id,\n liveText: `Dragging started for item id: ${id}.`\n });\n };\n\n this.onDragMove = (oldIndex, newIndex) => {\n const { id } = this.state;\n this.setState({\n liveText: `Dragging item ${id}.`\n });\n };\n\n this.onDragCancel = () => {\n this.setState({\n liveText: `Dragging cancelled. List is unchanged.`\n });\n };\n\n this.onDragFinish = itemOrder => {\n this.setState({\n liveText: `Dragging finished`,\n itemOrder\n });\n };\n }\n\n onSelect(event, isSelected, rowId) {\n let rows;\n if (rowId === -1) {\n rows = this.state.rows.map(oneRow => {\n oneRow.selected = isSelected;\n return oneRow;\n });\n } else {\n rows = [...this.state.rows];\n rows[rowId].selected = isSelected;\n }\n this.setState({\n rows\n });\n }\n\n toggleSelect(checked) {\n this.setState({\n canSelectAll: checked\n });\n }\n\n renderModal() {\n const { isModalOpen } = this.state;\n return (\n <Modal\n title=\"Manage columns\"\n isOpen={isModalOpen}\n variant=\"small\"\n description={\n <TextContent>\n <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text>\n <Button isInline onClick={this.selectAllColumns} variant=\"link\">\n Select all\n </Button>\n </TextContent>\n }\n onClose={this.handleModalToggle}\n actions={[\n <Button key=\"save\" variant=\"primary\" onClick={this.onSave}>\n Save\n </Button>,\n <Button key=\"cancel\" variant=\"secondary\" onClick={this.handleModalToggle}>\n Cancel\n </Button>\n ]}\n >\n <DataList\n aria-label=\"Table column management\"\n id=\"table-column-management\"\n isCompact\n onDragFinish={this.onDragFinish}\n onDragStart={this.onDragStart}\n onDragMove={this.onDragMove}\n onDragCancel={this.onDragCancel}\n itemOrder={this.state.itemOrder}\n >\n <DataListItem aria-labelledby=\"table-column-management-item1\" id=\"data1\">\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby=\"table-column-management-item1\"\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck\n aria-labelledby=\"table-column-management-item1\"\n checked={this.state.check1}\n name=\"check1\"\n id=\"check1\"\n onChange={this.handleChange}\n otherControls\n />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item1\" key=\"table-column-management-item1\">\n <label htmlFor=\"check1\">Repositories</label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item2\" id=\"data2\">\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby=\"table-column-management-item2\"\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck\n aria-labelledby=\"table-column-management-item2\"\n checked={this.state.check2}\n name=\"check2\"\n id=\"check2\"\n onChange={this.handleChange}\n otherControls\n />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item2\" key=\"table-column-management-item2\">\n <label htmlFor=\"check2\">Branches</label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item3\" id=\"data3\">\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby=\"table-column-management-item3\"\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck\n aria-labelledby=\"table-column-management-item3\"\n checked={this.state.check3}\n name=\"check3\"\n id=\"check3\"\n onChange={this.handleChange}\n otherControls\n />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item3\" key=\"table-column-management-item3\">\n <label htmlFor=\"check3\">Pull requests</label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item4\" id=\"data4\">\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby=\"table-column-management-item4\"\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck\n aria-labelledby=\"table-column-management-item4\"\n checked={this.state.check4}\n name=\"check4\"\n id=\"check4\"\n onChange={this.handleChange}\n otherControls\n />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item4\" key=\"table-column-management-item4\">\n <label htmlFor=\"check4\">Workspaces</label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n <DataListItem aria-labelledby=\"table-column-management-item5\" id=\"data5\">\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby=\"table-column-management-item5\"\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck\n aria-labelledby=\"table-column-management-item5\"\n checked={this.state.check5}\n name=\"check5\"\n id=\"check5\"\n onChange={this.handleChange}\n otherControls\n />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell id=\"table-column-management-item5\" key=\"table-column-management-item5\">\n <label htmlFor=\"check5\">Last commit</label>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n </DataList>\n </Modal>\n );\n }\n\n render() {\n const { canSelectAll, columns, rows } = this.state;\n\n const toolbarItems = (\n <React.Fragment>\n <span id=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-label\" hidden>\n Choose one\n </span>\n <ToolbarContent>\n <ToolbarItem variant=\"overflow-menu\">\n <OverflowMenu breakpoint=\"md\">\n <OverflowMenuItem isPersistent>\n <Select\n id=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-toggle\"\n variant={SelectVariant.single}\n aria-label=\"Select Input\"\n aria-labelledby=\"page-layout-table-column-management-action-toolbar-top-select-checkbox-label page-layout-table-column-management-action-toolbar-top-select-checkbox-toggle\"\n placeholderText={\n <>\n <FilterIcon /> Name\n </>\n }\n />\n </OverflowMenuItem>\n <OverflowMenuItem>\n <OptionsMenu\n id=\"page-layout-table-column-management-action-toolbar-top-options-menu-toggle\"\n isPlain\n menuItems={[]}\n toggle={\n <OptionsMenuToggle\n toggleTemplate={<SortAmountDownIcon aria-hidden=\"true\" />}\n aria-label=\"Sort by\"\n hideCaret\n />\n }\n />\n </OverflowMenuItem>\n <OverflowMenuGroup groupType=\"button\" isPersistent>\n <OverflowMenuItem>\n <Button variant=\"primary\">Action</Button>\n </OverflowMenuItem>\n <OverflowMenuItem>\n <Button variant=\"link\" onClick={this.handleModalToggle}>\n Manage columns\n </Button>\n </OverflowMenuItem>\n </OverflowMenuGroup>\n </OverflowMenu>\n </ToolbarItem>\n <ToolbarItem variant=\"pagination\">\n <Pagination\n itemCount={37}\n widgetId=\"pagination-options-menu-bottom\"\n page={1}\n variant={PaginationVariant.top}\n isCompact\n />\n </ToolbarItem>\n </ToolbarContent>\n </React.Fragment>\n );\n\n return (\n <React.Fragment>\n <Table\n gridBreakPoint=\"grid-xl\"\n header={\n <React.Fragment>\n <Toolbar id=\"page-layout-table-column-management-action-toolbar-top\">{toolbarItems}</Toolbar>\n </React.Fragment>\n }\n aria-label=\"This is a table with checkboxes\"\n id=\"page-layout-table-column-management-action-table\"\n onSelect={this.onSelect}\n cells={columns}\n rows={rows}\n actions={this.actions}\n canSelectAll={canSelectAll}\n >\n <TableHeader />\n <TableBody />\n </Table>\n <Pagination\n isCompact\n id=\"page-layout-table-column-management-action-toolbar-bottom\"\n itemCount={37}\n widgetId=\"pagination-options-menu-bottom\"\n page={1}\n variant={PaginationVariant.bottom}\n />\n {this.renderModal()}\n </React.Fragment>\n );\n }\n}","title":"Column management with draggable","lang":"js"}}>
|
|
75
81
|
|
|
76
82
|
</Example>,
|
|
77
83
|
'Filterable': props =>
|
|
78
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Button,\n ButtonVariant,\n Bullseye,\n Toolbar,\n ToolbarItem,\n ToolbarContent,\n ToolbarFilter,\n ToolbarToggleGroup,\n ToolbarGroup,\n Dropdown,\n DropdownItem,\n DropdownPosition,\n DropdownToggle,\n InputGroup,\n Title,\n Select,\n SelectOption,\n SelectVariant,\n TextInput,\n EmptyState,\n EmptyStateIcon,\n EmptyStateBody,\n EmptyStateSecondaryActions\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\n\nclass FilterTableDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n filters: {\n location: [],\n name: [],\n status: []\n },\n currentCategory: 'Status',\n isFilterDropdownOpen: false,\n isCategoryDropdownOpen: false,\n nameInput: '',\n columns: [\n { title: 'Servers' },\n { title: 'Threads' },\n { title: 'Applications' },\n { title: 'Workspaces' },\n { title: 'Status' },\n { title: 'Location' }\n ],\n rows: [\n { cells: ['US-Node 1', '5', '25', '5', 'Stopped', 'Raleigh'] },\n { cells: ['US-Node 2', '5', '30', '2', 'Down', 'Westford'] },\n { cells: ['US-Node 3', '13', '35', '12', 'Degraded', 'Boston'] },\n { cells: ['US-Node 4', '2', '5', '18', 'Needs Maintainence', 'Raleigh'] },\n { cells: ['US-Node 5', '7', '30', '5', 'Running', 'Boston'] },\n { cells: ['US-Node 6', '5', '20', '15', 'Stopped', 'Raleigh'] },\n { cells: ['CZ-Node 1', '12', '48', '13', 'Down', 'Brno'] },\n { cells: ['CZ-Node 2', '3', '8', '20', 'Running', 'Brno'] },\n { cells: ['CZ-Remote-Node 1', '15', '20', '10', 'Down', 'Brno'] },\n { cells: ['Bangalore-Node 1', '20', '30', '30', 'Running', 'Bangalore'] }\n ],\n inputValue: ''\n };\n\n this.onDelete = (type = '', id = '') => {\n if (type) {\n this.setState(prevState => {\n prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter(s => s !== id);\n return {\n filters: prevState.filters\n };\n });\n } else {\n this.setState({\n filters: {\n location: [],\n name: [],\n status: []\n }\n });\n }\n };\n\n this.onCategoryToggle = isOpen => {\n this.setState({\n isCategoryDropdownOpen: isOpen\n });\n };\n\n this.onCategorySelect = event => {\n this.setState({\n currentCategory: event.target.innerText,\n isCategoryDropdownOpen: !this.state.isCategoryDropdownOpen\n });\n };\n\n this.onFilterToggle = isOpen => {\n this.setState({\n isFilterDropdownOpen: isOpen\n });\n };\n\n this.onFilterSelect = event => {\n this.setState({\n isFilterDropdownOpen: !this.state.isFilterDropdownOpen\n });\n };\n\n this.onInputChange = newValue => {\n this.setState({ inputValue: newValue });\n };\n\n this.onRowSelect = (event, isSelected, rowId) => {\n let rows;\n if (rowId === -1) {\n rows = this.state.rows.map(oneRow => {\n oneRow.selected = isSelected;\n return oneRow;\n });\n } else {\n rows = [...this.state.rows];\n rows[rowId].selected = isSelected;\n }\n this.setState({\n rows\n });\n };\n\n this.onStatusSelect = (event, selection) => {\n const checked = event.target.checked;\n this.setState(prevState => {\n const prevSelections = prevState.filters['status'];\n return {\n filters: {\n ...prevState.filters,\n status: checked ? [...prevSelections, selection] : prevSelections.filter(value => value !== selection)\n }\n };\n });\n };\n\n this.onNameInput = event => {\n if (event.key && event.key !== 'Enter') {\n return;\n }\n\n const { inputValue } = this.state;\n this.setState(prevState => {\n const prevFilters = prevState.filters['name'];\n return {\n filters: {\n ...prevState.filters,\n ['name']: prevFilters.includes(inputValue) ? prevFilters : [...prevFilters, inputValue]\n },\n inputValue: ''\n };\n });\n };\n\n this.onLocationSelect = (event, selection) => {\n this.setState(prevState => {\n return {\n filters: {\n ...prevState.filters,\n ['location']: [selection]\n }\n };\n });\n this.onFilterSelect();\n };\n }\n\n buildCategoryDropdown() {\n const { isCategoryDropdownOpen, currentCategory } = this.state;\n\n return (\n <ToolbarItem>\n <Dropdown\n onSelect={this.onCategorySelect}\n position={DropdownPosition.left}\n toggle={\n <DropdownToggle onToggle={this.onCategoryToggle} style={{ width: '100%' }}>\n <FilterIcon /> {currentCategory}\n </DropdownToggle>\n }\n isOpen={isCategoryDropdownOpen}\n dropdownItems={[\n <DropdownItem key=\"cat1\">Location</DropdownItem>,\n <DropdownItem key=\"cat2\">Name</DropdownItem>,\n <DropdownItem key=\"cat3\">Status</DropdownItem>\n ]}\n style={{ width: '100%' }}\n ></Dropdown>\n </ToolbarItem>\n );\n }\n\n buildFilterDropdown() {\n const { currentCategory, isFilterDropdownOpen, inputValue, filters } = this.state;\n\n const locationMenuItems = [\n <SelectOption key=\"raleigh\" value=\"Raleigh\" />,\n <SelectOption key=\"westford\" value=\"Westford\" />,\n <SelectOption key=\"boston\" value=\"Boston\" />,\n <SelectOption key=\"brno\" value=\"Brno\" />,\n <SelectOption key=\"bangalore\" value=\"Bangalore\" />\n ];\n\n const statusMenuItems = [\n <SelectOption key=\"statusRunning\" value=\"Running\" />,\n <SelectOption key=\"statusStopped\" value=\"Stopped\" />,\n <SelectOption key=\"statusDown\" value=\"Down\" />,\n <SelectOption key=\"statusDegraded\" value=\"Degraded\" />,\n <SelectOption key=\"statusMaint\" value=\"Needs Maintainence\" />\n ];\n\n return (\n <React.Fragment>\n <ToolbarFilter\n chips={filters.location}\n deleteChip={this.onDelete}\n categoryName=\"Location\"\n showToolbarItem={currentCategory === 'Location'}\n >\n <Select\n aria-label=\"Location\"\n onToggle={this.onFilterToggle}\n onSelect={this.onLocationSelect}\n selections={filters.location[0]}\n isOpen={isFilterDropdownOpen}\n placeholderText=\"Any\"\n >\n {locationMenuItems}\n </Select>\n </ToolbarFilter>\n <ToolbarFilter\n chips={filters.name}\n deleteChip={this.onDelete}\n categoryName=\"Name\"\n showToolbarItem={currentCategory === 'Name'}\n >\n <InputGroup>\n <TextInput\n name=\"nameInput\"\n id=\"nameInput1\"\n type=\"search\"\n aria-label=\"name filter\"\n onChange={this.onInputChange}\n value={inputValue}\n placeholder=\"Filter by name...\"\n onKeyDown={this.onNameInput}\n />\n <Button\n variant={ButtonVariant.control}\n aria-label=\"search button for search input\"\n onClick={this.onNameInput}\n >\n <SearchIcon />\n </Button>\n </InputGroup>\n </ToolbarFilter>\n <ToolbarFilter\n chips={filters.status}\n deleteChip={this.onDelete}\n categoryName=\"Status\"\n showToolbarItem={currentCategory === 'Status'}\n >\n <Select\n variant={SelectVariant.checkbox}\n aria-label=\"Status\"\n onToggle={this.onFilterToggle}\n onSelect={this.onStatusSelect}\n selections={filters.status}\n isOpen={isFilterDropdownOpen}\n placeholderText=\"Filter by status\"\n >\n {statusMenuItems}\n </Select>\n </ToolbarFilter>\n </React.Fragment>\n );\n }\n\n renderToolbar() {\n const { filters } = this.state;\n return (\n <Toolbar id=\"toolbar-with-chip-groups\" clearAllFilters={this.onDelete} collapseListedFiltersBreakpoint=\"xl\">\n <ToolbarContent>\n <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n <ToolbarGroup variant=\"filter-group\">\n {this.buildCategoryDropdown()}\n {this.buildFilterDropdown()}\n </ToolbarGroup>\n </ToolbarToggleGroup>\n </ToolbarContent>\n </Toolbar>\n );\n }\n\n render() {\n const { loading, rows, columns, filters } = this.state;\n\n const filteredRows =\n filters.name.length > 0 || filters.location.length > 0 || filters.status.length > 0\n ? rows.filter(row => {\n return (\n (filters.name.length === 0 ||\n filters.name.some(name => row.cells[0].toLowerCase().includes(name.toLowerCase()))) &&\n (filters.location.length === 0 || filters.location.includes(row.cells[5])) &&\n (filters.status.length === 0 || filters.status.includes(row.cells[4]))\n );\n })\n : rows;\n\n let tableRows = filteredRows;\n if (!loading && filteredRows.length === 0) {\n tableRows = [{\n heightAuto: true,\n cells: [{\n props: { colSpan: 8 },\n title: (\n <Bullseye>\n <EmptyState>\n <EmptyStateIcon icon={SearchIcon} />\n <Title headingLevel=\"h5\" size=\"lg\">\n Clear all filters and try again.\n </Title>\n <EmptyStateBody>\n No results match this filter criteria. Remove all filters or clear all filters to show results.\n </EmptyStateBody>\n <EmptyStateSecondaryActions>\n <Button variant=\"link\" onClick={() => { this.onDelete(null); }}>\n Clear all filters\n </Button>\n </EmptyStateSecondaryActions>\n </EmptyState>\n </Bullseye>\n )\n }]\n }]\n } else if (loading) {\n tableRows = [{\n heightAuto: true,\n cells: [{\n props: { colSpan: 8 },\n title: (\n <Title headingLevel=\"h2\" size=\"3xl\">\n Please wait while loading data\n </Title>\n )\n }]\n }]\n }\n\n return (\n <React.Fragment>\n {this.renderToolbar()}\n <Table cells={columns} rows={tableRows} onSelect={this.onRowSelect} aria-label=\"Filterable Table Demo\">\n <TableHeader />\n <TableBody />\n </Table>\n </React.Fragment>\n );\n }\n}","title":"Filterable","lang":"js"}}>
|
|
84
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Button,\n ButtonVariant,\n Bullseye,\n Toolbar,\n ToolbarItem,\n ToolbarContent,\n ToolbarFilter,\n ToolbarToggleGroup,\n ToolbarGroup,\n Dropdown,\n DropdownItem,\n DropdownPosition,\n DropdownToggle,\n InputGroup,\n Title,\n Select,\n SelectOption,\n SelectVariant,\n TextInput,\n EmptyState,\n EmptyStateIcon,\n EmptyStateBody,\n EmptyStateSecondaryActions\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\n\nclass FilterTableDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n filters: {\n location: [],\n name: [],\n status: []\n },\n currentCategory: 'Status',\n isFilterDropdownOpen: false,\n isCategoryDropdownOpen: false,\n nameInput: '',\n columns: [\n { title: 'Servers' },\n { title: 'Threads' },\n { title: 'Applications' },\n { title: 'Workspaces' },\n { title: 'Status' },\n { title: 'Location' }\n ],\n rows: [\n { cells: ['US-Node 1', '5', '25', '5', 'Stopped', 'Raleigh'] },\n { cells: ['US-Node 2', '5', '30', '2', 'Down', 'Westford'] },\n { cells: ['US-Node 3', '13', '35', '12', 'Degraded', 'Boston'] },\n { cells: ['US-Node 4', '2', '5', '18', 'Needs Maintainence', 'Raleigh'] },\n { cells: ['US-Node 5', '7', '30', '5', 'Running', 'Boston'] },\n { cells: ['US-Node 6', '5', '20', '15', 'Stopped', 'Raleigh'] },\n { cells: ['CZ-Node 1', '12', '48', '13', 'Down', 'Brno'] },\n { cells: ['CZ-Node 2', '3', '8', '20', 'Running', 'Brno'] },\n { cells: ['CZ-Remote-Node 1', '15', '20', '10', 'Down', 'Brno'] },\n { cells: ['Bangalore-Node 1', '20', '30', '30', 'Running', 'Bangalore'] }\n ],\n inputValue: ''\n };\n\n this.onDelete = (type = '', id = '') => {\n if (type) {\n this.setState(prevState => {\n prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter(s => s !== id);\n return {\n filters: prevState.filters\n };\n });\n } else {\n this.setState({\n filters: {\n location: [],\n name: [],\n status: []\n }\n });\n }\n };\n\n this.onCategoryToggle = isOpen => {\n this.setState({\n isCategoryDropdownOpen: isOpen\n });\n };\n\n this.onCategorySelect = event => {\n this.setState({\n currentCategory: event.target.innerText,\n isCategoryDropdownOpen: !this.state.isCategoryDropdownOpen\n });\n };\n\n this.onFilterToggle = isOpen => {\n this.setState({\n isFilterDropdownOpen: isOpen\n });\n };\n\n this.onFilterSelect = event => {\n this.setState({\n isFilterDropdownOpen: !this.state.isFilterDropdownOpen\n });\n };\n\n this.onInputChange = newValue => {\n this.setState({ inputValue: newValue });\n };\n\n this.onRowSelect = (event, isSelected, rowId) => {\n let rows;\n if (rowId === -1) {\n rows = this.state.rows.map(oneRow => {\n oneRow.selected = isSelected;\n return oneRow;\n });\n } else {\n rows = [...this.state.rows];\n rows[rowId].selected = isSelected;\n }\n this.setState({\n rows\n });\n };\n\n this.onStatusSelect = (event, selection) => {\n const checked = event.target.checked;\n this.setState(prevState => {\n const prevSelections = prevState.filters['status'];\n return {\n filters: {\n ...prevState.filters,\n status: checked ? [...prevSelections, selection] : prevSelections.filter(value => value !== selection)\n }\n };\n });\n };\n\n this.onNameInput = event => {\n if (event.key && event.key !== 'Enter') {\n return;\n }\n\n const { inputValue } = this.state;\n this.setState(prevState => {\n const prevFilters = prevState.filters['name'];\n return {\n filters: {\n ...prevState.filters,\n ['name']: prevFilters.includes(inputValue) ? prevFilters : [...prevFilters, inputValue]\n },\n inputValue: ''\n };\n });\n };\n\n this.onLocationSelect = (event, selection) => {\n this.setState(prevState => {\n return {\n filters: {\n ...prevState.filters,\n ['location']: [selection]\n }\n };\n });\n this.onFilterSelect();\n };\n }\n\n buildCategoryDropdown() {\n const { isCategoryDropdownOpen, currentCategory } = this.state;\n\n return (\n <ToolbarItem>\n <Dropdown\n onSelect={this.onCategorySelect}\n position={DropdownPosition.left}\n toggle={\n <DropdownToggle onToggle={this.onCategoryToggle} style={{ width: '100%' }}>\n <FilterIcon /> {currentCategory}\n </DropdownToggle>\n }\n isOpen={isCategoryDropdownOpen}\n dropdownItems={[\n <DropdownItem key=\"cat1\">Location</DropdownItem>,\n <DropdownItem key=\"cat2\">Name</DropdownItem>,\n <DropdownItem key=\"cat3\">Status</DropdownItem>\n ]}\n style={{ width: '100%' }}\n ></Dropdown>\n </ToolbarItem>\n );\n }\n\n buildFilterDropdown() {\n const { currentCategory, isFilterDropdownOpen, inputValue, filters } = this.state;\n\n const locationMenuItems = [\n <SelectOption key=\"raleigh\" value=\"Raleigh\" />,\n <SelectOption key=\"westford\" value=\"Westford\" />,\n <SelectOption key=\"boston\" value=\"Boston\" />,\n <SelectOption key=\"brno\" value=\"Brno\" />,\n <SelectOption key=\"bangalore\" value=\"Bangalore\" />\n ];\n\n const statusMenuItems = [\n <SelectOption key=\"statusRunning\" value=\"Running\" />,\n <SelectOption key=\"statusStopped\" value=\"Stopped\" />,\n <SelectOption key=\"statusDown\" value=\"Down\" />,\n <SelectOption key=\"statusDegraded\" value=\"Degraded\" />,\n <SelectOption key=\"statusMaint\" value=\"Needs Maintainence\" />\n ];\n\n return (\n <React.Fragment>\n <ToolbarFilter\n chips={filters.location}\n deleteChip={this.onDelete}\n categoryName=\"Location\"\n showToolbarItem={currentCategory === 'Location'}\n >\n <Select\n aria-label=\"Location\"\n onToggle={this.onFilterToggle}\n onSelect={this.onLocationSelect}\n selections={filters.location[0]}\n isOpen={isFilterDropdownOpen}\n placeholderText=\"Any\"\n >\n {locationMenuItems}\n </Select>\n </ToolbarFilter>\n <ToolbarFilter\n chips={filters.name}\n deleteChip={this.onDelete}\n categoryName=\"Name\"\n showToolbarItem={currentCategory === 'Name'}\n >\n <InputGroup>\n <TextInput\n name=\"nameInput\"\n id=\"nameInput1\"\n type=\"search\"\n aria-label=\"name filter\"\n onChange={this.onInputChange}\n value={inputValue}\n placeholder=\"Filter by name...\"\n onKeyDown={this.onNameInput}\n />\n <Button\n variant={ButtonVariant.control}\n aria-label=\"search button for search input\"\n onClick={this.onNameInput}\n >\n <SearchIcon />\n </Button>\n </InputGroup>\n </ToolbarFilter>\n <ToolbarFilter\n chips={filters.status}\n deleteChip={this.onDelete}\n categoryName=\"Status\"\n showToolbarItem={currentCategory === 'Status'}\n >\n <Select\n variant={SelectVariant.checkbox}\n aria-label=\"Status\"\n onToggle={this.onFilterToggle}\n onSelect={this.onStatusSelect}\n selections={filters.status}\n isOpen={isFilterDropdownOpen}\n placeholderText=\"Filter by status\"\n >\n {statusMenuItems}\n </Select>\n </ToolbarFilter>\n </React.Fragment>\n );\n }\n\n renderToolbar() {\n const { filters } = this.state;\n return (\n <Toolbar id=\"toolbar-with-chip-groups\" clearAllFilters={this.onDelete} collapseListedFiltersBreakpoint=\"xl\">\n <ToolbarContent>\n <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n <ToolbarGroup variant=\"filter-group\">\n {this.buildCategoryDropdown()}\n {this.buildFilterDropdown()}\n </ToolbarGroup>\n </ToolbarToggleGroup>\n </ToolbarContent>\n </Toolbar>\n );\n }\n\n render() {\n const { loading, rows, columns, filters } = this.state;\n\n const filteredRows =\n filters.name.length > 0 || filters.location.length > 0 || filters.status.length > 0\n ? rows.filter(row => {\n return (\n (filters.name.length === 0 ||\n filters.name.some(name => row.cells[0].toLowerCase().includes(name.toLowerCase()))) &&\n (filters.location.length === 0 || filters.location.includes(row.cells[5])) &&\n (filters.status.length === 0 || filters.status.includes(row.cells[4]))\n );\n })\n : rows;\n\n let tableRows = filteredRows;\n if (!loading && filteredRows.length === 0) {\n tableRows = [\n {\n heightAuto: true,\n cells: [\n {\n props: { colSpan: 8 },\n title: (\n <Bullseye>\n <EmptyState>\n <EmptyStateIcon icon={SearchIcon} />\n <Title headingLevel=\"h5\" size=\"lg\">\n Clear all filters and try again.\n </Title>\n <EmptyStateBody>\n No results match this filter criteria. Remove all filters or clear all filters to show results.\n </EmptyStateBody>\n <EmptyStateSecondaryActions>\n <Button\n variant=\"link\"\n onClick={() => {\n this.onDelete(null);\n }}\n >\n Clear all filters\n </Button>\n </EmptyStateSecondaryActions>\n </EmptyState>\n </Bullseye>\n )\n }\n ]\n }\n ];\n } else if (loading) {\n tableRows = [\n {\n heightAuto: true,\n cells: [\n {\n props: { colSpan: 8 },\n title: (\n <Title headingLevel=\"h2\" size=\"3xl\">\n Please wait while loading data\n </Title>\n )\n }\n ]\n }\n ];\n }\n\n return (\n <React.Fragment>\n {this.renderToolbar()}\n <Table cells={columns} rows={tableRows} onSelect={this.onRowSelect} aria-label=\"Filterable Table Demo\">\n <TableHeader />\n <TableBody />\n </Table>\n </React.Fragment>\n );\n }\n}","title":"Filterable","lang":"js"}}>
|
|
79
85
|
|
|
80
86
|
</Example>,
|
|
87
|
+
'Sortable - responsive': props =>
|
|
88
|
+
<Example {...pageData} {...props} thumbnail={srcImportsortableresponsive} {...{"code":"import React from 'react';\nimport {\n Button,\n Toolbar,\n ToolbarContent,\n ToolbarGroup,\n ToolbarItem,\n OptionsMenu,\n OptionsMenuToggle,\n Pagination,\n PaginationVariant,\n Text,\n TextContent,\n Select,\n SelectVariant,\n SelectOption,\n Nav,\n NavList,\n NavItem,\n Dropdown,\n DropdownItem,\n DropdownGroup,\n DropdownToggle,\n Divider,\n KebabToggle,\n Avatar,\n OptionsMenuItem,\n OptionsMenuSeparator,\n OptionsMenuItemGroup,\n Page,\n PageSidebar,\n Masthead,\n MastheadToggle,\n PageToggleButton,\n MastheadMain,\n MastheadContent,\n SkipToContent,\n PageSection\n} from '@patternfly/react-core';\nimport { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\nimport CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';\nimport CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';\n\nComposableTableSortable = () => {\n const [navActiveItem, setNavActiveItem] = React.useState(0);\n const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);\n const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);\n const [isSelectOpen, setIsSelectOpen] = React.useState(false);\n const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);\n\n const columns = ['Column 1', 'Column 2', 'Column 3', 'Column 4', 'Column 5'];\n const [rows, setRows] = React.useState([\n ['one', 'two', 'a', 'four', 'five'],\n ['a', 'two', 'k', 'four', 'five'],\n ['p', 'two', 'b', 'four', 'five']\n ]);\n // index of the currently active column\n const [activeSortIndex, setActiveSortIndex] = React.useState(-1);\n // sort direction of the currently active column\n const [activeSortDirection, setActiveSortDirection] = React.useState('none');\n // sort dropdown expansion\n const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);\n\n const onSort = (event, index, direction) => {\n setActiveSortIndex(index);\n setActiveSortDirection(direction);\n console.log('i; ', index, direction);\n // sorts the rows\n const updatedRows = rows.sort((a, b) => {\n if (typeof a[index] === 'number') {\n // numeric sort\n if (direction === 'asc') {\n return a[index] - b[index];\n }\n return b[index] - a[index];\n } else {\n // string sort\n if (direction === 'asc') {\n return a[index].localeCompare(b[index]);\n }\n return b[index].localeCompare(a[index]);\n }\n });\n setRows(updatedRows);\n };\n\n const PageNav = (\n <Nav onSelect={result => setNavActiveItem(result.itemId)} aria-label=\"Nav\">\n <NavList>\n <NavItem itemId={0} isActive={navActiveItem === 0} to=\"#system-panel\">\n System Panel\n </NavItem>\n <NavItem itemId={1} isActive={navActiveItem === 1} to=\"#policy\">\n Policy\n </NavItem>\n <NavItem itemId={2} isActive={navActiveItem === 2} to=\"#auth\">\n Authentication\n </NavItem>\n <NavItem itemId={3} isActive={navActiveItem === 3} to=\"#network\">\n Network Services\n </NavItem>\n <NavItem itemId={4} isActive={navActiveItem === 4} to=\"#server\">\n Server\n </NavItem>\n </NavList>\n </Nav>\n );\n\n const kebabDropdownItems = [\n <DropdownItem key=\"kebab-1\">\n <CogIcon /> Settings\n </DropdownItem>,\n <DropdownItem key=\"kebab-2\">\n <HelpIcon /> Help\n </DropdownItem>\n ];\n const userDropdownItems = [\n <DropdownGroup key=\"group 2\">\n <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n <DropdownItem key=\"group 2 user\" component=\"button\">\n User management\n </DropdownItem>\n <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n </DropdownGroup>\n ];\n\n const fullKebabItems = [\n <DropdownGroup key=\"group 2\">\n <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n <DropdownItem key=\"group 2 user\" component=\"button\">\n User management\n </DropdownItem>\n <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n </DropdownGroup>,\n <Divider key=\"divider\" />,\n <DropdownItem key=\"kebab-1\">\n <CogIcon /> Settings\n </DropdownItem>,\n <DropdownItem key=\"kebab-2\">\n <HelpIcon /> Help\n </DropdownItem>\n ];\n\n const headerToolbar = (\n <Toolbar id=\"toolbar\" isFullHeight isStatic>\n <ToolbarContent>\n <ToolbarGroup\n variant=\"icon-button-group\"\n alignment={{ default: 'alignRight' }}\n spacer={{ default: 'spacerNone', md: 'spacerMd' }}\n >\n <ToolbarItem>\n <Button aria-label=\"Notifications\" variant={ButtonVariant.plain}>\n <AttentionBellIcon />\n </Button>\n </ToolbarItem>\n <ToolbarGroup variant=\"icon-button-group\" visibility={{ default: 'hidden', lg: 'visible' }}>\n <ToolbarItem>\n <Button aria-label=\"Settings actions\" variant={ButtonVariant.plain}>\n <CogIcon />\n </Button>\n </ToolbarItem>\n <ToolbarItem>\n <Button aria-label=\"Help actions\" variant={ButtonVariant.plain}>\n <HelpIcon />\n </Button>\n </ToolbarItem>\n </ToolbarGroup>\n </ToolbarGroup>\n <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>\n <Dropdown\n isPlain\n position=\"right\"\n onSelect={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)}\n toggle={<KebabToggle onToggle={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)} />}\n isOpen={isKebabDropdownOpen}\n dropdownItems={kebabDropdownItems}\n />\n </ToolbarItem>\n <ToolbarItem visibility={{ default: 'visible', md: 'hidden', lg: 'hidden', xl: 'hidden', '2xl': 'hidden' }}>\n <Dropdown\n isPlain\n position=\"right\"\n onSelect={() => setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen)}\n toggle={<KebabToggle onToggle={() => setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen)} />}\n isOpen={isFullKebabDropdownOpen}\n dropdownItems={fullKebabItems}\n />\n </ToolbarItem>\n <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>\n <Dropdown\n position=\"right\"\n onSelect={() => setIsDropdownOpen(!isDropdownOpen)}\n isOpen={isDropdownOpen}\n toggle={\n <DropdownToggle\n icon={<Avatar src={imgAvatar} alt=\"Avatar\" />}\n onToggle={() => setIsDropdownOpen(!isDropdownOpen)}\n >\n John Smith\n </DropdownToggle>\n }\n dropdownItems={userDropdownItems}\n />\n </ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n const tableToolbar = (\n <Toolbar id=\"sortable-toolbar\">\n <ToolbarContent>\n <ToolbarItem>\n <Select\n id=\"select-example\"\n variant={SelectVariant.single}\n aria-label=\"Select Input\"\n placeholderText={\n <>\n <FilterIcon /> Status\n </>\n }\n isOpen={isSelectOpen}\n onToggle={() => setIsSelectOpen(!isSelectOpen)}\n onSelect={() => setIsSelectOpen(!isSelectOpen)}\n >\n {[\n <SelectOption key={0} value=\"Debug\" />,\n <SelectOption key={1} value=\"Info\" />,\n <SelectOption key={2} value=\"Warn\" />,\n <SelectOption key={3} value=\"Error\" />\n ]}\n </Select>\n </ToolbarItem>\n <ToolbarItem visibility={{ default: 'hidden', sm: 'visible', md: 'hidden' }}>\n <OptionsMenu\n id=\"options-menu-multiple-options-example\"\n menuItems={[\n <OptionsMenuItemGroup key=\"first group\" aria-label=\"Sort column\">\n {columns.map((column, columnIndex) => (\n <OptionsMenuItem\n key={column}\n isSelected={activeSortIndex === columnIndex}\n onSelect={evt =>\n onSort(evt, columnIndex, activeSortDirection !== 'none' ? activeSortDirection : 'asc')\n }\n >\n {column}\n </OptionsMenuItem>\n ))}\n </OptionsMenuItemGroup>,\n <OptionsMenuSeparator key=\"separator\" />,\n <OptionsMenuItemGroup key=\"second group\" aria-label=\"Sort direction\">\n <OptionsMenuItem\n onSelect={evt => onSort(evt, activeSortIndex, 'asc')}\n isSelected={activeSortDirection === 'asc'}\n id=\"ascending\"\n key=\"ascending\"\n >\n Ascending\n </OptionsMenuItem>\n <OptionsMenuItem\n onSelect={evt => onSort(evt, activeSortIndex, 'desc')}\n isSelected={activeSortDirection === 'desc'}\n id=\"descending\"\n key=\"descending\"\n >\n Descending\n </OptionsMenuItem>\n </OptionsMenuItemGroup>\n ]}\n isOpen={isSortDropdownOpen}\n toggle={\n <OptionsMenuToggle\n hideCaret\n onToggle={() => setIsSortDropdownOpen(!isSortDropdownOpen)}\n toggleTemplate={<SortAmountDownIcon />}\n />\n }\n isPlain\n isGrouped\n />\n </ToolbarItem>\n <ToolbarGroup>\n <ToolbarItem>\n <Button variant=\"primary\">Action</Button>\n </ToolbarItem>\n <ToolbarItem visibility={{ default: 'visible', sm: 'hidden', md: 'visible' }}>\n <Button variant=\"primary\">Responsive hidden action on small</Button>\n </ToolbarItem>\n </ToolbarGroup>\n <ToolbarItem variant=\"pagination\">\n <Pagination\n itemCount={37}\n widgetId=\"pagination-options-menu-bottom\"\n page={1}\n variant={PaginationVariant.top}\n isCompact\n />\n </ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n return (\n <React.Fragment>\n <Page\n header={\n <Masthead>\n <MastheadToggle>\n <PageToggleButton variant=\"plain\" aria-label=\"Global navigation\">\n <BarsIcon />\n </PageToggleButton>\n </MastheadToggle>\n <MastheadMain></MastheadMain>\n <MastheadContent>{headerToolbar}</MastheadContent>\n </Masthead>\n }\n sidebar={<PageSidebar nav={PageNav} />}\n isManagedSidebar\n skipToContent={<SkipToContent href={'#main-content-page-layout-default-nav'}>Skip to content</SkipToContent>}\n mainContainerId={'main-content-page-layout-default-nav'}\n >\n <PageSection variant={PageSectionVariants.light}>\n <TextContent>\n <Text component=\"h1\">Table demos</Text>\n <Text component=\"p\">\n Below is an example of a responsive sortable table. When the screen size shrinks the table into a compact\n form, the toolbar will display a dropdown menu containing sorting options.\n </Text>\n </TextContent>\n </PageSection>\n <PageSection isFilled>\n {tableToolbar}\n <TableComposable aria-label=\"Sortable Table\">\n <Thead>\n <Tr>\n {columns.map((column, columnIndex) => {\n const sortParams = {\n sort: {\n sortBy: {\n index: activeSortIndex,\n direction: activeSortDirection\n },\n onSort,\n columnIndex\n }\n };\n const infoParams =\n columnIndex === 2\n ? {\n info: {\n tooltip: 'More information'\n }\n }\n : {};\n return (\n <Th key={columnIndex} {...sortParams} {...infoParams}>\n {column}\n </Th>\n );\n })}\n </Tr>\n </Thead>\n <Tbody>\n {rows.map((row, rowIndex) => (\n <Tr key={rowIndex}>\n {row.map((cell, cellIndex) => (\n <Td key={`${rowIndex}_${cellIndex}`} dataLabel={columns[cellIndex]}>\n {cell}\n </Td>\n ))}\n </Tr>\n ))}\n </Tbody>\n </TableComposable>\n </PageSection>\n </Page>\n </React.Fragment>\n );\n};","title":"Sortable - responsive","lang":"js","isFullscreen":true}}>
|
|
89
|
+
|
|
90
|
+
<p {...{"className":"ws-p"}}>
|
|
91
|
+
{`This is an example of a responive sortable table. When the screen size is small, the table will change to a compact format and a new toolbar item will be displayed to control sorting.`}
|
|
92
|
+
</p>
|
|
93
|
+
</Example>,
|
|
81
94
|
'Automatic pagination': props =>
|
|
82
95
|
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Pagination } from '@patternfly/react-core';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\n\nclass ComplexPaginationTableDemo extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [{ title: 'First column' }, { title: 'Second column' }, { title: 'Third column' }];\n this.defaultRows = [\n { cells: [{ title: 'Row 1 column 1' }, { title: 'Row 1 column 2' }, { title: 'Row 1 column 3' }] },\n { cells: [{ title: 'Row 2 column 1' }, { title: 'Row 2 column 2' }, { title: 'Row 2 column 3' }] },\n { cells: [{ title: 'Row 3 column 1' }, { title: 'Row 3 column 2' }, { title: 'Row 3 column 3' }] },\n { cells: [{ title: 'Row 4 column 1' }, { title: 'Row 4 column 2' }, { title: 'Row 4 column 3' }] },\n { cells: [{ title: 'Row 5 column 1' }, { title: 'Row 5 column 2' }, { title: 'Row 5 column 3' }] },\n { cells: [{ title: 'Row 6 column 1' }, { title: 'Row 6 column 2' }, { title: 'Row 6 column 3' }] },\n { cells: [{ title: 'Row 7 column 1' }, { title: 'Row 7 column 2' }, { title: 'Row 7 column 3' }] },\n { cells: [{ title: 'Row 8 column 1' }, { title: 'Row 8 column 2' }, { title: 'Row 8 column 3' }] },\n { cells: [{ title: 'Row 9 column 1' }, { title: 'Row 9 column 2' }, { title: 'Row 9 column 3' }] },\n { cells: [{ title: 'Row 10 column 1' }, { title: 'Row 10 column 2' }, { title: 'Row 10 column 3' }] },\n { cells: [{ title: 'Row 11 column 1' }, { title: 'Row 11 column 2' }, { title: 'Row 11 column 3' }] },\n { cells: [{ title: 'Row 12 column 1' }, { title: 'Row 12 column 2' }, { title: 'Row 12 column 3' }] }\n ];\n this.defaultPerPage = 10;\n this.state = {\n perPage: this.defaultPerPage,\n page: 1,\n rows: this.defaultRows.slice(0, this.defaultPerPage)\n };\n this.handleSetPage = this.handleSetPage.bind(this);\n this.handlePerPageSelect = this.handlePerPageSelect.bind(this);\n }\n\n handleSetPage(_evt, newPage, perPage, startIdx, endIdx) {\n this.setState({\n page: newPage,\n rows: this.defaultRows.slice(startIdx, endIdx)\n });\n }\n\n handlePerPageSelect(_evt, newPerPage, newPage, startIdx, endIdx) {\n this.setState({\n perPage: newPerPage,\n page: newPage,\n rows: this.defaultRows.slice(startIdx, endIdx)\n });\n }\n\n renderPagination(variant = 'top') {\n const { page, perPage } = this.state;\n return (\n <Pagination\n isCompact\n itemCount={this.defaultRows.length}\n page={page}\n perPage={perPage}\n defaultToFullPage\n onSetPage={this.handleSetPage}\n onPerPageSelect={this.handlePerPageSelect}\n perPageOptions={[\n { title: '3', value: 3 },\n { title: '5', value: 5 },\n { title: '12', value: 12 },\n { title: '20', value: 20 }\n ]}\n titles={{\n paginationTitle: `${variant} pagination`\n }}\n />\n );\n }\n\n render() {\n const rows = this.state.rows.map(row => ({ cells: row.cells }));\n return (\n <React.Fragment>\n {this.renderPagination()}\n <Table aria-label=\"Automated pagination table\" cells={this.columns} rows={rows}>\n <TableHeader />\n <TableBody />\n </Table>\n </React.Fragment>\n );\n }\n}","title":"Automatic pagination","lang":"js"}}>
|
|
83
96
|
|
|
@@ -141,7 +154,7 @@ pageData.examples = {
|
|
|
141
154
|
|
|
142
155
|
</Example>,
|
|
143
156
|
'Empty': props =>
|
|
144
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Bullseye,\n Button,\n EmptyState,\n EmptyStateIcon,\n EmptyStateBody,\n EmptyStateSecondaryActions,\n Title\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\n\nclass EmptyStateDemo extends React.Component {\n render() {\n const columns = [\n { title: 'Servers' },\n { title: 'Threads' },\n { title: 'Applications' },\n { title: 'Workspaces' },\n { title: 'Status' },\n { title: 'Location' }\n ];\n\n const rows = [{\n
|
|
157
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n Bullseye,\n Button,\n EmptyState,\n EmptyStateIcon,\n EmptyStateBody,\n EmptyStateSecondaryActions,\n Title\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\n\nclass EmptyStateDemo extends React.Component {\n render() {\n const columns = [\n { title: 'Servers' },\n { title: 'Threads' },\n { title: 'Applications' },\n { title: 'Workspaces' },\n { title: 'Status' },\n { title: 'Location' }\n ];\n\n const rows = [\n {\n heightAuto: true,\n cells: [\n {\n props: { colSpan: 8 },\n title: (\n <EmptyState>\n <EmptyStateIcon icon={SearchIcon} />\n <Title headingLevel=\"h5\" size=\"lg\">\n No results found\n </Title>\n <EmptyStateBody>No results match this filter criteria. Clear all filters and try again.</EmptyStateBody>\n <EmptyStateSecondaryActions>\n <Button variant=\"link\" onClick={() => {}}>\n Clear all filters\n </Button>\n </EmptyStateSecondaryActions>\n </EmptyState>\n )\n }\n ]\n }\n ];\n\n return (\n <Table cells={columns} rows={rows} aria-label=\"Empty state demo\">\n <TableHeader />\n <TableBody />\n </Table>\n );\n }\n}","title":"Empty","lang":"js"}}>
|
|
145
158
|
|
|
146
159
|
</Example>,
|
|
147
160
|
'Loading': props =>
|
|
@@ -161,6 +174,7 @@ const Component = () => (
|
|
|
161
174
|
{React.createElement(pageData.examples["Column management"])}
|
|
162
175
|
{React.createElement(pageData.examples["Column management with draggable"])}
|
|
163
176
|
{React.createElement(pageData.examples["Filterable"])}
|
|
177
|
+
{React.createElement(pageData.examples["Sortable - responsive"])}
|
|
164
178
|
{React.createElement(pageData.examples["Automatic pagination"])}
|
|
165
179
|
{React.createElement(pageData.examples["Pagination"])}
|
|
166
180
|
{React.createElement(pageData.examples["Sticky header"])}
|