@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
|
@@ -7,7 +7,7 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
|
|
|
7
7
|
import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';
|
|
8
8
|
import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
|
|
9
9
|
import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
|
|
10
|
-
import
|
|
10
|
+
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
|
|
11
11
|
import { css } from '@patternfly/react-styles';
|
|
12
12
|
import styles from '@patternfly/react-styles/css/components/Table/table';
|
|
13
13
|
import DemoSortableTable from '../../../../../react-table/src/components/Table/examples/./DemoSortableTable';
|
|
@@ -269,6 +269,7 @@ const pageData = {
|
|
|
269
269
|
"Basic",
|
|
270
270
|
"Custom row wrapper",
|
|
271
271
|
"Sortable & wrapping column headers",
|
|
272
|
+
"Sortable - custom control",
|
|
272
273
|
"Selectable with checkbox",
|
|
273
274
|
"Selectable radio input",
|
|
274
275
|
"Hoverable rows, selectable rows, and header cell tooltips/popovers",
|
|
@@ -292,9 +293,7 @@ pageData.liveContext = {
|
|
|
292
293
|
LeafIcon,
|
|
293
294
|
FolderIcon,
|
|
294
295
|
FolderOpenIcon,
|
|
295
|
-
|
|
296
|
-
ToggleGroup,
|
|
297
|
-
ToggleGroupItem,
|
|
296
|
+
SortAmountDownIcon,
|
|
298
297
|
css,
|
|
299
298
|
styles,
|
|
300
299
|
DemoSortableTable
|
|
@@ -305,7 +304,7 @@ pageData.examples = {
|
|
|
305
304
|
|
|
306
305
|
</Example>,
|
|
307
306
|
'Custom row wrapper': props =>
|
|
308
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\nimport { css } from '@patternfly/react-styles';\n\nclass RowWrapperTable extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n columns: [{ title: 'Repositories' }, 'Branches', { title: 'Pull requests' }, 'Workspaces'],\n rows: [\n {\n cells: ['Repositories one', 'Branches one', 'Pull requests one', 'Workspaces one']\n },\n {\n cells: ['Repositories two', 'Branches two', 'Pull requests two', 'Workspaces two']\n },\n {\n cells: ['Repositories three', 'Branches three', 'Pull requests three', 'Workspaces three']\n }\n ]\n };\n this.customRowWrapper = ({ trRef, className, rowProps, row, ...props }) => {\n const isOddRow = (rowProps.rowIndex + 1) % 2;\n const customStyle = {\n borderLeft: '3px solid var(--pf-global--primary-color--100)'\n };\n return (\n <tr\n {...props}\n ref={trRef}\n className={css(
|
|
307
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\nimport { css } from '@patternfly/react-styles';\n\nclass RowWrapperTable extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n columns: [{ title: 'Repositories' }, 'Branches', { title: 'Pull requests' }, 'Workspaces'],\n rows: [\n {\n cells: ['Repositories one', 'Branches one', 'Pull requests one', 'Workspaces one']\n },\n {\n cells: ['Repositories two', 'Branches two', 'Pull requests two', 'Workspaces two']\n },\n {\n cells: ['Repositories three', 'Branches three', 'Pull requests three', 'Workspaces three']\n }\n ]\n };\n this.customRowWrapper = ({ trRef, className, rowProps, row, ...props }) => {\n const isOddRow = (rowProps.rowIndex + 1) % 2;\n const customStyle = {\n borderLeft: '3px solid var(--pf-global--primary-color--100)'\n };\n return (\n <tr\n {...props}\n ref={trRef}\n className={css(className, isOddRow ? 'odd-row-class' : 'even-row-class', 'custom-static-class')}\n style={isOddRow ? customStyle : {}}\n />\n );\n };\n }\n\n render() {\n const { columns, rows } = this.state;\n\n return (\n <Table\n caption=\"Table with custom row wrapper that styles odd rows\"\n cells={columns}\n rows={rows}\n rowWrapper={this.customRowWrapper}\n >\n <TableHeader />\n <TableBody />\n </Table>\n );\n }\n}","title":"Custom row wrapper","lang":"js"}}>
|
|
309
308
|
|
|
310
309
|
<p {...{"className":"ws-p"}}>
|
|
311
310
|
{`Custom row wrappers are passed to the `}
|
|
@@ -376,7 +375,7 @@ Each `}
|
|
|
376
375
|
`}
|
|
377
376
|
|
|
378
377
|
<code {...{"className":"ws-code"}}>
|
|
379
|
-
{
|
|
378
|
+
{`\`sortBy\` - Specifies the initial sorting pattern for the table - asc/desc and the index of the column to sort by`}
|
|
380
379
|
</code>
|
|
381
380
|
</li>
|
|
382
381
|
|
|
@@ -397,7 +396,7 @@ Each `}
|
|
|
397
396
|
`}
|
|
398
397
|
|
|
399
398
|
<code {...{"className":"ws-code"}}>
|
|
400
|
-
{
|
|
399
|
+
{`\`onSort\` - (event: React.MouseEvent, columnIndex: number, sortByDirection: SortByDirection, extraData: IExtraColumnData) => void;`}
|
|
401
400
|
</code>
|
|
402
401
|
</li>
|
|
403
402
|
|
|
@@ -422,9 +421,20 @@ Each `}
|
|
|
422
421
|
</code>
|
|
423
422
|
{` transform.`}
|
|
424
423
|
</p>
|
|
424
|
+
|
|
425
|
+
<p {...{"className":"ws-p"}}>
|
|
426
|
+
{`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. The example below showcases how sorting may have a custom control display that can be used for small screen sizes.`}
|
|
427
|
+
</p>
|
|
428
|
+
</Example>,
|
|
429
|
+
'Sortable - custom control': props =>
|
|
430
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Table, TableHeader, TableBody, sortable, SortByDirection, info } 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\nclass SortableTable extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n columns: [\n { title: 'Repositories', transforms: [sortable] },\n {\n title: 'Branches',\n transforms: [\n info({\n tooltip: 'More information about branches'\n }),\n sortable\n ]\n },\n { title: 'Pull requests', transforms: [sortable] },\n {\n title: 'Workspaces',\n transforms: [sortable]\n },\n {\n title: 'Last commit',\n transforms: [\n info({\n tooltip: 'More information about commits'\n }),\n sortable\n ]\n }\n ],\n rows: [\n ['one', 'two', 'a', 'four', 'five'],\n ['a', 'five', 'k', 'two', 'three'],\n ['p', 'seven', 'b', 'one', 'six']\n ],\n sortBy: {},\n isSortDropdownOpen: false\n };\n\n this.onSort = this.onSort.bind(this);\n this.onToggle = this.onToggle.bind(this);\n }\n\n onSort(_event, index, direction) {\n const sortedRows = this.state.rows.sort((a, b) => (a[index] < b[index] ? -1 : a[index] > b[index] ? 1 : 0));\n this.setState({\n sortBy: {\n index,\n direction\n },\n rows: direction === SortByDirection.asc ? sortedRows : sortedRows.reverse()\n });\n }\n\n onToggle(isSortDropdownOpen) {\n this.setState({\n isSortDropdownOpen\n });\n }\n\n render() {\n const { columns, rows, sortBy, isSortDropdownOpen } = this.state;\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.title}\n isSelected={sortBy.index === columnIndex}\n onSelect={evt => this.onSort(evt, columnIndex, sortBy.direction ? sortBy.direction : 'asc')}\n >\n {column.title}\n </OptionsMenuItem>\n ))}\n </OptionsMenuItemGroup>,\n <OptionsMenuSeparator key=\"separator\" />,\n <OptionsMenuItemGroup key=\"second group\" aria-label=\"Sort direction\">\n <OptionsMenuItem\n onSelect={evt => this.onSort(evt, sortBy.index ? sortBy.index : 0, 'asc')}\n isSelected={sortBy.direction === 'asc'}\n id=\"ascending\"\n key=\"ascending\"\n >\n Ascending\n </OptionsMenuItem>\n <OptionsMenuItem\n onSelect={evt => this.onSort(evt, sortBy.index ? sortBy.index : 0, 'desc')}\n isSelected={sortBy.direction === '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={() => this.onToggle(!isSortDropdownOpen)}\n toggleTemplate={<SortAmountDownIcon />}\n />\n }\n isPlain\n isGrouped\n />\n </ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n <Table aria-label=\"Sortable Table\" sortBy={sortBy} onSort={this.onSort} cells={columns} rows={rows}>\n <TableHeader />\n <TableBody />\n </Table>\n </React.Fragment>\n );\n }\n}","title":"Sortable - custom control","lang":"js"}}>
|
|
431
|
+
|
|
432
|
+
<p {...{"className":"ws-p"}}>
|
|
433
|
+
{`Sorting a table may also be controlled with a toolbar. This toolbar item may also be hidden at large screen sizes and only displayed when the screen size is small to support responsive tables.`}
|
|
434
|
+
</p>
|
|
425
435
|
</Example>,
|
|
426
436
|
'Selectable with checkbox': props =>
|
|
427
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {
|
|
437
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Table, TableHeader, TableBody, headerCol } from '@patternfly/react-table';\nimport { Checkbox } from '@patternfly/react-core';\n\nclass SelectableTable extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n columns: [\n { title: 'Repositories', cellTransforms: [headerCol()] },\n 'Branches',\n { title: 'Pull requests' },\n 'Workspaces',\n 'Last commit'\n ],\n rows: [\n {\n cells: ['one', 'two', 'a', 'four', 'five']\n },\n {\n cells: ['a', 'two', 'k', 'four', 'five'],\n disableSelection: true\n },\n {\n cells: ['p', 'two', 'b', 'four', 'five']\n }\n ],\n canSelectAll: true\n };\n this.onSelect = this.onSelect.bind(this);\n this.toggleSelect = this.toggleSelect.bind(this);\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 render() {\n const { columns, rows, canSelectAll } = this.state;\n\n return (\n <div>\n <Checkbox\n label=\"Can select all\"\n className=\"pf-u-mb-lg\"\n isChecked={canSelectAll}\n onChange={this.toggleSelect}\n aria-label=\"toggle select all checkbox\"\n id=\"toggle-select-all\"\n name=\"toggle-select-all\"\n />\n <Table\n onSelect={this.onSelect}\n canSelectAll={canSelectAll}\n aria-label=\"Selectable Table\"\n cells={columns}\n rows={rows}\n >\n <TableHeader />\n <TableBody />\n </Table>\n </div>\n );\n }\n}","title":"Selectable with checkbox","lang":"js"}}>
|
|
428
438
|
|
|
429
439
|
<p {...{"className":"ws-p"}}>
|
|
430
440
|
{`To enable row selection, set the `}
|
|
@@ -499,7 +509,7 @@ of using `}
|
|
|
499
509
|
</p>
|
|
500
510
|
</Example>,
|
|
501
511
|
'Selectable radio input': props =>
|
|
502
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {
|
|
512
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Table, TableHeader, TableBody, RowSelectVariant, headerCol } from '@patternfly/react-table';\n\nclass SelectableTable extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n columns: [\n { title: 'Repositories', cellTransforms: [headerCol()] },\n 'Branches',\n { title: 'Pull requests' },\n 'Workspaces',\n 'Last commit'\n ],\n rows: [\n {\n cells: ['one', 'two', 'a', 'four', 'five']\n },\n {\n cells: ['a', 'two', 'k', 'four', 'five'],\n disableSelection: true\n },\n {\n cells: ['p', 'two', 'b', 'four', 'five']\n }\n ]\n };\n this.onSelect = this.onSelect.bind(this);\n }\n\n onSelect(event, isSelected, rowId) {\n let rows = this.state.rows.map((oneRow, index) => {\n oneRow.selected = rowId === index;\n return oneRow;\n });\n this.setState({\n rows\n });\n }\n\n render() {\n const { columns, rows } = this.state;\n\n return (\n <Table\n onSelect={this.onSelect}\n selectVariant={RowSelectVariant.radio}\n aria-label=\"Selectable Table\"\n cells={columns}\n rows={rows}\n >\n <TableHeader />\n <TableBody />\n </Table>\n );\n }\n}","title":"Selectable radio input","lang":"js"}}>
|
|
503
513
|
|
|
504
514
|
<p {...{"className":"ws-p"}}>
|
|
505
515
|
{`To enable row radio selection, set the `}
|
|
@@ -531,7 +541,7 @@ of using `}
|
|
|
531
541
|
</p>
|
|
532
542
|
</Example>,
|
|
533
543
|
'Hoverable rows, selectable rows, and header cell tooltips/popovers': props =>
|
|
534
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Table, TableHeader, TableBody, textCenter } from '@patternfly/react-table';\nimport styles from '@patternfly/react-styles/css/components/Table/table';\n\nclass RowClickTable extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n columns: [\n {\n title: 'Repositories',\n transforms: [\n info({\n tooltip: 'More information about repositories',\n className: 'repositories-info-tip',\n tooltipProps: {\n isContentLeftAligned: true\n }\n })\n ]\n },\n 'Branches',\n {\n title: 'Pull requests',\n transforms: [\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 },\n 'Workspaces',\n {\n title: 'Last commit',\n transforms: [textCenter],\n cellTransforms: [textCenter]\n }\n ],\n rows: [\n {\n cells: ['Repository one', 'Branch one', 'PR one', 'Workspace one', 'Commit one'],\n isHoverable: true,\n isRowSelected: false\n },\n {\n cells: [\n {\n title: <div>one - 2</div>,\n props: { title: 'hover title', colSpan: 3 }\n },\n 'four - 2',\n 'five - 2'\n ],\n isHoverable: true,\n isRowSelected: false\n },\n {\n cells: [\n 'one - 3',\n 'two - 3',\n 'three - 3',\n 'four - 3',\n {\n title: 'five - 3 (not centered)',\n props: { textCenter: false }\n }\n ],\n isHoverable: true,\n isRowSelected: false\n }\n ]\n };\n
|
|
544
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Table, TableHeader, TableBody, textCenter } from '@patternfly/react-table';\nimport styles from '@patternfly/react-styles/css/components/Table/table';\n\nclass RowClickTable extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n columns: [\n {\n title: 'Repositories',\n transforms: [\n info({\n tooltip: 'More information about repositories',\n className: 'repositories-info-tip',\n tooltipProps: {\n isContentLeftAligned: true\n }\n })\n ]\n },\n 'Branches',\n {\n title: 'Pull requests',\n transforms: [\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 },\n 'Workspaces',\n {\n title: 'Last commit',\n transforms: [textCenter],\n cellTransforms: [textCenter]\n }\n ],\n rows: [\n {\n cells: ['Repository one', 'Branch one', 'PR one', 'Workspace one', 'Commit one'],\n isHoverable: true,\n isRowSelected: false\n },\n {\n cells: [\n {\n title: <div>one - 2</div>,\n props: { title: 'hover title', colSpan: 3 }\n },\n 'four - 2',\n 'five - 2'\n ],\n isHoverable: true,\n isRowSelected: false\n },\n {\n cells: [\n 'one - 3',\n 'two - 3',\n 'three - 3',\n 'four - 3',\n {\n title: 'five - 3 (not centered)',\n props: { textCenter: false }\n }\n ],\n isHoverable: true,\n isRowSelected: false\n }\n ]\n };\n\n this.rowClickHandler = (event, row, rowProps) => {\n this.setState(prevState => {\n const updatedRows = [...prevState.rows];\n updatedRows[rowProps.rowIndex].isRowSelected = !prevState.rows[rowProps.rowIndex].isRowSelected;\n return {\n rows: updatedRows\n };\n });\n };\n }\n\n render() {\n const { columns, rows } = this.state;\n\n return (\n <Table caption=\"Row click handler table\" cells={columns} rows={rows}>\n <TableHeader className={styles.modifiers.nowrap} />\n <TableBody onRowClick={this.rowClickHandler} />\n </Table>\n );\n }\n}","title":"Hoverable rows, selectable rows, and header cell tooltips/popovers","lang":"js"}}>
|
|
535
545
|
|
|
536
546
|
<p {...{"className":"ws-p"}}>
|
|
537
547
|
{`This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.`}
|
|
@@ -713,11 +723,11 @@ The parent row can have an `}
|
|
|
713
723
|
|
|
714
724
|
</Example>,
|
|
715
725
|
'Modifiers with table text': props =>
|
|
716
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {
|
|
726
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Table, TableHeader, TableBody, TableText, cellWidth } from '@patternfly/react-table';\n\nclass ModifiersWithTableText extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n columns: [\n { title: 'Truncating text', transforms: [cellWidth(30)] },\n { title: 'Wrapping table header text. This th text will wrap instead of truncate.' }\n ],\n rows: [\n [\n { title: <TableText wrapModifier=\"truncate\">This text will truncate instead of wrap.</TableText> },\n {\n title: (\n <TableText wrapModifier=\"nowrap\">\n <a href=\"#\">This is a link that needs to be on one line and fully readable.</a>\n </TableText>\n )\n }\n ]\n ]\n };\n }\n\n render() {\n const { columns, rows } = this.state;\n\n return (\n <Table aria-label=\"Controlling text\" cells={columns} rows={rows}>\n <TableHeader />\n <TableBody />\n </Table>\n );\n }\n}","title":"Modifiers with table text","lang":"js"}}>
|
|
717
727
|
|
|
718
728
|
</Example>,
|
|
719
729
|
'Empty state': props =>
|
|
720
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\nimport {
|
|
730
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Table, TableHeader, TableBody } from '@patternfly/react-table';\nimport { Button, EmptyState, EmptyStateBody, Bullseye, Title, EmptyStateIcon } from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\n\nEmptyStateTable = () => {\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];\n const rows = [\n {\n heightAuto: true,\n cells: [\n {\n props: { colSpan: 8 },\n title: (\n <Bullseye>\n <EmptyState variant={EmptyStateVariant.small}>\n <EmptyStateIcon icon={SearchIcon} />\n <Title headingLevel=\"h2\" size=\"lg\">\n No results found\n </Title>\n <EmptyStateBody>Clear all filters and try again.</EmptyStateBody>\n <Button variant=\"link\">Clear all filters</Button>\n </EmptyState>\n </Bullseye>\n )\n }\n ]\n }\n ];\n return (\n <React.Fragment>\n <Table caption=\"Empty State Table Example\" cells={columns} rows={rows}>\n <TableHeader />\n <TableBody />\n </Table>\n </React.Fragment>\n );\n};","title":"Empty state","lang":"js"}}>
|
|
721
731
|
|
|
722
732
|
</Example>,
|
|
723
733
|
'Editable rows': props =>
|
|
@@ -801,7 +811,7 @@ defined as being of type `}
|
|
|
801
811
|
</Example>
|
|
802
812
|
</Example>,
|
|
803
813
|
'Favoritable': props =>
|
|
804
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {
|
|
814
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Table, TableHeader, TableBody, sortable, SortByDirection } from '@patternfly/react-table';\nimport { Checkbox } from '@patternfly/react-core';\n\nclass FavoritesTable extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n columns: [\n { title: 'Repositories', transforms: [sortable] },\n 'Branches',\n 'Pull requests',\n 'Workspaces',\n 'Last commit'\n ],\n rows: [\n {\n favorited: true,\n // The favorites button has defaults that can be overriden\n favoritesProps: {\n 'aria-label': 'Favorited', // Defaults to 'Starred' / 'Not starred'\n id: 'favorites-button-a', // Defaults to `favorites-button-${rowIndex}`\n 'aria-labelledby': 'favorites-button-a repository-1' // Defaults to `favorites-button-${rowIndex}`\n },\n cells: ['c', 'two', 'a', 'four', 'five']\n },\n {\n cells: ['a', 'two', 'k', 'four', 'five'],\n disableSelection: true\n },\n {\n favorited: true,\n cells: ['b', 'two', 'b', 'four', 'five']\n }\n ],\n sortBy: {},\n canSortFavorites: true\n };\n this.onSelect = this.onSelect.bind(this);\n this.onFavorite = this.onFavorite.bind(this);\n this.onSort = this.onSort.bind(this);\n this.toggleFavsSort = this.toggleFavsSort.bind(this);\n }\n\n onSelect(event, isSelected, rowId) {\n let rows;\n if (rowId === -1) {\n // header row\n rows = this.state.rows.map(oneRow => {\n oneRow.selected = isSelected;\n return oneRow;\n });\n } else {\n // body row\n rows = [...this.state.rows];\n rows[rowId].selected = isSelected;\n }\n this.setState({\n rows\n });\n }\n\n onFavorite(event, isFavorited, rowId) {\n this.setState({\n rows: this.state.rows.map((row, index) => {\n if (index === rowId) {\n row.favorited = isFavorited;\n row.favoritesProps = {\n ...row.favoritesProps,\n // Example of how to override the default aria-label of Starred / Not starred\n 'aria-label': isFavorited ? 'Favorited' : 'Not favorited'\n };\n }\n return row;\n })\n });\n }\n\n onSort(_event, index, direction) {\n // index 0 === select column\n // index 1 === favorites column\n // index 2 === first user defined column\n let sortedRows;\n if (index === 1) {\n // favorites column\n sortedRows = this.state.rows.sort((a, b) => {\n if (a.favorited && !b.favorited) {\n return -1;\n } else if (!a.favorited && b.favorited) {\n return 1;\n }\n return 0;\n });\n } else {\n const userIndex = index - 2; // subtract for select and favorites column\n sortedRows = this.state.rows.sort((a, b) =>\n a.cells[userIndex] < b.cells[userIndex] ? -1 : a.cells[userIndex] > b.cells[userIndex] ? 1 : 0\n );\n }\n this.setState({\n sortBy: {\n index,\n direction\n },\n rows: direction === SortByDirection.asc ? sortedRows : sortedRows.reverse()\n });\n }\n\n toggleFavsSort(checked) {\n this.setState({\n canSortFavorites: checked\n });\n }\n\n render() {\n const { columns, rows, sortBy, canSortFavorites } = this.state;\n\n return (\n <div>\n <Checkbox\n label=\"Can sort favorites\"\n isChecked={canSortFavorites}\n onChange={this.toggleFavsSort}\n aria-label=\"toggle select all checkbox\"\n id=\"toggle-select-all\"\n name=\"toggle-select-all\"\n />\n <Table\n // using this prop enables the favorites column\n onFavorite={this.onFavorite}\n // if the onSort prop is detected, favorites can be sorted\n // if you want to exclude favorites from sorting you can use this prop with a value of `false`\n canSortFavorites={canSortFavorites}\n onSelect={this.onSelect}\n onSort={this.onSort}\n sortBy={sortBy}\n aria-label=\"Favoritable Table\"\n cells={columns}\n rows={rows}\n >\n <TableHeader />\n <TableBody />\n </Table>\n </div>\n );\n }\n}","title":"Favoritable","lang":"js"}}>
|
|
805
815
|
|
|
806
816
|
<p {...{"className":"ws-p"}}>
|
|
807
817
|
{`To enable favoriting of a row, set the `}
|
|
@@ -1172,6 +1182,7 @@ column headers or `}
|
|
|
1172
1182
|
{React.createElement(pageData.examples["Basic"])}
|
|
1173
1183
|
{React.createElement(pageData.examples["Custom row wrapper"])}
|
|
1174
1184
|
{React.createElement(pageData.examples["Sortable & wrapping column headers"])}
|
|
1185
|
+
{React.createElement(pageData.examples["Sortable - custom control"])}
|
|
1175
1186
|
{React.createElement(pageData.examples["Selectable with checkbox"])}
|
|
1176
1187
|
{React.createElement(pageData.examples["Selectable radio input"])}
|
|
1177
1188
|
{React.createElement(pageData.examples["Hoverable rows, selectable rows, and header cell tooltips/popovers"])}
|
package/src/generated/index.js
CHANGED
|
@@ -271,8 +271,8 @@ module.exports = {
|
|
|
271
271
|
'/components/dual-list-selector/react': {
|
|
272
272
|
id: "Dual list selector",
|
|
273
273
|
title: "Dual list selector",
|
|
274
|
-
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Basic with tooltips"},{"text":"Basic with search"},{"text":"Using more complex options with actions"},{"text":"Expandable options
|
|
275
|
-
examples: ["Basic","Basic with tooltips","Basic with search","Using more complex options with actions","Expandable options
|
|
274
|
+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Basic with tooltips"},{"text":"Basic with search"},{"text":"Using more complex options with actions"},{"text":"Expandable options"},{"text":"Composable dual list selector"},{"text":"Reordering lists using drag and drop"}]],
|
|
275
|
+
examples: ["Basic","Basic with tooltips","Basic with search","Using more complex options with actions","Expandable options","Composable dual list selector","Reordering lists using drag and drop"],
|
|
276
276
|
section: "components",
|
|
277
277
|
source: "react",
|
|
278
278
|
Component: () => import(/* webpackChunkName: "components/dual-list-selector/react/index" */ './components/dual-list-selector/react')
|
|
@@ -965,8 +965,8 @@ module.exports = {
|
|
|
965
965
|
'/components/table/react-composable': {
|
|
966
966
|
id: "Table",
|
|
967
967
|
title: "Table",
|
|
968
|
-
toc: [{"text":"TableComposable examples"},[{"text":"Composable: Basic"},{"text":"Composable: Custom row wrapper, header tooltips & popovers"},{"text":"Composable: Sortable & wrapping headers"},{"text":"Composable: Selectable with checkbox"},{"text":"Composable: Selectable radio input"},{"text":"Composable: Row click handler, hoverable & selected rows"},{"text":"Composable: Actions"},{"text":"Composable: Expandable"},{"text":"Composable: Compound expandable"},{"text":"Composable: Cell width, breakpoint modifiers"},{"text":"Composable: Controlling text"},{"text":"Composable: Modifiers with table text"},{"text":"Composable: Favoritable (implemented with sortable)"},{"text":"Composable: Tree table"},{"text":"Composable: Draggable row table"}]],
|
|
969
|
-
examples: ["Composable: Basic","Composable: Custom row wrapper, header tooltips & popovers","Composable: Sortable & wrapping headers","Composable: Selectable with checkbox","Composable: Selectable radio input","Composable: Row click handler, hoverable & selected rows","Composable: Actions","Composable: Expandable","Composable: Compound expandable","Composable: Cell width, breakpoint modifiers","Composable: Controlling text","Composable: Modifiers with table text","Composable: Favoritable (implemented with sortable)","Composable: Tree table","Composable: Draggable row table"],
|
|
968
|
+
toc: [{"text":"TableComposable examples"},[{"text":"Composable: Basic"},{"text":"Composable: Custom row wrapper, header tooltips & popovers"},{"text":"Composable: Sortable & wrapping headers"},{"text":"Composable: Sortable - custom control"},{"text":"Composable: Selectable with checkbox"},{"text":"Composable: Selectable radio input"},{"text":"Composable: Row click handler, hoverable & selected rows"},{"text":"Composable: Actions"},{"text":"Composable: Expandable"},{"text":"Composable: Compound expandable"},{"text":"Composable: Cell width, breakpoint modifiers"},{"text":"Composable: Controlling text"},{"text":"Composable: Modifiers with table text"},{"text":"Composable: Favoritable (implemented with sortable)"},{"text":"Composable: Tree table"},{"text":"Composable: Draggable row table"}]],
|
|
969
|
+
examples: ["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","Composable: Actions","Composable: Expandable","Composable: Compound expandable","Composable: Cell width, breakpoint modifiers","Composable: Controlling text","Composable: Modifiers with table text","Composable: Favoritable (implemented with sortable)","Composable: Tree table","Composable: Draggable row table"],
|
|
970
970
|
section: "components",
|
|
971
971
|
source: "react-composable",
|
|
972
972
|
Component: () => import(/* webpackChunkName: "components/table/react-composable/index" */ './components/table/react-composable')
|
|
@@ -974,9 +974,9 @@ module.exports = {
|
|
|
974
974
|
'/components/table/react-demos': {
|
|
975
975
|
id: "Table",
|
|
976
976
|
title: "Table",
|
|
977
|
-
toc: [[{"text":"Bulk select"},{"text":"Expand/collapse all"},{"text":"Column management"},{"text":"Column management with draggable"},{"text":"Filterable"},{"text":"Automatic pagination"},{"text":"Pagination"},{"text":"Sticky header"}],{"text":"Empty states"},[{"text":"Empty"},{"text":"Loading"},{"text":"Error"}]],
|
|
977
|
+
toc: [[{"text":"Bulk select"},{"text":"Expand/collapse all"},{"text":"Column management"},{"text":"Column management with draggable"},{"text":"Filterable"},{"text":"Sortable - responsive"},{"text":"Automatic pagination"},{"text":"Pagination"},{"text":"Sticky header"}],{"text":"Empty states"},[{"text":"Empty"},{"text":"Loading"},{"text":"Error"}]],
|
|
978
978
|
examples: ["Bulk select","Expand/collapse all","Column management","Column management with draggable","Filterable","Automatic pagination","Pagination","Empty","Loading","Error"],
|
|
979
|
-
fullscreenExamples: ["Sticky header"],
|
|
979
|
+
fullscreenExamples: ["Sortable - responsive","Sticky header"],
|
|
980
980
|
section: "components",
|
|
981
981
|
source: "react-demos",
|
|
982
982
|
Component: () => import(/* webpackChunkName: "components/table/react-demos/index" */ './components/table/react-demos')
|
|
@@ -984,8 +984,8 @@ module.exports = {
|
|
|
984
984
|
'/components/table/react-legacy': {
|
|
985
985
|
id: "Table",
|
|
986
986
|
title: "Table",
|
|
987
|
-
toc: [[{"text":"Table Columns"},{"text":"Table Rows"}],{"text":"Table examples"},[{"text":"Basic"},{"text":"Custom row wrapper"},{"text":"Sortable & wrapping column headers"},{"text":"Selectable with checkbox"},{"text":"Selectable radio input"},{"text":"Hoverable rows, selectable rows, and header cell tooltips/popovers"},{"text":"Actions and first cell in body rows as th"},{"text":"Expandable"},{"text":"Compound expandable"},{"text":"With width and breakpoint visibility modifiers"},{"text":"Controlling text"},{"text":"Modifiers with table text"},{"text":"Empty state"},{"text":"Editable rows"},{"text":"Favoritable"},{"text":"Tree table"}]],
|
|
988
|
-
examples: ["Basic","Custom row wrapper","Sortable & wrapping column headers","Selectable with checkbox","Selectable radio input","Hoverable rows, selectable rows, and header cell tooltips/popovers","Actions and first cell in body rows as th","Expandable","Compound expandable","With width and breakpoint visibility modifiers","Controlling text","Modifiers with table text","Empty state","Editable rows","Favoritable","Tree table"],
|
|
987
|
+
toc: [[{"text":"Table Columns"},{"text":"Table Rows"}],{"text":"Table examples"},[{"text":"Basic"},{"text":"Custom row wrapper"},{"text":"Sortable & wrapping column headers"},{"text":"Sortable - custom control"},{"text":"Selectable with checkbox"},{"text":"Selectable radio input"},{"text":"Hoverable rows, selectable rows, and header cell tooltips/popovers"},{"text":"Actions and first cell in body rows as th"},{"text":"Expandable"},{"text":"Compound expandable"},{"text":"With width and breakpoint visibility modifiers"},{"text":"Controlling text"},{"text":"Modifiers with table text"},{"text":"Empty state"},{"text":"Editable rows"},{"text":"Favoritable"},{"text":"Tree table"}]],
|
|
988
|
+
examples: ["Basic","Custom row wrapper","Sortable & wrapping column headers","Sortable - custom control","Selectable with checkbox","Selectable radio input","Hoverable rows, selectable rows, and header cell tooltips/popovers","Actions and first cell in body rows as th","Expandable","Compound expandable","With width and breakpoint visibility modifiers","Controlling text","Modifiers with table text","Empty state","Editable rows","Favoritable","Tree table"],
|
|
989
989
|
section: "components",
|
|
990
990
|
source: "react-legacy",
|
|
991
991
|
Component: () => import(/* webpackChunkName: "components/table/react-legacy/index" */ './components/table/react-legacy')
|