From 1d6818e63d632460f86da033087904a61c392598 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 3 Feb 2021 15:56:39 -0500 Subject: [PATCH 1/6] feat(Table): Add Tree Table variant --- .../src/components/Table/RowWrapper.tsx | 5 +- .../src/components/Table/Table.tsx | 12 +- .../src/components/Table/TableTypes.ts | 14 + .../src/components/Table/TreeRowWrapper.tsx | 25 ++ .../src/components/Table/examples/Table.md | 289 ++++++++++++++++++ .../react-table/src/components/Table/index.ts | 1 + .../Table/utils/decorators/index.ts | 1 + .../Table/utils/decorators/treeRow.tsx | 56 ++++ .../TableComposable/TableComposable.tsx | 7 +- .../src/components/TableComposable/Td.tsx | 42 ++- .../src/components/TableComposable/Tr.tsx | 6 +- 11 files changed, 447 insertions(+), 11 deletions(-) create mode 100644 packages/react-table/src/components/Table/TreeRowWrapper.tsx create mode 100644 packages/react-table/src/components/Table/utils/decorators/treeRow.tsx diff --git a/packages/react-table/src/components/Table/RowWrapper.tsx b/packages/react-table/src/components/Table/RowWrapper.tsx index b24d4f1c7bc..7af8eb6bd45 100644 --- a/packages/react-table/src/components/Table/RowWrapper.tsx +++ b/packages/react-table/src/components/Table/RowWrapper.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { OUIAProps } from '@patternfly/react-core/dist/js/helpers/OUIA/ouia'; import { debounce } from '@patternfly/react-core/dist/js/helpers/util'; import { Tr } from '../TableComposable/Tr'; +import { IRow } from './TableTypes'; // legacy export now, RowWrapperRow can simply be typed as IRow in the future export interface RowWrapperRow { @@ -15,7 +16,7 @@ export interface RowWrapperProps extends OUIAProps { className?: string; onScroll?: React.UIEventHandler; onResize?: React.UIEventHandler; - row?: RowWrapperRow; + row?: IRow; rowProps?: { rowIndex: number; rowKey: string; @@ -31,7 +32,7 @@ export class RowWrapper extends React.Component { isExpanded: undefined as boolean, isHeightAuto: undefined as boolean, isEditable: undefined as boolean - } as RowWrapperRow, + } as IRow, rowProps: null as any }; _unmounted: boolean; diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index 8f02c68dd27..bdeddb31200 100644 --- a/packages/react-table/src/components/Table/Table.tsx +++ b/packages/react-table/src/components/Table/Table.tsx @@ -31,6 +31,7 @@ import { IHeaderRow, OnFavorite } from './TableTypes'; +import { TreeRowWrapper } from './TreeRowWrapper'; export interface TableProps extends OUIAProps { /** Adds an accessible name for the Table */ @@ -104,6 +105,8 @@ export interface TableProps extends OUIAProps { onFavorite?: OnFavorite; /** Along with the onSort prop, enables favorites sorting, defaults to true */ canSortFavorites?: boolean; + /** */ + isTreeTable?: boolean; } export class Table extends React.Component { @@ -128,7 +131,8 @@ export class Table extends React.Component { selectVariant: 'checkbox', ouiaSafe: true, isStickyHeader: false, - canSortFavorites: true + canSortFavorites: true, + isTreeTable: false }; state = { ouiaStateId: getDefaultOUIAId(Table.displayName) @@ -185,6 +189,7 @@ export class Table extends React.Component { borders, onFavorite, canSortFavorites, + isTreeTable, ...props } = this.props; @@ -232,7 +237,7 @@ export class Table extends React.Component { renderers={{ body: { wrapper: bodyWrapper || BodyWrapper, - row: rowWrapper || RowWrapper, + row: rowWrapper || (isTreeTable ? TreeRowWrapper : RowWrapper), cell: BodyCell }, header: { @@ -243,7 +248,8 @@ export class Table extends React.Component { role={role} variant={variant} borders={borders} - className={className} + className={css(isTreeTable && 'pf-m-tree-view', className)} + {...(isTreeTable && { role: 'treegrid' })} > {caption && {caption}} {children} diff --git a/packages/react-table/src/components/Table/TableTypes.ts b/packages/react-table/src/components/Table/TableTypes.ts index f09c6bcf731..815a430ba71 100644 --- a/packages/react-table/src/components/Table/TableTypes.ts +++ b/packages/react-table/src/components/Table/TableTypes.ts @@ -5,6 +5,7 @@ import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/js/components/Dropdown/dropdownConstants'; +import * as React from 'react'; export enum TableGridBreakpoint { none = '', @@ -67,6 +68,19 @@ export type OnFavorite = ( rowData: IRowData, extraData: IExtraData ) => void; +export type OnTreeRowCollapse = ( + event: any, + rowIndex: number, + title: string | React.ReactNode, + rowData: IRowData +) => void; +export type OnCheckChange = ( + event: React.FormEvent, + isChecked: boolean, + rowIndex: number, + title: string | React.ReactNode, + rowData: IRowData +) => void; // Todo: Update type with next breaking change release // export type IHeaderRow = ColumnType; diff --git a/packages/react-table/src/components/Table/TreeRowWrapper.tsx b/packages/react-table/src/components/Table/TreeRowWrapper.tsx new file mode 100644 index 00000000000..d80d3904adc --- /dev/null +++ b/packages/react-table/src/components/Table/TreeRowWrapper.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import { RowWrapperProps } from './RowWrapper'; +import { Tr } from '../TableComposable'; + +export const TreeRowWrapper: React.FunctionComponent = ({ + className, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + rowProps, + ...props +}: RowWrapperProps) => { + const { level, posinset, setsize, isExpanded, isHidden } = props.row.props; + return ( + + ); +}; +TreeRowWrapper.displayName = 'TreeRowWrapper'; diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index b91472516e5..c5694a5b8a5 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/packages/react-table/src/components/Table/examples/Table.md @@ -1994,6 +1994,144 @@ class FavoritesTable extends React.Component { } ``` +### Tree Table + +```js +import React from 'react'; +import { Table, TableHeader, TableBody, headerCol, treeRow } from '@patternfly/react-table'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Table/table'; + +class TreeTable extends React.Component { + constructor(props) { + super(props); + this.state = { + data: [ + { + repositories: 'Repositories one', + branches: 'Branch one', + pullRequests: 'Pull request one', + workspaces: 'Workplace one', + children: [ + { + repositories: 'Repositories two', + branches: 'Branch two', + pullRequests: 'Pull request two', + workspaces: 'Workplace two', + children: [ + { + repositories: 'Repositories three', + branches: 'Branch three', + pullRequests: 'Pull request three', + workspaces: 'Workplace three', + } + ] + }, + { + repositories: 'Repositories four', + branches: 'Branch four', + pullRequests: 'Pull request four', + workspaces: 'Workplace four', + }, + { + repositories: 'Repositories five', + branches: 'Branch five', + pullRequests: 'Pull request five', + workspaces: 'Workplace five', + } + ] + }, + { + repositories: 'Repositories six', + branches: 'Branch six', + pullRequests: 'Pull request six', + workspaces: 'Workplace six', + children: [ + { + repositories: 'Repositories seven', + branches: 'Branch seven', + pullRequests: 'Pull request seven', + workspaces: 'Workplace seven' + } + ] + }, + { + repositories: 'Repositories eight', + branches: 'Branch eight', + pullRequests: 'Pull request eight', + workspaces: 'Workplace eight' + } + ], + expandedRows: ['Repositories one', 'Repositories six'], + checkedRows: [] + }; + + this.buildRows = ([x, ...xs], level, posinset, isHidden = false) => { + if (x) { + const isExpanded = this.state.expandedRows.includes(x.repositories); + const isChecked = this.state.checkedRows.includes(x.repositories); + return [ + { + cells: [x.repositories, x.branches, x.pullRequests, x.workspaces], + props: { + isExpanded: isExpanded, + isHidden, + level: level, + posinset: posinset, + setsize: x.children ? x.children.length : 0, + isChecked: isChecked + } + }, + ...(x.children && x.children.length) ? this.buildRows(x.children, level + 1, 1, !isExpanded || isHidden) : [], + ...this.buildRows(xs, level, posinset + 1, isHidden) + ] + } + return []; + }; + + this.onCollapse = (event, rowIndex, title) => { + this.setState(prevState => { + const { expandedRows } = prevState; + const openedIndex = expandedRows.indexOf(title); + const newExpandedRows = openedIndex === -1 ? [...expandedRows, title] : expandedRows.filter(o => o !== title); + return { + expandedRows: newExpandedRows + } + }); + }; + + this.onCheckChange = (event, checked, rowIndex, title) => { + this.setState(prevState => { + const { checkedRows } = prevState; + const checkedIndex = checkedRows.indexOf(title); + const newCheckedRows = checkedIndex === -1 ? [...checkedRows, title] : checkedRows.filter(o => o !== title); + return { + checkedRows: newCheckedRows + } + }); + } + } + + render() { + return ( + + + +
+ ); + } +} +``` + ## TableComposable examples ### Composable: Basic @@ -3090,3 +3228,154 @@ ComposableTableFavoritable = () => { ); }; ``` + +### Composable: Tree Table +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td, Caption, TreeRowWrapper } from '@patternfly/react-table'; +import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; + +class TreeTable extends React.Component { + constructor(props) { + super(props); + this.state = { + data: [ + { + repositories: 'Repositories one', + branches: 'Branch one', + pullRequests: 'Pull request one', + workspaces: 'Workplace one', + children: [ + { + repositories: 'Repositories two', + branches: 'Branch two', + pullRequests: 'Pull request two', + workspaces: 'Workplace two', + children: [ + { + repositories: 'Repositories three', + branches: 'Branch three', + pullRequests: 'Pull request three', + workspaces: 'Workplace three', + } + ] + }, + { + repositories: 'Repositories four', + branches: 'Branch four', + pullRequests: 'Pull request four', + workspaces: 'Workplace four', + }, + { + repositories: 'Repositories five', + branches: 'Branch five', + pullRequests: 'Pull request five', + workspaces: 'Workplace five', + } + ] + }, + { + repositories: 'Repositories six', + branches: 'Branch six', + pullRequests: 'Pull request six', + workspaces: 'Workplace six', + children: [ + { + repositories: 'Repositories seven', + branches: 'Branch seven', + pullRequests: 'Pull request seven', + workspaces: 'Workplace seven' + } + ] + }, + { + repositories: 'Repositories eight', + branches: 'Branch eight', + pullRequests: 'Pull request eight', + workspaces: 'Workplace eight' + } + ], + expandedRows: ['Repositories one', 'Repositories six'], + checkedRows: [] + }; + + this.buildRows = ([x, ...xs], level, posinset, isHidden = false) => { + if (x) { + const isExpanded = this.state.expandedRows.includes(x.repositories); + const isChecked = this.state.checkedRows.includes(x.repositories); + return [ + { + cells: [x.repositories, x.branches, x.pullRequests, x.workspaces], + props: { + isExpanded: isExpanded, + isHidden, + level: level, + posinset: posinset, + setsize: x.children ? x.children.length : 0, + isChecked: isChecked + } + }, + ...(x.children && x.children.length) ? this.buildRows(x.children, level + 1, 1, !isExpanded || isHidden) : [], + ...this.buildRows(xs, level, posinset + 1, isHidden) + ] + } + return []; + }; + + this.onCollapse = (event, rowIndex, title) => { + this.setState(prevState => { + const { expandedRows } = prevState; + const openedIndex = expandedRows.indexOf(title); + const newExpandedRows = openedIndex === -1 ? [...expandedRows, title] : expandedRows.filter(o => o !== title); + return { + expandedRows: newExpandedRows + } + }); + }; + + this.onCheckChange = (event, checked, rowIndex, title) => { + this.setState(prevState => { + const { checkedRows } = prevState; + const checkedIndex = checkedRows.indexOf(title); + const newCheckedRows = checkedIndex === -1 ? [...checkedRows, title] : checkedRows.filter(o => o !== title); + return { + checkedRows: newCheckedRows + } + }); + } + } + + render() { + + const columns = ['Repositories', 'Branches', 'Pull Requests', 'Workspaces']; + return ( + + + + {columns.map((column, columnIndex) => ( + {column} + ))} + + + + {this.buildRows(this.state.data, 1, 1).map((row, rowIndex) => ( + + {row.cells.map((cell, cellIndex) => cellIndex === 0 ? ( + + {cell} + + ) : ( + {cell} + ))} + + ))} + + + ); + } +} +``` diff --git a/packages/react-table/src/components/Table/index.ts b/packages/react-table/src/components/Table/index.ts index dabc82899ac..a97dd5fef77 100644 --- a/packages/react-table/src/components/Table/index.ts +++ b/packages/react-table/src/components/Table/index.ts @@ -18,3 +18,4 @@ export * from './utils'; export * from './TableTypes'; export * from './TableContext'; export * from './FavoritesCell'; +export * from './TreeRowWrapper'; diff --git a/packages/react-table/src/components/Table/utils/decorators/index.ts b/packages/react-table/src/components/Table/utils/decorators/index.ts index 6d45eb92408..fd0da527bda 100644 --- a/packages/react-table/src/components/Table/utils/decorators/index.ts +++ b/packages/react-table/src/components/Table/utils/decorators/index.ts @@ -11,3 +11,4 @@ export { headerCol } from './headerCol'; export { classNames, Visibility } from './classNames'; export { info } from './info'; export { favoritable } from './favoritable'; +export { treeRow } from './treeRow'; diff --git a/packages/react-table/src/components/Table/utils/decorators/treeRow.tsx b/packages/react-table/src/components/Table/utils/decorators/treeRow.tsx new file mode 100644 index 00000000000..16045e504fc --- /dev/null +++ b/packages/react-table/src/components/Table/utils/decorators/treeRow.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import { IExtra, IFormatterValueType, OnCheckChange, OnTreeRowCollapse } from '../../TableTypes'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Table/table-tree-view'; +import { Button, Checkbox } from '@patternfly/react-core'; +import AngleDownIcon from '@patternfly/react-icons/dist/js/icons/angle-down-icon'; + +export const treeRow = (onCollapse: OnTreeRowCollapse, onCheckChange?: OnCheckChange) => ( + value: IFormatterValueType, + { rowIndex, rowData }: IExtra +) => { + const text = ( +
+ {value.title || value} +
+ ); + const onChange = (isChecked: boolean, event: React.FormEvent) => { + onCheckChange(event, isChecked, rowIndex, value.title, rowData); + }; + return { + value, + children: + rowData.props.level !== undefined ? ( +
+ {rowData.props.setsize > 0 && ( + + + + )} + {!!onCheckChange && ( + + + + )} + {text} +
+ ) : ( + text + ) + }; +}; diff --git a/packages/react-table/src/components/TableComposable/TableComposable.tsx b/packages/react-table/src/components/TableComposable/TableComposable.tsx index c994f7518e0..1e306e4c98b 100644 --- a/packages/react-table/src/components/TableComposable/TableComposable.tsx +++ b/packages/react-table/src/components/TableComposable/TableComposable.tsx @@ -52,6 +52,8 @@ export interface TableComposableProps extends React.HTMLProps, isStickyHeader?: boolean; /** Forwarded ref */ innerRef?: React.Ref; + /** */ + isTreeTable?: boolean; } const TableComposableBase: React.FunctionComponent = ({ @@ -66,6 +68,7 @@ const TableComposableBase: React.FunctionComponent = ({ innerRef, ouiaId, ouiaSafe = true, + isTreeTable = false, ...props }: TableComposableProps) => { const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe); @@ -81,9 +84,11 @@ const TableComposableBase: React.FunctionComponent = ({ ], styles.modifiers[variant], !borders && styles.modifiers.noBorderRows, - isStickyHeader && styles.modifiers.stickyHeader + isStickyHeader && styles.modifiers.stickyHeader, + isTreeTable && 'pf-m-tree-view' )} ref={innerRef} + {...(isTreeTable && { role: 'treegrid' })} {...ouiaProps} {...props} > diff --git a/packages/react-table/src/components/TableComposable/Td.tsx b/packages/react-table/src/components/TableComposable/Td.tsx index 2c3a793d6fc..3860e976562 100644 --- a/packages/react-table/src/components/TableComposable/Td.tsx +++ b/packages/react-table/src/components/TableComposable/Td.tsx @@ -13,10 +13,20 @@ import { compoundExpand } from '../Table/utils/decorators/compoundExpand'; import { cellWidth } from '../Table/utils/decorators/cellWidth'; import { Visibility, classNames } from './../Table/utils/decorators/classNames'; import { favoritable } from '../Table/utils/decorators/favoritable'; +import { treeRow } from '../Table/utils/decorators/treeRow'; import { mergeProps } from '../Table/base/merge-props'; import { IVisibility } from '../Table/utils/decorators/classNames'; -import { OnSelect, IFormatterValueType, IActions, OnExpand, OnCollapse, OnFavorite } from '../Table/TableTypes'; - +import { + OnSelect, + IFormatterValueType, + IActions, + OnExpand, + OnCollapse, + OnFavorite, + OnCheckChange, + OnTreeRowCollapse, + IExtra +} from '../Table/TableTypes'; export interface TdProps extends BaseCellProps, Omit, 'onSelect' | 'width'> { /** * The column header the cell corresponds to. @@ -74,6 +84,16 @@ export interface TdProps extends BaseCellProps, Omit = ({ select = null, actions = null, expand = null, + treeRow: treeRowProp = null, compoundExpand: compoundExpandProp = null, noPadding, width, @@ -176,6 +197,20 @@ const TdBase: React.FunctionComponent = ({ const visibilityParams = visibility ? classNames(...visibility.map((vis: keyof IVisibility) => Visibility[vis]))() : null; + const treeRowParams = + treeRowProp !== null + ? treeRow(treeRowProp.onCollapse, treeRowProp.onCheckChange)( + { + title: children + } as IFormatterValueType, + { + rowIndex: treeRowProp.rowIndex, + rowData: { + props: treeRowProp.props + } + } as IExtra + ) + : null; const merged = mergeProps( selectParams, actionParams, @@ -183,7 +218,8 @@ const TdBase: React.FunctionComponent = ({ compoundParams, widthParams, visibilityParams, - favoriteParams + favoriteParams, + treeRowParams ); const { // selectable adds this but we don't want it diff --git a/packages/react-table/src/components/TableComposable/Tr.tsx b/packages/react-table/src/components/TableComposable/Tr.tsx index e16b4541699..367badcd3a8 100644 --- a/packages/react-table/src/components/TableComposable/Tr.tsx +++ b/packages/react-table/src/components/TableComposable/Tr.tsx @@ -11,7 +11,8 @@ export interface TrProps extends React.HTMLProps, OUIAProps className?: string; /** Forwarded ref */ innerRef?: React.Ref; - + /** */ + isHidden?: boolean; /** Only applicable to Tr within the Tbody: Makes the row expandable and determines if it's expanded or not */ isExpanded?: boolean; /** Only applicable to Tr within the Tbody: Whether the row is editable */ @@ -23,6 +24,7 @@ const TrBase: React.FunctionComponent = ({ className, isExpanded, isEditable, + isHidden = false, innerRef, ouiaId, ouiaSafe = true, @@ -37,7 +39,7 @@ const TrBase: React.FunctionComponent = ({ isExpanded && styles.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable )} - hidden={isExpanded !== undefined && !isExpanded} + hidden={isHidden || (isExpanded !== undefined && !isExpanded)} ref={innerRef} {...ouiaProps} {...props} From d9dab6757de144e352ff7b33b07ae791801e4566 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Thu, 25 Mar 2021 16:36:44 -0400 Subject: [PATCH 2/6] update aria-labels and snapshots --- .../src/components/Table/Table.tsx | 2 +- .../Table/__snapshots__/Table.test.tsx.snap | 23 +++++++++++++++++++ .../Table/utils/decorators/treeRow.tsx | 15 ++++++------ .../TableComposable/TableComposable.tsx | 2 +- .../VirtualizedTable.test.tsx.snap | 6 +++++ 5 files changed, 39 insertions(+), 9 deletions(-) diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index bdeddb31200..f25042f4d86 100644 --- a/packages/react-table/src/components/Table/Table.tsx +++ b/packages/react-table/src/components/Table/Table.tsx @@ -105,7 +105,7 @@ export interface TableProps extends OUIAProps { onFavorite?: OnFavorite; /** Along with the onSort prop, enables favorites sorting, defaults to true */ canSortFavorites?: boolean; - /** */ + /** Flag indicating table is a tree table */ isTreeTable?: boolean; } diff --git a/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap index f21d8fae15b..9a9af79cc84 100644 --- a/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap +++ b/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap @@ -33,6 +33,7 @@ exports[`Actions table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -13498,6 +13499,7 @@ exports[`Cell header table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -22724,6 +22726,7 @@ exports[`Collapsible nested table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} onCollapse={[Function]} ouiaSafe={true} role="grid" @@ -33638,6 +33641,7 @@ exports[`Collapsible table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} onCollapse={[Function]} ouiaSafe={true} role="grid" @@ -44433,6 +44437,7 @@ exports[`Compound Expandable table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} onExpand={[Function]} ouiaSafe={true} role="grid" @@ -47301,6 +47306,7 @@ exports[`Control text table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -56230,6 +56236,7 @@ exports[`Editable table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} onRowEdit={[Function]} ouiaSafe={true} role="grid" @@ -61505,6 +61512,7 @@ exports[`Header width table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -70855,6 +70863,7 @@ exports[`Row click table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -80024,6 +80033,7 @@ exports[`Selectable table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} onSelect={[Function]} ouiaSafe={true} role="grid" @@ -90532,6 +90542,7 @@ exports[`Selectable table with Radio 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} onSelect={[Function]} ouiaSafe={true} role="grid" @@ -101023,6 +101034,7 @@ exports[`Simple Actions table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -117634,6 +117646,7 @@ exports[`Simple table aria-label 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -126723,6 +126736,7 @@ exports[`Simple table caption 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -135815,6 +135829,7 @@ exports[`Simple table header 1`] = ` } isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -144906,6 +144921,7 @@ exports[`Sortable table 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} onSort={[Function]} ouiaSafe={true} role="grid" @@ -154070,6 +154086,7 @@ exports[`Table variants Breakpoint - 1`] = ` expandId="expandable-toggle" gridBreakPoint="" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -163231,6 +163248,7 @@ exports[`Table variants Breakpoint - grid 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -172392,6 +172410,7 @@ exports[`Table variants Breakpoint - grid-2xl 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-2xl" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -181553,6 +181572,7 @@ exports[`Table variants Breakpoint - grid-lg 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-lg" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -190714,6 +190734,7 @@ exports[`Table variants Breakpoint - grid-md 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -199875,6 +199896,7 @@ exports[`Table variants Breakpoint - grid-xl 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-xl" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" @@ -209036,6 +209058,7 @@ exports[`Table variants Size - compact 1`] = ` expandId="expandable-toggle" gridBreakPoint="grid-md" isStickyHeader={false} + isTreeTable={false} ouiaSafe={true} role="grid" rowLabeledBy="simple-node" diff --git a/packages/react-table/src/components/Table/utils/decorators/treeRow.tsx b/packages/react-table/src/components/Table/utils/decorators/treeRow.tsx index 16045e504fc..9c315c67063 100644 --- a/packages/react-table/src/components/Table/utils/decorators/treeRow.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/treeRow.tsx @@ -9,6 +9,7 @@ export const treeRow = (onCollapse: OnTreeRowCollapse, onCheckChange?: OnCheckCh value: IFormatterValueType, { rowIndex, rowData }: IExtra ) => { + const { isExpanded, level, setsize, toggleAriaLabel, checkAriaLabel, isChecked } = rowData.props; const text = (
{value.title || value} @@ -20,16 +21,16 @@ export const treeRow = (onCollapse: OnTreeRowCollapse, onCheckChange?: OnCheckCh return { value, children: - rowData.props.level !== undefined ? ( + level !== undefined ? (
- {rowData.props.setsize > 0 && ( + {setsize > 0 && (