diff --git a/packages/react-table/src/components/Table/Th.tsx b/packages/react-table/src/components/Table/Th.tsx index e67c0438ee6..e0e539e4adf 100644 --- a/packages/react-table/src/components/Table/Th.tsx +++ b/packages/react-table/src/components/Table/Th.tsx @@ -102,7 +102,6 @@ const ThBase: React.FunctionComponent = ({ ); } - const [favorited, setFavorited] = React.useState(false); const [showTooltip, setShowTooltip] = React.useState(false); const [truncated, setTruncated] = React.useState(false); const cellRef = innerRef ? innerRef : React.createRef(); @@ -123,11 +122,8 @@ const ThBase: React.FunctionComponent = ({ sortBy: sort.sortBy, tooltip: tooltip as string, tooltipProps, - onFavorite: (event: React.MouseEvent, isFavorited: boolean) => { - setFavorited(isFavorited); - sort.onFavorite(event, isFavorited); - }, - favorited + onFavorite: (event: React.MouseEvent, isFavorited: boolean) => sort.onFavorite(event, isFavorited), + favorited: sort.favorited })(); } else { sortParams = sortable(children as IFormatterValueType, { @@ -223,7 +219,7 @@ const ThBase: React.FunctionComponent = ({ hasRightBorder && scrollStyles.modifiers.borderRight, hasLeftBorder && scrollStyles.modifiers.borderLeft, modifier && styles.modifiers[modifier as 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap'], - favorited && styles.modifiers.favorited, + sort?.favorited && styles.modifiers.favorited, mergedClassName )} {...mergedProps} diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx index 3291cb6c995..2429731aa5d 100644 --- a/packages/react-table/src/components/Table/base/types.tsx +++ b/packages/react-table/src/components/Table/base/types.tsx @@ -167,6 +167,8 @@ export interface ThSortType { isFavorites?: boolean; /** Click callback on the star icon button (only for favoritable cell). */ onFavorite?: OnFavorite; + /** Flag if the cell is favorited, only used for favoritable cells. */ + favorited?: boolean; } export interface ThSelectType { diff --git a/packages/react-table/src/components/Table/examples/TableFavoritable.tsx b/packages/react-table/src/components/Table/examples/TableFavoritable.tsx index 0783a360f0e..4efa5da9185 100644 --- a/packages/react-table/src/components/Table/examples/TableFavoritable.tsx +++ b/packages/react-table/src/components/Table/examples/TableFavoritable.tsx @@ -42,6 +42,9 @@ export const TableFavoritable: React.FunctionComponent = () => { }); const isRepoFavorited = (repo: Repository) => favoriteRepoNames.includes(repo.name); + // State of the header cell to favorite / unfavorite all rows + const [headerFavorited, setHeaderFavorited] = React.useState(false); + // 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 Sortable. @@ -80,9 +83,11 @@ export const TableFavoritable: React.FunctionComponent = () => { setActiveSortIndex(index); setActiveSortDirection(direction); }, - onFavorite: (_event, isFavorited) => { + onFavorite: (_event, isFavorited: boolean) => { repositories.forEach((repo) => setRepoFavorited(repo, isFavorited)); + setHeaderFavorited(isFavorited); }, + favorited: headerFavorited, columnIndex }); @@ -104,7 +109,20 @@ export const TableFavoritable: React.FunctionComponent = () => { setRepoFavorited(repo, isFavoriting), + onFavorite: (_event, isFavoriting) => { + setRepoFavorited(repo, isFavoriting); + + if ( + isFavoriting && + repositories.filter((r) => r !== repo).every((r) => favoriteRepoNames.includes(r.name)) + ) { + setHeaderFavorited(true); + } + + if (!isFavoriting && favoriteRepoNames.length === 1 && favoriteRepoNames.includes(repo.name)) { + setHeaderFavorited(false); + } + }, rowIndex }} />