diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts index 0993d7782b5..bea7313862f 100644 --- a/packages/react-integration/demo-app-ts/src/Demos.ts +++ b/packages/react-integration/demo-app-ts/src/Demos.ts @@ -696,6 +696,11 @@ export const Demos: DemoInterface[] = [ name: 'Table Width Modifers Demo', componentType: Examples.TableWidthModifiersDemo }, + { + id: 'table-composable-demo', + name: 'Table Composable Demo', + componentType: Examples.TableComposableDemo + }, { id: 'tab-string-event-key-demo', name: 'Tab String Event Key Demo', diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx new file mode 100644 index 00000000000..ee10e61708d --- /dev/null +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx @@ -0,0 +1,1020 @@ +import * as React from 'react'; +import { + TableComposable, + Thead, + Tbody, + Tr, + Th, + Td, + Caption, + TableText, + HeaderCellInfoWrapper, + ExpandableRowContent, + OnSelect, + IActions, + OnCollapse +} from '@patternfly/react-table'; +import { ToggleGroup, ToggleGroupItem, Stack, StackItem, Checkbox } from '@patternfly/react-core'; +import CodeBranchIcon from '@patternfly/react-icons/dist/js/icons/code-branch-icon'; +import CodeIcon from '@patternfly/react-icons/dist/js/icons/code-icon'; +import CubeIcon from '@patternfly/react-icons/dist/js/icons/cube-icon'; + +export const TableComposableDemo = () => { + const ComposableTableBasic = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'three', 'four', 'five'], + ['one - 2', null, null, 'four - 2', 'five - 2'], + ['one - 3', 'two - 3', 'three - 3', 'four - 3', 'five - 3'] + ]; + return ( + + Simple table using composable components + + + {columns.map((column, columnIndex) => ( + {column} + ))} + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + ))} + + + ); + }; + + const ComposableTableMisc = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows: any[] = [ + ['one', 'two', 'three', 'four', 'five'], + [{ title: 'one - 2', colSpan: 3 }, null, null, 'four - 2', 'five - 2'], + ['one - 3', 'two - 3', 'three - 3', 'four - 3', { title: 'five - 3 (not centered)', textCenter: false }] + ]; + const onRowClick = (event: React.MouseEvent, rowIndex: number, row: any[]) => { + // eslint-disable-next-line no-console + console.log(`handle row click ${rowIndex}`, row); + }; + return ( + + + + + + {columns[0]} + + + {columns[1]} + + + More information on pull requests + + } + ariaLabel="More information on pull requests" + popoverProps={{ + headerContent: 'Pull requests', + footerContent: Click here for even more info + }} + > + {columns[2]} + + + {columns[3]} + {columns[4]} + + + + {rows.map((row, rowIndex) => { + const isOddRow = (rowIndex + 1) % 2; + const customStyle = { + borderLeft: '3px solid var(--pf-global--primary-color--100)' + }; + return ( + onRowClick(event, rowIndex, row)} + className={isOddRow ? 'odd-row-class' : 'even-row-class'} + style={isOddRow ? customStyle : {}} + > + {row.map((cell: any, cellIndex: number) => { + if (!cell) { + return null; + } + let cellObject; + if (typeof cell !== 'object') { + cellObject = { + title: cell + }; + } else { + cellObject = cell; + } + const { title, ...rest } = cellObject; + return ( + + {title} + + ); + })} + + ); + })} + + + ); + }; + + const ComposableTableSortable = () => { + const columns = [ + 'This is a really long table header that goes on for a long time 1.', + 'This is a really long table header that goes on for a long time 2.', + 'This is a really long table header that goes on for a long time 3.', + 'This is a really long table header that goes on for a long time 4.', + 'This is a really long table header that goes on for a long time 5.' + ]; + const [rows, setRows] = React.useState([ + ['one', 'two', 'a', 'four', 'five'], + ['a', 'two', 'k', 'four', 'five'], + ['p', 'two', 'b', 'four', 'five'] + ]); + // index of the currently active column + const [activeSortIndex, setActiveSortIndex] = React.useState(-1); + // sort direction of the currently active column + const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | 'none'>('none'); + const onSort = (event: React.MouseEvent, index: number, direction: 'asc' | 'desc' | 'none') => { + setActiveSortIndex(index); + setActiveSortDirection(direction); + // sorts the rows + const updatedRows = rows.sort((a, b) => { + // string sort + if (direction === 'asc') { + return a[index].localeCompare(b[index]); + } + return b[index].localeCompare(a[index]); + }); + setRows(updatedRows); + }; + return ( + + + + {columns.map((column, columnIndex) => { + // In this example, wrap all but the first column just to demonstrate + const modifier = columnIndex !== 0 ? 'wrap' : null; + // In this example, make the 1st and 3rd columns sortable + const sortParams = + columnIndex === 0 || columnIndex === 2 + ? { + activeSortIndex, + activeSortDirection, + onSort, + columnIndex + } + : {}; + return ( + + {column} + + ); + })} + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + ))} + + + ); + }; + + const ComposableTableSelectable = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'a', 'four', 'five'], + ['a', 'two', 'k', 'four', 'five'], + ['p', 'two', 'b', 'four', 'five'] + ]; + const [allRowsSelected, setAllRowsSelected] = React.useState(false); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [selected, setSelected] = React.useState(rows.map(row => false)); + const onSelect: OnSelect = (event, isSelected, rowId) => { + setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel))); + if (!isSelected && allRowsSelected) { + setAllRowsSelected(false); + } else if (isSelected && !allRowsSelected) { + let allSelected = true; + for (let i = 0; i < selected.length; i++) { + if (i !== rowId) { + if (!selected[i]) { + allSelected = false; + } + } + } + if (allSelected) { + setAllRowsSelected(true); + } + } + }; + const onSelectAll: OnSelect = (event, isSelected) => { + setAllRowsSelected(isSelected); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + setSelected(selected.map(sel => isSelected)); + }; + return ( + + + + + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + + + + {rows.map((row, rowIndex) => ( + + + {row.map((cell, cellIndex) => { + const shiftedIndex = cellIndex + 1; + return ( + + {cell} + + ); + })} + + ))} + + + ); + }; + + const ComposableTableSelectableRadio = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'a', 'four', 'five'], + ['a', 'two', 'k', 'four', 'five'], + ['p', 'two', 'b', 'four', 'five'] + ]; + const [selected, setSelected] = React.useState(-1); + const onSelect: OnSelect = (event, isSelected, rowId) => { + setSelected(rowId); + }; + return ( + + + + + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + + + + {rows.map((row, rowIndex) => ( + + + {row.map((cell, cellIndex) => { + const shiftedIndex = cellIndex + 1; + return ( + + {cell} + + ); + })} + + ))} + + + ); + }; + + const ComposableTableActions = () => { + const defaultActions: IActions = [ + { + title: 'Some action', + // eslint-disable-next-line + onClick: (event, rowId, rowData, extra) => console.log('clicked on Some action, on row: ', rowId) + }, + { + title: Link action + }, + { + isSeparator: true + }, + { + title: 'Third action', + // eslint-disable-next-line + onClick: (event, rowId, rowData, extra) => console.log('clicked on Third action, on row: ', rowId) + } + ]; + const lastRowActions: IActions = [ + { + title: 'Some action', + // eslint-disable-next-line + onClick: (event, rowId, rowData, extra) => console.log(`clicked on Some action, on row ${rowId}`) + }, + { + title:
Another action
, + // eslint-disable-next-line + onClick: (event, rowId, rowData, extra) => console.log(`clicked on Another action, on row ${rowId}`) + }, + { + isSeparator: true + }, + { + title: 'Third action', + // eslint-disable-next-line + onClick: (event, rowId, rowData, extra) => console.log(`clicked on Third action, on row ${rowId}`) + } + ]; + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'a', 'four', 'five'], + ['a', 'two', 'k', 'four', 'five'], + ['p', 'two', 'b', 'four', 'five'], + ['4', '2', 'b', 'four', 'five'], + ['5', '2', 'b', 'four', 'five'] + ]; + return ( + + + + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + + ))} + + + ); + }; + + const ComposableTableCompact = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'a', 'four', 'five'], + ['a', 'two', 'k', 'four', 'five'], + ['p', 'two', 'b', 'four', 'five'], + ['4', '2', 'b', 'four', 'five'], + ['5', '2', 'b', 'four', 'five'] + ]; + const [choice, setChoice] = React.useState('default'); + const handleItemClick = (isSelected: boolean, event: React.MouseEvent) => { + const id = event.currentTarget.id; + setChoice(id); + }; + return ( + + + + + + + + + + {columns.map((column, columnIndex) => ( + {column} + ))} + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + ))} + + + + ); + }; + + const ComposableTableExpandable = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rowPairs: any[] = [ + { parent: ['one', 'two', 'a', 'four', 'five'], child: null }, + { + parent: ['parent 1', 'two', 'k', 'four', 'five'], + child: ['single cell'] + }, + { + parent: ['parent 2', 'two', 'b', 'four', 'five'], + child: ['single cell - fullWidth'], + fullWidth: true + }, + { + parent: ['parent 3', '2', 'b', 'four', 'five'], + child: ['single cell - noPadding'], + noPadding: true + }, + { + parent: ['parent 4', '2', 'b', 'four', 'five'], + child: ['single cell - fullWidth & noPadding'], + fullWidth: true, + noPadding: true + }, + { + parent: ['parent 5', '2', 'b', 'four', 'five'], + child: ["spans 'Repositories' and 'Branches'", "spans 'Pull requests' and 'Workspaces', and 'Last commit'"] + }, + { + parent: ['parent 6', '2', 'b', 'four', 'five'], + child: [ + "fullWidth, spans the collapsible column and 'Repositories'", + "fullWidth, spans 'Branches' and 'Pull requests'", + "fullWidth, spans 'Workspaces' and 'Last commit'" + ], + fullWidth: true + } + ]; + const numColumns = columns.length; + // Init all to true + const [expanded, setExpanded] = React.useState( + Object.fromEntries(Object.entries(rowPairs).map(([k]) => [k, true])) + ); + const [compact, setCompact] = React.useState(true); + const toggleCompact = (checked: boolean) => { + setCompact(checked); + }; + const handleExpansionToggle: OnCollapse = (event: any, pairIndex: number) => { + setExpanded({ + ...expanded, + [pairIndex]: !expanded[pairIndex] + }); + }; + let rowIndex = -1; + return ( + + + + + + + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + + + {rowPairs.map((pair, pairIndex) => { + rowIndex += 1; + const parentRow = ( + + + {pair.parent.map((cell: any, cellIndex: number) => ( + + {cell} + + ))} + + ); + if (pair.child) { + rowIndex += 1; + } + const childRow = pair.child ? ( + + {!rowPairs[pairIndex].fullWidth && } + {rowPairs[pairIndex].child.map((cell: any, cellIndex: number) => { + const numChildCells = rowPairs[pairIndex].child.length; + const shift = rowPairs[pairIndex].fullWidth ? 1 : 0; + const shiftedCellIndex = cellIndex + shift; + // some examples of how you could customize colSpan based on your needs + const getColSpan = () => { + // we have 6 columns (1 expandable column + 5 regular columns) + // for the rowPairs where we've specificed `fullWidth`, add +1 to account for the expandable column + let colSpan = 1; + if (numChildCells === 1) { + // single child cell: take up full width + colSpan = numColumns + shift; + } else if (numChildCells === 2) { + // 2 children + // child 1: 2 colspan + // child 2: 3 or 4 colspan depending on fullWidth + colSpan = cellIndex === 0 ? 2 : 3 + shift; + } else if (numChildCells === 3) { + // 3 children + // child 1: 2 colspam + // child 2: 2 colspan + // child 3: 1 or 2 colspan depending on fullWidth + colSpan = cellIndex === 2 ? 1 + shift : 2; + } + return colSpan; + }; + return ( + + {cell.title || cell} + + ); + })} + + ) : null; + return ( + + {parentRow} + {childRow} + + ); + })} + + + ); + }; + + const ComposableCompoundExpandableTable = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit', '']; + const rows = [ + ['siemur/test-space', 10, 4, 4, '20 minutes', 'Open in Github'], + ['siemur/test-space', 3, 4, 2, '10 minutes', 'Open in Github'] + ]; + // index corresponds to row index, and value corresponds to column index of the expanded, null means no cell is expanded + const [activeChild, setActiveChild] = React.useState([1, null]); + const DemoSortableTable = ({ firstColumnRows, id }: { firstColumnRows: string[]; id: string }) => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit']; + const rows = [firstColumnRows, ['a', 'two', 'k', 'four', 'five'], ['p', 'two', 'b', 'four', 'five']]; + + return ( + + + + {columns.map((column, columnIndex) => ( + {column} + ))} + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + ))} + + + ); + }; + // key = row_col of the parent it corresponds to + const childData: { + [key: string]: any; + } = { + '0_1': { + component: ( + + ) + }, + '0_2': { + component: ( + + ) + }, + '0_3': { + component: ( + + ) + }, + '1_1': { + component: ( + + ) + }, + '1_2': { + component: ( + + ) + }, + '1_3': { + component: ( + + ) + } + }; + const customRender = (cell: any, index: number) => { + if (index === 0) { + return {cell}; + } else if (index === 1) { + return ( + + {cell} + + ); + } else if (index === 2) { + return ( + + {cell} + + ); + } else if (index === 3) { + return ( + + {cell} + + ); + } else if (index === 5) { + return {cell}; + } + return cell; + }; + const isCompoundExpanded = (rowIndex: number, cellIndex: number) => { + // only columns 1 - 3 are compound expansion toggles in this example + if (1 <= cellIndex && cellIndex <= 3) { + return activeChild[rowIndex] === cellIndex; + } + return null; + }; + return ( + + + + {columns.map((column, columnIndex) => ( + {column} + ))} + + + {rows.map((row, rowIndex) => { + const isRowExpanded = activeChild[rowIndex] !== null; + return ( + + + + {row.map((cell, cellIndex) => { + // for this example, only columns 1 - 3 are clickable + const compoundExpandParams = + 1 <= cellIndex && cellIndex <= 3 + ? { + compoundExpand: { + isExpanded: isCompoundExpanded(rowIndex, cellIndex), + onToggle: () => { + if (activeChild[rowIndex] === cellIndex) { + // closing the expansion on the current toggle + // set the corresponding item to null + const updatedActiveChild = activeChild.map((item, index) => + index === rowIndex ? null : item + ); + setActiveChild(updatedActiveChild); + } else { + // expanding + // set the corresponding cell index + const updatedActiveChild = activeChild.map((item, index) => + index === rowIndex ? cellIndex : item + ); + setActiveChild(updatedActiveChild); + } + } + } + } + : {}; + return ( + + {customRender(cell, cellIndex)} + + ); + })} + + {isRowExpanded && ( + + + + {childData[`${rowIndex}_${activeChild[rowIndex]}`].component} + + + + )} + + + ); + })} + + ); + }; + + const ComposableTableCellWidth = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'three', 'four', 'five'], + ['one - 2', null, null, 'four - 2', 'five - 2'], + ['one - 3', 'two - 3', 'three - 3', 'four - 3', 'five - 3'] + ]; + return ( + + + + {columns.map((column, columnIndex) => ( + + {column} + + ))} + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + ))} + + + ); + }; + + const ComposableControllingText = () => { + const columns = [ + 'Truncate (width 20%)', + 'Break word', + 'Wrapping table header text. This th text will wrap instead of truncate.', + 'Fit content', + 'No wrap' + ]; + const rows = [ + [ + 'This text will truncate instead of wrap.', + + http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org + , +

+ By default, + thead cells will truncate and + tbody cells will wrap. Use + .pf-m-wrap on ath to change its behavior. +

, + "This cell's content will adjust itself to the parent th width. This modifier only affects table layouts.", + + No wrap + + ] + ]; + return ( + + + + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + + + + {rows.map((row, rowIndex) => ( + + + {row[0]} + + + {row[1]} + + {row[2]} + {row[3]} + + {row[4]} + + + ))} + + + ); + }; + + const ComposableTableText = () => { + const columns = ['Truncating text', 'Wrapping table header text. This th text will wrap instead of truncate.']; + const rows = [ + [ + + This text will truncate instead of wrap. + , + + This is a link that needs to be on one line and fully readable. + + ] + ]; + return ( + + + + {columns[0]} + {columns[1]} + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + ))} + + + ); + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts index 0d0cbed1851..afd60444897 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts +++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts @@ -138,6 +138,7 @@ export * from './TableDemo/TableSimpleDemo'; export * from './TableDemo/TableStickyHeaderDemo'; export * from './TableDemo/TableSortableDemo'; export * from './TableDemo/TableWidthModifiersDemo'; +export * from './TableDemo/TableComposableDemo'; export * from './TabsDemo/TabsDemo'; export * from './TabsDemo/TabsInsetDemo'; export * from './TabsDemo/TabsStringEventKeyDemo'; diff --git a/packages/react-table/src/components/Table/ActionsColumn.tsx b/packages/react-table/src/components/Table/ActionsColumn.tsx index 4228660eec3..aa3bcafe1bb 100644 --- a/packages/react-table/src/components/Table/ActionsColumn.tsx +++ b/packages/react-table/src/components/Table/ActionsColumn.tsx @@ -8,7 +8,7 @@ import { DropdownPosition } from '@patternfly/react-core/dist/js/components/Dropdown/dropdownConstants'; -import { IAction, IExtraData, IRowData } from './Table'; +import { IAction, IExtraData, IRowData } from './TableTypes'; export interface ActionsColumnProps { children?: React.ReactNode; diff --git a/packages/react-table/src/components/Table/Body.tsx b/packages/react-table/src/components/Table/Body.tsx index f9b37c288a0..e84843f2a66 100644 --- a/packages/react-table/src/components/Table/Body.tsx +++ b/packages/react-table/src/components/Table/Body.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { Body as BaseBody } from './base'; import { RowType, RowKeyType } from './base/types'; -import { TableContext, IRow, IRowCell, IExtraRowData } from './Table'; +import { IRow, IRowCell, IExtraRowData } from './TableTypes'; +import { TableContext } from './TableContext'; import { isRowExpanded } from './utils'; export interface IComputedData { diff --git a/packages/react-table/src/components/Table/BodyCell.tsx b/packages/react-table/src/components/Table/BodyCell.tsx index 6bc380eb5df..4b05d6d54b2 100644 --- a/packages/react-table/src/components/Table/BodyCell.tsx +++ b/packages/react-table/src/components/Table/BodyCell.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; -import { css } from '@patternfly/react-styles'; import { Tooltip } from '@patternfly/react-core/dist/js/components/Tooltip/Tooltip'; -import styles from '@patternfly/react-styles/css/components/Table/table'; import { SelectProps } from '@patternfly/react-core'; +import { Td } from '../TableComposable/Td'; export interface BodyCellProps { 'data-label'?: string; @@ -51,11 +50,6 @@ export const BodyCell: React.FunctionComponent = ({ /* eslint-enable @typescript-eslint/no-unused-vars */ ...props }: BodyCellProps) => { - const mappedProps = { - ...(dataLabel && parentId === undefined ? { 'data-label': dataLabel } : {}), - ...props - }; - const [tooltip, setTooltip] = React.useState(''); const onMouseEnter = (event: any) => { if (event.target.offsetWidth < event.target.scrollWidth) { @@ -70,16 +64,18 @@ export const BodyCell: React.FunctionComponent = ({ onMouseEnterProp(event); }; - const Component = component as any; const cell = ( - {children} - + ); const bodyCell = diff --git a/packages/react-table/src/components/Table/BodyWrapper.tsx b/packages/react-table/src/components/Table/BodyWrapper.tsx index 33a108959a5..75333565558 100644 --- a/packages/react-table/src/components/Table/BodyWrapper.tsx +++ b/packages/react-table/src/components/Table/BodyWrapper.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; -import { css } from '@patternfly/react-styles'; -import styles from '@patternfly/react-styles/css/components/Table/table'; -import { IRow, IRowData, IExtraData, IHeaderRow } from './Table'; +import { IRow, IRowData, IExtraData, IHeaderRow } from './TableTypes'; import { mapOpenedRows } from './utils/headerUtils'; +import { Tbody } from '../TableComposable/Tbody'; export interface BodyWrapperProps { children?: React.ReactNode; @@ -33,18 +32,13 @@ export const BodyWrapper: React.FunctionComponent = ({ return ( {mapOpenedRows(mappedRows, props.children).map((oneRow, key) => ( - } - > + }> {oneRow.rows} - + ))} ); } - return } />; + return } />; }; BodyWrapper.displayName = 'BodyWrapper'; diff --git a/packages/react-table/src/components/Table/EditColumn.tsx b/packages/react-table/src/components/Table/EditColumn.tsx index fe6d58ff6bd..49c8edcdad9 100644 --- a/packages/react-table/src/components/Table/EditColumn.tsx +++ b/packages/react-table/src/components/Table/EditColumn.tsx @@ -3,7 +3,7 @@ import { Button } from '@patternfly/react-core/dist/js/components/Button'; import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon'; import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'; import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon'; -import { OnRowEdit } from './Table'; +import { OnRowEdit } from './TableTypes'; import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit'; import { css } from '@patternfly/react-styles'; diff --git a/packages/react-table/src/components/Table/Header.tsx b/packages/react-table/src/components/Table/Header.tsx index 2cdbd1e03bf..90751ca148b 100644 --- a/packages/react-table/src/components/Table/Header.tsx +++ b/packages/react-table/src/components/Table/Header.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Header } from './base'; -import { IHeaderRow, TableContext } from './Table'; +import { IHeaderRow } from './TableTypes'; +import { TableContext } from './TableContext'; import { ColumnsType } from './base/types'; interface ContextHeaderProps { diff --git a/packages/react-table/src/components/Table/HeaderCell.tsx b/packages/react-table/src/components/Table/HeaderCell.tsx index 3758fc72445..fc6c77d6bec 100644 --- a/packages/react-table/src/components/Table/HeaderCell.tsx +++ b/packages/react-table/src/components/Table/HeaderCell.tsx @@ -1,7 +1,5 @@ import * as React from 'react'; -import { css } from '@patternfly/react-styles'; -import styles from '@patternfly/react-styles/css/components/Table/table'; -import { Tooltip } from '@patternfly/react-core/dist/js/components/Tooltip/Tooltip'; +import { Th } from '../TableComposable/Th'; export interface HeaderCellProps { 'data-label'?: string; @@ -21,51 +19,25 @@ export const HeaderCell: React.FunctionComponent = ({ component = 'th', scope = '', textCenter = false, - tooltip: tooltipProp = '', - onMouseEnter: onMouseEnterProp = () => {}, + tooltip = '', + onMouseEnter = () => {}, children, /* eslint-disable @typescript-eslint/no-unused-vars */ isVisible, dataLabel = '', /* eslint-enable @typescript-eslint/no-unused-vars */ ...props -}: HeaderCellProps) => { - const mappedProps = { - ...(scope ? { scope } : {}), - ...props - }; - - const [tooltip, setTooltip] = React.useState(''); - const onMouseEnter = (event: any) => { - if (event.target.offsetWidth < event.target.scrollWidth) { - if (tooltipProp) { - setTooltip(tooltipProp); - } else if (typeof children === 'string') { - setTooltip(children); - } - } else { - setTooltip(''); - } - onMouseEnterProp(event); - }; - - const Component = component as any; - const cell = ( - - {children} - - ); - - return tooltip !== '' ? ( - - {cell} - - ) : ( - cell - ); -}; +}: HeaderCellProps) => ( + + {children} + +); HeaderCell.displayName = 'HeaderCell'; diff --git a/packages/react-table/src/components/Table/RowWrapper.tsx b/packages/react-table/src/components/Table/RowWrapper.tsx index 7de60da948c..ffbc7ca4344 100644 --- a/packages/react-table/src/components/Table/RowWrapper.tsx +++ b/packages/react-table/src/components/Table/RowWrapper.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; -import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '@patternfly/react-core/dist/js/helpers/ouia'; +import { OUIAProps } from '@patternfly/react-core/dist/js/helpers/ouia'; import { debounce } from '@patternfly/react-core/dist/js/helpers/util'; -import styles from '@patternfly/react-styles/css/components/Table/table'; -import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit'; -import { css } from '@patternfly/react-styles'; +import { Tr } from '../TableComposable/Tr'; // legacy export now, RowWrapperRow can simply be typed as IRow in the future export interface RowWrapperRow { @@ -24,7 +22,7 @@ export interface RowWrapperProps extends OUIAProps { }; } -export class RowWrapper extends React.Component { +export class RowWrapper extends React.Component { static displayName = 'RowWrapper'; static defaultProps = { className: '' as string, @@ -47,10 +45,6 @@ export class RowWrapper extends React.Component} - className={css( - className, - isExpanded !== undefined && styles.tableExpandableRow, - isExpanded && styles.modifiers.expanded, - isEditable && inlineStyles.modifiers.inlineEditable - )} - hidden={isExpanded !== undefined && !isExpanded} - {...getOUIAProps('TableRow', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)} + isExpanded={isExpanded} + isEditable={isEditable} + className={className} + ouiaId={ouiaId} /> ); } diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index 0ce023e0226..e5f85b8774f 100644 --- a/packages/react-table/src/components/Table/Table.tsx +++ b/packages/react-table/src/components/Table/Table.tsx @@ -1,12 +1,9 @@ import * as React from 'react'; -import styles from '@patternfly/react-styles/css/components/Table/table'; -import stylesGrid from '@patternfly/react-styles/css/components/Table/table-grid'; -import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '@patternfly/react-core'; +import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core'; import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/js/components/Dropdown/dropdownConstants'; -import { DropdownItemProps } from '@patternfly/react-core/dist/js/components/Dropdown/DropdownItem'; import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit'; import { css } from '@patternfly/react-styles'; import { Provider } from './base'; @@ -14,220 +11,25 @@ import { BodyCell } from './BodyCell'; import { HeaderCell } from './HeaderCell'; import { RowWrapper, RowWrapperProps } from './RowWrapper'; import { BodyWrapper } from './BodyWrapper'; -import { toCamel } from './utils'; import { calculateColumns } from './utils/headerUtils'; -import { formatterValueType, ColumnType, RowType, RowKeyType, ColumnsType } from './base'; import { RowSelectVariant } from './SelectColumn'; -import { SortByDirection } from './SortColumn'; - -export enum TableGridBreakpoint { - none = '', - grid = 'grid', - gridMd = 'grid-md', - gridLg = 'grid-lg', - gridXl = 'grid-xl', - grid2xl = 'grid-2xl' -} - -export enum TableVariant { - compact = 'compact' -} - -export type RowEditType = 'save' | 'cancel' | 'edit'; - -export interface RowErrors { - [name: string]: string[]; -} - -export type OnSort = ( - event: React.MouseEvent, - columnIndex: number, - sortByDirection: SortByDirection, - extraData: IExtraColumnData -) => void; -export type OnCollapse = ( - event: React.MouseEvent, - rowIndex: number, - isOpen: boolean, - rowData: IRowData, - extraData: IExtraData -) => void; -export type OnExpand = ( - event: React.MouseEvent, - rowIndex: number, - colIndex: number, - isOpen: boolean, - rowData: IRowData, - extraData: IExtraData -) => void; -export type OnSelect = ( - event: React.FormEvent, - isSelected: boolean, - rowIndex: number, - rowData: IRowData, - extraData: IExtraData -) => void; -export type OnRowEdit = ( - event: React.MouseEvent, - type: RowEditType, - isEditable?: boolean, - rowIndex?: number, - validationErrors?: RowErrors -) => void; - -// Todo: Update type with next breaking change release -// export type IHeaderRow = ColumnType; - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface IHeaderRow extends ColumnType {} - -export interface IRowData extends IRow { - disableActions?: boolean; -} - -export interface IColumn { - extraParams: { - sortBy?: ISortBy; - onSort?: OnSort; - onCollapse?: OnCollapse; - onExpand?: OnExpand; - onSelect?: OnSelect; - selectVariant?: 'checkbox' | 'radio'; - onRowEdit?: OnRowEdit; - rowLabeledBy?: string; - expandId?: string; - contentId?: string; - dropdownPosition?: DropdownPosition; - dropdownDirection?: DropdownDirection; - allRowsSelected?: boolean; - }; -} - -export interface IExtraRowData { - rowIndex?: number; - rowKey?: RowKeyType; -} - -export interface IExtraColumnData { - columnIndex?: number; - column?: IColumn; - property?: string; -} - -export interface IExtraData extends IExtraColumnData, IExtraRowData {} - -export interface IExtra extends IExtraData { - rowData?: IRowData; -} - -export type IFormatterValueType = formatterValueType & { - title?: string | React.ReactNode; - props?: any; -}; - -export interface ISortBy { - index?: number; - direction?: 'asc' | 'desc'; -} - -export interface IAction extends Omit { - isSeparator?: boolean; - itemKey?: string; - title?: string | React.ReactNode; - onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void; -} - -export interface ISeparator extends IAction { - isSeparator: boolean; -} - -export type IActions = (IAction | ISeparator)[]; -export type IActionsResolver = (rowData: IRowData, extraData: IExtraData) => (IAction | ISeparator)[]; -export type IAreActionsDisabled = (rowData: IRowData, extraData: IExtraData) => boolean; - -// to be removed in future, this interface is no longer accurate -export interface IDecorator extends React.HTMLProps { - isVisible: boolean; - children?: React.ReactNode; -} - -export interface decoratorReturnType { - className?: string; - 'aria-sort'?: string; - children?: React.ReactNode; - textCenter?: boolean; - component?: string; - isVisible?: boolean; - title?: string | React.ReactNode; - props?: any; - scope?: string; - parentId?: number; - colSpan?: number; - id?: React.ReactText; -} - -export type ITransform = (label?: IFormatterValueType, extra?: IExtra) => decoratorReturnType; - -export type IFormatter = (data?: IFormatterValueType, extra?: IExtra) => formatterValueType & decoratorReturnType; - -export interface ICell { - title?: string | React.ReactNode; - transforms?: ITransform[]; - cellTransforms?: ITransform[]; - columnTransforms?: ITransform[]; - formatters?: IFormatter[]; - cellFormatters?: IFormatter[]; - props?: any; - data?: any; - header?: any; - cell?: any; - dataLabel?: string; -} - -export type RowCellContent = (value?: string, rowIndex?: number, cellIndex?: number, props?: any) => void; - -export interface IRowCell { - title?: string | React.ReactNode | RowCellContent; - props?: any; - formatters?: IFormatter[]; -} - -export interface IValidatorDef { - validator: (value: string) => boolean; - errorText: string; - name: string; -} - -export interface IRow extends RowType { - cells?: (React.ReactNode | IRowCell)[]; - isOpen?: boolean; - isEditable?: boolean; - isValid?: boolean; - /** An array of validation functions to run against every cell for a given row */ - rowEditValidationRules?: IValidatorDef[]; - /** Aria label for edit button in inline edit */ - rowEditBtnAriaLabel?: (idx: number) => string; - /** Aria label for save button in inline edit */ - rowSaveBtnAriaLabel?: (idx: number) => string; - /** Aria label for cancel button in inline edit */ - rowCancelBtnAriaLabel?: (idx: number) => string; - parent?: number; - compoundParent?: number; - props?: any; - fullWidth?: boolean; - noPadding?: boolean; - heightAuto?: boolean; - showSelect?: boolean; - isExpanded?: boolean; - isFirstVisible?: boolean; - isLastVisible?: boolean; - /** Whether the row checkbox/radio button is selected */ - selected?: boolean; - /** deprecated - Use disableSelection instead - Whether the row checkbox is disabled */ - disableCheckbox?: boolean; - /** Whether the row checkbox/radio button is disabled */ - disableSelection?: boolean; -} +import { TableContext } from './TableContext'; +import { + ISortBy, + OnCollapse, + OnExpand, + OnSelect, + OnRowEdit, + OnSort, + IActions, + IActionsResolver, + IAreActionsDisabled, + IRow, + ICell, + TableVariant, + TableGridBreakpoint, + IHeaderRow +} from './TableTypes'; export interface TableProps extends OUIAProps { /** Adds an accessible name for the Table */ @@ -238,7 +40,11 @@ export interface TableProps extends OUIAProps { className?: string; /** Style variant for the Table */ variant?: 'compact'; - /** Render borders */ + /** + * Render borders + * Borders can only currently be disabled if the variant is set to 'compact' + * https://github.com/patternfly/patternfly/issues/3650 + */ borders?: boolean; /** Specifies the grid breakpoints */ gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'; @@ -280,7 +86,7 @@ export interface TableProps extends OUIAProps { dropdownDirection?: 'up' | 'down'; /** Row data */ rows: (IRow | string[])[]; - /** Cell data */ + /** Cell/column data */ cells: (ICell | string)[]; /** Wrapper for the body */ bodyWrapper?: Function; @@ -292,12 +98,6 @@ export interface TableProps extends OUIAProps { isStickyHeader?: boolean; } -export const TableContext = React.createContext({ - headerData: null as ColumnsType, - headerRows: null as IHeaderRow[], - rows: [] as (IRow | string[])[] -}); - export class Table extends React.Component { static displayName = 'Table'; static hasWarnBeta = false; @@ -350,7 +150,6 @@ export class Table extends React.Component { caption, header, className, - gridBreakPoint, onSort, onSelect, canSelectAll, @@ -373,11 +172,8 @@ export class Table extends React.Component { cells, bodyWrapper, rowWrapper, - borders, role, - ouiaId, - ouiaSafe, - isStickyHeader, + borders, ...props } = this.props; @@ -431,19 +227,9 @@ export class Table extends React.Component { }} columns={headerData} role={role} - className={css( - styles.table, - gridBreakPoint && - stylesGrid.modifiers[ - toCamel(gridBreakPoint).replace(/-?2xl/, '_2xl') as 'grid' | 'gridMd' | 'gridLg' | 'gridXl' | 'grid_2xl' - ], - styles.modifiers[variant], - ((onCollapse && variant === TableVariant.compact) || onExpand) && styles.modifiers.expandable, - variant === TableVariant.compact && borders === false ? styles.modifiers.noBorderRows : null, - isStickyHeader && styles.modifiers.stickyHeader, - className - )} - {...getOUIAProps(Table.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)} + variant={variant} + borders={borders} + className={className} > {caption && {caption}} {children} diff --git a/packages/react-table/src/components/Table/TableContext.ts b/packages/react-table/src/components/Table/TableContext.ts index 7296cfac94f..58486b6ce62 100644 --- a/packages/react-table/src/components/Table/TableContext.ts +++ b/packages/react-table/src/components/Table/TableContext.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IHeaderRow, IRow } from './Table'; +import { IHeaderRow, IRow } from './TableTypes'; import { ColumnsType } from './base'; export const TableContext = React.createContext({ diff --git a/packages/react-table/src/components/Table/TableTypes.ts b/packages/react-table/src/components/Table/TableTypes.ts new file mode 100644 index 00000000000..294946eb016 --- /dev/null +++ b/packages/react-table/src/components/Table/TableTypes.ts @@ -0,0 +1,223 @@ +import { DropdownItemProps } from '@patternfly/react-core/dist/js/components/Dropdown/DropdownItem'; +import { formatterValueType, ColumnType, RowType, RowKeyType, HeaderType } from './base'; +import { SortByDirection } from './SortColumn'; +import { + DropdownDirection, + DropdownPosition +} from '@patternfly/react-core/dist/js/components/Dropdown/dropdownConstants'; + +export enum TableGridBreakpoint { + none = '', + grid = 'grid', + gridMd = 'grid-md', + gridLg = 'grid-lg', + gridXl = 'grid-xl', + grid2xl = 'grid-2xl' +} + +export enum TableVariant { + compact = 'compact' +} + +export type RowEditType = 'save' | 'cancel' | 'edit'; + +export interface RowErrors { + [name: string]: string[]; +} + +export type OnSort = ( + event: React.MouseEvent, + columnIndex: number, + sortByDirection: SortByDirection, + extraData?: IExtraColumnData +) => void; +export type OnCollapse = ( + event: React.MouseEvent, + rowIndex?: number, + isOpen?: boolean, + rowData?: IRowData, + extraData?: IExtraData +) => void; +export type OnExpand = ( + event: React.MouseEvent, + rowIndex?: number, + colIndex?: number, + isOpen?: boolean, + rowData?: IRowData, + extraData?: IExtraData +) => void; +export type OnSelect = ( + event: React.FormEvent, + isSelected?: boolean, + rowIndex?: number, + rowData?: IRowData, + extraData?: IExtraData +) => void; +export type OnRowEdit = ( + event: React.MouseEvent, + type: RowEditType, + isEditable?: boolean, + rowIndex?: number, + validationErrors?: RowErrors +) => void; + +// Todo: Update type with next breaking change release +// export type IHeaderRow = ColumnType; + +// eslint-disable-next-line @typescript-eslint/no-empty-interface +export interface IHeaderRow extends ColumnType {} + +export interface IRowData extends IRow { + disableActions?: boolean; +} + +export interface IColumn { + extraParams: { + sortBy?: ISortBy; + onSort?: OnSort; + onCollapse?: OnCollapse; + onExpand?: OnExpand; + onSelect?: OnSelect; + selectVariant?: 'checkbox' | 'radio'; + onRowEdit?: OnRowEdit; + rowLabeledBy?: string; + expandId?: string; + contentId?: string; + dropdownPosition?: DropdownPosition; + dropdownDirection?: DropdownDirection; + allRowsSelected?: boolean; + }; +} + +export interface IExtraRowData { + rowIndex?: number; + rowKey?: RowKeyType; +} + +export interface IExtraColumnData { + columnIndex?: number; + column?: IColumn; + property?: string; +} + +export interface IExtraData extends IExtraColumnData, IExtraRowData {} + +export interface IExtra extends IExtraData { + rowData?: IRowData; +} + +export type IFormatterValueType = formatterValueType & { + title?: string | React.ReactNode; + props?: any; +}; + +export interface ISortBy { + index?: number; + direction?: 'asc' | 'desc'; +} + +export interface IAction extends Omit { + isSeparator?: boolean; + itemKey?: string; + title?: string | React.ReactNode; + onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void; +} + +export interface ISeparator extends IAction { + isSeparator: boolean; +} + +export type IActions = (IAction | ISeparator)[]; +export type IActionsResolver = (rowData: IRowData, extraData: IExtraData) => (IAction | ISeparator)[]; +export type IAreActionsDisabled = (rowData: IRowData, extraData: IExtraData) => boolean; + +// to be removed in future, this interface is no longer accurate +export interface IDecorator extends React.HTMLProps { + isVisible: boolean; + children?: React.ReactNode; +} + +export interface decoratorReturnType { + className?: string; + 'aria-sort'?: string; + children?: React.ReactNode; + textCenter?: boolean; + component?: string; + isVisible?: boolean; + title?: string | React.ReactNode; + props?: any; + scope?: string; + parentId?: number; + colSpan?: number; + id?: React.ReactText; +} + +export type ITransform = (label?: IFormatterValueType, extra?: IExtra) => decoratorReturnType; + +export type IFormatter = (data?: IFormatterValueType, extra?: IExtra) => formatterValueType & decoratorReturnType; + +export interface ICell { + /* cell contents */ + title?: string | React.ReactNode; + /** transformations applied to the header cell */ + transforms?: ITransform[]; + /** transformations applied to the cells within the column's body */ + cellTransforms?: ITransform[]; + /** transformations applied to the whole column */ + columnTransforms?: ITransform[]; + /** formatters applied to the header cell */ + formatters?: IFormatter[]; + /** formatters applied to the cells within the column's body */ + cellFormatters?: IFormatter[]; + /** Additional header props, it contains the info prop as well which can be used to add tooltip/popover */ + header?: HeaderType; + props?: any; + data?: any; + cell?: any; + dataLabel?: string; +} + +export type RowCellContent = (value?: string, rowIndex?: number, cellIndex?: number, props?: any) => void; + +export interface IRowCell { + title?: string | React.ReactNode | RowCellContent; + props?: any; + formatters?: IFormatter[]; +} + +export interface IValidatorDef { + validator: (value: string) => boolean; + errorText: string; + name: string; +} + +export interface IRow extends RowType { + cells?: (React.ReactNode | IRowCell)[]; + isOpen?: boolean; + isEditable?: boolean; + isValid?: boolean; + /** An array of validation functions to run against every cell for a given row */ + rowEditValidationRules?: IValidatorDef[]; + /** Aria label for edit button in inline edit */ + rowEditBtnAriaLabel?: (idx: number) => string; + /** Aria label for save button in inline edit */ + rowSaveBtnAriaLabel?: (idx: number) => string; + /** Aria label for cancel button in inline edit */ + rowCancelBtnAriaLabel?: (idx: number) => string; + parent?: number; + compoundParent?: number; + props?: any; + fullWidth?: boolean; + noPadding?: boolean; + heightAuto?: boolean; + showSelect?: boolean; + isExpanded?: boolean; + isFirstVisible?: boolean; + isLastVisible?: boolean; + /** Whether the row checkbox/radio button is selected */ + selected?: boolean; + /** deprecated - Use disableSelection instead - Whether the row checkbox is disabled */ + disableCheckbox?: boolean; + /** Whether the row checkbox/radio button is disabled */ + disableSelection?: boolean; +} diff --git a/packages/react-table/src/components/Table/__snapshots__/RowWrapper.test.tsx.snap b/packages/react-table/src/components/Table/__snapshots__/RowWrapper.test.tsx.snap index f2c0c1cedec..5949c6955e3 100644 --- a/packages/react-table/src/components/Table/__snapshots__/RowWrapper.test.tsx.snap +++ b/packages/react-table/src/components/Table/__snapshots__/RowWrapper.test.tsx.snap @@ -37,13 +37,41 @@ exports[`RowWrapper renders correctly 1`] = ` } } > - + > + , + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], + } + } + > + + + @@ -61,13 +89,24 @@ exports[`RowWrapper renders expanded correctly 1`] = ` } rowProps={null} > - + + + + + 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 113c38915fb..da114277ba9 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 @@ -125,7 +125,8 @@ exports[`Actions table 1`] = ` > - - - +
-
- + -
- - - + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + - - + + + + + + + + + + + + + + + + + + + + + + - - - , - } - } + + + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + - Another action - , + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "isSeparator": true, - "onClick": null, + "title": "one", + }, + "id": 1, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "onClick": [Function], - "title": "Third action", + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - ] + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, } - rowData={ + } + rowIndex={1} + rowKey="1-row" + > + - - Some action - , - -
- Another action -
- , - , - - Third action - , - ] - } - isOpen={false} - isPlain={true} - position="right" - toggle={ - + rowProps={ + Object { + "rowIndex": 1, + "rowKey": "1-row", } + } + > + - + + + + + + + + + + + + + + + + + - - - , - } - } + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + - Another action - , + "data": undefined, + "extraParams": Object { + "actionResolver": [Function], + "actions": undefined, + "allRowsSelected": false, + "areActionsDisabled": [Function], + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, }, - Object { - "isSeparator": true, - "onClick": null, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], }, - Object { - "onClick": [Function], - "title": "Third action", + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", }, - ] - } - rowData={ + }, Object { - "branches": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "two", + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], }, - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - "header-cell": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "one", + "data": undefined, + "extraParams": Object { + "actionResolver": [Function], + "actions": undefined, + "allRowsSelected": false, + "areActionsDisabled": [Function], + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, }, - "id": 8, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": true, - "isLastVisible": true, - "last-commit": Object { + "header": Object { "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "five", + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], }, - "pull-requests": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "three", + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", }, - "workspaces": Object { + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": [Function], + "actions": undefined, + "allRowsSelected": false, + "areActionsDisabled": [Function], + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { "formatters": Array [], - "props": Object { + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": [Function], + "actions": undefined, + "allRowsSelected": false, + "areActionsDisabled": [Function], + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": [Function], + "actions": undefined, + "allRowsSelected": false, + "areActionsDisabled": [Function], + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": [Function], + "actions": undefined, + "allRowsSelected": false, + "areActionsDisabled": [Function], + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + key="2-row" + onRow={[Function]} + renderers={ + Object { + "cell": [Function], + "row": [Function], + "wrapper": [Function], + } + } + rowData={ + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", + }, + "id": 2, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, + } + } + rowIndex={2} + rowKey="2-row" + > + - + + + - Some action - , - + + + + + + -
- Another action -
- , - + + + + + + , - + + + + + + + + + + + + + + + - Third action - , - ] + + + + + + + + + + + + } + rowProps={ + Object { + "rowIndex": 3, + "rowKey": "3-row", } + } + > + - + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit - - -
+ + + + + + + Branches + + + + Pull requests + + + + Workspaces + + + + Last Commit + + + + + + +
- - Another action - , + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "isSeparator": true, - "onClick": null, + "title": "one", + }, + "id": 0, + "isExpanded": undefined, + "isFirst": true, + "isFirstVisible": true, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "onClick": [Function], - "title": "Third action", + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - ] + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, } - rowData={ + } + rowIndex={0} + rowKey="0-row" + > + - - Some action - , - -
- Another action -
- , - , - - Third action - , - ] - } - isOpen={false} - isPlain={true} - position="right" - toggle={ - + rowProps={ + Object { + "rowIndex": 0, + "rowKey": "0-row", } + } + > +
- - -`; - -exports[`Cell header table 1`] = ` - + Some action + , + +
+ Another action +
+ , + , + + Third action + , + ] + } + isOpen={false} + isPlain={true} + position="right" + toggle={ + + } + > + + Some action + , + +
+ Another action +
+ , + , + + Third action + , + ] + } + isGrouped={false} + isOpen={false} + isPlain={true} + menuAppendTo="inline" + onSelect={[Function]} + position="right" + toggle={ + + } + > +
+ + +
, + } + } + > + + + , + } + } + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + +`; + +exports[`Cell header table 1`] = ` + -
- - +
-
- + -
- - - + - + + + + + + + + + - Header cell - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
- one -
- - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
- one -
- - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
- one -
- - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- - + + + + + + + + + Branches + + Pull requests + - Branches - - Pull requests - - Workspaces - - Last Commit -
+ Workspaces + + + + Last Commit +
- two - - three - - four - - five -
- two - - three - - four - - five -
- two - + +
+
+
+ + + + + + + + +
+ one +
+ + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -19989,7 +22511,8 @@ exports[`Collapsible nested table 1`] = ` > - - - +
-
- + -
- - - + - + + + + - Header cell - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - -
- - - - - + + + + + + + + + + + + + + Branches + - Branches - - Pull requests - - Workspaces - - Last Commit -
+ Pull requests + + + + Workspaces + + + + Last Commit +
- five -
+ + + + + + + + + + + + + + + + + +
+ one +
+ + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -29242,7 +33262,8 @@ exports[`Collapsible table 1`] = ` > - - - +
-
- + -
- - - + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - -
- - - - - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+ + + + + + + + + + + + + + Branches + + + + Pull requests + + + + Workspaces + + + + Last Commit +
-
- one -
- 		- two - - three - - four - - five -
- five -
+ + + + + + + + + + + + + + + + + +
+ one +
+ + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -38368,7 +43869,8 @@ exports[`Compound Expandable table 1`] = ` > - - - +
-
- + -
- - - - - - + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + - expanded - - - - - - - - - - - - -
- col1 - - col2 -
+ + + + + + + + + expanded + + + + + + + + + + + + + + + + + + + + + `; @@ -40911,7 +46732,8 @@ exports[`Control text table 1`] = ` > - - - -
- + + +
+ + - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
- one -
- - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - -
- Header cell - - new object column - - Pull requests - - new object column - - Last Commit -
- four - - three - - four - + +
+ + + + + + + +
+ one +
+ + + + + + + + + four + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -48472,7 +55510,8 @@ exports[`Editable table 1`] = ` className="pf-c-inline-edit" > - - - - -
- + + +
- Editable Table -
+ + + - - - - - - - - - - - - - - - - - - - - - - - - - - , - }, - "id": 0, - "isEditable": true, - "isExpanded": undefined, - "isFirst": true, - "isFirstVisible": true, - "isHeightAuto": false, - "isLast": false, - "isLastVisible": false, - "text-input-col-1": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell1", - "value": "Row 1 cell 1 content", - }, - "title": , - }, - "text-input-col-3": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell3", - "value": "Row 1 cell 3 content", - }, - "title": , - }, - "text-input-col-4": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell4", - "value": "Row 1 cell 4 content", - }, - "title": , - }, - }, - Object { - "cells": Array [ - Object { - "props": Object { - "name": "uniqueIdRow2Cell1", - "value": "Row 2 cell 1 content", - }, - "title": [Function], - }, - Object { - "props": Object { - "name": "uniqueIdRow2Cell2", - "value": "Row 2 cell 2, disabled content", - }, - "title": [Function], - }, - Object { - "props": Object { - "name": "uniqueIdRow2Cell3", - "value": "Row 2 cell 3 content", - }, - "title": [Function], - }, - Object { - "props": Object { - "name": "uniqueIdRow2Cell4", - "value": "Row 2 cell 4 content", - }, - "title": [Function], - }, - ], - "disabled-text-input-col-2": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell2", - "value": "Row 2 cell 2, disabled content", - }, - "title": , - }, - "id": 1, - "isEditable": false, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": true, - "isLastVisible": true, - "text-input-col-1": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell1", - "value": "Row 2 cell 1 content", - }, - "title": , - }, - "text-input-col-3": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell3", - "value": "Row 2 cell 3 content", - }, - "title": , - }, - "text-input-col-4": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell4", - "value": "Row 2 cell 4 content", - }, - "title": , - }, - }, - ] - } - onRow={[Function]} - rowKey="id" - rows={ - Array [ - Object { - "cells": Array [ - Object { - "props": Object { - "name": "uniqueIdRow1Cell1", - "value": "Row 1 cell 1 content", - }, - "title": [Function], - }, - Object { - "props": Object { - "name": "uniqueIdRow1Cell2", - "value": "Row 1 cell 2, disabled content", - }, - "title": [Function], - }, - Object { - "props": Object { - "name": "uniqueIdRow1Cell3", - "value": "Row 1 cell 3 content", - }, - "title": [Function], - }, - Object { - "props": Object { - "name": "uniqueIdRow1Cell4", - "value": "Row 1 cell 4 content", - }, - "title": [Function], - }, - ], - "disabled-text-input-col-2": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell2", - "value": "Row 1 cell 2, disabled content", - }, - "title": , - }, - "id": 0, - "isEditable": true, - "isExpanded": undefined, - "isFirst": true, - "isFirstVisible": true, - "isHeightAuto": false, - "isLast": false, - "isLastVisible": false, - "text-input-col-1": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell1", - "value": "Row 1 cell 1 content", - }, - "title": , - }, - "text-input-col-3": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell3", - "value": "Row 1 cell 3 content", - }, - "title": , - }, - "text-input-col-4": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell4", - "value": "Row 1 cell 4 content", - }, - "title": , - }, - }, - Object { - "cells": Array [ - Object { - "props": Object { - "name": "uniqueIdRow2Cell1", - "value": "Row 2 cell 1 content", + "property": "text-input-col-4", + "props": Object { + "data-key": 3, + "data-label": "Text input col 4", + }, }, - "title": [Function], - }, - Object { - "props": Object { - "name": "uniqueIdRow2Cell2", - "value": "Row 2 cell 2, disabled content", + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": undefined, + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": [Function], + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "column-4", + "props": Object { + "data-key": 4, + "data-label": "", + }, }, - "title": [Function], - }, + ] + } + headerRows={null} + renderers={ Object { - "props": Object { - "name": "uniqueIdRow2Cell3", - "value": "Row 2 cell 3 content", + "body": Object { + "cell": [Function], + "row": [Function], + "wrapper": [Function], }, - "title": [Function], - }, - Object { - "props": Object { - "name": "uniqueIdRow2Cell4", - "value": "Row 2 cell 4 content", + "header": Object { + "cell": [Function], + "row": Object { + "$$typeof": Symbol(react.forward_ref), + "displayName": "Tr", + "render": [Function], + }, + "wrapper": Object { + "$$typeof": Symbol(react.forward_ref), + "displayName": "Thead", + "render": [Function], + }, }, - "title": [Function], - }, - ], - "disabled-text-input-col-2": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell2", - "value": "Row 2 cell 2, disabled content", - }, - "title": , - }, - "id": 1, - "isEditable": false, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": true, - "isLastVisible": true, - "text-input-col-1": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell1", - "value": "Row 2 cell 1 content", - }, - "title": , - }, - "text-input-col-3": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell3", - "value": "Row 2 cell 3 content", - }, - "title": , - }, - "text-input-col-4": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell4", - "value": "Row 2 cell 4 content", - }, - "title": , - }, - }, - ] - } - > - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + , - }, - "id": 0, "isEditable": true, - "isExpanded": undefined, - "isFirst": true, - "isFirstVisible": true, - "isHeightAuto": false, - "isLast": false, - "isLastVisible": false, - "text-input-col-1": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell1", - "value": "Row 1 cell 1 content", - }, - "title": , - }, - "text-input-col-3": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell3", - "value": "Row 1 cell 3 content", - }, - "title": , - }, - "text-input-col-4": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell4", - "value": "Row 1 cell 4 content", - }, - "title": , - }, }, Object { "cells": Array [ @@ -50504,378 +56815,271 @@ exports[`Editable table 1`] = ` "title": [Function], }, ], - "disabled-text-input-col-2": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell2", - "value": "Row 2 cell 2, disabled content", - }, - "title": , - }, - "id": 1, "isEditable": false, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": true, - "isLastVisible": true, - "text-input-col-1": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell1", - "value": "Row 2 cell 1 content", - }, - "title": , - }, - "text-input-col-3": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell3", - "value": "Row 2 cell 3 content", - }, - "title": , - }, - "text-input-col-4": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell4", - "value": "Row 2 cell 4 content", - }, - "title": , - }, }, ] } - onRow={[Function]} - renderers={ - Object { - "body": Object { - "cell": [Function], - "row": [Function], - "wrapper": [Function], - }, - "header": Object { - "cell": [Function], - "row": "tr", - "wrapper": "thead", - }, - "table": "table", - } - } - rowKey="id" - rows={ - Array [ - Object { - "cells": Array [ - Object { - "props": Object { - "name": "uniqueIdRow1Cell1", - "value": "Row 1 cell 1 content", + > + , }, - Object { + "id": 0, + "isEditable": true, + "isExpanded": undefined, + "isFirst": true, + "isFirstVisible": true, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "text-input-col-1": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow1Cell1", + "value": "Row 1 cell 1 content", + }, + "title": , + }, + "text-input-col-3": Object { + "formatters": Array [], "props": Object { + "isVisible": true, "name": "uniqueIdRow1Cell3", "value": "Row 1 cell 3 content", }, - "title": [Function], + "title": , }, - Object { + "text-input-col-4": Object { + "formatters": Array [], "props": Object { + "isVisible": true, "name": "uniqueIdRow1Cell4", "value": "Row 1 cell 4 content", }, - "title": [Function], - }, - ], - "disabled-text-input-col-2": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell2", - "value": "Row 1 cell 2, disabled content", - }, - "title": , - }, - "id": 0, - "isEditable": true, - "isExpanded": undefined, - "isFirst": true, - "isFirstVisible": true, - "isHeightAuto": false, - "isLast": false, - "isLastVisible": false, - "text-input-col-1": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell1", - "value": "Row 1 cell 1 content", + rowIndex={0} + value="Row 1 cell 4 content" + />, }, - "title": , }, - "text-input-col-3": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell3", - "value": "Row 1 cell 3 content", - }, - "title": , - }, - "text-input-col-4": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow1Cell4", - "value": "Row 1 cell 4 content", + rowIndex={1} + value="Row 2 cell 2, disabled content" + />, }, - "title": , - }, - }, - Object { - "cells": Array [ - Object { + "id": 1, + "isEditable": false, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": true, + "isLastVisible": true, + "text-input-col-1": Object { + "formatters": Array [], "props": Object { + "isVisible": true, "name": "uniqueIdRow2Cell1", "value": "Row 2 cell 1 content", }, - "title": [Function], - }, - Object { - "props": Object { - "name": "uniqueIdRow2Cell2", - "value": "Row 2 cell 2, disabled content", - }, - "title": [Function], + "title": , }, - Object { + "text-input-col-3": Object { + "formatters": Array [], "props": Object { + "isVisible": true, "name": "uniqueIdRow2Cell3", "value": "Row 2 cell 3 content", }, - "title": [Function], + "title": , }, - Object { + "text-input-col-4": Object { + "formatters": Array [], "props": Object { + "isVisible": true, "name": "uniqueIdRow2Cell4", "value": "Row 2 cell 4 content", }, - "title": [Function], - }, - ], - "disabled-text-input-col-2": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell2", - "value": "Row 2 cell 2, disabled content", - }, - "title": , - }, - "id": 1, - "isEditable": false, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": true, - "isLastVisible": true, - "text-input-col-1": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell1", - "value": "Row 2 cell 1 content", - }, - "title": , - }, - "text-input-col-3": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell3", - "value": "Row 2 cell 3 content", - }, - "title": , - }, - "text-input-col-4": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell4", - "value": "Row 2 cell 4 content", + rowIndex={1} + value="Row 2 cell 4 content" + />, }, - "title": , }, - }, - ] - } - > - , + }, + }, + Object { + "cells": Array [ + Object { + "props": Object { + "name": "uniqueIdRow2Cell1", + "value": "Row 2 cell 1 content", + }, + "title": [Function], + }, + Object { + "props": Object { + "name": "uniqueIdRow2Cell2", + "value": "Row 2 cell 2, disabled content", + }, + "title": [Function], + }, + Object { + "props": Object { + "name": "uniqueIdRow2Cell3", + "value": "Row 2 cell 3 content", + }, + "title": [Function], + }, + Object { + "props": Object { + "name": "uniqueIdRow2Cell4", + "value": "Row 2 cell 4 content", + }, + "title": [Function], + }, + ], + "disabled-text-input-col-2": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell2", + "value": "Row 2 cell 2, disabled content", + }, + "title": , + }, + "id": 1, + "isEditable": false, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": true, + "isLastVisible": true, + "text-input-col-1": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell1", + "value": "Row 2 cell 1 content", + }, + "title": , + }, + "text-input-col-3": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell3", + "value": "Row 2 cell 3 content", + }, + "title": , + }, + "text-input-col-4": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell4", + "value": "Row 2 cell 4 content", + }, + "title": , + }, + }, + ] + } + > + , - }, - }, - Object { - "cells": Array [ - Object { + }, + "title": [Function], + }, + ], + "disabled-text-input-col-2": Object { + "formatters": Array [], "props": Object { - "name": "uniqueIdRow2Cell1", - "value": "Row 2 cell 1 content", + "isVisible": true, + "name": "uniqueIdRow1Cell2", + "value": "Row 1 cell 2, disabled content", }, - "title": [Function], + "title": , }, - Object { + "id": 0, + "isEditable": true, + "isExpanded": undefined, + "isFirst": true, + "isFirstVisible": true, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "text-input-col-1": Object { + "formatters": Array [], "props": Object { - "name": "uniqueIdRow2Cell2", - "value": "Row 2 cell 2, disabled content", + "isVisible": true, + "name": "uniqueIdRow1Cell1", + "value": "Row 1 cell 1 content", }, - "title": [Function], + "title": , }, - Object { + "text-input-col-3": Object { + "formatters": Array [], "props": Object { - "name": "uniqueIdRow2Cell3", - "value": "Row 2 cell 3 content", + "isVisible": true, + "name": "uniqueIdRow1Cell3", + "value": "Row 1 cell 3 content", }, - "title": [Function], + "title": , }, - Object { + "text-input-col-4": Object { + "formatters": Array [], "props": Object { - "name": "uniqueIdRow2Cell4", - "value": "Row 2 cell 4 content", + "isVisible": true, + "name": "uniqueIdRow1Cell4", + "value": "Row 1 cell 4 content", }, - "title": [Function], - }, - ], - "disabled-text-input-col-2": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell2", - "value": "Row 2 cell 2, disabled content", - }, - "title": , - }, - "id": 1, - "isEditable": false, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": true, - "isLastVisible": true, - "text-input-col-1": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell1", - "value": "Row 2 cell 1 content", + rowIndex={0} + value="Row 1 cell 4 content" + />, }, - "title": , - }, - "text-input-col-3": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell3", - "value": "Row 2 cell 3 content", - }, - "title": , - }, - "text-input-col-4": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell4", - "value": "Row 2 cell 4 content", - }, - "title": , - }, - }, - ] - } - > - - , }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": undefined, - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": [Function], - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Text input col 3", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "text-input-col-3", + "id": 1, + "isEditable": false, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": true, + "isLastVisible": true, + "text-input-col-1": Object { + "formatters": Array [], "props": Object { - "data-key": 2, - "data-label": "Text input col 3", + "isVisible": true, + "name": "uniqueIdRow2Cell1", + "value": "Row 2 cell 1 content", }, + "title": , }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": undefined, - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": [Function], - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Text input col 4", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "text-input-col-4", + "text-input-col-3": Object { + "formatters": Array [], "props": Object { - "data-key": 3, - "data-label": "Text input col 4", + "isVisible": true, + "name": "uniqueIdRow2Cell3", + "value": "Row 2 cell 3 content", }, + "title": , }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": undefined, - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": [Function], - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "column-4", + "text-input-col-4": Object { + "formatters": Array [], "props": Object { - "data-key": 4, - "data-label": "", + "isVisible": true, + "name": "uniqueIdRow2Cell4", + "value": "Row 2 cell 4 content", }, + "title": , }, - ] - } - key="0-row" - onRow={[Function]} - renderers={ - Object { + }, + ] + } + onRow={[Function]} + renderers={ + Object { + "body": Object { "cell": [Function], "row": [Function], "wrapper": [Function], - } + }, + "header": Object { + "cell": [Function], + "row": Object { + "$$typeof": Symbol(react.forward_ref), + "displayName": "Tr", + "render": [Function], + }, + "wrapper": Object { + "$$typeof": Symbol(react.forward_ref), + "displayName": "Thead", + "render": [Function], + }, + }, + "table": Object { + "$$typeof": Symbol(react.forward_ref), + "displayName": "TableComposable", + "render": [Function], + }, } - rowData={ + } + rowKey="id" + rows={ + Array [ Object { "cells": Array [ Object { @@ -51468,40 +57946,165 @@ exports[`Editable table 1`] = ` "value": "Row 1 cell 3 content", } } - rowIndex={0} - value="Row 1 cell 3 content" + rowIndex={0} + value="Row 1 cell 3 content" + />, + }, + "text-input-col-4": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow1Cell4", + "value": "Row 1 cell 4 content", + }, + "title": , + }, + }, + Object { + "cells": Array [ + Object { + "props": Object { + "name": "uniqueIdRow2Cell1", + "value": "Row 2 cell 1 content", + }, + "title": [Function], + }, + Object { + "props": Object { + "name": "uniqueIdRow2Cell2", + "value": "Row 2 cell 2, disabled content", + }, + "title": [Function], + }, + Object { + "props": Object { + "name": "uniqueIdRow2Cell3", + "value": "Row 2 cell 3 content", + }, + "title": [Function], + }, + Object { + "props": Object { + "name": "uniqueIdRow2Cell4", + "value": "Row 2 cell 4 content", + }, + "title": [Function], + }, + ], + "disabled-text-input-col-2": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell2", + "value": "Row 2 cell 2, disabled content", + }, + "title": , + }, + "id": 1, + "isEditable": false, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": true, + "isLastVisible": true, + "text-input-col-1": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell1", + "value": "Row 2 cell 1 content", + }, + "title": , + }, + "text-input-col-3": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell3", + "value": "Row 2 cell 3 content", + }, + "title": , }, "text-input-col-4": Object { "formatters": Array [], "props": Object { "isVisible": true, - "name": "uniqueIdRow1Cell4", - "value": "Row 1 cell 4 content", + "name": "uniqueIdRow2Cell4", + "value": "Row 2 cell 4 content", }, "title": , }, - } - } - rowIndex={0} - rowKey="0-row" - > - + , }, - } - } - rowProps={ - Object { - "rowIndex": 0, - "rowKey": "0-row", - } - } - > - - - - - - - - - - - - - - - - - - - - , - }, - "id": 1, - "isEditable": false, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": true, - "isLastVisible": true, - "text-input-col-1": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell1", - "value": "Row 2 cell 1 content", - }, - "title": , - }, - "text-input-col-3": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell3", - "value": "Row 2 cell 3 content", - }, - "title": , - }, - "text-input-col-4": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell4", - "value": "Row 2 cell 4 content", - }, - "title": , }, - } - } - rowIndex={1} - rowKey="1-row" - > - , + }, + "text-input-col-3": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell3", + "value": "Row 2 cell 3 content", + }, + "title": , + }, + "text-input-col-4": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell4", + "value": "Row 2 cell 4 content", + }, + "title": , + }, + }, + ] + } + > + + + + , - }, - "text-input-col-3": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell3", - "value": "Row 2 cell 3 content", - }, - "title": , + }, + "id": 0, + "isEditable": true, + "isExpanded": undefined, + "isFirst": true, + "isFirstVisible": true, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "text-input-col-1": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow1Cell1", + "value": "Row 1 cell 1 content", + }, + "title": , + }, + "text-input-col-3": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow1Cell3", + "value": "Row 1 cell 3 content", + }, + "title": , + }, + "text-input-col-4": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow1Cell4", + "value": "Row 1 cell 4 content", + }, + "title": , + }, } - rowIndex={1} - value="Row 2 cell 3 content" - />, - }, - "text-input-col-4": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - "name": "uniqueIdRow2Cell4", - "value": "Row 2 cell 4 content", - }, - "title": + , + }, + "id": 0, + "isEditable": true, + "isExpanded": undefined, + "isFirst": true, + "isFirstVisible": true, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "text-input-col-1": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow1Cell1", + "value": "Row 1 cell 1 content", + }, + "title": , + }, + "text-input-col-3": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow1Cell3", + "value": "Row 1 cell 3 content", + }, + "title": , + }, + "text-input-col-4": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow1Cell4", + "value": "Row 1 cell 4 content", + }, + "title": , + }, } } - rowIndex={1} - value="Row 2 cell 4 content" - />, - }, - } - } - rowProps={ - Object { - "rowIndex": 1, - "rowKey": "1-row", - } - } - > - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
- Row 2 cell 2, disabled content -
-
- - - - - -
-
- - - - -
- - - - - - + + + + + + + + + + - - - - - - - - - - -
+ Editable Table +
- Text input col 1 - - Disabled text input col 2 - - Text input col 3 - - Text input col 4 - - -
, + }, + "id": 1, + "isEditable": false, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": true, + "isLastVisible": true, + "text-input-col-1": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell1", + "value": "Row 2 cell 1 content", + }, + "title": , + }, + "text-input-col-3": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell3", + "value": "Row 2 cell 3 content", + }, + "title": , + }, + "text-input-col-4": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell4", + "value": "Row 2 cell 4 content", + }, + "title": , + }, + } + } + rowIndex={1} + rowKey="1-row" > - , + }, + "id": 1, + "isEditable": false, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": true, + "isLastVisible": true, + "text-input-col-1": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell1", + "value": "Row 2 cell 1 content", + }, + "title": , + }, + "text-input-col-3": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell3", + "value": "Row 2 cell 3 content", + }, + "title": , + }, + "text-input-col-4": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + "name": "uniqueIdRow2Cell4", + "value": "Row 2 cell 4 content", + }, + "title": , + }, } } - rowIndex={1} - value="Row 2 cell 3 content" - > -
- Row 2 cell 3 content -
-
- - - - - -
-
- -
- -
- Row 2 cell 4 content -
-
- - - -
-
- -
- -
-
- - -
-
-
+ - - - - - - - -
-
- - - - - - - -
+ + + +
+ Row 2 cell 3 content +
+
+ + + + + +
+
+ + + + + + + + + + +
+ Row 2 cell 4 content +
+
+ + + + + +
+
+ + + + + + + + + + +
+
+ + +
+
+ + +
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + @@ -53282,7 +60740,8 @@ exports[`Header width table 1`] = ` > - - - -
- + + +
+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
- one -
- - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - -
- Header cell - - Branches - - Pull requests - - Workspaces - - Last Commit -
- two - - three - - four - + +
+ + + + + + + +
+ one +
+ + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -61276,7 +69951,8 @@ exports[`Row click table 1`] = ` > - - - -
- + + +
+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -69160,7 +78994,8 @@ exports[`Selectable table 1`] = ` > - - - -
- + + +
+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - -
- - - - - - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
-
- one -
- 		- two - - three - - four - - five -
-
- one -
- 		- two - - three - - four -
- five -
+ + + + + + + + + + + + + + + + + + + +
+ one +
+ + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -78084,7 +89341,8 @@ exports[`Selectable table with Radio 1`] = ` > - - - +
-
- + -
- - - + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
- one -
- - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+ + + + + + + + + + + Branches + + + + Pull requests + + + + Workspaces + + + + Last Commit +
- two - - three - - four - + +
-
- one -
- 		- two - - three - - four - - five -
+ + + + + + + + + + + + + + + + + + +
+ one +
+ + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -86920,399 +99600,84 @@ exports[`Simple Actions table 1`] = ` "two", "three", "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - "disableActions": true, - }, - ] - } - selectVariant="checkbox" - variant={null} -> - - Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "branches", - "props": Object { - "data-key": 1, - "data-label": "Branches", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "pull-requests", - "props": Object { - "data-key": 2, - "data-label": "Pull requests", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "workspaces", - "props": Object { - "data-key": 3, - "data-label": "Workspaces", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "last-commit", - "props": Object { - "data-key": 4, - "data-label": "Last Commit", - }, - }, + "five", + ], + }, + Object { + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + }, + Object { + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + }, + Object { + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + }, + Object { + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + }, + Object { + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + }, + Object { + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + }, + Object { + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "disableActions": true, + }, + ] + } + selectVariant="checkbox" + variant={null} +> + - - - -
- - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "branches", - "props": Object { - "data-key": 1, - "data-label": "Branches", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "pull-requests", - "props": Object { - "data-key": 2, - "data-label": "Pull requests", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "workspaces", - "props": Object { - "data-key": 3, - "data-label": "Workspaces", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "last-commit", - "props": Object { - "data-key": 4, - "data-label": "Last Commit", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "column-5", - "props": Object { - "data-key": 5, - "data-label": "", - }, - }, - ] - } + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + gridBreakPoint="grid-md" + isStickyHeader={false} + ouiaSafe={true} + renderers={ + Object { + "body": Object { + "cell": [Function], + "row": [Function], + "wrapper": [Function], + }, + "header": Object { + "cell": [Function], + }, + } + } + role="grid" + variant={null} + > + + +
+ + - - - - + - + + + + - Header cell - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "branches", - "props": Object { - "data-key": 1, - "data-label": "Branches", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "pull-requests", - "props": Object { - "data-key": 2, - "data-label": "Pull requests", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "workspaces", - "props": Object { - "data-key": 3, - "data-label": "Workspaces", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "last-commit", - "props": Object { - "data-key": 4, - "data-label": "Last Commit", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "column-5", - "props": Object { - "data-key": 5, - "data-label": "", - }, - }, - ] - } - headerRows={null} - onRow={[Function]} - onRowClick={[Function]} - rowKey="id" - rows={ - Array [ - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - }, - Object { - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - "disableActions": true, - }, - ] - } - > - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", - }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "branches", - "props": Object { - "data-key": 1, - "data-label": "Branches", - }, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "pull-requests", - "props": Object { - "data-key": 2, - "data-label": "Pull requests", - }, + "title": "one", + }, + "id": 6, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "workspaces", - "props": Object { - "data-key": 3, - "data-label": "Workspaces", - }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "last-commit", - "props": Object { - "data-key": 4, - "data-label": "Last Commit", - }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, + }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "column-5", - "props": Object { - "data-key": 5, - "data-label": "", - }, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - ] - } - key="0-row" - onRow={[Function]} - renderers={ - Object { - "cell": [Function], - "row": [Function], - "wrapper": [Function], - } - } - rowData={ - Object { - "branches": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "two", + "title": "one", + }, + "id": 7, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - "header-cell": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "one", + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "id": 0, - "isExpanded": undefined, - "isFirst": true, - "isFirstVisible": true, - "isHeightAuto": false, - "isLast": false, - "isLastVisible": false, - "last-commit": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "five", + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "pull-requests": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "three", + "title": "four", + }, + }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "workspaces": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "four", + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - } - } - rowIndex={0} - rowKey="0-row" - > - - - - - - - - - - - - - - - - - - - - - - - - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", - }, + "title": "one", + }, + "id": 8, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, + }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "disableActions": true, + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "branches", - "props": Object { - "data-key": 1, - "data-label": "Branches", - }, + "title": "one", + }, + "id": 9, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": true, + "isLastVisible": true, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "pull-requests", - "props": Object { - "data-key": 2, - "data-label": "Pull requests", - }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "workspaces", - "props": Object { - "data-key": 3, - "data-label": "Workspaces", - }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "last-commit", - "props": Object { - "data-key": 4, - "data-label": "Last Commit", - }, + "title": "four", + }, + }, + ] + } + > + - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "column-5", - "props": Object { - "data-key": 5, - "data-label": "", - }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, }, - ] - } - key="1-row" - onRow={[Function]} - renderers={ - Object { - "cell": [Function], - "row": [Function], - "wrapper": [Function], - } - } - rowData={ - Object { - "branches": Object { + "header": Object { "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "two", + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], }, - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - "header-cell": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "one", + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", }, - "id": 1, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": false, - "isLastVisible": false, - "last-commit": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "five", + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], }, - "pull-requests": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "three", + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, }, - "workspaces": Object { + "header": Object { "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "four", + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], }, - } - } - rowIndex={1} - rowKey="1-row" - > - + Another action + , }, - "title": "five", - }, - "pull-requests": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, + Object { + "isSeparator": true, + "onClick": null, }, - "title": "three", - }, - "workspaces": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, + Object { + "onClick": [Function], + "title": "Third action", }, - "title": "four", - }, - } - } - rowProps={ - Object { - "rowIndex": 1, - "rowKey": "1-row", - } - } - > - - - - - - - - - - - - - - - - - - - - - - - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", - }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "branches", + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + headerRows={null} + mappedRows={ + Array [ + Object { + "branches": Object { + "formatters": Array [], "props": Object { - "data-key": 1, - "data-label": "Branches", + "isVisible": true, }, + "title": "two", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "pull-requests", + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], "props": Object { - "data-key": 2, - "data-label": "Pull requests", + "isVisible": true, }, + "title": "one", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "workspaces", + "id": 0, + "isExpanded": undefined, + "isFirst": true, + "isFirstVisible": true, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], "props": Object { - "data-key": 3, - "data-label": "Workspaces", + "isVisible": true, }, + "title": "five", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "last-commit", + "pull-requests": Object { + "formatters": Array [], "props": Object { - "data-key": 4, - "data-label": "Last Commit", + "isVisible": true, }, + "title": "three", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "column-5", + "workspaces": Object { + "formatters": Array [], "props": Object { - "data-key": 5, - "data-label": "", + "isVisible": true, }, + "title": "four", }, - ] - } - key="2-row" - onRow={[Function]} - renderers={ - Object { - "cell": [Function], - "row": [Function], - "wrapper": [Function], - } - } - rowData={ + }, Object { "branches": Object { "formatters": Array [], @@ -94255,7 +103243,7 @@ exports[`Simple Actions table 1`] = ` }, "title": "one", }, - "id": 2, + "id": 1, "isExpanded": undefined, "isFirst": false, "isFirstVisible": false, @@ -94283,948 +103271,313 @@ exports[`Simple Actions table 1`] = ` }, "title": "four", }, - } - } - rowIndex={2} - rowKey="2-row" - > - - - - - - - - - - - - - - - - - - - - - - - - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "one", + }, + "id": 2, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "header-cell", + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], "props": Object { - "data-key": 0, - "data-label": "Header cell", + "isVisible": true, }, + "title": "four", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], + "title": "one", + }, + "id": 3, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "branches", + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], "props": Object { - "data-key": 1, - "data-label": "Branches", + "isVisible": true, }, + "title": "three", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "four", + }, + }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "pull-requests", + "title": "one", + }, + "id": 4, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], "props": Object { - "data-key": 2, - "data-label": "Pull requests", + "isVisible": true, }, + "title": "five", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], + "title": "four", + }, + }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "workspaces", + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], "props": Object { - "data-key": 3, - "data-label": "Workspaces", + "isVisible": true, }, + "title": "one", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + "id": 5, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "last-commit", + "title": "four", + }, + }, + Object { + "branches": Object { + "formatters": Array [], "props": Object { - "data-key": 4, - "data-label": "Last Commit", + "isVisible": true, }, + "title": "two", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "one", + }, + "id": 6, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "column-5", + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], "props": Object { - "data-key": 5, - "data-label": "", + "isVisible": true, }, + "title": "four", }, - ] - } - key="3-row" - onRow={[Function]} - renderers={ + }, Object { - "cell": [Function], - "row": [Function], - "wrapper": [Function], - } - } - rowData={ + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", + }, + "id": 7, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, + }, Object { "branches": Object { "formatters": Array [], @@ -95247,7 +103600,7 @@ exports[`Simple Actions table 1`] = ` }, "title": "one", }, - "id": 3, + "id": 8, "isExpanded": undefined, "isFirst": false, "isFirstVisible": false, @@ -95275,948 +103628,92 @@ exports[`Simple Actions table 1`] = ` }, "title": "four", }, - } - } - rowIndex={3} - rowKey="3-row" - > - - - - - - - - - - - - - - - - - - - - - - - - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "branches", - "props": Object { - "data-key": 1, - "data-label": "Branches", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "pull-requests", + }, + Object { + "branches": Object { + "formatters": Array [], "props": Object { - "data-key": 2, - "data-label": "Pull requests", + "isVisible": true, }, + "title": "two", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "workspaces", + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "disableActions": true, + "header-cell": Object { + "formatters": Array [], "props": Object { - "data-key": 3, - "data-label": "Workspaces", + "isVisible": true, }, + "title": "one", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "last-commit", + "id": 9, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": true, + "isLastVisible": true, + "last-commit": Object { + "formatters": Array [], "props": Object { - "data-key": 4, - "data-label": "Last Commit", + "isVisible": true, }, + "title": "five", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "column-5", + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], "props": Object { - "data-key": 5, - "data-label": "", + "isVisible": true, }, + "title": "four", }, - ] - } - key="4-row" - onRow={[Function]} - renderers={ - Object { + }, + ] + } + onRow={[Function]} + renderers={ + Object { + "body": Object { "cell": [Function], "row": [Function], "wrapper": [Function], - } + }, + "header": Object { + "cell": [Function], + "row": Object { + "$$typeof": Symbol(react.forward_ref), + "displayName": "Tr", + "render": [Function], + }, + "wrapper": Object { + "$$typeof": Symbol(react.forward_ref), + "displayName": "Thead", + "render": [Function], + }, + }, + "table": Object { + "$$typeof": Symbol(react.forward_ref), + "displayName": "TableComposable", + "render": [Function], + }, } - rowData={ + } + rowKey="id" + rows={ + Array [ Object { "branches": Object { "formatters": Array [], @@ -96239,7 +103736,58 @@ exports[`Simple Actions table 1`] = ` }, "title": "one", }, - "id": 4, + "id": 0, + "isExpanded": undefined, + "isFirst": true, + "isFirstVisible": true, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, + }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", + }, + "id": 1, "isExpanded": undefined, "isFirst": false, "isFirstVisible": false, @@ -96267,948 +103815,313 @@ exports[`Simple Actions table 1`] = ` }, "title": "four", }, - } - } - rowIndex={4} - rowKey="4-row" - > - - - - - - - - - - - - - - - - - - - - - - - - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], + "title": "one", + }, + "id": 3, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "header-cell", + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], "props": Object { - "data-key": 0, - "data-label": "Header cell", + "isVisible": true, }, + "title": "four", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], + "title": "one", + }, + "id": 4, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "branches", + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], "props": Object { - "data-key": 1, - "data-label": "Branches", + "isVisible": true, }, + "title": "three", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "four", + }, + }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "pull-requests", + "title": "one", + }, + "id": 5, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], "props": Object { - "data-key": 2, - "data-label": "Pull requests", + "isVisible": true, }, + "title": "five", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], + "title": "four", + }, + }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "workspaces", + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], "props": Object { - "data-key": 3, - "data-label": "Workspaces", + "isVisible": true, }, + "title": "one", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + "id": 6, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "last-commit", + "title": "four", + }, + }, + Object { + "branches": Object { + "formatters": Array [], "props": Object { - "data-key": 4, - "data-label": "Last Commit", + "isVisible": true, }, + "title": "two", }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "title": "one", + }, + "id": 7, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - "property": "column-5", + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], "props": Object { - "data-key": 5, - "data-label": "", + "isVisible": true, }, + "title": "four", }, - ] - } - key="5-row" - onRow={[Function]} - renderers={ - Object { - "cell": [Function], - "row": [Function], - "wrapper": [Function], - } - } - rowData={ + }, Object { "branches": Object { "formatters": Array [], @@ -97231,7 +104144,7 @@ exports[`Simple Actions table 1`] = ` }, "title": "one", }, - "id": 5, + "id": 8, "isExpanded": undefined, "isFirst": false, "isFirstVisible": false, @@ -97243,31 +104156,134 @@ exports[`Simple Actions table 1`] = ` "props": Object { "isVisible": true, }, - "title": "five", - }, - "pull-requests": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, + }, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "disableActions": true, + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", + }, + "id": 9, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": true, + "isLastVisible": true, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, + }, + ] + } + > + - - - - - - - - - - - - - - - - - - - - - - - - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { + "branches": Object { "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", + "props": Object { + "isVisible": true, + }, + "title": "two", }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "id": 2, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", }, - "header": Object { + "pull-requests": Object { "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], + "props": Object { + "isVisible": true, + }, + "title": "three", }, - "property": "branches", - "props": Object { - "data-key": 1, - "data-label": "Branches", + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", }, }, Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", }, - "header": Object { + "id": 3, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], + "props": Object { + "isVisible": true, + }, + "title": "five", }, - "property": "pull-requests", - "props": Object { - "data-key": 2, - "data-label": "Pull requests", + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", }, }, Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", + }, + "id": 4, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", }, - "header": Object { + "pull-requests": Object { "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], + "props": Object { + "isVisible": true, + }, + "title": "three", }, - "property": "workspaces", - "props": Object { - "data-key": 3, - "data-label": "Workspaces", + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", }, }, Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", }, - "header": Object { + "id": 5, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], + "props": Object { + "isVisible": true, + }, + "title": "five", }, - "property": "last-commit", - "props": Object { - "data-key": 4, - "data-label": "Last Commit", + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", }, }, Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", }, - "header": Object { + "id": 6, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], + "props": Object { + "isVisible": true, + }, + "title": "five", }, - "property": "column-5", - "props": Object { - "data-key": 5, - "data-label": "", + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", }, - }, - ] - } - key="6-row" - onRow={[Function]} - renderers={ - Object { - "cell": [Function], - "row": [Function], - "wrapper": [Function], - } - } - rowData={ - Object { - "branches": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", }, - "title": "two", }, - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - "header-cell": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", }, - "title": "one", - }, - "id": 6, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": false, - "isLastVisible": false, - "last-commit": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", }, - "title": "five", - }, - "pull-requests": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, + "id": 7, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", }, - "title": "three", - }, - "workspaces": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", }, - "title": "four", }, - } - } - rowIndex={6} - rowKey="6-row" - > - + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - Another action - , + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, }, - Object { - "isSeparator": true, - "onClick": null, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], }, - Object { - "onClick": [Function], - "title": "Third action", + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", }, - ] + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + key="1-row" + onRow={[Function]} + renderers={ + Object { + "cell": [Function], + "row": [Function], + "wrapper": [Function], } - rowData={ + } + rowData={ + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", + }, + "id": 1, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, + } + } + rowIndex={1} + rowKey="1-row" + > + - - Some action - , - -
- Another action -
- , - , - - Third action - , - ] - } - isOpen={false} - isPlain={true} - position="right" - toggle={ - + rowProps={ + Object { + "rowIndex": 1, + "rowKey": "1-row", } + } + > + - - Some action - , - -
- Another action -
- , - , - - Third action - , - ] - } - isGrouped={false} - isOpen={false} - isPlain={true} - menuAppendTo="inline" - onSelect={[Function]} - position="right" - toggle={ - - } + innerRef={null} + onMouseDown={[Function]} > - , - } - } + - - - , - } - } + - - - - - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "branches", - "props": Object { - "data-key": 1, - "data-label": "Branches", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "pull-requests", - "props": Object { - "data-key": 2, - "data-label": "Pull requests", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "workspaces", - "props": Object { - "data-key": 3, - "data-label": "Workspaces", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "last-commit", - "props": Object { - "data-key": 4, - "data-label": "Last Commit", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Another action + , + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + key="2-row" + onRow={[Function]} + renderers={ Object { - "isSeparator": true, - "onClick": null, - }, + "cell": [Function], + "row": [Function], + "wrapper": [Function], + } + } + rowData={ Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "column-5", - "props": Object { - "data-key": 5, - "data-label": "", - }, - }, - ] - } - key="7-row" - onRow={[Function]} - renderers={ - Object { - "cell": [Function], - "row": [Function], - "wrapper": [Function], - } - } - rowData={ - Object { - "branches": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "two", - }, - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - "header-cell": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "one", - }, - "id": 7, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": false, - "isLastVisible": false, - "last-commit": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "five", - }, - "pull-requests": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "three", - }, - "workspaces": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "four", - }, - } - } - rowIndex={7} - rowKey="7-row" - > - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Another action + , + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], }, - "columnIndex": 5, "property": "column-5", - "rowIndex": 7, - } + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + key="3-row" + onRow={[Function]} + renderers={ + Object { + "cell": [Function], + "row": [Function], + "wrapper": [Function], } - items={ - Array [ - Object { - "onClick": [Function], - "title": "Some action", + } + rowData={ + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "onClick": [Function], - "title":
- Another action -
, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "isSeparator": true, - "onClick": null, + "title": "one", + }, + "id": 3, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "onClick": [Function], - "title": "Third action", + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - ] + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, } - rowData={ + } + rowIndex={3} + rowKey="3-row" + > + - - Some action - , - -
- Another action -
- , - , - - Third action - , - ] - } - isOpen={false} - isPlain={true} - position="right" - toggle={ - + rowProps={ + Object { + "rowIndex": 3, + "rowKey": "3-row", } + } + > + - + + + + + + + + + + + + + + + + + + + + + + - - - , - } - } + + + + - - - - - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "branches", - "props": Object { - "data-key": 1, - "data-label": "Branches", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "pull-requests", - "props": Object { - "data-key": 2, - "data-label": "Pull requests", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "workspaces", - "props": Object { - "data-key": 3, - "data-label": "Workspaces", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "last-commit", - "props": Object { - "data-key": 4, - "data-label": "Last Commit", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ + + Some action + , + +
+ Another action +
+ , + , + + Third action + , + ] + } + isOpen={false} + isPlain={true} + position="right" + toggle={ + + } + > + + Some action + , + +
+ Another action +
+ , + , + + Third action + , + ] + } + isGrouped={false} + isOpen={false} + isPlain={true} + menuAppendTo="inline" + onSelect={[Function]} + position="right" + toggle={ + + } + > +
+ + +
, + } + } + > + + + , + } + } + > + + + + + + + + + + + + + + + + + + Another action + , + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + key="4-row" + onRow={[Function]} + renderers={ Object { - "onClick": [Function], - "title": "Some action", - }, + "cell": [Function], + "row": [Function], + "wrapper": [Function], + } + } + rowData={ Object { - "onClick": [Function], - "title":
- Another action -
, - }, + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", + }, + "id": 4, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, + } + } + rowIndex={4} + rowKey="4-row" + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Another action + , + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + key="5-row" + onRow={[Function]} + renderers={ Object { - "isSeparator": true, - "onClick": null, - }, + "cell": [Function], + "row": [Function], + "wrapper": [Function], + } + } + rowData={ Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "column-5", - "props": Object { - "data-key": 5, - "data-label": "", - }, - }, - ] - } - key="8-row" - onRow={[Function]} - renderers={ - Object { - "cell": [Function], - "row": [Function], - "wrapper": [Function], - } - } - rowData={ - Object { - "branches": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "two", - }, - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - "header-cell": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "one", - }, - "id": 8, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": false, - "isLastVisible": false, - "last-commit": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "five", - }, - "pull-requests": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "three", - }, - "workspaces": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "four", - }, - } - } - rowIndex={8} - rowKey="8-row" - > - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Another action + , + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], }, - "columnIndex": 5, "property": "column-5", - "rowIndex": 8, - } + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + key="6-row" + onRow={[Function]} + renderers={ + Object { + "cell": [Function], + "row": [Function], + "wrapper": [Function], } - items={ - Array [ - Object { - "onClick": [Function], - "title": "Some action", + } + rowData={ + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "onClick": [Function], - "title":
- Another action -
, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "isSeparator": true, - "onClick": null, + "title": "one", + }, + "id": 6, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "onClick": [Function], - "title": "Third action", + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - ] + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, } - rowData={ + } + rowIndex={6} + rowKey="6-row" + > + - - Some action - , - -
- Another action -
- , - , - - Third action - , - ] - } - isOpen={false} - isPlain={true} - position="right" - toggle={ - + rowProps={ + Object { + "rowIndex": 6, + "rowKey": "6-row", } + } + > + - + + + + + + + + + + + + + + + + + + + + + + - - - , - } - } + + + + + + - - - - - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "branches", - "props": Object { - "data-key": 1, - "data-label": "Branches", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "pull-requests", - "props": Object { - "data-key": 2, - "data-label": "Pull requests", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "workspaces", - "props": Object { - "data-key": 3, - "data-label": "Workspaces", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "last-commit", - "props": Object { - "data-key": 4, - "data-label": "Last Commit", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ + + Some action + , + +
+ Another action +
+ , + , + + Third action + , + ] + } + isOpen={false} + isPlain={true} + position="right" + toggle={ + + } + > + + Some action + , + +
+ Another action +
+ , + , + + Third action + , + ] + } + isGrouped={false} + isOpen={false} + isPlain={true} + menuAppendTo="inline" + onSelect={[Function]} + position="right" + toggle={ + + } + > +
+ + +
, + } + } + > + + + , + } + } + > + + + + + + + + + + + + + + + + + + Another action + , + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + key="7-row" + onRow={[Function]} + renderers={ Object { - "onClick": [Function], - "title": "Some action", - }, + "cell": [Function], + "row": [Function], + "wrapper": [Function], + } + } + rowData={ Object { - "onClick": [Function], - "title":
- Another action -
, - }, + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", + }, + "id": 7, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, + } + } + rowIndex={7} + rowKey="7-row" + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Another action + , + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + key="8-row" + onRow={[Function]} + renderers={ Object { - "isSeparator": true, - "onClick": null, - }, + "cell": [Function], + "row": [Function], + "wrapper": [Function], + } + } + rowData={ Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "column-5", - "props": Object { - "data-key": 5, - "data-label": "", - }, - }, - ] - } - key="9-row" - onRow={[Function]} - renderers={ - Object { - "cell": [Function], - "row": [Function], - "wrapper": [Function], - } - } - rowData={ - Object { - "branches": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "two", - }, - "cells": Array [ - "one", - "two", - "three", - "four", - "five", - ], - "disableActions": true, - "header-cell": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "one", - }, - "id": 9, - "isExpanded": undefined, - "isFirst": false, - "isFirstVisible": false, - "isHeightAuto": false, - "isLast": true, - "isLastVisible": true, - "last-commit": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "five", - }, - "pull-requests": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "three", - }, - "workspaces": Object { - "formatters": Array [], - "props": Object { - "isVisible": true, - }, - "title": "four", - }, - } - } - rowIndex={9} - rowKey="9-row" - > - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Another action + , + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], }, - "columnIndex": 5, "property": "column-5", - "rowIndex": 9, - } + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + key="9-row" + onRow={[Function]} + renderers={ + Object { + "cell": [Function], + "row": [Function], + "wrapper": [Function], } - isDisabled={true} - items={ - Array [ - Object { - "onClick": [Function], - "title": "Some action", + } + rowData={ + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "onClick": [Function], - "title":
- Another action -
, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "disableActions": true, + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "isSeparator": true, - "onClick": null, + "title": "one", + }, + "id": 9, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": true, + "isLastVisible": true, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - Object { - "onClick": [Function], - "title": "Third action", + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, }, - ] + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, } - rowData={ + } + rowIndex={9} + rowKey="9-row" + > + - - Some action - , - -
- Another action -
- , - , - - Third action - , - ] - } - isOpen={false} - isPlain={true} - position="right" - toggle={ - + rowProps={ + Object { + "rowIndex": 9, + "rowKey": "9-row", } + } + > + - + + + + + + + + + + + + + + + + + + + + + + - - - , - } - } + component="td" + data-key={4} + dataLabel="Last Commit" + onMouseEnter={[Function]} + textCenter={false} + > + + + + + + + - - - - - - - - - - -
- + Another action + , + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + rowIndex={0} > - 		+ + + + + + + Branches + - Branches - - Pull requests - - Workspaces - - Last Commit - - -
+ Pull requests + + + + Workspaces + + + + Last Commit + + + + + + +
- - - - - - - -
+ one + + + + two + + + + three + + + + four + + + + five + + + + + Another action + , + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + "columnIndex": 5, + "property": "column-5", + "rowIndex": 1, + } + } + items={ + Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ] + } + rowData={ + Object { + "branches": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "two", + }, + "cells": Array [ + "one", + "two", + "three", + "four", + "five", + ], + "header-cell": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "one", + }, + "id": 1, + "isExpanded": undefined, + "isFirst": false, + "isFirstVisible": false, + "isHeightAuto": false, + "isLast": false, + "isLastVisible": false, + "last-commit": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "five", + }, + "pull-requests": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "three", + }, + "workspaces": Object { + "formatters": Array [], + "props": Object { + "isVisible": true, + }, + "title": "four", + }, + } + } + > + + Some action + , + +
+ Another action +
+ , + , + + Third action + , + ] + } + isOpen={false} + isPlain={true} + position="right" + toggle={ + + } + > + + Some action + , + +
+ Another action +
+ , + , + + Third action + , + ] + } + isGrouped={false} + isOpen={false} + isPlain={true} + menuAppendTo="inline" + onSelect={[Function]} + position="right" + toggle={ + + } + > +
+ + +
, + } + } + > + + + , + } + } + > + + + + + + + +
+ + Some action + , + +
+ Another action +
+ , + , + + Third action + , + ] + } + isOpen={false} + isPlain={true} + position="right" + toggle={ + + } + > + + Some action + , + +
+ Another action +
+ , + , + + Third action + , + ] + } + isGrouped={false} + isOpen={false} + isPlain={true} + menuAppendTo="inline" + onSelect={[Function]} + position="right" + toggle={ + + } + > +
+ + +
, + } + } + > + + +
, + } + } + > + + + + + + + + + + + + + + + + + + + + + + + + + + + `; @@ -101913,7 +116082,8 @@ exports[`Simple table aria-label 1`] = ` > - - - -
- + + +
+ + - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- Header cell - - Branches - - Pull requests - - Workspaces - - Last Commit -
+
+
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -109711,7 +125037,8 @@ exports[`Simple table caption 1`] = ` variant={null} > - - - - -
- + + +
- Simple Table -
+ + + - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
+ Simple Table +
- Header cell - - Branches - - Pull requests - - Workspaces - - Last Commit -
+
+
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -117518,7 +133999,8 @@ exports[`Simple table header 1`] = ` Header title - - - -
- + + +
+ + - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- Header cell - - Branches - - Pull requests - - Workspaces - - Last Commit -
+
+
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -125321,7 +142957,8 @@ exports[`Sortable table 1`] = ` > - - - -
- + + +
+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+
+
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -133191,7 +151986,8 @@ exports[`Table variants Breakpoint - 1`] = ` > - - - -
- + + +
+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -141060,7 +161014,8 @@ exports[`Table variants Breakpoint - grid 1`] = ` > - - - +
-
- + -
- - - + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+ + + + + + + Branches + + + + Pull requests + + + + Workspaces + + + + Last Commit +
+
+
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -148929,7 +170042,8 @@ exports[`Table variants Breakpoint - grid-2xl 1`] = ` > - - - -
- + + +
+ + - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+ + + + + + + Branches + + + + Pull requests + + + + Workspaces + + + + Last Commit +
+
+
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -156798,7 +179070,8 @@ exports[`Table variants Breakpoint - grid-lg 1`] = ` > - - - -
- + + +
+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -164667,7 +188098,8 @@ exports[`Table variants Breakpoint - grid-md 1`] = ` > - - - +
-
- + -
- - - + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+ + + + + + + Branches + + + + Pull requests + + + + Workspaces + + + + Last Commit +
+
+
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -172536,7 +197126,8 @@ exports[`Table variants Breakpoint - grid-xl 1`] = ` > - - - -
- + + +
+ + - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+ + + + + + + Branches + + + + Pull requests + + + + Workspaces + + + + Last Commit +
+
+
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; @@ -180405,7 +206154,8 @@ exports[`Table variants Size - compact 1`] = ` > - - - -
- + + +
+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - one - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - two - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - three - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - four - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - five - - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+
+
+
+
+ + + + + + + + + one + + + + + + + + + two + + + + + + + + + three + + + + + + + + + four + + + + + + + + + five + + + + + + + + + + + + + + + + + + + + `; diff --git a/packages/react-table/src/components/Table/base/provider.tsx b/packages/react-table/src/components/Table/base/provider.tsx index dffb6379ecb..771b53e5d2a 100644 --- a/packages/react-table/src/components/Table/base/provider.tsx +++ b/packages/react-table/src/components/Table/base/provider.tsx @@ -11,6 +11,8 @@ export interface ProviderProps extends RenderersTypes { children?: React.ReactNode; role?: string; className?: string; + variant?: 'compact'; + borders?: boolean; } export const ProviderContext = React.createContext({ diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx index b724c7e1352..e4d2757fd05 100644 --- a/packages/react-table/src/components/Table/base/types.tsx +++ b/packages/react-table/src/components/Table/base/types.tsx @@ -7,6 +7,12 @@ import * as React from 'react'; import { TooltipProps, PopoverProps } from '@patternfly/react-core'; +import { TableComposable } from '../../TableComposable/TableComposable'; +import { Thead } from '../../TableComposable/Thead'; +import { Tbody } from '../../TableComposable/Tbody'; +import { Tr } from '../../TableComposable/Tr'; +import { Th } from '../../TableComposable/Th'; +import { Td } from '../../TableComposable/Td'; // Cell Type export interface CellType { @@ -54,16 +60,16 @@ export interface RowType { // Table Defaults export const TableDefaults = { renderers: { - table: 'table', + table: TableComposable, header: { - wrapper: 'thead', - row: 'tr', - cell: 'th' + wrapper: Thead, + row: Tr, + cell: Th }, body: { - wrapper: 'tbody', - row: 'tr', - cell: 'td' + wrapper: Tbody, + row: Tr, + cell: Td } } }; @@ -101,12 +107,12 @@ export interface RendererType { export interface RenderersTypes { columns: ColumnsType; renderers?: { - table?: string; + table?: any; header?: RendererType; body?: RendererType; }; components?: { - table?: string; + table?: any; header?: { wrapper?: rendererType; row?: rendererType; diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index 18fe45933b4..f7aa6cdabee 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/packages/react-table/src/components/Table/examples/Table.md @@ -9,76 +9,183 @@ propComponents: 'TableBody', 'EditableSelectInputCell', 'EditableTextCell', - 'RowErrors', - 'IHeaderRow', - 'IRowData', - 'IColumn', - 'IExtraRowData', - 'IExtraColumnData', - 'ISortBy', - 'IAction', - 'ISeparator', - 'ICell', - 'IRowCell', - 'IValidatorDef', - 'IRow', + 'TableComposable', + 'Thead', + 'Tbody', + 'Tr', + 'Th', + 'Td', + 'Caption', ] ouia: true --- Note: Table lives in its own package at [@patternfly/react-table](https://www.npmjs.com/package/@patternfly/react-table)! -import { -Table, -TableHeader, -TableBody, -TableText, -sortable, -SortByDirection, -headerCol, -TableVariant, -expandable, -compoundExpand, -cellWidth, -textCenter, -wrappable, -truncate, -nowrap, -breakWord, -fitContent, -classNames, -Visibility, -getErrorTextByValidator, -cancelCellEdits, -validateCellEdits, -applyCellEdits, -EditableTextCell, -EditableSelectInputCell -} from '@patternfly/react-table'; - -import { EmptyStateIcon } from '@patternfly/react-core'; - import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/js/icons/code-branch-icon'; import CodeIcon from '@patternfly/react-icons/dist/js/icons/code-icon'; import CubeIcon from '@patternfly/react-icons/dist/js/icons/cube-icon'; +import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; + import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; import DemoSortableTable from './DemoSortableTable'; -## Examples +## Table examples ### Basic +The `Table` component is a configuration based component that takes a less declarative and more implicit approach about laying out the table structure, such as the rows and cells within it. For a more explicit and declarative approach, you can use the `TableComposable` component. + ```js import React from 'react'; +import { Table, TableHeader, TableBody } from '@patternfly/react-table'; +import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; + +class SimpleTable extends React.Component { + constructor(props) { + super(props); + this.state = { + choice: 'default' + }; + this.handleItemClick = this.handleItemClick.bind(this); + } + + handleItemClick(isSelected, event) { + this.setState({ + choice: event.currentTarget.id + }); + } + + render() { + const { choice } = this.state; + + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['Repository one', 'Branch one', 'PR one', 'Workspace one', 'Commit one'], + ['Repository two', 'Branch two', 'PR two', 'Workspace two', 'Commit two'], + ['Repository three', 'Branch three', 'PR three', 'Workspace three', 'Commit three'] + ]; + + return ( + + + + + + + + + +
+ + ); + } +} +``` + +### Row click handler and header cell tooltips/popovers + +Array items for columns provided to the `Table`'s `cells` prop, can be simple strings or objects. + +``` +cells: (ICell | string)[]; +``` + +ICell (excerpt): + +``` +interface ICell { + /* cell contents */ + title?: string | React.ReactNode; + /** transformations applied to the header cell */ + transforms?: ITransform[]; + /** transformations applied to the cells within the column's body */ + cellTransforms?: ITransform[]; + /** Additional header props, it contains the info prop as well which can be used to add tooltip/popover */ + header?: HeaderType; +} +``` + +If you wish to pass additional `props`, `formatters`, or add a tooltip/popover, use objects. +Examples: + +``` +// simple +columns: ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'] +// with tooltip +columns: [ + { + title: 'Repositories', + transforms: [ + info({ + tooltip: 'More information about repositories' + }) + ] + } +] +// center header and body cells within the column +columns: [ + { + title: 'Last commit', + transforms: [textCenter], + cellTransforms: [textCenter] + } +] +``` + +Similarly, the rows array can contain string arrays, or object arrays + +``` +rows: (IRow | string[])[] +``` -import { Table, TableHeader, TableBody, textCenter, info } from '@patternfly/react-table'; +IRow (excerpt): + +``` +interface IRow extends RowType { + cells?: (React.ReactNode | IRowCell)[]; + props?: any; + fullWidth?: boolean; + noPadding?: boolean; +} +interface IRowCell { + title?: string | React.ReactNode; + props?: any; + formatters?: IFormatter[]; +} +``` + +```js +import React from 'react'; +import { Table, TableHeader, TableBody, textCenter } from '@patternfly/react-table'; import styles from '@patternfly/react-styles/css/components/Table/table'; -class SimpleTable extends React.Component { +class RowClickTable extends React.Component { constructor(props) { super(props); this.state = { @@ -115,15 +222,13 @@ class SimpleTable extends React.Component { }, 'Workspaces', { - title: 'Last Commit', + title: 'Last commit', transforms: [textCenter], cellTransforms: [textCenter] } ], rows: [ - { - cells: ['one', 'two', 'three', 'four', 'five'] - }, + ['Repository one', 'Branch one', 'PR one', 'Workspace one', 'Commit one'], { cells: [ { @@ -148,44 +253,6 @@ class SimpleTable extends React.Component { } ] }; - } - - render() { - const { columns, rows } = this.state; - - return ( - - - -
- ); - } -} -``` - -### Row click handler - -```js -import React from 'react'; -import { Table, TableHeader, TableBody } from '@patternfly/react-table'; - -class RowClickTable extends React.Component { - constructor(props) { - super(props); - this.state = { - columns: [{ title: 'Repositories' }, 'Branches', { title: 'Pull requests' }, 'Workspaces'], - rows: [ - { - cells: ['Repositories one', 'Branches one', 'Pull requests one', 'Workspaces one'] - }, - { - cells: ['Repositories two', 'Branches two', 'Pull requests two', 'Workspaces two'] - }, - { - cells: ['Repositories three', 'Branches three', 'Pull requests three', 'Workspaces three'] - } - ] - }; this.rowClickHandler = (event, row) => { console.log('handle row click', row); }; @@ -195,8 +262,8 @@ class RowClickTable extends React.Component { const { columns, rows } = this.state; return ( - - +
+
); @@ -271,11 +338,22 @@ class RowWrapperTable extends React.Component { } ``` -### Sortable +### Sortable & wrapping headers + +Note: If you want to add a tooltip/popover to a sortable header, in the `transforms` array the `info` transform has to precede the `sortable` transform. ```js import React from 'react'; -import { Table, TableHeader, TableBody, sortable, info, SortByDirection } from '@patternfly/react-table'; +import { + Table, + TableHeader, + TableBody, + sortable, + SortByDirection, + wrappable, + cellWidth, + info +} from '@patternfly/react-table'; class SortableTable extends React.Component { constructor(props) { @@ -293,7 +371,10 @@ class SortableTable extends React.Component { ] }, { title: 'Pull requests', transforms: [sortable] }, - 'Workspaces', + { + title: 'Workspaces - Also this long header will wrap since we have applied the wrappable transform', + transforms: [sortable, wrappable, cellWidth(20)] + }, { title: 'Last commit', transforms: [ @@ -337,78 +418,6 @@ class SortableTable extends React.Component { } ``` -### Sortable with wrapping headers - -```js -import React from 'react'; -import { Table, TableHeader, TableBody, sortable, SortByDirection, wrappable } from '@patternfly/react-table'; - -class SortableWrappingHeaders extends React.Component { - constructor(props) { - super(props); - this.state = { - columns: [ - { - title: 'This is a really long table header that goes on for a long time 1.', - transforms: [sortable, wrappable] - }, - { - title: 'This is a really long table header that goes on for a long time 2.', - transforms: [sortable, wrappable] - }, - { - title: 'This is a really long table header that goes on for a long time 3.', - transforms: [sortable, wrappable] - }, - { - title: 'This is a really long table header that goes on for a long time 4.', - transforms: [sortable, wrappable] - }, - { - title: 'This is a really long table header that goes on for a long time 5.', - transforms: [sortable, wrappable] - } - ], - rows: [ - ['one', 'two', 'a', 'four', 'five'], - ['a', 'two', 'k', 'four', 'five'], - ['p', 'two', 'b', 'four', 'five'] - ], - sortBy: {} - }; - this.onSort = this.onSort.bind(this); - } - - onSort(_event, index, direction) { - const sortedRows = this.state.rows.sort((a, b) => (a[index] < b[index] ? -1 : a[index] > b[index] ? 1 : 0)); - this.setState({ - sortBy: { - index, - direction - }, - rows: direction === SortByDirection.asc ? sortedRows : sortedRows.reverse() - }); - } - - render() { - const { columns, rows, sortBy } = this.state; - - return ( - - - -
- ); - } -} -``` - ### Selectable ```js @@ -421,8 +430,7 @@ import { SortByDirection, headerCol, TableVariant, - expandable, - cellWidth + expandable } from '@patternfly/react-table'; import { Checkbox } from '@patternfly/react-core'; @@ -435,7 +443,7 @@ class SelectableTable extends React.Component { 'Branches', { title: 'Pull requests' }, 'Workspaces', - 'Last Commit' + 'Last commit' ], rows: [ { @@ -520,8 +528,7 @@ import { SortByDirection, headerCol, TableVariant, - expandable, - cellWidth + expandable } from '@patternfly/react-table'; class SelectableTable extends React.Component { @@ -533,7 +540,7 @@ class SelectableTable extends React.Component { 'Branches', { title: 'Pull requests' }, 'Workspaces', - 'Last Commit' + 'Last commit' ], rows: [ { @@ -587,127 +594,100 @@ class SelectableTable extends React.Component { } ``` -### Simple actions +### Actions and first cell in body rows as th + +To use actions you can either specify an array of actions and pass that into the `Table`'s `actions` prop, or for more control you can use the `actionResolver` callback prop to add actions conditionally. ```js import React from 'react'; import { Table, TableHeader, TableBody, headerCol } from '@patternfly/react-table'; +import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; -class SimpleActionsTable extends React.Component { +class ActionsTable extends React.Component { constructor(props) { super(props); this.state = { + propToUse: 'actions', columns: [ { title: 'Repositories', cellTransforms: [headerCol()] }, 'Branches', { title: 'Pull requests' }, 'Workspaces', - 'Last Commit' + 'Last commit' ], rows: [ { - cells: ['one', 'two', 'a', 'four', 'five'] + cells: ['a', 'two', 1, 'four', 'five'] }, { - cells: ['a', 'two', 'k', 'four', 'five'] - }, - { - cells: ['p', 'two', 'b', 'four', 'five'], + cells: ['disable actions', 'two', 3, 'four', 'five'], disableActions: true - } - ], - actions: [ - { - title: 'Some action', - onClick: (event, rowId, rowData, extra) => console.log('clicked on Some action, on row: ', rowId) - }, - { - title: Link action }, { - isSeparator: true - }, - { - title: 'Third action', - onClick: (event, rowId, rowData, extra) => console.log('clicked on Third action, on row: ', rowId) - } - ] - }; - } - - render() { - const { columns, rows, actions } = this.state; - return ( - - - -
- ); - } -} -``` - -### Actions - -```js -import React from 'react'; -import { Table, TableHeader, TableBody, headerCol } from '@patternfly/react-table'; - -class ActionsTable extends React.Component { - constructor(props) { - super(props); - this.state = { - columns: [ - { title: 'Repositories', cellTransforms: [headerCol()] }, - 'Branches', - { title: 'Pull requests' }, - 'Workspaces', - 'Last Commit' - ], - rows: [ - { - cells: ['one', 'two', 'a', 'four', 'five'], + cells: ['green actions', 'two', 4, 'four', 'five'], type: 'green' }, { - cells: ['a', 'two', 'k', 'four', 'five'], + cells: ['extra action props', 'two', 5, 'four', 'five'], actionProps: { 'data-specific-attr': 'some-value' } }, { - cells: ['p', 'two', 'b', 'four', 'five'], + cells: ['blue actions', 'two', 6, 'four', 'five'], type: 'blue' - }, - { - cells: ['5', '2', 'b', 'four', 'five'] } ] }; + this.handleItemClick = this.handleItemClick.bind(this); + } + + /** + * Use actions or actionResolver, not both + */ + actions() { + return [ + { + title: 'Some action', + onClick: (event, rowId, rowData, extra) => console.log('clicked on Some action, on row: ', rowId) + }, + { + title: Link action + }, + { + isSeparator: true + }, + { + title: 'Third action', + onClick: (event, rowId, rowData, extra) => console.log('clicked on Third action, on row: ', rowId) + } + ]; } + /** + * Use actions or actionResolver, not both + */ actionResolver(rowData, { rowIndex }) { if (rowIndex === 1) { return null; } - const thirdAction = - rowData.type === 'blue' - ? [ - { - isSeparator: true - }, - { - title: 'Third action', - onClick: (event, rowId, rowData, extra) => - console.log(`clicked on Third action, on row ${rowId} of type ${rowData.type}`) - } - ] - : []; + const thirdAction = rowData.type + ? [ + { + isSeparator: true + }, + { + title: `${rowData.type} action`, + onClick: (event, rowId, rowData, extra) => + console.log(`clicked on ${rowData.type} action, on row ${rowId} of type ${rowData.type}`) + } + ] + : []; return [ { - title: 'Some action', + title: 'actionResolver action', onClick: (event, rowId, rowData, extra) => console.log(`clicked on Some action, on row ${rowId} of type ${rowData.type}`) }, @@ -724,150 +704,62 @@ class ActionsTable extends React.Component { return rowIndex === 3; } - render() { - const { columns, rows } = this.state; - return ( - - - -
- ); - } -} -``` - -### First cell as header - -```js -import React from 'react'; -import { Table, TableHeader, TableBody, headerCol } from '@patternfly/react-table'; - -class CellHeader extends React.Component { - constructor(props) { - super(props); - this.state = { - columns: [ - { title: 'Header cell', cellTransforms: [headerCol('selectable')] }, - 'Branches', - { title: 'Pull requests' }, - 'Workspaces', - 'Last Commit' - ], - rows: [['one', 'two', 'three', 'four', 'five']] - }; - } - - render() { - const { columns, rows } = this.state; - - return ( - - - -
- ); - } -} -``` - -### Compact - -```js -import React from 'react'; -import { Table, TableHeader, TableBody, TableVariant } from '@patternfly/react-table'; - -class CompactTable extends React.Component { - constructor(props) { - super(props); - this.state = { - columns: [ - { title: 'Header cell' }, - 'Branches', - { title: 'Pull requests', props: { className: 'pf-u-text-align-center' } }, - { title: '' /* deliberately empty */, dataLabel: 'Label for mobile view' } - ], - rows: [ - ['one', 'two', 'three', 'four'], - ['one', 'two', 'three', 'four'], - ['one', 'two', 'three', 'four'] - ] - }; - } - - render() { - const { columns, rows } = this.state; - - return ( - - - -
- ); - } -} -``` - -### Compact borderless rows - -```js -import React from 'react'; -import { Table, TableHeader, TableBody, TableVariant } from '@patternfly/react-table'; - -class CompactTableBorderlessRows extends React.Component { - constructor(props) { - super(props); - this.state = { - columns: [ - { title: 'Header cell' }, - 'Branches', - { title: 'Pull requests', props: { className: 'pf-u-text-align-center' } }, - { title: '' /* deliberately empty */, dataLabel: 'Label for mobile view' } - ], - rows: [ - ['one', 'two', 'three', 'four'], - ['one', 'two', 'three', 'four'], - ['one', 'two', 'three', 'four'] - ] - }; + handleItemClick(isSelected, event) { + const action = event.currentTarget.id; + this.setState({ + propToUse: action + }); } render() { - const { columns, rows } = this.state; - + const { columns, rows, propToUse } = this.state; return ( - - - -
+ + + + + + + + +
+ ); } } ``` -### Compact expandable +### Expandable ```js import React from 'react'; import { Table, TableHeader, TableBody, TableVariant, expandable } from '@patternfly/react-table'; +import { Checkbox } from '@patternfly/react-core'; class CompactExpandableTable extends React.Component { constructor(props) { super(props); this.state = { + isCompact: true, columns: [ { title: 'Header cell', @@ -936,123 +828,35 @@ class CompactExpandableTable extends React.Component { colSpan: 2 } } - ] - }, - { - isOpen: true, - cells: ['parent - 6', 'two', 'three', 'four'] - }, - { - parent: 11, - fullWidth: true, - cells: [ - { - title: "fullWidth, spans the collapsible column and 'Header cell'", - props: { - colSpan: 2 - } - }, - { - title: "fullWidth, spans 'Branches' and 'Pull requests'", - props: { - colSpan: 2 - } - }, - 'fullWidth, spans the empty column' - ] - } - ] - }; - this.onCollapse = this.onCollapse.bind(this); - } - - onCollapse(event, rowKey, isOpen) { - const { rows } = this.state; - /** - * Please do not use rowKey as row index for more complex tables. - * Rather use some kind of identifier like ID passed with each row. - */ - rows[rowKey].isOpen = isOpen; - this.setState({ - rows - }); - } - - render() { - const { columns, rows } = this.state; - - return ( - - - -
- ); - } -} -``` - -### Expandable - -```js -import React from 'react'; -import { Table, TableHeader, TableBody, expandable } from '@patternfly/react-table'; - -class ExpandableTable extends React.Component { - constructor(props) { - super(props); - this.state = { - columns: [ - { - title: 'Header cell', - cellFormatters: [expandable] - }, - 'Branches', - { title: 'Pull requests' }, - 'Workspaces', - { - title: 'Last Commit' - } - ], - rows: [ - { - cells: ['one', 'two', 'three', 'four', 'five'] + ] }, { isOpen: true, - cells: ['parent - 1', 'two', 'three', 'four', 'five'] - }, - { - parent: 1, - fullWidth: true, - cells: ['child - 1'] - }, - { - isOpen: false, - cells: ['parent - 2', 'two', 'three', 'four', 'five'] - }, - { - parent: 3, - cells: ['child - 2'] - }, - { - isOpen: false, - cells: ['parent - 3', 'two', 'three', 'four', 'five'] + cells: ['parent - 6', 'two', 'three', 'four'] }, { - parent: 5, + parent: 11, fullWidth: true, - noPadding: true, - cells: ['child - 3'] + cells: [ + { + title: "fullWidth, spans the collapsible column and 'Header cell'", + props: { + colSpan: 2 + } + }, + { + title: "fullWidth, spans 'Branches' and 'Pull requests'", + props: { + colSpan: 2 + } + }, + 'fullWidth, spans the empty column' + ] } ] }; this.onCollapse = this.onCollapse.bind(this); + this.toggleCompact = this.toggleCompact.bind(this); } onCollapse(event, rowKey, isOpen) { @@ -1067,14 +871,36 @@ class ExpandableTable extends React.Component { }); } + toggleCompact(checked) { + this.setState({ + isCompact: checked + }); + } + render() { - const { columns, rows } = this.state; + const { columns, rows, isCompact } = this.state; return ( - - - -
+ + + + + +
+ ); } } @@ -1090,7 +916,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/js/icons/code-branch-ic import CodeIcon from '@patternfly/react-icons/dist/js/icons/code-icon'; import CubeIcon from '@patternfly/react-icons/dist/js/icons/cube-icon'; -// https://github.com/patternfly/patternfly-react/blob/master/packages/react-table/src/components/Table/demo/DemoSortableTable.js +// https://github.com/patternfly/patternfly-react/blob/master/packages/react-table/src/components/Table/examples/DemoSortableTable.js import DemoSortableTable from './demo/DemoSortableTable'; class CompoundExpandableTable extends React.Component { @@ -1308,11 +1134,11 @@ class CompoundExpandableTable extends React.Component { } ``` -### With width modifiers +### With width and breakpoint visibility modifiers ```js import React from 'react'; -import { Table, TableHeader, TableBody, cellWidth } from '@patternfly/react-table'; +import { Table, TableHeader, TableBody, cellWidth, classNames, Visibility } from '@patternfly/react-table'; class WidthTable extends React.Component { constructor(props) { @@ -1320,64 +1146,40 @@ class WidthTable extends React.Component { this.state = { columns: [ { title: 'Header cell', transforms: [cellWidth(10)] }, - 'Branches', - { title: 'Pull requests', transforms: [cellWidth(30)] }, - 'Workspaces', - { - title: 'Last Commit', - transforms: [cellWidth('max')] - } - ], - rows: [['one', 'two', 'three', 'four', 'five']] - }; - } - - render() { - const { columns, rows } = this.state; - - return ( - - - -
- ); - } -} -``` - -### Breakpoint modifiers - -```js -import React from 'react'; -import { Table, TableHeader, TableBody, sortable, classNames, Visibility } from '@patternfly/react-table'; - -class HiddenVisibleBreakpointTable extends React.Component { - constructor(props) { - super(props); - this.state = { - columns: [ { - title: 'Repositories', + title: 'Branches (visible only on md)', columnTransforms: [ - classNames(Visibility.hidden, Visibility.visibleOnMd, Visibility.hiddenOnLg, Visibility.visibleOn_2xl) + classNames(Visibility.hidden, Visibility.visibleOnMd, Visibility.hiddenOnLg, Visibility.visibleOn2Xl) ] }, - 'Branches', { - title: 'Pull requests', - columnTransforms: [classNames(Visibility.hiddenOnMd, Visibility.visibleOnLg, Visibility.hiddenOn_2xl)] + title: 'Pull requests (hidden only on md)', + columnTransforms: [classNames(Visibility.hiddenOnMd, Visibility.visibleOnLg)] }, - 'Workspaces', { - title: 'Last Commit', + title: 'Workspaces (hidden on xs)', columnTransforms: [classNames(Visibility.hidden, Visibility.visibleOnSm)] + }, + { + title: 'Last commit', + transforms: [cellWidth(30)] } ], rows: [ - ['Visible only on md breakpoint', '10', 'Hidden only on md breakpoint', '5', 'Hidden on xs breakpoint'], - ['Repository 2', '10', '25', '5', '2 days ago'], - ['Repository 3', '10', '25', '5', '2 days ago'], - ['Repository 4', '10', '25', '5', '2 days ago'] + [ + 'one - 1', + 'two - 1 (visible only on md)', + 'three - 1 (hidden only on md)', + 'four - 1 (hidden on xs)', + 'five - 1' + ], + [ + 'one - 2', + 'two - 2 (visible only on md)', + 'three - 2 (hidden only on md)', + 'four - 2 (hidden on xs)', + 'five - 2' + ] ] }; } @@ -1386,7 +1188,7 @@ class HiddenVisibleBreakpointTable extends React.Component { const { columns, rows } = this.state; return ( - +
@@ -1526,7 +1328,7 @@ import { import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon'; EmptyStateTable = () => { - const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit']; + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; const rows = []; return ( @@ -2009,3 +1811,1017 @@ class EditableRowsTable extends React.Component { } } ``` + +## TableComposable examples + +### Composable: Basic + +A basic example using the composable table components. The `TableComposable` component differs from the regular `Table` component, in that it allows you to compose the table by nesting the relevant `Thead`, `Tbody`, `Tr`, `Th` and `Td` components within it. For a less declarative and more implicit approach, use the `Table` component instead. + +Some general notes: + +- Provide `dataLabel` prop to the `Td` components so that in mobile view the cell has a label to provide context. +- If you want a table caption, simply place a `My caption` as the first child within a `TableComposable`. +- You can set the `TableComposable` variant to `compact` + +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td, Caption } from '@patternfly/react-table'; +import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; + +ComposableTableBasic = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'three', 'four', 'five'], + ['one - 2', null, null, 'four - 2', 'five - 2'], + ['one - 3', 'two - 3', 'three - 3', 'four - 3', 'five - 3'] + ]; + const [choice, setChoice] = React.useState('default'); + const handleItemClick = (isSelected, event) => { + const id = event.currentTarget.id; + setChoice(id); + }; + return ( + + + + + + + + Simple table using composable components + + + {columns.map((column, columnIndex) => ( + {column} + ))} + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + ))} + + + + ); +}; +``` + +### Composable: Row click handler, custom row wrapper, header tooltips & popovers + +This example demonstrates customizing rows, adding tooltip and popover information to header items, and some other misc. props. + +- If you add the `noWrap` prop to `Thead`, it won't wrap it if there is no space +- You can add the `textCenter` prop to `Th` or `Td` to center the contents +- You can pass `onClick`, `className`, `style` and more to `Tr` + +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; + +ComposableTableMisc = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'three', 'four', 'five'], + [{ title: 'one - 2', colSpan: 3 }, null, null, 'four - 2', 'five - 2'], + ['one - 3', 'two - 3', 'three - 3', 'four - 3', { title: 'five - 3 (not centered)', textCenter: false }] + ]; + const onRowClick = (event, rowIndex, row) => { + console.log(`handle row click ${rowIndex}`, row); + }; + return ( + + + + + {columns[0]} + + {columns[1]} + + More information on pull requests + + ), + ariaLabel: 'More information on pull requests', + popoverProps: { + headerContent: 'Pull requests', + footerContent: Click here for even more info + } + }} + > + {columns[2]} + + {columns[3]} + {columns[4]} + + + + {rows.map((row, rowIndex) => { + const isOddRow = (rowIndex + 1) % 2; + const customStyle = { + borderLeft: '3px solid var(--pf-global--primary-color--100)' + }; + return ( + onRowClick(event, rowIndex, row)} + className={isOddRow ? 'odd-row-class' : 'even-row-class'} + style={isOddRow ? customStyle : {}} + > + {row.map((cell, cellIndex) => { + if (!cell) { + return null; + } + let cellObject; + if (typeof cell !== 'object') { + cellObject = { + title: cell + }; + } else { + cellObject = cell; + } + const { title, ...rest } = cellObject; + return ( + + {title} + + ); + })} + + ); + })} + + + ); +}; +``` + +### Composable: Sortable & wrapping headers + +This example demonstrates making columns sortable, and wrapping header text. + +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; + +ComposableTableSortable = () => { + const columns = [ + 'This is a really long table header that goes on for a long time 1.', + 'This is a really long table header that goes on for a long time 2.', + 'This is a really long table header that goes on for a long time 3.', + 'This is a really long table header that goes on for a long time 4.', + 'This is a really long table header that goes on for a long time 5.' + ]; + const [rows, setRows] = React.useState([ + ['one', 'two', 'a', 'four', 'five'], + ['a', 'two', 'k', 'four', 'five'], + ['p', 'two', 'b', 'four', 'five'] + ]); + // index of the currently active column + const [activeSortIndex, setActiveSortIndex] = React.useState(-1); + // sort direction of the currently active column + const [activeSortDirection, setActiveSortDirection] = React.useState('none'); + const onSort = (event, index, direction) => { + setActiveSortIndex(index); + setActiveSortDirection(direction); + // sorts the rows + const updatedRows = rows.sort((a, b) => { + if (typeof a[index] === 'number') { + // numeric sort + if (direction === 'asc') { + return a[index] - b[index]; + } + return b[index] - a[index]; + } else { + // string sort + if (direction === 'asc') { + return a[index].localeCompare(b[index]); + } + return b[index].localeCompare(a[index]); + } + }); + setRows(updatedRows); + }; + return ( + + + + {columns.map((column, columnIndex) => { + // In this example, wrap all but the first column just to demonstrate + const modifier = columnIndex !== 0 ? 'wrap' : null; + // In this example, make the 1st and 3rd columns sortable + const sortParams = + columnIndex === 0 || columnIndex === 2 + ? { + sort: { + sortBy: { + index: activeSortIndex, + direction: activeSortDirection + }, + onSort, + columnIndex + } + } + : {}; + const infoParams = + columnIndex === 2 + ? { + info: { + tooltip: 'More information' + } + } + : {}; + return ( + + {column} + + ); + })} + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + ))} + + + ); +}; +``` + +### Composable: Selectable + +This example demonstrates row selection. The selection column is just another column, but with selection specific props added. We add it as the first header cell and also as the first body cell for each row. +Be sure to also add `rowIndex` to `Td`. + +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; + +ComposableTableSelectable = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'a', 'four', 'five'], + ['a', 'two', 'k', 'four', 'five'], + ['p', 'two', 'b', 'four', 'five'] + ]; + const [allRowsSelected, setAllRowsSelected] = React.useState(false); + const [selected, setSelected] = React.useState(rows.map(row => false)); + const onSelect = (event, isSelected, rowId) => { + setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel))); + if (!isSelected && allRowsSelected) { + setAllRowsSelected(false); + } else if (isSelected && !allRowsSelected) { + let allSelected = true; + for (let i = 0; i < selected.length; i++) { + if (i !== rowId) { + if (!selected[i]) { + allSelected = false; + } + } + } + if (allSelected) { + setAllRowsSelected(true); + } + } + }; + const onSelectAll = (event, isSelected) => { + setAllRowsSelected(isSelected); + setSelected(selected.map(sel => isSelected)); + }; + return ( + + + + + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + + + + {rows.map((row, rowIndex) => ( + + + {row.map((cell, cellIndex) => { + const shiftedIndex = cellIndex + 1; + return ( + + {cell} + + ); + })} + + ))} + + + ); +}; +``` + +### Composable: Selectable radio input + +Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props. Just as with selectable, be sure to also add `rowIndex` to `Td`. + +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; + +ComposableTableSelectableRadio = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'a', 'four', 'five'], + ['a', 'two', 'k', 'four', 'five'], + ['p', 'two', 'b', 'four', 'five'] + ]; + const [selected, setSelected] = React.useState(-1); + const onSelect = (event, isSelected, rowId) => { + setSelected(rowId); + }; + return ( + + + + + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + + + + {rows.map((row, rowIndex) => ( + + + {row.map((cell, cellIndex) => { + const shiftedIndex = cellIndex + 1; + return ( + + {cell} + + ); + })} + + ))} + + + ); +}; +``` + +### Composable: Actions + +This example demonstrates adding actions as the last column. The header's last cell is an empty cell, and each body row's last cell is an action cell. + +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; + +ComposableTableActions = () => { + const defaultActions = [ + { + title: 'Some action', + onClick: (event, rowId, rowData, extra) => console.log('clicked on Some action, on row: ', rowId) + }, + { + title: Link action + }, + { + isSeparator: true + }, + { + title: 'Third action', + onClick: (event, rowId, rowData, extra) => console.log('clicked on Third action, on row: ', rowId) + } + ]; + const lastRowActions = [ + { + title: 'Some action', + onClick: (event, rowId, rowData, extra) => console.log(`clicked on Some action, on row ${rowId}`) + }, + { + title:
Another action
, + onClick: (event, rowId, rowData, extra) => console.log(`clicked on Another action, on row ${rowId}`) + }, + { + isSeparator: true + }, + { + title: 'Third action', + onClick: (event, rowId, rowData, extra) => console.log(`clicked on Third action, on row ${rowId}`) + } + ]; + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'a', 'four', 'five'], + ['a', 'two', 'k', 'four', 'five'], + ['p', 'two', 'b', 'four', 'five'], + ['4', '2', 'b', 'four', 'five'], + ['5', '2', 'b', 'four', 'five'] + ]; + return ( + + + + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + + ))} + + + ); +}; +``` + +### Composable: Expandable + +This example demonstrates having expandable rows. + +- Each parent/child row pair is enclosed in a `Tbody` component. +- You can make the table more compact by setting the `TableComposable` variant to `compact`. + +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table'; +import { Checkbox } from '@patternfly/react-core'; + +ComposableTableExpandable = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rowPairs = [ + { parent: ['one', 'two', 'a', 'four', 'five'], child: null }, + { + parent: ['parent 1', 'two', 'k', 'four', 'five'], + child: ['single cell'] + }, + { + parent: ['parent 2', 'two', 'b', 'four', 'five'], + child: ['single cell - fullWidth'], + fullWidth: true + }, + { + parent: ['parent 3', '2', 'b', 'four', 'five'], + child: ['single cell - noPadding'], + noPadding: true + }, + { + parent: ['parent 4', '2', 'b', 'four', 'five'], + child: ['single cell - fullWidth & noPadding'], + fullWidth: true, + noPadding: true + }, + { + parent: ['parent 5', '2', 'b', 'four', 'five'], + child: ["spans 'Repositories' and 'Branches'", "spans 'Pull requests' and 'Workspaces', and 'Last commit'"] + }, + { + parent: ['parent 6', '2', 'b', 'four', 'five'], + child: [ + "fullWidth, spans the collapsible column and 'Repositories'", + "fullWidth, spans 'Branches' and 'Pull requests'", + "fullWidth, spans 'Workspaces' and 'Last commit'" + ], + fullWidth: true + } + ]; + const numColumns = columns.length; + // Init all to true + const [expanded, setExpanded] = React.useState( + Object.fromEntries(Object.entries(rowPairs).map(([k, v]) => [k, Boolean(v.child)])) + ); + const [compact, setCompact] = React.useState(true); + const toggleCompact = (checked) => { + setCompact(checked); + } + const handleExpansionToggle = (event, pairIndex) => { + setExpanded({ + ...expanded, + [pairIndex]: !expanded[pairIndex] + }); + }; + let rowIndex = -1; + return ( + + + + + + + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + + + {rowPairs.map((pair, pairIndex) => { + rowIndex += 1; + const parentRow = ( + + + {pair.parent.map((cell, cellIndex) => ( + + {cell} + + ))} + + ); + if (pair.child) { + rowIndex += 1; + } + const childRow = pair.child ? ( + + {!rowPairs[pairIndex].fullWidth && } + {rowPairs[pairIndex].child.map((cell, cellIndex) => { + const numChildCells = rowPairs[pairIndex].child.length; + const shift = rowPairs[pairIndex].fullWidth ? 1 : 0; + const shiftedCellIndex = cellIndex + shift; + // some examples of how you could customize colSpan based on your needs + const getColSpan = () => { + // we have 6 columns (1 expandable column + 5 regular columns) + // for the rowPairs where we've specificed `fullWidth`, add +1 to account for the expandable column + let colSpan = 1; + if (numChildCells === 1) { + // single child cell: take up full width + colSpan = numColumns + shift; + } else if (numChildCells === 2) { + // 2 children + // child 1: 2 colspan + // child 2: 3 or 4 colspan depending on fullWidth + colSpan = cellIndex === 0 ? 2 : 3 + shift; + } else if (numChildCells === 3) { + // 3 children + // child 1: 2 colspam + // child 2: 2 colspan + // child 3: 1 or 2 colspan depending on fullWidth + colSpan = cellIndex === 2 ? 1 + shift : 2; + } + return colSpan; + }; + return ( + + {cell.title || cell} + + ); + })} + + ) : null; + return ( + + {parentRow} + {childRow} + + ); + })} + + + ); +}; +``` + +### Composable: Compound expandable + +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table'; + +import CodeBranchIcon from '@patternfly/react-icons/dist/js/icons/code-branch-icon'; +import CodeIcon from '@patternfly/react-icons/dist/js/icons/code-icon'; +import CubeIcon from '@patternfly/react-icons/dist/js/icons/cube-icon'; + +// https://github.com/patternfly/patternfly-react/blob/master/packages/react-table/src/components/Table/examples/DemoSortableTable.js +import DemoSortableTable from './demo/DemoSortableTable'; + +ComposableCompoundExpandableTable = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit', '']; + const rows = [ + ['siemur/test-space', 10, 4, 4, '20 minutes', 'Open in Github'], + ['siemur/test-space', 3, 4, 2, '10 minutes', 'Open in Github'] + ]; + // index corresponds to row index, and value corresponds to column index of the expanded, null means no cell is expanded + const [activeChild, setActiveChild] = React.useState([1, null]); + // key = row_col of the parent it corresponds to + const childData = { + '0_1': { + component: ( + + ) + }, + '0_2': { + component: ( + + ) + }, + '0_3': { + component: ( + + ) + }, + '1_1': { + component: ( + + ) + }, + '1_2': { + component: ( + + ) + }, + '1_3': { + component: ( + + ) + } + }; + const customRender = (cell, index) => { + if (index === 0) { + return {cell}; + } else if (index === 1) { + return ( + + {cell} + + ); + } else if (index === 2) { + return ( + + {cell} + + ); + } else if (index === 3) { + return ( + + {cell} + + ); + } else if (index === 5) { + return {cell}; + } + return cell; + }; + const isCompoundExpanded = (rowIndex, cellIndex) => { + // only columns 1 - 3 are compound expansion toggles in this example + if (1 <= cellIndex && cellIndex <= 3) { + return activeChild[rowIndex] === cellIndex; + } + return null; + }; + return ( + + + + {columns.map((column, columnIndex) => ( + {column} + ))} + + + {rows.map((row, rowIndex) => { + const isRowExpanded = activeChild[rowIndex] !== null; + return ( + + + + {row.map((cell, cellIndex) => { + // for this example, only columns 1 - 3 are clickable + const compoundExpandParams = + 1 <= cellIndex && cellIndex <= 3 + ? { + compoundExpand: { + isExpanded: isCompoundExpanded(rowIndex, cellIndex), + onToggle: () => { + if (activeChild[rowIndex] === cellIndex) { + // closing the expansion on the current toggle + // set the corresponding item to null + const updatedActiveChild = activeChild.map((item, index) => + index === rowIndex ? null : item + ); + setActiveChild(updatedActiveChild); + } else { + // expanding + // set the corresponding cell index + const updatedActiveChild = activeChild.map((item, index) => + index === rowIndex ? cellIndex : item + ); + setActiveChild(updatedActiveChild); + } + } + } + } + : {}; + return ( + + {customRender(cell, cellIndex)} + + ); + })} + + {isRowExpanded && ( + + + + {childData[`${rowIndex}_${activeChild[rowIndex]}`].component} + + + + )} + + + ); + })} + + ); +}; +``` + +### Composable: Cell width, breakpoint modifiers + +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; + +ComposableTableCellWidth = () => { + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; + const rows = [ + ['one', 'two', 'three', 'four', 'five'], + ['one - 2', null, null, 'four - 2', 'five - 2'], + ['one - 3', 'two - 3', 'three - 3', 'four - 3', 'five - 3'] + ]; + return ( + + + + {columns.map((column, columnIndex) => ( + + {column} + + ))} + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + ))} + + + ); +}; +``` + +### Composable: Controlling text + +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; + +ComposableControllingText = () => { + const columns = [ + 'Truncate (width 20%)', + 'Break word', + 'Wrapping table header text. This th text will wrap instead of truncate.', + 'Fit content', + 'No wrap' + ]; + const rows = [ + [ + 'This text will truncate instead of wrap.', + http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org, +

+ By default, + thead cells will truncate and + tbody cells will wrap. Use + .pf-m-wrap on ath to change its behavior. +

, + "This cell's content will adjust itself to the parent th width. This modifier only affects table layouts.", + No wrap + ] + ]; + return ( + + + + {columns[0]} + {columns[1]} + {columns[2]} + {columns[3]} + {columns[4]} + + + + {rows.map((row, rowIndex) => ( + + + {row[0]} + + + {row[1]} + + {row[2]} + {row[3]} + + {row[4]} + + + ))} + + + ); +}; +``` + +### Composable: Modifiers with table text + +```js isBeta +import React from 'react'; +import { TableComposable, Thead, Tbody, Tr, Th, Td, TableText } from '@patternfly/react-table'; + +ComposableTableText = () => { + const columns = ['Truncating text', 'Wrapping table header text. This th text will wrap instead of truncate.']; + const rows = [ + [ + This text will truncate instead of wrap., + + This is a link that needs to be on one line and fully readable. + + ] + ]; + return ( + + + + {columns[0]} + {columns[1]} + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + {cell} + + ))} + + ))} + + + ); +}; +``` diff --git a/packages/react-table/src/components/Table/index.ts b/packages/react-table/src/components/Table/index.ts index 3b115a1281e..bfd1a789385 100644 --- a/packages/react-table/src/components/Table/index.ts +++ b/packages/react-table/src/components/Table/index.ts @@ -9,8 +9,11 @@ export * from './EditableTextCell'; export * from './ExpandableRowContent'; export * from './Header'; export * from './HeaderCell'; +export * from './HeaderCellInfoWrapper'; export * from './RowWrapper'; export * from './SelectColumn'; export * from './SortColumn'; export * from './TableText'; export * from './utils'; +export * from './TableTypes'; +export * from './TableContext'; diff --git a/packages/react-table/src/components/Table/utils/decorators/cellActions.tsx b/packages/react-table/src/components/Table/utils/decorators/cellActions.tsx index b2d0b0cf2e7..86f8c1d6675 100644 --- a/packages/react-table/src/components/Table/utils/decorators/cellActions.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/cellActions.tsx @@ -12,7 +12,7 @@ import { IFormatterValueType, IRowData, ITransform -} from '../../Table'; +} from '../../TableTypes'; const resolveOrDefault = ( resolver: IActionsResolver | IAreActionsDisabled, diff --git a/packages/react-table/src/components/Table/utils/decorators/cellWidth.ts b/packages/react-table/src/components/Table/utils/decorators/cellWidth.ts index ef368fb168a..99a7068cec7 100644 --- a/packages/react-table/src/components/Table/utils/decorators/cellWidth.ts +++ b/packages/react-table/src/components/Table/utils/decorators/cellWidth.ts @@ -1,6 +1,6 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; -import { ITransform } from '../../Table'; +import { ITransform } from '../../TableTypes'; import { capitalize } from '../utils'; type WidthClass = diff --git a/packages/react-table/src/components/Table/utils/decorators/classNames.ts b/packages/react-table/src/components/Table/utils/decorators/classNames.ts index 07149457d90..f6d3e9adefa 100644 --- a/packages/react-table/src/components/Table/utils/decorators/classNames.ts +++ b/packages/react-table/src/components/Table/utils/decorators/classNames.ts @@ -1,6 +1,6 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; -import { ITransform } from '../../Table'; +import { ITransform } from '../../TableTypes'; const visibilityModifiers = [ 'hidden', @@ -8,15 +8,15 @@ const visibilityModifiers = [ 'hiddenOnMd', 'hiddenOnLg', 'hiddenOnXl', - 'hiddenOn2xl', + 'hiddenOn_2xl', 'visibleOnSm', 'visibleOnMd', 'visibleOnLg', 'visibleOnXl', - 'visibleOn2xl' + 'visibleOn_2xl' ] as (keyof typeof styles.modifiers)[]; -interface Visibility { +export interface IVisibility { hidden?: string; hiddenOnSm?: string; hiddenOnMd?: string; @@ -33,10 +33,10 @@ interface Visibility { export const Visibility = visibilityModifiers .filter(key => styles.modifiers[key]) .reduce((acc, curr) => { - const key2 = curr.replace('2xl', '2Xl') as keyof typeof Visibility; + const key2 = curr.replace('_2xl', '2Xl') as keyof typeof Visibility; acc[key2] = styles.modifiers[curr]; return acc; - }, {} as Visibility); + }, {} as IVisibility); export const classNames = (...classes: string[]): ITransform => () => ({ className: css(...classes) diff --git a/packages/react-table/src/components/Table/utils/decorators/collapsible.tsx b/packages/react-table/src/components/Table/utils/decorators/collapsible.tsx index 3238b699c92..88bcd16c1bd 100644 --- a/packages/react-table/src/components/Table/utils/decorators/collapsible.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/collapsible.tsx @@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; import { CollapseColumn } from '../../CollapseColumn'; import { ExpandableRowContent } from '../../ExpandableRowContent'; -import { IExtra, IFormatterValueType, IFormatter, decoratorReturnType } from '../../Table'; +import { IExtra, IFormatterValueType, IFormatter, decoratorReturnType } from '../../TableTypes'; export const collapsible: IFormatter = ( value: IFormatterValueType, diff --git a/packages/react-table/src/components/Table/utils/decorators/compoundExpand.tsx b/packages/react-table/src/components/Table/utils/decorators/compoundExpand.tsx index e7a10139211..f518fd90142 100644 --- a/packages/react-table/src/components/Table/utils/decorators/compoundExpand.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/compoundExpand.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; -import { IExtra, IFormatterValueType, ITransform } from '../../Table'; +import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes'; import { TableText } from '../../TableText'; export const compoundExpand: ITransform = ( diff --git a/packages/react-table/src/components/Table/utils/decorators/editable.tsx b/packages/react-table/src/components/Table/utils/decorators/editable.tsx index 94fa988e707..7a42a04ec5b 100644 --- a/packages/react-table/src/components/Table/utils/decorators/editable.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/editable.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IExtra, IFormatterValueType, ITransform, IRowCell, OnRowEdit, RowErrors, RowEditType } from '../../Table'; +import { IExtra, IFormatterValueType, ITransform, IRowCell, OnRowEdit, RowErrors, RowEditType } from '../../TableTypes'; import { EditColumn } from '../../EditColumn'; import tableStyles from '@patternfly/react-styles/css/components/Table/table'; diff --git a/packages/react-table/src/components/Table/utils/decorators/headerCol.tsx b/packages/react-table/src/components/Table/utils/decorators/headerCol.tsx index 5b061f9fbc8..a5c7b1732d3 100644 --- a/packages/react-table/src/components/Table/utils/decorators/headerCol.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/headerCol.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IExtra, IFormatterValueType, ITransform } from '../../Table'; +import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes'; export const headerCol = (id = 'simple-node') => { const headerColObj: ITransform = (value: IFormatterValueType, { rowIndex }: IExtra = {}) => { diff --git a/packages/react-table/src/components/Table/utils/decorators/info.tsx b/packages/react-table/src/components/Table/utils/decorators/info.tsx index b4c15740cd9..fddaa87bf29 100644 --- a/packages/react-table/src/components/Table/utils/decorators/info.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/info.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { InfoType } from '../../base/types'; import { HeaderCellInfoWrapper } from '../../HeaderCellInfoWrapper'; -import { IFormatterValueType, ITransform } from '../../Table'; +import { IFormatterValueType, ITransform } from '../../TableTypes'; import styles from '@patternfly/react-styles/css/components/Table/table'; export const info = ({ tooltip, tooltipProps, popover, popoverProps, className, ariaLabel }: InfoType) => { diff --git a/packages/react-table/src/components/Table/utils/decorators/selectable.tsx b/packages/react-table/src/components/Table/utils/decorators/selectable.tsx index 2094420ceb3..2baa3224b0c 100644 --- a/packages/react-table/src/components/Table/utils/decorators/selectable.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/selectable.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; -import { IExtra, IFormatterValueType, ITransform } from '../../Table'; +import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes'; import { SelectColumn, RowSelectVariant } from '../../SelectColumn'; import checkStyles from '@patternfly/react-styles/css/components/Check/check'; diff --git a/packages/react-table/src/components/Table/utils/decorators/sortable.tsx b/packages/react-table/src/components/Table/utils/decorators/sortable.tsx index 8add015e582..186f779b100 100644 --- a/packages/react-table/src/components/Table/utils/decorators/sortable.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/sortable.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; -import { IExtra, IFormatterValueType, ITransform } from '../../Table'; +import { IExtra, IFormatterValueType, ITransform } from '../../TableTypes'; import { SortColumn, SortByDirection } from '../../SortColumn'; export const sortable: ITransform = (label: IFormatterValueType, { columnIndex, column, property }: IExtra) => { diff --git a/packages/react-table/src/components/Table/utils/decorators/textCenter.ts b/packages/react-table/src/components/Table/utils/decorators/textCenter.ts index f194fcfd6d0..dfaec1607a1 100644 --- a/packages/react-table/src/components/Table/utils/decorators/textCenter.ts +++ b/packages/react-table/src/components/Table/utils/decorators/textCenter.ts @@ -1,2 +1,2 @@ -import { ITransform } from '../../Table'; +import { ITransform } from '../../TableTypes'; export const textCenter: ITransform = () => ({ textCenter: true }); diff --git a/packages/react-table/src/components/Table/utils/decorators/wrappable.tsx b/packages/react-table/src/components/Table/utils/decorators/wrappable.tsx index dd15cd4c088..d58c6a5da12 100644 --- a/packages/react-table/src/components/Table/utils/decorators/wrappable.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/wrappable.tsx @@ -1,5 +1,5 @@ import styles from '@patternfly/react-styles/css/components/Table/table'; -import { ITransform } from '../../Table'; +import { ITransform } from '../../TableTypes'; export const breakWord: ITransform = () => ({ className: styles.modifiers.breakWord diff --git a/packages/react-table/src/components/Table/utils/formatters.tsx b/packages/react-table/src/components/Table/utils/formatters.tsx index ff1ac33b4f3..a43478478b8 100644 --- a/packages/react-table/src/components/Table/utils/formatters.tsx +++ b/packages/react-table/src/components/Table/utils/formatters.tsx @@ -1,4 +1,4 @@ -import { IFormatterValueType, IFormatter } from '../Table'; +import { IFormatterValueType, IFormatter } from '../TableTypes'; const defaultTitle: IFormatter = (data: IFormatterValueType) => data && data.hasOwnProperty('title') ? data.title : data; diff --git a/packages/react-table/src/components/Table/utils/headerUtils.test.tsx b/packages/react-table/src/components/Table/utils/headerUtils.test.tsx index 7b53364487f..57d5acbb5d0 100644 --- a/packages/react-table/src/components/Table/utils/headerUtils.test.tsx +++ b/packages/react-table/src/components/Table/utils/headerUtils.test.tsx @@ -1,5 +1,5 @@ import { calculateColumns, mapOpenedRows } from './headerUtils'; -import { ICell, IRow } from '../Table'; +import { ICell, IRow } from '../TableTypes'; describe('headerUtils', () => { describe('calculateColumns', () => { diff --git a/packages/react-table/src/components/Table/utils/headerUtils.tsx b/packages/react-table/src/components/Table/utils/headerUtils.tsx index eac1ffb7fc4..743ce578004 100644 --- a/packages/react-table/src/components/Table/utils/headerUtils.tsx +++ b/packages/react-table/src/components/Table/utils/headerUtils.tsx @@ -20,7 +20,7 @@ import { OnSelect, OnCollapse, OnRowEdit -} from '../Table'; +} from '../TableTypes'; /** * Generate header with transforms and formatters from custom header object. @@ -30,17 +30,7 @@ import { * @returns {*} header, label, transforms: Array, formatters: Array. */ const generateHeader = ( - { - transforms: origTransforms, - formatters: origFormatters, - columnTransforms, - header - }: { - transforms?: ICell['transforms']; - formatters?: ICell['formatters']; - columnTransforms?: ICell['columnTransforms']; - header?: ICell; - }, + { transforms: origTransforms, formatters: origFormatters, columnTransforms, header }: ICell, title?: string | ICell ) => ({ ...header, diff --git a/packages/react-table/src/components/Table/utils/transformers.test.tsx b/packages/react-table/src/components/Table/utils/transformers.test.tsx index 2051f275dba..7d66a8423bb 100644 --- a/packages/react-table/src/components/Table/utils/transformers.test.tsx +++ b/packages/react-table/src/components/Table/utils/transformers.test.tsx @@ -26,7 +26,7 @@ import { IExtraData, IRowData, ISeparator -} from '../Table'; +} from '../TableTypes'; const testCellActions = ({ actions, diff --git a/packages/react-table/src/components/Table/utils/transformers.tsx b/packages/react-table/src/components/Table/utils/transformers.tsx index bd020534777..2a6ab5a8068 100644 --- a/packages/react-table/src/components/Table/utils/transformers.tsx +++ b/packages/react-table/src/components/Table/utils/transformers.tsx @@ -11,7 +11,7 @@ export { headerCol } from './decorators/headerCol'; export { classNames, Visibility } from './decorators/classNames'; export { info } from './decorators/info'; -import { IFormatterValueType, IExtra, ITransform } from '../Table'; +import { IFormatterValueType, IExtra, ITransform } from '../TableTypes'; const emptyTD: ITransform = () => ({ scope: '', diff --git a/packages/react-table/src/components/Table/utils/utils.test.tsx b/packages/react-table/src/components/Table/utils/utils.test.tsx index 561f4368cc7..21bcf96de6e 100644 --- a/packages/react-table/src/components/Table/utils/utils.test.tsx +++ b/packages/react-table/src/components/Table/utils/utils.test.tsx @@ -1,6 +1,6 @@ import { isRowExpanded } from './utils'; import { buildExpandableRows } from '../../../test-helpers/data-helpers'; -import { IRow } from '../Table'; +import { IRow } from '../TableTypes'; const assertExpanded = (rows: IRow[], expandedRowIndexes: number[]) => { expandedRowIndexes.forEach((expandedRowIndex: number) => { diff --git a/packages/react-table/src/components/Table/utils/utils.tsx b/packages/react-table/src/components/Table/utils/utils.tsx index dcdf01e3fa1..05cff012879 100644 --- a/packages/react-table/src/components/Table/utils/utils.tsx +++ b/packages/react-table/src/components/Table/utils/utils.tsx @@ -1,4 +1,4 @@ -import { IRow, IRowCell, IValidatorDef, RowEditType, RowErrors } from '../Table'; +import { IRow, IRowCell, IValidatorDef, RowEditType, RowErrors } from '../TableTypes'; const hasCompoundParentsExpanded = (parentId: number, compoundParent: number, rows: IRow[]) => { // max rows.length parents diff --git a/packages/react-table/src/components/TableComposable/Caption.tsx b/packages/react-table/src/components/TableComposable/Caption.tsx new file mode 100644 index 00000000000..2997e2e11cf --- /dev/null +++ b/packages/react-table/src/components/TableComposable/Caption.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +export interface CaptionProps { + /** Content rendered inside the caption */ + children?: React.ReactNode; + /** Additional classes added to the caption */ + className?: string; +} + +export const Caption: React.FunctionComponent = ({ children, className, ...props }: CaptionProps) => ( + + {children} + +); +Caption.displayName = 'Caption'; diff --git a/packages/react-table/src/components/TableComposable/TableComposable.tsx b/packages/react-table/src/components/TableComposable/TableComposable.tsx new file mode 100644 index 00000000000..c994f7518e0 --- /dev/null +++ b/packages/react-table/src/components/TableComposable/TableComposable.tsx @@ -0,0 +1,98 @@ +import * as React from 'react'; +import styles from '@patternfly/react-styles/css/components/Table/table'; +import stylesGrid from '@patternfly/react-styles/css/components/Table/table-grid'; +import { css } from '@patternfly/react-styles'; +import { toCamel } from '../Table/utils/utils'; +import { IVisibility } from '../Table/utils/decorators/classNames'; +import { useOUIAProps, OUIAProps } from '@patternfly/react-core'; +import { TableGridBreakpoint, TableVariant } from '../Table/TableTypes'; + +export interface BaseCellProps { + /** Content rendered inside the cell */ + children?: React.ReactNode; + /** Additional classes added to the cell */ + className?: string; + /** Element to render */ + component?: React.ReactNode; + /** Modifies cell to center its contents. */ + textCenter?: boolean; + /** Style modifier to apply */ + modifier?: 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap'; + /** Width percentage modifier */ + width?: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100; + /** Visibility breakpoint modifiers */ + visibility?: (keyof IVisibility)[]; + /** Forwarded ref */ + innerRef?: React.Ref; +} + +export interface TableComposableProps extends React.HTMLProps, OUIAProps { + /** Adds an accessible name for the Table */ + 'aria-label'?: string; + /** Content rendered inside the Table */ + children?: React.ReactNode; + /** Additional classes added to the Table */ + className?: string; + /** + * Style variant for the Table + * compact: Reduces spacing and makes the table more compact + */ + variant?: TableVariant | 'compact'; + /** + * Render borders + * Borders can only currently be disabled if the variant is set to 'compact' + * https://github.com/patternfly/patternfly/issues/3650 + */ + borders?: boolean; + /** Specifies the grid breakpoints */ + gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'; + /** A valid WAI-ARIA role to be applied to the table element */ + role?: string; + /** If set to true, the table header sticks to the top of its container */ + isStickyHeader?: boolean; + /** Forwarded ref */ + innerRef?: React.Ref; +} + +const TableComposableBase: React.FunctionComponent = ({ + children, + className, + variant, + borders = true, + isStickyHeader = false, + gridBreakPoint = TableGridBreakpoint.gridMd, + 'aria-label': ariaLabel, + role = 'grid', + innerRef, + ouiaId, + ouiaSafe = true, + ...props +}: TableComposableProps) => { + const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe); + return ( + + {children} +
+ ); +}; + +export const TableComposable = React.forwardRef((props: TableComposableProps, ref: React.Ref) => ( + +)); +TableComposable.displayName = 'TableComposable'; diff --git a/packages/react-table/src/components/TableComposable/Tbody.tsx b/packages/react-table/src/components/TableComposable/Tbody.tsx new file mode 100644 index 00000000000..f48424ae45b --- /dev/null +++ b/packages/react-table/src/components/TableComposable/Tbody.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Table/table'; + +export interface TbodyProps extends React.HTMLProps { + /** Content rendered inside the row */ + children?: React.ReactNode; + /** Additional classes added to the row */ + className?: string; + /** Modifies the body to allow for expandable rows */ + isExpanded?: boolean; + /** Forwarded ref */ + innerRef?: React.Ref; +} + +const TbodyBase: React.FunctionComponent = ({ + children, + className, + isExpanded, + innerRef, + ...props +}: TbodyProps) => ( + + {children} + +); + +export const Tbody = React.forwardRef((props: TbodyProps, ref: React.Ref) => ( + +)); +Tbody.displayName = 'Tbody'; diff --git a/packages/react-table/src/components/TableComposable/Td.tsx b/packages/react-table/src/components/TableComposable/Td.tsx new file mode 100644 index 00000000000..f737011f221 --- /dev/null +++ b/packages/react-table/src/components/TableComposable/Td.tsx @@ -0,0 +1,192 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Table/table'; +import { + DropdownDirection, + DropdownPosition +} from '@patternfly/react-core/dist/js/components/Dropdown/dropdownConstants'; +import { BaseCellProps } from './TableComposable'; +import { cellActions } from '../Table/utils/decorators/cellActions'; +import { selectable } from '../Table/utils/decorators/selectable'; +import { collapsible } from '../Table/utils/decorators/collapsible'; +import { compoundExpand } from '../Table/utils/decorators/compoundExpand'; +import { cellWidth } from './../Table/utils/decorators/cellWidth'; +import { Visibility, classNames } from './../Table/utils/decorators/classNames'; +import { mergeProps } from '../Table/base/merge-props'; +import { IVisibility } from '../Table/utils/decorators/classNames'; +import { OnSelect, IFormatterValueType, IActions, OnExpand, OnCollapse } from '../Table/TableTypes'; + +export interface TdProps extends BaseCellProps, Omit, 'onSelect' | 'width'> { + /** + * The column header the cell corresponds to. + * This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element. + */ + dataLabel?: string; + /** Renders a checkbox or radio select */ + select?: { + /** The selectable variant */ + variant?: 'checkbox' | 'radio'; + /** Callback on select */ + onSelect?: OnSelect; + /** Whether the cell is selected */ + isSelected: boolean; + /** Whether to disable the selection */ + disable?: boolean; + /** The row index */ + rowIndex: number; + }; + /** Turns the cell into an actions cell */ + actions?: { + /** Cell actions */ + items: IActions; + /** Whether to disable the actions */ + disable?: boolean; + /** Actions dropdown position */ + dropdownPosition?: DropdownPosition; + /** Actions dropdown direction */ + dropdownDirection?: DropdownDirection; + }; + /** Turns the cell into an expansion toggle and determines if the corresponding expansion row is open */ + expand?: { + isExpanded: boolean; + /** The row index */ + rowIndex: number; + /** The column index */ + columnIndex?: number; + /** On toggling the expansion */ + onToggle?: OnCollapse; + }; + /** Turns the cell into a compound expansion toggle */ + compoundExpand?: { + /** determines if the corresponding expansion row is open */ + isExpanded: boolean; + /** Callback on toggling of the expansion */ + onToggle?: OnExpand; + }; + /** True to remove padding */ + noPadding?: boolean; +} + +const TdBase: React.FunctionComponent = ({ + children, + className, + component = 'td', + dataLabel, + textCenter = false, + modifier, + select = null, + actions = null, + expand = null, + compoundExpand: compoundExpandProp = null, + noPadding, + width, + visibility, + innerRef, + ...props +}: TdProps) => { + const selectParams = select + ? selectable(children as IFormatterValueType, { + rowIndex: select.rowIndex, + rowData: { + selected: select.isSelected, + disableSelection: select?.disable + }, + column: { + extraParams: { + onSelect: select?.onSelect, + selectVariant: select.variant || 'checkbox' + } + } + }) + : null; + const actionParamsFunc = actions ? cellActions(actions.items, null, null) : null; + const actionParams = actionParamsFunc + ? actionParamsFunc(null, { + rowData: { + disableActions: actions?.disable + }, + column: { + extraParams: { + dropdownPosition: actions?.dropdownPosition, + dropdownDirection: actions?.dropdownDirection + } + } + }) + : null; + const expandableParams = + expand !== null + ? collapsible(null, { + rowIndex: expand.rowIndex, + columnIndex: expand?.columnIndex, + rowData: { + isOpen: expand.isExpanded + }, + column: { + extraParams: { + onCollapse: expand?.onToggle + } + } + }) + : null; + const compoundParams = + compoundExpandProp !== null + ? compoundExpand( + { + title: children, + props: { + isOpen: compoundExpandProp.isExpanded + } + } as IFormatterValueType, + { + column: { + extraParams: { + onExpand: compoundExpandProp?.onToggle + } + } + } + ) + : null; + const widthParams = width ? cellWidth(width)() : null; + const visibilityParams = visibility + ? classNames(...visibility.map((vis: keyof IVisibility) => Visibility[vis]))() + : null; + const merged = mergeProps( + selectParams, + actionParams, + expandableParams, + compoundParams, + widthParams, + visibilityParams + ); + const { + // selectable adds this but we don't want it + // eslint-disable-next-line @typescript-eslint/no-unused-vars + isVisible = null, + children: mergedChildren = null, + className: mergedClassName = '', + component: MergedComponent = component, + ...mergedProps + } = merged; + return ( + + {mergedChildren || children} + + ); +}; + +export const Td = React.forwardRef((props: TdProps, ref: React.Ref) => ( + +)); +Td.displayName = 'Td'; diff --git a/packages/react-table/src/components/TableComposable/Th.tsx b/packages/react-table/src/components/TableComposable/Th.tsx new file mode 100644 index 00000000000..3e8018e1fa6 --- /dev/null +++ b/packages/react-table/src/components/TableComposable/Th.tsx @@ -0,0 +1,149 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Table/table'; +import { info } from '../Table/utils/decorators/info'; +import { sortable } from '../Table/utils/decorators/sortable'; +import { selectable } from '../Table/utils/decorators/selectable'; +import { cellWidth } from './../Table/utils/decorators/cellWidth'; +import { Visibility, classNames } from './../Table/utils/decorators/classNames'; +import { InfoType } from '../Table/base/types'; +import { mergeProps } from '../Table/base/merge-props'; +import { IVisibility } from '../Table/utils/decorators/classNames'; +import { Tooltip } from '@patternfly/react-core/dist/js/components/Tooltip/Tooltip'; +import { BaseCellProps } from './TableComposable'; +import { OnSelect, IFormatterValueType, IColumn, ISortBy, OnSort } from '../Table/TableTypes'; + +export interface ThProps + extends BaseCellProps, + Omit, 'onSelect' | 'width'> { + /** Renders a checkbox select so that all row checkboxes can be selected/deselected */ + select?: { + /** Callback on select */ + onSelect?: OnSelect; + /** Whether the cell is selected */ + isSelected: boolean; + }; + sort?: { + /** Wraps the content in a button and adds a sort icon - Click callback on the sortable cell */ + onSort?: OnSort; + /** Provide the currently active column's index and direction */ + sortBy: ISortBy; + /** The column index */ + columnIndex: number; + }; + /** + * Tooltip to show on the header cell + * Note: If the header cell is truncated and has simple string content, it will already attempt to display the header text + * If you want to show a tooltip that differs from the header text, you can set it here + * To disable it completely you can set it to null + */ + tooltip?: React.ReactNode; + /** Callback on mouse enter */ + onMouseEnter?: (event: any) => void; + /** Adds tooltip/popover info button */ + info?: InfoType; +} + +const ThBase: React.FunctionComponent = ({ + children, + className, + component = 'th', + textCenter = false, + sort = null, + modifier, + select = null, + tooltip = '', + onMouseEnter: onMouseEnterProp = () => {}, + width, + visibility, + innerRef, + info: infoProps, + ...props +}: ThProps) => { + const [showTooltip, setShowTooltip] = React.useState(false); + const onMouseEnter = (event: any) => { + if (event.target.offsetWidth < event.target.scrollWidth) { + !showTooltip && setShowTooltip(true); + } else { + showTooltip && setShowTooltip(false); + } + onMouseEnterProp(event); + }; + const sortParams = sort + ? sortable(children as IFormatterValueType, { + columnIndex: sort.columnIndex, + column: { + extraParams: { + sortBy: sort.sortBy, + onSort: sort?.onSort + } + } as IColumn + }) + : null; + const selectParams = select + ? selectable(children as IFormatterValueType, { + column: { + extraParams: { + onSelect: select?.onSelect, + selectVariant: 'checkbox', + allRowsSelected: select.isSelected + } + } + }) + : null; + const widthParams = width ? cellWidth(width)() : null; + const visibilityParams = visibility + ? classNames(...visibility.map((vis: keyof IVisibility) => Visibility[vis]))() + : null; + let transformedChildren = sortParams?.children || selectParams?.children || children; + // info can wrap other transformedChildren + let infoParams = null; + if (infoProps) { + infoParams = info(infoProps)(transformedChildren); + transformedChildren = infoParams.children; + } + const merged = mergeProps(sortParams, selectParams, widthParams, visibilityParams, infoParams); + const { + // ignore the merged children since we transform them ourselves so we can wrap it with info + // eslint-disable-next-line @typescript-eslint/no-unused-vars + children: mergedChildren = null, + // selectable adds this but we don't want it + // eslint-disable-next-line @typescript-eslint/no-unused-vars + isVisible = null, + className: mergedClassName = '', + component: MergedComponent = component, + ...mergedProps + } = merged; + + const cell = ( + + {transformedChildren} + + ); + + const canDefault = tooltip === '' ? typeof children === 'string' : true; + return tooltip !== null && canDefault && showTooltip ? ( + + {cell} + + ) : ( + cell + ); +}; + +export const Th = React.forwardRef((props: ThProps, ref: React.Ref) => ( + +)); +Th.displayName = 'Th'; diff --git a/packages/react-table/src/components/TableComposable/Thead.tsx b/packages/react-table/src/components/TableComposable/Thead.tsx new file mode 100644 index 00000000000..4e7ff7395b1 --- /dev/null +++ b/packages/react-table/src/components/TableComposable/Thead.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Table/table'; + +export interface TheadProps extends React.HTMLProps { + /** Content rendered inside the row */ + children?: React.ReactNode; + /** Additional classes added to the row */ + className?: string; + /** Won't wrap the table head if true */ + noWrap?: boolean; + /** Forwarded ref */ + innerRef?: React.Ref; +} + +const TheadBase: React.FunctionComponent = ({ + children, + className, + noWrap = false, + innerRef, + ...props +}: TheadProps) => ( + + {children} + +); + +export const Thead = React.forwardRef((props: TheadProps, ref: React.Ref) => ( + +)); +Thead.displayName = 'Thead'; diff --git a/packages/react-table/src/components/TableComposable/Tr.tsx b/packages/react-table/src/components/TableComposable/Tr.tsx new file mode 100644 index 00000000000..e16b4541699 --- /dev/null +++ b/packages/react-table/src/components/TableComposable/Tr.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import { useOUIAProps, OUIAProps } from '@patternfly/react-core'; +import styles from '@patternfly/react-styles/css/components/Table/table'; +import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit'; +import { css } from '@patternfly/react-styles'; + +export interface TrProps extends React.HTMLProps, OUIAProps { + /** Content rendered inside the row */ + children?: React.ReactNode; + /** Additional classes added to the row */ + className?: string; + /** Forwarded ref */ + innerRef?: React.Ref; + + /** 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 */ + isEditable?: boolean; +} + +const TrBase: React.FunctionComponent = ({ + children, + className, + isExpanded, + isEditable, + innerRef, + ouiaId, + ouiaSafe = true, + ...props +}: TrProps) => { + const ouiaProps = useOUIAProps('TableRow', ouiaId, ouiaSafe); + return ( + + {children} + + ); +}; + +export const Tr = React.forwardRef((props: TrProps, ref: React.Ref) => ( + +)); +Tr.displayName = 'Tr'; diff --git a/packages/react-table/src/components/TableComposable/index.ts b/packages/react-table/src/components/TableComposable/index.ts new file mode 100644 index 00000000000..f5b88eaaf1e --- /dev/null +++ b/packages/react-table/src/components/TableComposable/index.ts @@ -0,0 +1,7 @@ +export * from './TableComposable'; +export * from './Thead'; +export * from './Tbody'; +export * from './Tr'; +export * from './Th'; +export * from './Td'; +export * from './Caption'; diff --git a/packages/react-table/src/components/index.ts b/packages/react-table/src/components/index.ts index 75193adc339..676493ae1c1 100644 --- a/packages/react-table/src/components/index.ts +++ b/packages/react-table/src/components/index.ts @@ -1 +1,2 @@ export * from './Table'; +export * from './TableComposable'; diff --git a/packages/react-virtualized-extension/src/components/Virtualized/__snapshots__/VirtualizedTable.test.tsx.snap b/packages/react-virtualized-extension/src/components/Virtualized/__snapshots__/VirtualizedTable.test.tsx.snap index 9a0d17009f8..aaf734bb77c 100644 --- a/packages/react-virtualized-extension/src/components/Virtualized/__snapshots__/VirtualizedTable.test.tsx.snap +++ b/packages/react-virtualized-extension/src/components/Virtualized/__snapshots__/VirtualizedTable.test.tsx.snap @@ -125,7 +125,8 @@ exports[`Actions virtualized table 1`] = ` > - - - +
- - + - - - - + - - - - - - - - - - - - - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit - - -
+ + + + + + + + + + + + + + Branches + + + + + + + + + Pull requests + + + + + + + + + Workspaces + + + + + + + + + Last Commit + + + + + + + + + + + + + + + + + + + + + + + + + `; @@ -1289,7 +1496,8 @@ exports[`Selectable virtualized table 1`] = ` > - - - +
- - + - - - - + - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+ + + + + + + + + + + + + + + + + + + + + + + + + Branches + + + + + + + + + Pull requests + + + + + + + + + Workspaces + + + + + + + + + Last Commit + + + + + + + + + + + + + + + + + + `; @@ -2502,7 +2916,8 @@ exports[`Simple Actions table 1`] = ` > - - - +
- - - Another action - , - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Header cell", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "header-cell", - "props": Object { - "data-key": 0, - "data-label": "Header cell", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Branches", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "branches", - "props": Object { - "data-key": 1, - "data-label": "Branches", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Pull requests", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "pull-requests", - "props": Object { - "data-key": 2, - "data-label": "Pull requests", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Workspaces", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "workspaces", - "props": Object { - "data-key": 3, - "data-label": "Workspaces", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "Last Commit", - "transforms": Array [ - [Function], - [Function], - ], - }, - "property": "last-commit", - "props": Object { - "data-key": 4, - "data-label": "Last Commit", - }, - }, - Object { - "cell": Object { - "formatters": Array [ - [Function], - ], - "transforms": Array [ - [Function], - [Function], - ], - }, - "data": undefined, - "extraParams": Object { - "actionResolver": undefined, - "actions": Array [ - Object { - "onClick": [Function], - "title": "Some action", - }, - Object { - "onClick": [Function], - "title":
- Another action -
, - }, - Object { - "isSeparator": true, - "onClick": null, - }, - Object { - "onClick": [Function], - "title": "Third action", - }, - ], - "allRowsSelected": false, - "areActionsDisabled": undefined, - "canSelectAll": true, - "contentId": "expanded-content", - "dropdownDirection": "down", - "dropdownPosition": "right", - "expandId": "expandable-toggle", - "firstUserColumnIndex": 0, - "onCollapse": undefined, - "onExpand": undefined, - "onRowEdit": undefined, - "onSelect": undefined, - "onSort": undefined, - "rowLabeledBy": "simple-node", - "selectVariant": "checkbox", - "sortBy": undefined, - }, - "header": Object { - "formatters": Array [], - "label": "", - "transforms": Array [ - [Function], - [Function], - [Function], - ], - }, - "property": "column-5", - "props": Object { - "data-key": 5, - "data-label": "", - }, - }, - ] - } + + - - - - + - - - - - - - - - - - - - - - - - - - - - - -
- + Another action + , + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Header cell", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "header-cell", + "props": Object { + "data-key": 0, + "data-label": "Header cell", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Branches", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "branches", + "props": Object { + "data-key": 1, + "data-label": "Branches", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Pull requests", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "pull-requests", + "props": Object { + "data-key": 2, + "data-label": "Pull requests", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Workspaces", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "workspaces", + "props": Object { + "data-key": 3, + "data-label": "Workspaces", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "Last Commit", + "transforms": Array [ + [Function], + [Function], + ], + }, + "property": "last-commit", + "props": Object { + "data-key": 4, + "data-label": "Last Commit", + }, + }, + Object { + "cell": Object { + "formatters": Array [ + [Function], + ], + "transforms": Array [ + [Function], + [Function], + ], + }, + "data": undefined, + "extraParams": Object { + "actionResolver": undefined, + "actions": Array [ + Object { + "onClick": [Function], + "title": "Some action", + }, + Object { + "onClick": [Function], + "title":
+ Another action +
, + }, + Object { + "isSeparator": true, + "onClick": null, + }, + Object { + "onClick": [Function], + "title": "Third action", + }, + ], + "allRowsSelected": false, + "areActionsDisabled": undefined, + "canSelectAll": true, + "contentId": "expanded-content", + "dropdownDirection": "down", + "dropdownPosition": "right", + "expandId": "expandable-toggle", + "firstUserColumnIndex": 0, + "onCollapse": undefined, + "onExpand": undefined, + "onRowEdit": undefined, + "onSelect": undefined, + "onSort": undefined, + "rowLabeledBy": "simple-node", + "selectVariant": "checkbox", + "sortBy": undefined, + }, + "header": Object { + "formatters": Array [], + "label": "", + "transforms": Array [ + [Function], + [Function], + [Function], + ], + }, + "property": "column-5", + "props": Object { + "data-key": 5, + "data-label": "", + }, + }, + ] + } + rowIndex={0} > - - - 		- Branches - - Pull requests - - Workspaces - - Last Commit - - -
+ + + + + + + + + + + + + + Branches + + + + + + + + + Pull requests + + + + + + + + + Workspaces + + + + + + + + + Last Commit + + + + + + + + + + + + + + + + + + + + + + + + + `; @@ -4004,7 +4625,8 @@ exports[`Simple virtualized table aria-label 1`] = ` > - - - +
- - + - - - - + - - - - - - - - - - - - - - - - - - - - - -
- Header cell - - Branches - - Pull requests - - Workspaces - - Last Commit -
+ + + + + + + + + Header cell + + + + + + + + + Branches + + + + + + + + + Pull requests + + + + + + + + + Workspaces + + + + + + + + + Last Commit + + + + + + + + + + + + + + + + + + `; @@ -4956,7 +5758,8 @@ exports[`Simple virtualized table className 1`] = ` > - - - +
- - + - - - - - - - - - - - - - - - - + - - - - - - - - - -
- Header cell - - Branches - - Pull requests - - Workspaces - - Last Commit -
+ + + + + + + + + Header cell + + + + + + + + + Branches + + + + + + + + + Pull requests + + + + + + + + + Workspaces + + + + + + + + + Last Commit + + + + + + + + + + + + + + + + + + `; @@ -5913,7 +6896,8 @@ exports[`Sortable Virtualized Table 1`] = ` > - - - +
- - + - - - - + - - - - - - - - - - - - - - - - - - - - - -
- - - - - Branches - - Pull requests - - Workspaces - - Last Commit -
+ + + + + + + + + + + + + + Branches + + + + + + + + + Pull requests + + + + + + + + + Workspaces + + + + + + + + + Last Commit + + + + + + + + + + + + + + + + + + `;