@patternfly/react-docs 5.22.11 → 5.23.3

package/src/generated/components/select/react.js

@@ -586,7 +586,7 @@ pageData.examples = {
       
     </Example>,
   'Footer': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport { Select, SelectOption, SelectVariant, SelectDirection, Checkbox, Divider, Button } from '@patternfly/react-core';\n\nclass SelectWithFooter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.options = [\n      <SelectOption key={0} value=\"Select a title\" isPlaceholder />,\n      <SelectOption key={1} value=\"Mr\" />,\n      <SelectOption key={2} value=\"Miss\" />,\n      <SelectOption key={3} value=\"Mrs\" />,\n      <SelectOption key={4} value=\"Ms\" />,\n      <Divider component=\"li\" key={5} />,\n      <SelectOption key={6} value=\"Dr\" />,\n      <SelectOption key={7} value=\"Other\" />\n    ];\n\n    this.state = {\n      isToggleIcon: false,\n      isOpen: false,\n      selected: null,\n      isDisabled: false,\n      direction: SelectDirection.down\n    };\n\n    this.onToggle = isOpen => {\n      this.setState({\n        isOpen\n      });\n    };\n\n    this.onSelect = (event, selection, isPlaceholder) => {\n      if (isPlaceholder) this.clearSelection();\n      else {\n        this.setState({\n          selected: selection,\n          isOpen: false\n        });\n        console.log('selected:', selection);\n      }\n    };\n\n    this.clearSelection = () => {\n      this.setState({\n        selected: null,\n        isOpen: false\n      });\n    };\n  }\n\n\n\n  render() {\n    const { isOpen, selected, isDisabled, direction, isToggleIcon } = this.state;\n    const titleId = 'title-id-footer';\n    return (\n      <div>\n        <span id={titleId} hidden>\n          Title\n        </span>\n        <Select\n          toggleIcon={isToggleIcon && <CubeIcon />}\n          variant={SelectVariant.single}\n          aria-label=\"Select Input\"\n          onToggle={this.onToggle}\n          onSelect={this.onSelect}\n          selections={selected}\n          isOpen={isOpen}\n          aria-labelledby={titleId}\n          isDisabled={isDisabled}\n          direction={direction}\n          footer={<Button variant=\"link\" isInline>Action</Button>}\n        >\n          {this.options}\n        </Select>\n      </div>\n    );\n  }\n}","title":"Footer","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport { Select, SelectOption, SelectVariant, SelectDirection, Divider, Button } from '@patternfly/react-core';\n\nclass SelectWithFooter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.options = [\n      <SelectOption key={0} value=\"Select a title\" isPlaceholder />,\n      <SelectOption key={1} value=\"Mr\" />,\n      <SelectOption key={2} value=\"Miss\" />,\n      <SelectOption key={3} value=\"Mrs\" />,\n      <SelectOption key={4} value=\"Ms\" />,\n      <Divider component=\"li\" key={5} />,\n      <SelectOption key={6} value=\"Dr\" />,\n      <SelectOption key={7} value=\"Other\" />\n    ];\n\n    this.state = {\n      isToggleIcon: false,\n      isOpen: false,\n      selected: null,\n      isDisabled: false,\n      direction: SelectDirection.down\n    };\n\n    this.onToggle = isOpen => {\n      this.setState({\n        isOpen\n      });\n    };\n\n    this.onSelect = (event, selection, isPlaceholder) => {\n      if (isPlaceholder) this.clearSelection();\n      else {\n        this.setState({\n          selected: selection,\n          isOpen: false\n        });\n        console.log('selected:', selection);\n      }\n    };\n\n    this.clearSelection = () => {\n      this.setState({\n        selected: null,\n        isOpen: false\n      });\n    };\n  }\n\n\n\n  render() {\n    const { isOpen, selected, isDisabled, direction, isToggleIcon } = this.state;\n    const titleId = 'title-id-footer';\n    return (\n      <div>\n        <span id={titleId} hidden>\n          Title\n        </span>\n        <Select\n          toggleIcon={isToggleIcon && <CubeIcon />}\n          variant={SelectVariant.single}\n          aria-label=\"Select Input\"\n          onToggle={this.onToggle}\n          onSelect={this.onSelect}\n          selections={selected}\n          isOpen={isOpen}\n          aria-labelledby={titleId}\n          isDisabled={isDisabled}\n          direction={direction}\n          footer={<Button variant=\"link\" isInline>Action</Button>}\n        >\n          {this.options}\n        </Select>\n      </div>\n    );\n  }\n}","title":"Footer","lang":"js"}}>
       
     </Example>,
   'Footer with checkboxes': props => 

