Use new useConditionallyHiddenColumns hook (#2695)

https://linear.app/unleash/issue/2-515/adapt-tables-to-use-the-new-useconditionallyhiddencolumns-hook Uses the new `useConditionallyHiddenColumns` hook, like mentioned here: https://github.com/Unleash/unleash/pull/2691 Also includes small fixes for things I caught along the way. See comments below.
2025-03-18 00:19:49 +01:00 · 2022-12-16 09:46:04 +00:00 · 2022-12-16 09:46:04 +00:00 · 1d1219a055
commit 1d1219a055
parent e437b61753
14 changed files with 213 additions and 141 deletions
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx
@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
    Table,
    SortableTableHeader,
@ -28,6 +28,7 @@ import { HighlightCell } from 'component/common/Table/cells/HighlightCell/Highli
 import theme from 'themes/theme';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import { Search } from 'component/common/Search/Search';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 const ROOTROLE = 'root';
 const BUILTIN_ROLE_TYPE = 'project';
@ -174,13 +175,16 @@ const ProjectRoleList = () => {
        useSortBy
    );

-    useEffect(() => {
-        const hiddenColumns = [];
-        if (isExtraSmallScreen) {
-            hiddenColumns.push('Icon');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isExtraSmallScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isExtraSmallScreen,
+                columns: ['Icon'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );

    let count =
        data.length < rows.length
--- a/frontend/src/component/admin/users/UsersList/UsersList.tsx
+++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx
@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
 import ChangePassword from './ChangePassword/ChangePassword';
 import DeleteUser from './DeleteUser/DeleteUser';
@ -32,6 +32,7 @@ import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCel
 import { UsersActionsCell } from './UsersActionsCell/UsersActionsCell';
 import { Search } from 'component/common/Search/Search';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 const UsersList = () => {
    const navigate = useNavigate();
@ -216,19 +217,24 @@ const UsersList = () => {
        useFlexLayout
    );

-    useEffect(() => {
-        const hiddenColumns = [];
-        if (!isBillingUsers || isSmallScreen) {
-            hiddenColumns.push('type');
-        }
-        if (isSmallScreen) {
-            hiddenColumns.push('createdAt', 'last-login');
-        }
-        if (isExtraSmallScreen) {
-            hiddenColumns.push('imageUrl', 'role');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isExtraSmallScreen, isSmallScreen, isBillingUsers]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: !isBillingUsers || isSmallScreen,
+                columns: ['type'],
+            },
+            {
+                condition: isExtraSmallScreen,
+                columns: ['imageUrl', 'role'],
+            },
+            {
+                condition: isSmallScreen,
+                columns: ['createdAt', 'last-login'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );

    return (
        <PageContent
--- a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
+++ b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
@ -26,6 +26,7 @@ import { FeatureArchivedCell } from './FeatureArchivedCell/FeatureArchivedCell';
 import { useSearchParams } from 'react-router-dom';
 import { ArchivedFeatureDeleteConfirm } from './ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm';
 import { IFeatureToggle } from 'interfaces/featureToggle';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 export interface IFeaturesArchiveTableProps {
    archivedFeatures: FeatureSchema[];
@ -84,7 +85,6 @@ export const ArchiveTable = ({
    const columns = useMemo(
        () => [
            {
-                id: 'Seen',
                Header: 'Seen',
                width: 85,
                canSort: true,
@ -174,6 +174,8 @@ export const ArchiveTable = ({
            // Always hidden -- for search
            {
                accessor: 'description',
+                header: 'Description',
+                searchable: true,
            },
        ],
        //eslint-disable-next-line
@ -222,16 +224,20 @@ export const ArchiveTable = ({
        useSortBy
    );

-    useEffect(() => {
-        const hiddenColumns = ['description'];
-        if (isMediumScreen) {
-            hiddenColumns.push('lastSeenAt', 'status');
-        }
-        if (isSmallScreen) {
-            hiddenColumns.push('type', 'createdAt');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isSmallScreen, isMediumScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isSmallScreen,
+                columns: ['type', 'createdAt'],
+            },
+            {
+                condition: isMediumScreen,
+                columns: ['lastSeenAt', 'stale'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );

    useEffect(() => {
        if (loading) {
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
+++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
@ -25,6 +25,7 @@ import { ChangeRequestTitleCell } from './ChangeRequestTitleCell/ChangeRequestTi
 import { TableBody, TableRow } from '../../../common/Table';
 import { useStyles } from './ChangeRequestsTabs.styles';
 import { createLocalStorage } from '../../../../utils/createLocalStorage';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 export interface IChangeRequestTableProps {
    changeRequests: any[];
@ -172,13 +173,16 @@ export const ChangeRequestsTabs = ({
        useSortBy
    );

-    useEffect(() => {
-        const hiddenColumns = [''];
-        if (isSmallScreen) {
-            hiddenColumns.push('createdBy', 'updatedAt');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isSmallScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isSmallScreen,
+                columns: ['createdBy'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );

    useEffect(() => {
        if (loading) {
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@ -26,6 +26,7 @@ import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/
 import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/FavoriteIconHeader';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 export const featuresPlaceholder: FeatureSchema[] = Array(15).fill({
    name: 'Name of the feature',
@ -174,6 +175,8 @@ export const FeatureToggleListTable: VFC = () => {
            // Always hidden -- for search
            {
                accessor: 'description',
+                Header: 'Description',
+                searchable: true,
            },
        ],
        [isFavoritesPinned, uiConfig?.flags?.favorites]
@ -213,19 +216,24 @@ export const FeatureToggleListTable: VFC = () => {
        useFlexLayout
    );

-    useEffect(() => {
-        const hiddenColumns = ['description'];
-        if (!features.some(({ tags }) => tags?.length)) {
-            hiddenColumns.push('tags');
-        }
-        if (isMediumScreen) {
-            hiddenColumns.push('lastSeenAt', 'stale');
-        }
-        if (isSmallScreen) {
-            hiddenColumns.push('type', 'createdAt', 'tags');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isSmallScreen, isMediumScreen, features, columns]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: !features.some(({ tags }) => tags?.length),
+                columns: ['tags'],
+            },
+            {
+                condition: isSmallScreen,
+                columns: ['type', 'createdAt', 'tags'],
+            },
+            {
+                condition: isMediumScreen,
+                columns: ['lastSeenAt', 'stale'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );

    useEffect(() => {
        const tableState: PageQueryType = {};
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
@ -5,9 +5,10 @@ import { useTable, useGlobalFilter, useSortBy } from 'react-table';
 import { SortableTableHeader, TableCell, Table } from 'component/common/Table';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import { Assessment } from '@mui/icons-material';
-import { useMemo, useEffect } from 'react';
+import { useMemo } from 'react';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import theme from 'themes/theme';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 interface IFeatureMetricsTableProps {
    metrics: IFeatureMetricsRaw[];
@ -41,13 +42,16 @@ export const FeatureMetricsTable = ({
        useSortBy
    );

-    useEffect(() => {
-        const hiddenColumns = [];
-        if (isMediumScreen) {
-            hiddenColumns.push('appName', 'environment');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isMediumScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isMediumScreen,
+                columns: ['appName', 'environment'],
+            },
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );

    if (metrics.length === 0) {
        return null;
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable.tsx
@ -13,12 +13,13 @@ import {
    IOverride,
    IPayload,
 } from 'interfaces/featureToggle';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useFlexLayout, useSortBy, useTable } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { PayloadCell } from './PayloadCell/PayloadCell';
 import { OverridesCell } from './OverridesCell/OverridesCell';
 import { VariantsActionCell } from './VariantsActionsCell/VariantsActionsCell';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 const StyledTableContainer = styled('div')(({ theme }) => ({
    margin: theme.spacing(3, 0),
@ -145,16 +146,20 @@ export const EnvironmentVariantsTable = ({
        useFlexLayout
    );

-    useEffect(() => {
-        const hiddenColumns = [];
-        if (isLargeScreen) {
-            hiddenColumns.push('weightType');
-        }
-        if (isMediumScreen) {
-            hiddenColumns.push('payload', 'overrides');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isMediumScreen, isLargeScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isMediumScreen,
+                columns: ['payload', 'overrides'],
+            },
+            {
+                condition: isLargeScreen,
+                columns: ['weightType'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );

    return (
        <StyledTableContainer>
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx
@ -34,6 +34,7 @@ import { PayloadOverridesCell } from './PayloadOverridesCell/PayloadOverridesCel
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import theme from 'themes/theme';
 import { VariantsActionCell } from './VariantsActionsCell/VariantsActionsCell';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 export const FeatureVariantsList = () => {
    const { hasAccess } = useContext(AccessContext);
@ -206,16 +207,20 @@ export const FeatureVariantsList = () => {
        useSortBy
    );

-    useEffect(() => {
-        const hiddenColumns = [];
-        if (isLargeScreen) {
-            hiddenColumns.push('weightType');
-        }
-        if (isMediumScreen) {
-            hiddenColumns.push('data');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isMediumScreen, isLargeScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isMediumScreen,
+                columns: ['data'],
+            },
+            {
+                condition: isLargeScreen,
+                columns: ['weightType'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );

    // @ts-expect-error
    const setClonedVariants = clonedVariants =>
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx
@ -26,6 +26,7 @@ import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import useLoading from 'hooks/useLoading';
 import { VariantCell } from './VariantCell/VariantCell';
 import { FeatureResultInfoPopoverCell } from './FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 const defaultSort: SortingRule<string> = { id: 'name' };
 const { value, setValue } = createLocalStorage(
@ -184,16 +185,20 @@ export const PlaygroundResultsTable = ({
        useSortBy
    );

-    useEffect(() => {
-        const hiddenColumns = [];
-        if (isSmallScreen) {
-            hiddenColumns.push('projectId');
-        }
-        if (isExtraSmallScreen) {
-            hiddenColumns.push('variant');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isExtraSmallScreen, isSmallScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isExtraSmallScreen,
+                columns: ['variant'],
+            },
+            {
+                condition: isSmallScreen,
+                columns: ['projectId'],
+            },
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );

    useEffect(() => {
        if (loading) {
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@ -45,6 +45,7 @@ import { usePinnedFavorites } from 'hooks/usePinnedFavorites';
 import { useFavoriteFeaturesApi } from 'hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi';
 import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell';
 import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 interface IProjectFeatureTogglesProps {
    features: IProject['features'];
@ -430,15 +431,16 @@ export const ProjectFeatureToggles = ({
        useSortBy
    );

-    useEffect(() => {
-        if (!features.some(({ tags }) => tags?.length)) {
-            setHiddenColumns(hiddenColumns => [...hiddenColumns, 'tags']);
-        } else {
-            setHiddenColumns(hiddenColumns =>
-                hiddenColumns.filter(column => column !== 'tags')
-            );
-        }
-    }, [setHiddenColumns, features]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: !features.some(({ tags }) => tags?.length),
+                columns: ['tags'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );

    useEffect(() => {
        if (loading) {
--- a/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx
+++ b/frontend/src/component/project/Project/ProjectHealth/ReportTable/ReportTable.tsx
@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo } from 'react';
 import { IFeatureToggleListItem } from 'interfaces/featureToggle';
 import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
 import { PageContent } from 'component/common/PageContent/PageContent';
@ -23,6 +23,7 @@ import { ReportExpiredCell } from './ReportExpiredCell/ReportExpiredCell';
 import { ReportStatusCell } from './ReportStatusCell/ReportStatusCell';
 import { formatStatus, ReportingStatus } from './ReportStatusCell/formatStatus';
 import { formatExpiredAt } from './ReportExpiredCell/formatExpiredAt';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 interface IReportTableProps {
    projectId: string;
@ -91,19 +92,24 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
        useSortBy
    );

-    useEffect(() => {
-        const hiddenColumns = [];
-        if (isMediumScreen) {
-            hiddenColumns.push('createdAt');
-        }
-        if (isSmallScreen) {
-            hiddenColumns.push('expiredAt', 'lastSeenAt');
-        }
-        if (isExtraSmallScreen) {
-            hiddenColumns.push('stale');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isSmallScreen, isMediumScreen, isExtraSmallScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isExtraSmallScreen,
+                columns: ['stale'],
+            },
+            {
+                condition: isSmallScreen,
+                columns: ['expiredAt', 'lastSeenAt'],
+            },
+            {
+                condition: isMediumScreen,
+                columns: ['createdAt'],
+            },
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );

    const title =
        rows.length < data.length
--- a/frontend/src/component/segments/SegmentTable/SegmentTable.tsx
+++ b/frontend/src/component/segments/SegmentTable/SegmentTable.tsx
@ -14,7 +14,7 @@ import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightC
 import { useMediaQuery } from '@mui/material';
 import { sortTypes } from 'utils/sortTypes';
 import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
-import { useMemo, useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { SegmentEmpty } from 'component/segments/SegmentEmpty/SegmentEmpty';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import { DonutLarge } from '@mui/icons-material';
@ -24,6 +24,7 @@ import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
 import theme from 'themes/theme';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Search } from 'component/common/Search/Search';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 export const SegmentTable = () => {
    const { segments, loading } = useSegments();
@ -71,13 +72,16 @@ export const SegmentTable = () => {
        useSortBy
    );

-    useEffect(() => {
-        const hiddenColumns = ['description'];
-        if (isSmallScreen) {
-            hiddenColumns.push('createdAt', 'createdBy');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isSmallScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isSmallScreen,
+                columns: ['createdAt', 'createdBy'],
+            },
+        ],
+        setHiddenColumns,
+        COLUMNS
+    );

    return (
        <PageContent
--- a/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx
+++ b/frontend/src/component/user/Profile/PersonalAPITokensTab/PersonalAPITokensTab.tsx
@ -35,6 +35,7 @@ import { CreatePersonalAPIToken } from './CreatePersonalAPIToken/CreatePersonalA
 import { DeletePersonalAPIToken } from './DeletePersonalAPIToken/DeletePersonalAPIToken';
 import { PersonalAPITokenDialog } from './PersonalAPITokenDialog/PersonalAPITokenDialog';
 import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
+import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';

 const StyledAlert = styled(Alert)(({ theme }) => ({
    marginBottom: theme.spacing(3),
@ -199,16 +200,20 @@ export const PersonalAPITokensTab = () => {
        useFlexLayout
    );

-    useEffect(() => {
-        const hiddenColumns = [];
-        if (isSmallScreen) {
-            hiddenColumns.push('createdAt');
-        }
-        if (isExtraSmallScreen) {
-            hiddenColumns.push('expiresAt');
-        }
-        setHiddenColumns(hiddenColumns);
-    }, [setHiddenColumns, isSmallScreen, isExtraSmallScreen]);
+    useConditionallyHiddenColumns(
+        [
+            {
+                condition: isExtraSmallScreen,
+                columns: ['expiresAt'],
+            },
+            {
+                condition: isSmallScreen,
+                columns: ['createdAt'],
+            },
+        ],
+        setHiddenColumns,
+        columns
+    );

    useEffect(() => {
        const tableState: PageQueryType = {};
--- a/frontend/src/hooks/useConditionallyHiddenColumns.ts
+++ b/frontend/src/hooks/useConditionallyHiddenColumns.ts
@ -7,19 +7,27 @@ interface IConditionallyHiddenColumns {

 export const useConditionallyHiddenColumns = (
    conditionallyHiddenColumns: IConditionallyHiddenColumns[],
-    setHiddenColumns: (param: string[]) => void,
+    setHiddenColumns: (
+        columns: string[] | ((columns: string[]) => string[])
+    ) => void,
    columnsDefinition: unknown[]
 ) => {
    useEffect(() => {
-        const hiddenColumnsSet = new Set<string>();
-
-        conditionallyHiddenColumns
+        const columnsToHide = conditionallyHiddenColumns
            .filter(({ condition }) => condition)
-            .forEach(({ columns }) =>
-                columns.forEach(column => hiddenColumnsSet.add(column))
-            );
+            .flatMap(({ columns }) => columns);

-        setHiddenColumns([...hiddenColumnsSet]);
+        const columnsToShow = conditionallyHiddenColumns
+            .flatMap(({ columns }) => columns)
+            .filter(column => !columnsToHide.includes(column));
+
+        setHiddenColumns(columns => [
+            ...new Set(
+                [...columns, ...columnsToHide].filter(
+                    column => !columnsToShow.includes(column)
+                )
+            ),
+        ]);
    }, [
        ...conditionallyHiddenColumns.map(({ condition }) => condition),
        setHiddenColumns,