From da88256659161c86921e3a756ddd24ead14ab394 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Thu, 23 Feb 2023 09:20:12 -0500 Subject: [PATCH] copy legacy examples to deprecated tab delete examples from legacy dir add todo bump rename TableComposable demos and examples fix filename revert md references for now fix name fix a11y config test update paths revert fix duplicate id revert path update remove whitespace --- packages/react-docs/patternfly-a11y.config.js | 4 +- .../examples/{ComposableTable.md => Table.md} | 157 +++++++----------- ...sableTableActions.tsx => TableActions.tsx} | 4 +- ...sOverflow.tsx => TableActionsOverflow.tsx} | 2 +- ...omposableTableBasic.tsx => TableBasic.tsx} | 4 +- ...eTableCellWidth.tsx => TableCellWidth.tsx} | 2 +- ...ndable.tsx => TableCompoundExpandable.tsx} | 4 +- ...llingText.tsx => TableControllingText.tsx} | 2 +- ...eTableDraggable.tsx => TableDraggable.tsx} | 2 +- ...ableEmptyState.tsx => TableEmptyState.tsx} | 2 +- ...ableExpandable.tsx => TableExpandable.tsx} | 2 +- ...leFavoritable.tsx => TableFavoritable.tsx} | 6 +- ...eTableHoverable.tsx => TableHoverable.tsx} | 2 +- ...{ComposableTableMisc.tsx => TableMisc.tsx} | 2 +- ...mns.tsx => TableMultipleStickyColumns.tsx} | 2 +- ...pandable.tsx => TableNestedExpandable.tsx} | 2 +- ...stedHeaders.tsx => TableNestedHeaders.tsx} | 2 +- ...Header.tsx => TableNestedStickyHeader.tsx} | 2 +- ...ble.tsx => TableNestedTableExpandable.tsx} | 2 +- ...ableSelectable.tsx => TableSelectable.tsx} | 2 +- ...ableRadio.tsx => TableSelectableRadio.tsx} | 2 +- ...bleTableSortable.tsx => TableSortable.tsx} | 2 +- ...ableCustom.tsx => TableSortableCustom.tsx} | 2 +- ...StickyColumn.tsx => TableStickyColumn.tsx} | 2 +- ...er.tsx => TableStickyColumnsAndHeader.tsx} | 2 +- ...sableTableStriped.tsx => TableStriped.tsx} | 2 +- ...andable.tsx => TableStripedExpandable.tsx} | 2 +- ...body.tsx => TableStripedMultipleTbody.tsx} | 2 +- ...eTableStripedTr.tsx => TableStripedTr.tsx} | 2 +- ...xtModifiers.tsx => TableTextModifiers.tsx} | 2 +- ...{ComposableTableTree.tsx => TableTree.tsx} | 2 +- 31 files changed, 98 insertions(+), 131 deletions(-) rename packages/react-table/src/components/TableComposable/examples/{ComposableTable.md => Table.md} (83%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableActions.tsx => TableActions.tsx} (97%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableActionsOverflow.tsx => TableActionsOverflow.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableBasic.tsx => TableBasic.tsx} (96%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableCellWidth.tsx => TableCellWidth.tsx} (96%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableCompoundExpandable.tsx => TableCompoundExpandable.tsx} (97%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableControllingText.tsx => TableControllingText.tsx} (95%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableDraggable.tsx => TableDraggable.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableEmptyState.tsx => TableEmptyState.tsx} (95%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableExpandable.tsx => TableExpandable.tsx} (99%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableFavoritable.tsx => TableFavoritable.tsx} (95%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableHoverable.tsx => TableHoverable.tsx} (96%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableMisc.tsx => TableMisc.tsx} (97%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableMultipleStickyColumns.tsx => TableMultipleStickyColumns.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableNestedExpandable.tsx => TableNestedExpandable.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableNestedHeaders.tsx => TableNestedHeaders.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableNestedStickyHeader.tsx => TableNestedStickyHeader.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableNestedTableExpandable.tsx => TableNestedTableExpandable.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableSelectable.tsx => TableSelectable.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableSelectableRadio.tsx => TableSelectableRadio.tsx} (96%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableSortable.tsx => TableSortable.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableSortableCustom.tsx => TableSortableCustom.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableStickyColumn.tsx => TableStickyColumn.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableStickyColumnsAndHeader.tsx => TableStickyColumnsAndHeader.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableStriped.tsx => TableStriped.tsx} (96%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableStripedExpandable.tsx => TableStripedExpandable.tsx} (98%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableStripedMultipleTbody.tsx => TableStripedMultipleTbody.tsx} (97%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableStripedTr.tsx => TableStripedTr.tsx} (96%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableTextModifiers.tsx => TableTextModifiers.tsx} (94%) rename packages/react-table/src/components/TableComposable/examples/{ComposableTableTree.tsx => TableTree.tsx} (99%) diff --git a/packages/react-docs/patternfly-a11y.config.js b/packages/react-docs/patternfly-a11y.config.js index ad50cec5bc5..baff9267ad1 100644 --- a/packages/react-docs/patternfly-a11y.config.js +++ b/packages/react-docs/patternfly-a11y.config.js @@ -66,8 +66,8 @@ module.exports = { viewportDimensions: { width: 400, height: 900 } }, { - url: '/components/table/react-legacy', - label: 'legacy table content on mobile screen', + url: '/components/table/react-deprecated', + label: 'deprecated table content on mobile screen', viewportDimensions: { width: 400, height: 900 } }, ...urls diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md b/packages/react-table/src/components/TableComposable/examples/Table.md similarity index 83% rename from packages/react-table/src/components/TableComposable/examples/ComposableTable.md rename to packages/react-table/src/components/TableComposable/examples/Table.md index 9eb6315e79f..5808232713f 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md +++ b/packages/react-table/src/components/TableComposable/examples/Table.md @@ -36,7 +36,7 @@ propComponents: ouia: true --- -# Table Composable +# Table Note: Table lives in its own package at [@patternfly/react-table](https://www.npmjs.com/package/@patternfly/react-table)! @@ -58,9 +58,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; -## TableComposable examples +## Table examples -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. +This `TableComposable` component differs from the deprecated `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: @@ -68,13 +68,12 @@ Some general notes: - 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` -### Composable: Basic - -```ts file="ComposableTableBasic.tsx" +### Basic +```ts file="TableBasic.tsx" ``` -### Composable: Custom row wrapper, header tooltips & popovers +### Custom row wrapper, header tooltips & popovers - 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 @@ -82,11 +81,10 @@ Some general notes: To add a header tooltip or popover to `Th`, pass a `ThInfoType` object via the `info` prop. -```ts file="ComposableTableMisc.tsx" - +```ts file="TableMisc.tsx" ``` -### Composable: Sortable & wrapping headers +### Sortable & wrapping headers To make a column sortable, pass a `ThSortType` object via the `sort` prop on a column's `Th`. @@ -104,19 +102,17 @@ type OnSort = ( The built in display for sorting is not fully responsive, as the column headers will be displayed per row when the screen size is small. To see a full page demo of a responsive sortable table, utilizing a toolbar item to control sorting for small screens, view the `Sortable - responsive` demo in the `React demos` tab. -```ts file="ComposableTableSortable.tsx" - +```ts file="TableSortable.tsx" ``` -### Composable: Sortable - custom control +### Sortable - custom control Sorting a table may also be controlled manually with a toolbar control. To see a full page demo of a responsive table, view the `Sortable - responsive` demo in the `React demos` tab. -```ts file="ComposableTableSortableCustom.tsx" - +```ts file="TableSortableCustom.tsx" ``` -### Composable: Selectable with checkbox +### Selectable with checkbox To make a row selectable, the table needs a selection column. The selection column is just another column, but with selection specific props added. @@ -143,27 +139,24 @@ type OnSelect = ( **Note:** This example has a `shift + select` feature where holding shift while checking checkboxes will check intermediate rows' checkboxes. -```ts file="ComposableTableSelectable.tsx" - +```ts file="TableSelectable.tsx" ``` -### Composable: Selectable radio input +### 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. -```ts file="ComposableTableSelectableRadio.tsx" - +```ts file="TableSelectableRadio.tsx" ``` -### Composable: Row click handler, hoverable & selected rows +### Row click handler, hoverable & selected rows This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view. -```ts file="ComposableTableHoverable.tsx" - +```ts file="TableHoverable.tsx" ``` -### Composable: Actions +### 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. @@ -171,19 +164,17 @@ To make a cell an action cell, render an `ActionsColumn` component inside a row' If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `ActionsColumn` can be passed a `menuAppendTo` prop to adjust where the actions menu is appended. -```ts file="ComposableTableActions.tsx" - +```ts file="TableActions.tsx" ``` -### Composable: Actions Overflow +### Actions Overflow Useing an `OverflowMenu` in the actions column, allowing the actions to condense into a dropdown if necessary for space. -```ts file="ComposableTableActionsOverflow.tsx" - +```ts file="TableActionsOverflow.tsx" ``` -### Composable: Expandable +### Expandable To make a parent/child row pair expandable: @@ -205,11 +196,10 @@ type OnCollapse = ( Note: Table column widths will respond automatically when toggling expanded rows. To retain column widths between expanded and collapsed states, column header and/or data cell widths must be set. -```ts file="ComposableTableExpandable.tsx" - +```ts file="TableExpandable.tsx" ``` -### Composable: Compound expandable +### Compound expandable To make a parent/child row pair compound expandable: @@ -230,35 +220,30 @@ export type OnExpand = ( ) => void; ``` -```ts file="ComposableTableCompoundExpandable.tsx" - +```ts file="TableCompoundExpandable.tsx" ``` -### Composable: Cell width, breakpoint modifiers - -```ts file="ComposableTableCellWidth.tsx" +### Cell width, breakpoint modifiers +```ts file="TableCellWidth.tsx" ``` -### Composable: Controlling text - -```ts file="ComposableTableControllingText.tsx" +### Controlling text +```ts file="TableControllingText.tsx" ``` -### Composable: Modifiers with table text - -```ts file="ComposableTableTextModifiers.tsx" +### Modifiers with table text +```ts file="TableTextModifiers.tsx" ``` -### Composable: Empty state - -```ts file="ComposableTableEmptyState.tsx" +### Empty state +```ts file="TableEmptyState.tsx" ``` -### Composable: Favoritable (implemented with sortable) +### Favoritable (implemented with sortable) To make a row favoritable, the table needs a favoritable column. Pass a `TdFavoritesType` object via the `favorites` prop on each rows's first `Td` in the favoritable column. @@ -277,11 +262,10 @@ type OnFavorite = ( To make a favoritable column sortable, pass a `ThSortType` object to the favoritable column's `Th` with `isFavorites` set to true. -```ts file="ComposableTableFavoritable.tsx" - +```ts file="TableFavoritable.tsx" ``` -### Composable: Tree table +### Tree table To enable a tree table: @@ -311,11 +295,10 @@ Note: If this table is going to be tested using axe-core, the tests will flag th aria-posinset, and aria-setsize as violations. This is an intentional choice at this time so that the voice over technologies will recognize the flat table structure as a tree. -```ts file="ComposableTableTree.tsx" - +```ts file="TableTree.tsx" ``` -### Composable: Draggable row table +### Draggable row table To make a row draggable: @@ -325,11 +308,10 @@ To make a row draggable: 4. While the user is dragging a row, the `pf-m-drag-over` class needs to be applied to `TableComposable`. 5. The draggable `Td` in each row needs a `TdDraggableType` object passed to its `draggable` prop. -```ts isBeta file="ComposableTableDraggable.tsx" - +```ts isBeta file="TableDraggable.tsx" ``` -## Sticky table modifiers +### Sticky table modifiers To make certain columns and the header sticky, the table must be wrapped in a combination of `OuterScrollContainer` and `InnerScrollContainer`. For sticky columns, only `InnerScrollContainer` is required. For sticky headers, and sticky headers with sticky columns, both containers are required to ensure the sticky behavior behaves correctly. @@ -341,31 +323,28 @@ There are a few ways this can be handled: - Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the table's parent element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table. - In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index` than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table. -### Composable: Sticky column +### Sticky column To make a column sticky, wrap `TableComposable` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky: `isStickyColumn` and `hasRightBorder`. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property. To set the minimum width of the sticky column, use the `stickyMinWidth` property. -```ts file="ComposableTableStickyColumn.tsx" - +```ts file="TableStickyColumn.tsx" ``` -### Composable: Multiple sticky columns +### Multiple sticky columns To make multiple columns sticky, wrap `TableComposable` with `InnerScrollContainer` and add `isStickyColumn` to all columns that should be sticky. The rightmost column should also have the `hasRightBorder` property, and each sticky column after the first must define a `stickyLeftOffset` property that equals the combined width of the previous sticky columns - set by `stickyMinWidth`. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property. -```ts file="ComposableTableMultipleStickyColumns.tsx" - +```ts file="TableMultipleStickyColumns.tsx" ``` -### Composable: Sticky columns and header +### Sticky columns and header To maintain proper sticky behavior across sticky columns and header, `TableComposable` must be wrapped with `OuterScrollContainer` and `InnerScrollContainer`. -```ts file="ComposableTableStickyColumnsAndHeader.tsx" - +```ts file="TableStickyColumnsAndHeader.tsx" ``` -## Nested column headers +### Nested column headers To make a nested column header: @@ -378,60 +357,48 @@ The first `Tr` represents the top level of columns, and each must pass either `r The second `Tr` represents the second level of sub columns. The `Th` in this row each should pass `isSubHeader`, and the last sub column of a column should also pass `hasRightBorder`. -### Composable: Nested column headers - -```ts file="ComposableTableNestedHeaders.tsx" - +```ts file="TableNestedHeaders.tsx" ``` -### Composable: Nested column headers and expandable rows - -```ts file="ComposableTableNestedExpandable.tsx" +### Nested column headers and expandable rows +```ts file="TableNestedExpandable.tsx" ``` -### Composable: Expandable with nested table - -```ts file="ComposableTableNestedTableExpandable.tsx" +### Expandable with nested table +```ts file="TableNestedTableExpandable.tsx" ``` -### Composable: Nested sticky header - -```ts file="ComposableTableNestedStickyHeader.tsx" +### Nested sticky header +```ts file="TableNestedStickyHeader.tsx" ``` -## Striped - -### Composable: Striped +### Striped To apply striping to a basic table, add the `isStriped` property to `TableComposable`. -```ts file="ComposableTableStriped.tsx" - +```ts file="TableStriped.tsx" ``` -### Composable: Striped expandable +### Striped expandable To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `TableComposable`. -```ts file="ComposableTableStripedExpandable.tsx" - +```ts file="TableStripedExpandable.tsx" ``` -### Composable: Striped multiple tobdy +### Striped multiple tobdy When there are multiple `Tbody` components within a table, a more granular application of striping may be controlled by adding either the `isEvenStriped` or `isOddStriped` properties to `Tbody`. These properties will stripe even or odd rows within that `Tbody` respectively. -```ts file="ComposableTableStripedMultipleTbody.tsx" - +```ts file="TableStripedMultipleTbody.tsx" ``` -### Composable: Striped tr +### Striped tr To manually control striping, add the `isStriped` property to each desired `Tr`. This replaces adding the `isStriped` property to `TableComposable`. -```ts file="ComposableTableStripedTr.tsx" - +```ts file="TableStripedTr.tsx" ``` diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableActions.tsx b/packages/react-table/src/components/TableComposable/examples/TableActions.tsx similarity index 97% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableActions.tsx rename to packages/react-table/src/components/TableComposable/examples/TableActions.tsx index a90cd93bb9f..f73d6a20744 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableActions.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableActions.tsx @@ -25,7 +25,7 @@ interface Repository { type ExampleType = 'defaultToggle' | 'customToggle'; -export const ComposableTableActions: React.FunctionComponent = () => { +export const TableActions: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' }, @@ -44,7 +44,7 @@ export const ComposableTableActions: React.FunctionComponent = () => { singleAction: 'Single action' }; - // This state is just for the ToggleGroup in this example and isn't necessary for TableComposable usage. + // This state is just for the ToggleGroup in this example and isn't necessary for Table usage. const [exampleChoice, setExampleChoice] = React.useState('defaultToggle'); const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (_isSelected, event) => { const id = event.currentTarget.id; diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx b/packages/react-table/src/components/TableComposable/examples/TableActionsOverflow.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx rename to packages/react-table/src/components/TableComposable/examples/TableActionsOverflow.tsx index 83b11678e06..e7ba0dfc04c 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableActionsOverflow.tsx @@ -24,7 +24,7 @@ interface Repository { isMenuOpen: boolean; } -export const ComposableTableActions: React.FunctionComponent = () => { +export const TableActions: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five', isMenuOpen: false }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableBasic.tsx b/packages/react-table/src/components/TableComposable/examples/TableBasic.tsx similarity index 96% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableBasic.tsx rename to packages/react-table/src/components/TableComposable/examples/TableBasic.tsx index bd2e977d982..ccfde960bfa 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableBasic.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableBasic.tsx @@ -12,7 +12,7 @@ interface Repository { type ExampleType = 'default' | 'compact' | 'compactBorderless'; -export const ComposableTableBasic: React.FunctionComponent = () => { +export const TableBasic: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' }, @@ -28,7 +28,7 @@ export const ComposableTableBasic: React.FunctionComponent = () => { lastCommit: 'Last commit' }; - // This state is just for the ToggleGroup in this example and isn't necessary for TableComposable usage. + // This state is just for the ToggleGroup in this example and isn't necessary for Table usage. const [exampleChoice, setExampleChoice] = React.useState('default'); const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (_isSelected, event) => { const id = event.currentTarget.id; diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableCellWidth.tsx b/packages/react-table/src/components/TableComposable/examples/TableCellWidth.tsx similarity index 96% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableCellWidth.tsx rename to packages/react-table/src/components/TableComposable/examples/TableCellWidth.tsx index d897ca54ba0..5e36ad39281 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableCellWidth.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableCellWidth.tsx @@ -9,7 +9,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableCellWidth: React.FunctionComponent = () => { +export const TableCellWidth: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableCompoundExpandable.tsx b/packages/react-table/src/components/TableComposable/examples/TableCompoundExpandable.tsx similarity index 97% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableCompoundExpandable.tsx rename to packages/react-table/src/components/TableComposable/examples/TableCompoundExpandable.tsx index f25df5e7f12..50272b106f9 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableCompoundExpandable.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableCompoundExpandable.tsx @@ -13,7 +13,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableCompoundExpandable: React.FunctionComponent = () => { +export const TableCompoundExpandable: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'siemur/test-space', branches: 10, prs: 4, workspaces: 4, lastCommit: '20 minutes' }, @@ -52,7 +52,7 @@ export const ComposableTableCompoundExpandable: React.FunctionComponent = () => ): TdProps['compoundExpand'] => ({ isExpanded: expandedCells[repo.name] === columnKey, onToggle: () => setCellExpanded(repo, columnKey, expandedCells[repo.name] !== columnKey), - expandId: 'composable-compound-expandable-example', + expandId: 'compound-expandable-example', rowIndex, columnIndex }); diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableControllingText.tsx b/packages/react-table/src/components/TableComposable/examples/TableControllingText.tsx similarity index 95% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableControllingText.tsx rename to packages/react-table/src/components/TableComposable/examples/TableControllingText.tsx index 9d6d8ee316e..b1a908572ab 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableControllingText.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableControllingText.tsx @@ -12,7 +12,7 @@ const columnNames = { nowrap: 'No wrap' }; -export const ComposableTableControllingText: React.FunctionComponent = () => ( +export const TableControllingText: React.FunctionComponent = () => ( diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableDraggable.tsx b/packages/react-table/src/components/TableComposable/examples/TableDraggable.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableDraggable.tsx rename to packages/react-table/src/components/TableComposable/examples/TableDraggable.tsx index 76c25057cf0..1778ee4312f 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableDraggable.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableDraggable.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { TableComposable, Thead, Tbody, Tr, Th, Td, TbodyProps, TrProps } from '@patternfly/react-table'; import styles from '@patternfly/react-styles/css/components/Table/table'; -export const ComposableTableDraggable: React.FunctionComponent = () => { +export const TableDraggable: React.FunctionComponent = () => { const [draggedItemId, setDraggedItemId] = React.useState(null); const [draggingToItemIndex, setDraggingToItemIndex] = React.useState(null); const [isDragging, setIsDragging] = React.useState(false); diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableEmptyState.tsx b/packages/react-table/src/components/TableComposable/examples/TableEmptyState.tsx similarity index 95% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableEmptyState.tsx rename to packages/react-table/src/components/TableComposable/examples/TableEmptyState.tsx index abf2859cc9a..14f68ac01dc 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableEmptyState.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableEmptyState.tsx @@ -16,7 +16,7 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; // This example has been simplified to focus on the empty state. In real usage, // you may want to derive your rows from typed underlying data and minimal state. See other examples. -export const ComposableTableEmptyState: React.FunctionComponent = () => ( +export const TableEmptyState: React.FunctionComponent = () => ( diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableExpandable.tsx b/packages/react-table/src/components/TableComposable/examples/TableExpandable.tsx similarity index 99% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableExpandable.tsx rename to packages/react-table/src/components/TableComposable/examples/TableExpandable.tsx index 6a12cbc5241..cb48d15ed44 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableExpandable.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableExpandable.tsx @@ -17,7 +17,7 @@ interface Repository { } // eslint-disable-next-line @typescript-eslint/no-unused-vars -export const ComposableTableExpandable: React.FunctionComponent = () => { +export const TableExpandable: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableFavoritable.tsx b/packages/react-table/src/components/TableComposable/examples/TableFavoritable.tsx similarity index 95% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableFavoritable.tsx rename to packages/react-table/src/components/TableComposable/examples/TableFavoritable.tsx index 47c0c293e29..2128bf2a58a 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableFavoritable.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableFavoritable.tsx @@ -9,7 +9,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableFavoritable: React.FunctionComponent = () => { +export const TableFavoritable: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' }, @@ -33,7 +33,7 @@ export const ComposableTableFavoritable: React.FunctionComponent = () => { // Sort direction of the currently sorted column const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null); - // Favorite state is similar to selection state, see Composable: Selectable with checkbox. + // Favorite state is similar to selection state, see Selectable with checkbox. const [favoriteRepoNames, setFavoriteRepoNames] = React.useState([]); const setRepoFavorited = (repo: Repository, isFavoriting = true) => setFavoriteRepoNames(prevFavorites => { @@ -44,7 +44,7 @@ export const ComposableTableFavoritable: React.FunctionComponent = () => { // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index. // In this example we only deal with booleans here because we only sort on the favorites column. - // For more complex sorting, see Composable: Sortable. + // For more complex sorting, see Sortable. // Note: We also memoize the sortable values with useCallback to prevent rows jumping around when you change // the favorites while sorting on that column. Only updating the sort state will reorder the rows. const getSortableRowValues = React.useCallback((repo: Repository): boolean[] => [isRepoFavorited(repo)], [ diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableHoverable.tsx b/packages/react-table/src/components/TableComposable/examples/TableHoverable.tsx similarity index 96% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableHoverable.tsx rename to packages/react-table/src/components/TableComposable/examples/TableHoverable.tsx index c55d23811ab..327a768e457 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableHoverable.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableHoverable.tsx @@ -9,7 +9,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableHoverable: React.FunctionComponent = () => { +export const TableHoverable: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableMisc.tsx b/packages/react-table/src/components/TableComposable/examples/TableMisc.tsx similarity index 97% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableMisc.tsx rename to packages/react-table/src/components/TableComposable/examples/TableMisc.tsx index 09a02acd054..0ceb445319e 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableMisc.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableMisc.tsx @@ -9,7 +9,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableMisc: React.FunctionComponent = () => { +export const TableMisc: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableMultipleStickyColumns.tsx b/packages/react-table/src/components/TableComposable/examples/TableMultipleStickyColumns.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableMultipleStickyColumns.tsx rename to packages/react-table/src/components/TableComposable/examples/TableMultipleStickyColumns.tsx index ad91649b0c4..ab06f35c065 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableMultipleStickyColumns.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableMultipleStickyColumns.tsx @@ -14,7 +14,7 @@ interface Fact { detail7: string; } -export const ComposableTableMultipleStickyColumns: React.FunctionComponent = () => { +export const TableMultipleStickyColumns: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({ name: `Fact ${index + 1}`, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableNestedExpandable.tsx b/packages/react-table/src/components/TableComposable/examples/TableNestedExpandable.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableNestedExpandable.tsx rename to packages/react-table/src/components/TableComposable/examples/TableNestedExpandable.tsx index b6476abee32..caf12f78e7d 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableNestedExpandable.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableNestedExpandable.tsx @@ -22,7 +22,7 @@ interface Team { description: string; } -export const ComposableTableNestedExpandable: React.FunctionComponent = () => { +export const TableNestedExpandable: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const teams: Team[] = [ { diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableNestedHeaders.tsx b/packages/react-table/src/components/TableComposable/examples/TableNestedHeaders.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableNestedHeaders.tsx rename to packages/react-table/src/components/TableComposable/examples/TableNestedHeaders.tsx index 9dd362fcc5c..641fad0bb55 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableNestedHeaders.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableNestedHeaders.tsx @@ -18,7 +18,7 @@ interface PodConnection { packets: number; } -export const ComposableTableNestedHeaders: React.FunctionComponent = () => { +export const TableNestedHeaders: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const connections: PodConnection[] = [ { diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableNestedStickyHeader.tsx b/packages/react-table/src/components/TableComposable/examples/TableNestedStickyHeader.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableNestedStickyHeader.tsx rename to packages/react-table/src/components/TableComposable/examples/TableNestedStickyHeader.tsx index 7df5eafef48..462276749a3 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableNestedStickyHeader.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableNestedStickyHeader.tsx @@ -18,7 +18,7 @@ interface PodConnection { packets: number; } -export const ComposableTableNestedHeaders: React.FunctionComponent = () => { +export const TableNestedHeaders: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const connections: PodConnection[] = [ { diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableNestedTableExpandable.tsx b/packages/react-table/src/components/TableComposable/examples/TableNestedTableExpandable.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableNestedTableExpandable.tsx rename to packages/react-table/src/components/TableComposable/examples/TableNestedTableExpandable.tsx index 9c8242d9464..c3cce30377c 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableNestedTableExpandable.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableNestedTableExpandable.tsx @@ -71,7 +71,7 @@ const NestedReposTable: React.FunctionComponent = () => { ); }; -export const ComposableTableExpandable: React.FunctionComponent = () => { +export const TableExpandable: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'Node 1', branches: '10', prs: '2', nestedComponent: , link: Link 1 }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableSelectable.tsx b/packages/react-table/src/components/TableComposable/examples/TableSelectable.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableSelectable.tsx rename to packages/react-table/src/components/TableComposable/examples/TableSelectable.tsx index 0e348b47935..65cbf937ff0 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableSelectable.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableSelectable.tsx @@ -9,7 +9,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableSelectable: React.FunctionComponent = () => { +export const TableSelectable: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableSelectableRadio.tsx b/packages/react-table/src/components/TableComposable/examples/TableSelectableRadio.tsx similarity index 96% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableSelectableRadio.tsx rename to packages/react-table/src/components/TableComposable/examples/TableSelectableRadio.tsx index 1f8705e9ab1..99da7eb88dc 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableSelectableRadio.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableSelectableRadio.tsx @@ -9,7 +9,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableSelectableRadio: React.FunctionComponent = () => { +export const TableSelectableRadio: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableSortable.tsx b/packages/react-table/src/components/TableComposable/examples/TableSortable.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableSortable.tsx rename to packages/react-table/src/components/TableComposable/examples/TableSortable.tsx index 71188ae8cac..4baa0a39e70 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableSortable.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableSortable.tsx @@ -9,7 +9,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableSortable: React.FunctionComponent = () => { +export const TableSortable: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableSortableCustom.tsx b/packages/react-table/src/components/TableComposable/examples/TableSortableCustom.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableSortableCustom.tsx rename to packages/react-table/src/components/TableComposable/examples/TableSortableCustom.tsx index d8d534171ed..0145b861fb9 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableSortableCustom.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableSortableCustom.tsx @@ -13,7 +13,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableSortableCustom: React.FunctionComponent = () => { +export const TableSortableCustom: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableStickyColumn.tsx b/packages/react-table/src/components/TableComposable/examples/TableStickyColumn.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableStickyColumn.tsx rename to packages/react-table/src/components/TableComposable/examples/TableStickyColumn.tsx index 70f13ccc7cf..48461a3fd12 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableStickyColumn.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableStickyColumn.tsx @@ -13,7 +13,7 @@ interface Fact { detail7: string; } -export const ComposableTableStickyColumn: React.FunctionComponent = () => { +export const TableStickyColumn: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({ name: `Fact ${index + 1}`, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableStickyColumnsAndHeader.tsx b/packages/react-table/src/components/TableComposable/examples/TableStickyColumnsAndHeader.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableStickyColumnsAndHeader.tsx rename to packages/react-table/src/components/TableComposable/examples/TableStickyColumnsAndHeader.tsx index 135bca06d47..623a8770e33 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableStickyColumnsAndHeader.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableStickyColumnsAndHeader.tsx @@ -24,7 +24,7 @@ interface Fact { detail7: string; } -export const ComposableTableStickyColumnsAndHeader: React.FunctionComponent = () => { +export const TableStickyColumnsAndHeader: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({ name: `Fact ${index + 1}`, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableStriped.tsx b/packages/react-table/src/components/TableComposable/examples/TableStriped.tsx similarity index 96% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableStriped.tsx rename to packages/react-table/src/components/TableComposable/examples/TableStriped.tsx index ba90e890733..dbdb914e629 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableStriped.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableStriped.tsx @@ -9,7 +9,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableStriped: React.FunctionComponent = () => { +export const TableStriped: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'Repository 1', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableStripedExpandable.tsx b/packages/react-table/src/components/TableComposable/examples/TableStripedExpandable.tsx similarity index 98% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableStripedExpandable.tsx rename to packages/react-table/src/components/TableComposable/examples/TableStripedExpandable.tsx index e231b5d0ba8..8e7f67cde51 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableStripedExpandable.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableStripedExpandable.tsx @@ -16,7 +16,7 @@ interface Repository { }; } -export const ComposableTableStripedExpandable: React.FunctionComponent = () => { +export const TableStripedExpandable: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableStripedMultipleTbody.tsx b/packages/react-table/src/components/TableComposable/examples/TableStripedMultipleTbody.tsx similarity index 97% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableStripedMultipleTbody.tsx rename to packages/react-table/src/components/TableComposable/examples/TableStripedMultipleTbody.tsx index bae6926ec91..e3a872a2785 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableStripedMultipleTbody.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableStripedMultipleTbody.tsx @@ -10,7 +10,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableStripedMultipleTbody: React.FunctionComponent = () => { +export const TableStripedMultipleTbody: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories1: Repository[] = [ { diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableStripedTr.tsx b/packages/react-table/src/components/TableComposable/examples/TableStripedTr.tsx similarity index 96% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableStripedTr.tsx rename to packages/react-table/src/components/TableComposable/examples/TableStripedTr.tsx index 6d261db36e1..0f0a0308cdf 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableStripedTr.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableStripedTr.tsx @@ -9,7 +9,7 @@ interface Repository { lastCommit: string; } -export const ComposableTableStripedTr: React.FunctionComponent = () => { +export const TableStripedTr: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const repositories: Repository[] = [ { name: 'Repository 1', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' }, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableTextModifiers.tsx b/packages/react-table/src/components/TableComposable/examples/TableTextModifiers.tsx similarity index 94% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableTextModifiers.tsx rename to packages/react-table/src/components/TableComposable/examples/TableTextModifiers.tsx index 9222af74660..97e4be0b3cc 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableTextModifiers.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableTextModifiers.tsx @@ -9,7 +9,7 @@ const columnNames = { wrap: 'Wrapping table header text. This th text will wrap instead of truncate.' }; -export const ComposableTableText: React.FunctionComponent = () => ( +export const TableTextModifiers: React.FunctionComponent = () => ( diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTableTree.tsx b/packages/react-table/src/components/TableComposable/examples/TableTree.tsx similarity index 99% rename from packages/react-table/src/components/TableComposable/examples/ComposableTableTree.tsx rename to packages/react-table/src/components/TableComposable/examples/TableTree.tsx index e58fb6712f2..aa338073ec1 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTableTree.tsx +++ b/packages/react-table/src/components/TableComposable/examples/TableTree.tsx @@ -12,7 +12,7 @@ interface RepositoriesTreeNode { children?: RepositoriesTreeNode[]; } -export const ComposableTableTree: React.FunctionComponent = () => { +export const TableTree: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. const data: RepositoriesTreeNode[] = [ {