package/src/generated/components/table/react-composable.js

@@ -7,7 +7,7 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
-import { Checkbox, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import DemoSortableTable from '../../../../../react-table/src/components/TableComposable/examples/./DemoSortableTable';
@@ -801,6 +801,7 @@ const pageData = {
     "Composable: Basic",
     "Composable: Custom row wrapper, header tooltips & popovers",
     "Composable: Sortable & wrapping headers",
+    "Composable: Sortable - custom control",
     "Composable: Selectable with checkbox",
     "Composable: Selectable radio input",
     "Composable: Row click handler, hoverable & selected rows",
@@ -823,9 +824,7 @@ pageData.liveContext = {
   LeafIcon,
   FolderIcon,
   FolderOpenIcon,
-  Checkbox,
-  ToggleGroup,
-  ToggleGroupItem,
+  SortAmountDownIcon,
   css,
   styles,
   DemoSortableTable
@@ -836,7 +835,7 @@ pageData.examples = {
       
     </Example>,
   'Composable: Custom row wrapper, header tooltips & popovers': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';\n\nComposableTableMisc = () => {\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];\n  const rows = [\n    ['one', 'two', 'three', 'four', 'five'],\n    [{ title: 'one - 2', colSpan: 3 }, null, null, 'four - 2', 'five - 2'],\n    ['one - 3', 'two - 3', 'three - 3', 'four - 3', { title: 'five - 3 (not centered)', textCenter: false }]\n  ];\n  \n  return (\n    <TableComposable aria-label=\"Misc table\">\n      <Thead noWrap>\n        <Tr>\n          <Th\n            info={{\n              tooltip: 'More information about repositories',\n              className: 'repositories-info-tip',\n              tooltipProps: {\n                isContentLeftAligned: true\n              }\n            }}\n          >\n            {columns[0]}\n          </Th>\n          <Th>{columns[1]}</Th>\n          <Th\n            info={{\n              popover: (\n                <div>\n                  More <strong>information</strong> on pull requests\n                </div>\n              ),\n              ariaLabel: 'More information on pull requests',\n              popoverProps: {\n                headerContent: 'Pull requests',\n                footerContent: <a href=\"\">Click here for even more info</a>\n              }\n            }}\n          >\n            {columns[2]}\n          </Th>\n          <Th>{columns[3]}</Th>\n          <Th textCenter>{columns[4]}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {rows.map((row, rowIndex) => {\n          const isOddRow = (rowIndex + 1) % 2;\n          const customStyle = {\n            borderLeft: '3px solid var(--pf-global--primary-color--100)'\n          };\n          return (\n            <Tr\n              key={rowIndex}\n              className={isOddRow ? 'odd-row-class' : 'even-row-class'}\n              style={isOddRow ? customStyle : {}}\n            >\n              {row.map((cell, cellIndex) => {\n                if (!cell) {\n                  return null;\n                }\n                let cellObject;\n                if (typeof cell !== 'object') {\n                  cellObject = {\n                    title: cell\n                  };\n                } else {\n                  cellObject = cell;\n                }\n                const { title, ...rest } = cellObject;\n                return (\n                  <Td\n                    key={`${rowIndex}_${cellIndex}`}\n                    dataLabel={columns[cellIndex]}\n                    textCenter={cellIndex === row.length - 1}\n                    {...rest}\n                  >\n                    {title}\n                  </Td>\n                );\n              })}\n            </Tr>\n          );\n        })}\n      </Tbody>\n    </TableComposable>\n  );\n};","title":"Composable: Custom row wrapper, header tooltips & popovers","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';\n\nComposableTableMisc = () => {\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];\n  const rows = [\n    ['one', 'two', 'three', 'four', 'five'],\n    [{ title: 'one - 2', colSpan: 3 }, null, null, 'four - 2', 'five - 2'],\n    ['one - 3', 'two - 3', 'three - 3', 'four - 3', { title: 'five - 3 (not centered)', textCenter: false }]\n  ];\n\n  return (\n    <TableComposable aria-label=\"Misc table\">\n      <Thead noWrap>\n        <Tr>\n          <Th\n            info={{\n              tooltip: 'More information about repositories',\n              className: 'repositories-info-tip',\n              tooltipProps: {\n                isContentLeftAligned: true\n              }\n            }}\n          >\n            {columns[0]}\n          </Th>\n          <Th>{columns[1]}</Th>\n          <Th\n            info={{\n              popover: (\n                <div>\n                  More <strong>information</strong> on pull requests\n                </div>\n              ),\n              ariaLabel: 'More information on pull requests',\n              popoverProps: {\n                headerContent: 'Pull requests',\n                footerContent: <a href=\"\">Click here for even more info</a>\n              }\n            }}\n          >\n            {columns[2]}\n          </Th>\n          <Th>{columns[3]}</Th>\n          <Th textCenter>{columns[4]}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {rows.map((row, rowIndex) => {\n          const isOddRow = (rowIndex + 1) % 2;\n          const customStyle = {\n            borderLeft: '3px solid var(--pf-global--primary-color--100)'\n          };\n          return (\n            <Tr\n              key={rowIndex}\n              className={isOddRow ? 'odd-row-class' : 'even-row-class'}\n              style={isOddRow ? customStyle : {}}\n            >\n              {row.map((cell, cellIndex) => {\n                if (!cell) {\n                  return null;\n                }\n                let cellObject;\n                if (typeof cell !== 'object') {\n                  cellObject = {\n                    title: cell\n                  };\n                } else {\n                  cellObject = cell;\n                }\n                const { title, ...rest } = cellObject;\n                return (\n                  <Td\n                    key={`${rowIndex}_${cellIndex}`}\n                    dataLabel={columns[cellIndex]}\n                    textCenter={cellIndex === row.length - 1}\n                    {...rest}\n                  >\n                    {title}\n                  </Td>\n                );\n              })}\n            </Tr>\n          );\n        })}\n      </Tbody>\n    </TableComposable>\n  );\n};","title":"Composable: Custom row wrapper, header tooltips & popovers","lang":"js"}}>
       
       <ul {...{"className":"ws-ul"}}>
         
@@ -957,9 +956,40 @@ pageData.examples = {
       <Example {...{"code":"type OnSort = (\n  event: React.MouseEvent,\n  columnIndex: number,\n  sortByDirection: SortByDirection,\n  extraData: IExtraColumnData\n) => void;"}}>
         
       </Example>
+      
+      <p {...{"className":"ws-p"}}>
+        {`The built in display for sorting is not fully responsive, as the column headers will be displayed per row when the screen size is small. To see a full page demo of a responsive sortable table, utilizing a toolbar item to control sorting for small screens, view the `}
+        
+        <code {...{"className":"ws-code"}}>
+          {`Sortable - responsive`}
+        </code>
+        {` demo in the `}
+        
+        <code {...{"className":"ws-code"}}>
+          {`React demos`}
+        </code>
+        {` tab.`}
+      </p>
+    </Example>,
+  'Composable: Sortable - custom control': props => 
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';\nimport {\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  OptionsMenu,\n  OptionsMenuItemGroup,\n  OptionsMenuItem,\n  OptionsMenuSeparator,\n  OptionsMenuToggle\n} from '@patternfly/react-core';\nimport SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';\n\nComposableTableSortable = () => {\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  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  return (\n    <React.Fragment>\n      <Toolbar id=\"toolbar\">\n        <ToolbarContent>\n          <ToolbarItem>\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        </ToolbarContent>\n      </Toolbar>\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    </React.Fragment>\n  );\n};","title":"Composable: Sortable - custom control","lang":"js"}}>
+      
+      <p {...{"className":"ws-p"}}>
+        {`Sorting a table may also be controlled manually with a toolbar control. To see a full page demo of a responsive table, view the `}
+        
+        <code {...{"className":"ws-code"}}>
+          {`Sortable - responsive`}
+        </code>
+        {` demo in the `}
+        
+        <code {...{"className":"ws-code"}}>
+          {`React demos`}
+        </code>
+        {` tab.`}
+      </p>
     </Example>,
   'Composable: Selectable with checkbox': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';\n\nComposableTableSelectable = () => {\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];\n  const rows = [\n    ['one', 'two', 'a', 'four', 'five'],\n    ['a', 'two', 'k', 'four', 'five'],\n    ['a', 'two', 'k', 'four', 'five'],\n    ['a', 'two', 'k', 'four', 'five'],\n    ['a', 'two', 'k', 'four', 'five'],\n    ['p', 'two', 'b', 'four', 'five']\n  ];\n  const [allRowsSelected, setAllRowsSelected] = React.useState(false);\n  const [selected, setSelected] = React.useState(rows.map(row => false));\n  const [recentSelection, setRecentSelection] = React.useState(null);\n  const [shifting, setShifting] = React.useState(false);\n  const onSelect = (event, isSelected, rowId) => {\n    let newSelected = selected.map((sel, index) => (index === rowId ? isSelected : sel))\n    \n    // if the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected\n    if (shifting && recentSelection !== null && isSelected) {\n      const numberSelected = rowId - recentSelection;\n      newSelected = newSelected.map((sel, index) => {\n        // select all between recentSelection and current rowId;\n        const intermediateIndexes = numberSelected > 0 ? \n          Array.from(new Array(numberSelected + 1), (x, i) => i + (recentSelection)) : \n          Array.from(new Array(Math.abs(numberSelected) + 1), (x, i) => i + rowId);\n        return intermediateIndexes.includes(index) ? true : sel;\n      })\n    }\n    setSelected(newSelected);\n    setRecentSelection(rowId);\n    \n    if (!isSelected && allRowsSelected) {\n      setAllRowsSelected(false);\n    } else if (isSelected && !allRowsSelected) {\n      let allSelected = true;\n      for (let i = 0; i < selected.length; i++) {\n        if (i !== rowId) {\n          if (!selected[i]) {\n            allSelected = false;\n          }\n        }\n      }\n      if (allSelected) {\n        setAllRowsSelected(true);\n      }\n    }\n  };\n  \n  onKeyDown = (e) => {\n    if (e.key === 'Shift') {\n      setShifting(true);\n    }\n  };\n  onKeyUp = (e) => {\n    if (e.key === 'Shift') {\n      setShifting(false);\n    }\n  };\n  \n  React.useEffect(() => {\n    document.addEventListener(\"keydown\", onKeyDown);\n    document.addEventListener(\"keyup\", onKeyUp);\n    \n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.removeEventListener(\"keyup\", onKeyUp);\n    }\n  }, []);\n  \n  const onSelectAll = (event, isSelected) => {\n    setAllRowsSelected(isSelected);\n    setSelected(selected.map(sel => isSelected));\n  };\n  \n  return (\n    <TableComposable aria-label=\"Selectable Table\">\n      <Thead>\n        <Tr>\n          <Th\n            select={{\n              onSelect: onSelectAll,\n              isSelected: allRowsSelected\n            }}\n          />\n          <Th>{columns[0]}</Th>\n          <Th>{columns[1]}</Th>\n          <Th>{columns[2]}</Th>\n          <Th>{columns[3]}</Th>\n          <Th>{columns[4]}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {rows.map((row, rowIndex) => (\n          <Tr key={rowIndex}>\n            <Td\n              key={`${rowIndex}_0`}\n              select={{\n                rowIndex,\n                onSelect,\n                isSelected: selected[rowIndex] && rowIndex !== 1,\n                disable: rowIndex === 1\n              }}\n            />\n            {row.map((cell, cellIndex) => {\n              const shiftedIndex = cellIndex + 1;\n              return (\n                <Td key={`${rowIndex}_${shiftedIndex}`} dataLabel={columns[cellIndex]}>\n                  {cell}\n                </Td>\n              );\n            })}\n          </Tr>\n        ))}\n      </Tbody>\n    </TableComposable>\n  );\n};","title":"Composable: Selectable with checkbox","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';\n\nComposableTableSelectable = () => {\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];\n  const rows = [\n    ['one', 'two', 'a', 'four', 'five'],\n    ['a', 'two', 'k', 'four', 'five'],\n    ['a', 'two', 'k', 'four', 'five'],\n    ['a', 'two', 'k', 'four', 'five'],\n    ['a', 'two', 'k', 'four', 'five'],\n    ['p', 'two', 'b', 'four', 'five']\n  ];\n  const [allRowsSelected, setAllRowsSelected] = React.useState(false);\n  const [selected, setSelected] = React.useState(rows.map(row => false));\n  const [recentSelection, setRecentSelection] = React.useState(null);\n  const [shifting, setShifting] = React.useState(false);\n  const onSelect = (event, isSelected, rowId) => {\n    let newSelected = selected.map((sel, index) => (index === rowId ? isSelected : sel));\n\n    // if the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected\n    if (shifting && recentSelection !== null && isSelected) {\n      const numberSelected = rowId - recentSelection;\n      newSelected = newSelected.map((sel, index) => {\n        // select all between recentSelection and current rowId;\n        const intermediateIndexes =\n          numberSelected > 0\n            ? Array.from(new Array(numberSelected + 1), (x, i) => i + recentSelection)\n            : Array.from(new Array(Math.abs(numberSelected) + 1), (x, i) => i + rowId);\n        return intermediateIndexes.includes(index) ? true : sel;\n      });\n    }\n    setSelected(newSelected);\n    setRecentSelection(rowId);\n\n    if (!isSelected && allRowsSelected) {\n      setAllRowsSelected(false);\n    } else if (isSelected && !allRowsSelected) {\n      let allSelected = true;\n      for (let i = 0; i < selected.length; i++) {\n        if (i !== rowId) {\n          if (!selected[i]) {\n            allSelected = false;\n          }\n        }\n      }\n      if (allSelected) {\n        setAllRowsSelected(true);\n      }\n    }\n  };\n\n  onKeyDown = e => {\n    if (e.key === 'Shift') {\n      setShifting(true);\n    }\n  };\n  onKeyUp = e => {\n    if (e.key === 'Shift') {\n      setShifting(false);\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    document.addEventListener('keyup', onKeyUp);\n\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n      document.removeEventListener('keyup', onKeyUp);\n    };\n  }, []);\n\n  const onSelectAll = (event, isSelected) => {\n    setAllRowsSelected(isSelected);\n    setSelected(selected.map(sel => isSelected));\n  };\n\n  return (\n    <TableComposable aria-label=\"Selectable Table\">\n      <Thead>\n        <Tr>\n          <Th\n            select={{\n              onSelect: onSelectAll,\n              isSelected: allRowsSelected\n            }}\n          />\n          <Th>{columns[0]}</Th>\n          <Th>{columns[1]}</Th>\n          <Th>{columns[2]}</Th>\n          <Th>{columns[3]}</Th>\n          <Th>{columns[4]}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {rows.map((row, rowIndex) => (\n          <Tr key={rowIndex}>\n            <Td\n              key={`${rowIndex}_0`}\n              select={{\n                rowIndex,\n                onSelect,\n                isSelected: selected[rowIndex] && rowIndex !== 1,\n                disable: rowIndex === 1\n              }}\n            />\n            {row.map((cell, cellIndex) => {\n              const shiftedIndex = cellIndex + 1;\n              return (\n                <Td key={`${rowIndex}_${shiftedIndex}`} dataLabel={columns[cellIndex]}>\n                  {cell}\n                </Td>\n              );\n            })}\n          </Tr>\n        ))}\n      </Tbody>\n    </TableComposable>\n  );\n};","title":"Composable: Selectable with checkbox","lang":"js"}}>
       
       <p {...{"className":"ws-p"}}>
         {`To make a row selectable, the table needs a selection column.
@@ -1057,7 +1087,7 @@ checking checkboxes will check intermediate rows' checkboxes.`}
       </p>
     </Example>,
   'Composable: Row click handler, hoverable & selected rows': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';\n\nComposableTableHoverable = () => {\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];\n  const [rows, setRows] = React.useState([\n    { cells: ['one', 'two', 'a', 'four', 'five'], isRowSelected: false},\n    { cells: ['a', 'two', 'k', 'four', 'five'], isRowSelected: false},\n    { cells: ['p', 'two', 'b', 'four', 'five'], isRowSelected: false}\n  ]);\n  const onRowClick = (event, rowIndex, row) => {\n    const updatedRows = [...rows];\n    updatedRows[rowIndex].isRowSelected = !rows[rowIndex].isRowSelected;\n    setRows(updatedRows); \n  };\n  \n  return (\n    <TableComposable aria-label=\"Misc table\">\n      <Thead noWrap>\n        <Tr>\n          <Th>\n            {columns[0]}\n          </Th>\n          <Th>{columns[1]}</Th>\n          <Th>\n            {columns[2]}\n          </Th>\n          <Th>{columns[3]}</Th>\n          <Th>{columns[4]}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {rows.map((row, rowIndex) => {\n          return (\n            <Tr\n              key={rowIndex}\n              onRowClick={event => onRowClick(event, rowIndex, row.cells)}\n              isHoverable\n              isRowSelected={row.isRowSelected}\n            >\n              {row.cells.map((cell, cellIndex) => {\n                return (\n                  <Td\n                    key={`${rowIndex}_${cellIndex}`}\n                    dataLabel={columns[cellIndex]}\n                  >\n                    {cell}\n                  </Td>\n                );\n              })}\n            </Tr>\n          );\n        })}\n      </Tbody>\n    </TableComposable>\n  );\n};","title":"Composable: Row click handler, hoverable & selected rows","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';\n\nComposableTableHoverable = () => {\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];\n  const [rows, setRows] = React.useState([\n    { cells: ['one', 'two', 'a', 'four', 'five'], isRowSelected: false },\n    { cells: ['a', 'two', 'k', 'four', 'five'], isRowSelected: false },\n    { cells: ['p', 'two', 'b', 'four', 'five'], isRowSelected: false }\n  ]);\n  const onRowClick = (event, rowIndex, row) => {\n    const updatedRows = [...rows];\n    updatedRows[rowIndex].isRowSelected = !rows[rowIndex].isRowSelected;\n    setRows(updatedRows);\n  };\n\n  return (\n    <TableComposable aria-label=\"Misc table\">\n      <Thead noWrap>\n        <Tr>\n          <Th>{columns[0]}</Th>\n          <Th>{columns[1]}</Th>\n          <Th>{columns[2]}</Th>\n          <Th>{columns[3]}</Th>\n          <Th>{columns[4]}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {rows.map((row, rowIndex) => {\n          return (\n            <Tr\n              key={rowIndex}\n              onRowClick={event => onRowClick(event, rowIndex, row.cells)}\n              isHoverable\n              isRowSelected={row.isRowSelected}\n            >\n              {row.cells.map((cell, cellIndex) => {\n                return (\n                  <Td key={`${rowIndex}_${cellIndex}`} dataLabel={columns[cellIndex]}>\n                    {cell}\n                  </Td>\n                );\n              })}\n            </Tr>\n          );\n        })}\n      </Tbody>\n    </TableComposable>\n  );\n};","title":"Composable: Row click handler, hoverable & selected rows","lang":"js"}}>
       
       <p {...{"className":"ws-p"}}>
         {`This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.`}
@@ -1835,6 +1865,7 @@ const Component = () => (
     {React.createElement(pageData.examples["Composable: Basic"])}
     {React.createElement(pageData.examples["Composable: Custom row wrapper, header tooltips & popovers"])}
     {React.createElement(pageData.examples["Composable: Sortable & wrapping headers"])}
+    {React.createElement(pageData.examples["Composable: Sortable - custom control"])}
     {React.createElement(pageData.examples["Composable: Selectable with checkbox"])}
     {React.createElement(pageData.examples["Composable: Selectable radio input"])}
     {React.createElement(pageData.examples["Composable: Row click handler, hoverable & selected rows"])}