@coveord/plasma-mantine 53.1.4 → 54.0.1

package/src/components/table/layouts/row-layout/RowLayoutHeader.tsx

@@ -1,10 +1,9 @@
-import {BoxProps, Factory, useProps} from '@mantine/core';
-import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {BoxProps, CompoundStylesApiProps, Factory, useProps} from '@mantine/core';
 import {ForwardedRef} from 'react';
 import {CustomComponentThemeExtend, identity} from '../../../../utils';
+import {TableLayoutProps} from '../../Table.types';
+import {useTableContext} from '../../TableContext';
 import {Th} from '../../table-header/Th';
-import {useTable} from '../../TableContext';
-import {type TableLayoutProps} from '../TableLayouts';
 import {RowLayoutBodyFactory} from './RowLayoutBody';
 import {useRowLayout} from './RowLayoutContext';
 
@@ -26,15 +25,25 @@ const defaultProps: Partial<RowLayoutHeaderProps<unknown>> = {};
 
 export const RowLayoutHeader = <T,>(props: RowLayoutHeaderProps<T> & {ref?: ForwardedRef<HTMLTableRowElement>}) => {
     const ctx = useRowLayout();
-    const {table, getExpandChildren, loading, doubleClickAction, className, style, classNames, styles, ...others} =
-        useProps('RowLayoutHeader', defaultProps as RowLayoutHeaderProps<T>, props);
-    const {multiRowSelectionEnabled, disableRowSelection} = useTable();
+    const {
+        getRowExpandedContent: _getRowExpandedContent,
+        getRowActions: _getRowActions,
+        loading: _loading,
+        getRowAttributes: _getRowAttributes,
+        onRowDoubleClick: _onRowDoubleClick,
+        className,
+        style,
+        classNames,
+        styles,
+        ...others
+    } = useProps('RowLayoutHeader', defaultProps as RowLayoutHeaderProps<T>, props);
+    const {table, store} = useTableContext<T>();
 
     const headers = table.getHeaderGroups().map((headerGroup) => (
         <tr
             key={headerGroup.id}
-            data-selectable={!disableRowSelection}
-            data-multi-selection={multiRowSelectionEnabled}
+            data-selectable={store.rowSelectionEnabled}
+            data-multi-selection={store.multiRowSelectionEnabled}
             {...ctx.getStyles('headerRow', {className, classNames, styles, style})}
             {...others}
         >

package/src/components/table/layouts/row-layout/RowLayoutIcon.tsx

@@ -1,9 +1,6 @@
 import {Icon as IconType, ListSize16Px} from '@coveord/plasma-react-icons';
-import {factory, Factory, useProps} from '@mantine/core';
-import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
-import {useRowLayout} from './RowLayoutContext';
+import {CompoundStylesApiProps, Factory, factory, useProps} from '@mantine/core';
 
-export type RowLayoutIconStylesNames = 'icon';
 export interface RowLayoutIconProps extends CompoundStylesApiProps<RowLayoutIconFactory> {
     icon: IconType;
 }
@@ -11,7 +8,6 @@ export interface RowLayoutIconProps extends CompoundStylesApiProps<RowLayoutIcon
 export type RowLayoutIconFactory = Factory<{
     props: RowLayoutIconProps;
     ref: SVGSVGElement;
-    stylesNames: RowLayoutIconStylesNames;
     compound: true;
 }>;
 
@@ -20,8 +16,7 @@ const defaultProps: Partial<RowLayoutIconProps> = {
 };
 
 export const RowLayoutIcon = factory<RowLayoutIconFactory>((props, ref) => {
-    const ctx = useRowLayout();
-    const {icon: Icon, classNames, styles} = useProps('RowLayoutIcon', defaultProps, props);
+    const {icon: Icon} = useProps('RowLayoutIcon', defaultProps, props);
 
-    return <Icon ref={ref} {...ctx.getStyles('icon', {styles, classNames})} />;
+    return <Icon ref={ref} />;
 });

package/src/components/table/table-actions/TableActionContext.ts

@@ -0,0 +1,9 @@
+import {createSafeContext} from '@mantine/core';
+
+export interface TableActionContextValue {
+    primary: boolean;
+}
+
+export const [TableActionProvider, useTableActionContext] = createSafeContext<TableActionContextValue>(
+    'TableActionProvider component was not found in the tree',
+);

package/src/components/table/table-actions/TableActionItem.tsx

@@ -0,0 +1,80 @@
+import {
+    CompoundStylesApiProps,
+    Menu,
+    MenuItemProps,
+    PolymorphicFactory,
+    polymorphicFactory,
+    useProps,
+} from '@mantine/core';
+import {ReactNode} from 'react';
+import {Button, ButtonProps} from '../../button';
+import {useTableContext} from '../TableContext';
+import {useTableActionContext} from './TableActionContext';
+
+export type TableActionItemStylesNames = 'actionItemRoot';
+
+export interface TableActionItemProps
+    extends Omit<ButtonProps, 'classNames' | 'styles' | 'vars' | 'variant' | 'leftSection' | 'rightSection'>,
+        Omit<MenuItemProps, 'classNames' | 'styles' | 'vars' | 'variant' | 'leftSection' | 'disabled'>,
+        CompoundStylesApiProps<TableActionItemFactory> {
+    /**
+     * Action label
+     */
+    children: ReactNode;
+    /**
+     * Content to put on the left of the label
+     */
+    leftSection?: ReactNode;
+}
+
+type TableActionItemFactory = PolymorphicFactory<{
+    props: TableActionItemProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: 'button';
+    stylesNames: TableActionItemStylesNames;
+    compound: true;
+}>;
+
+const defaultProps: Partial<TableActionItemProps> = {};
+
+export const TableActionItem = polymorphicFactory<TableActionItemFactory>(
+    (props: TableActionItemProps & {component?: any}, ref) => {
+        const {getStyles} = useTableContext();
+        const {primary} = useTableActionContext();
+        const {
+            classNames,
+            className,
+            style,
+            styles,
+            vars: _vars,
+            children,
+            component,
+            ...others
+        } = useProps('PlasmaTableActionItem', defaultProps, props);
+
+        if (primary) {
+            return (
+                <Button
+                    component={component}
+                    ref={ref}
+                    variant="subtle"
+                    {...others}
+                    {...getStyles('actionItemRoot', {className, style, classNames, styles})}
+                >
+                    {children}
+                </Button>
+            );
+        }
+
+        return (
+            <Menu.Item
+                component={component}
+                ref={ref}
+                {...others}
+                {...getStyles('actionItemRoot', {className, style, classNames, styles})}
+            >
+                {children}
+            </Menu.Item>
+        );
+    },
+);

package/src/components/table/table-actions/TableActionsList.tsx

@@ -0,0 +1,209 @@
+import {MoreSize16Px} from '@coveord/plasma-react-icons';
+import {
+    ActionIcon,
+    Box,
+    Button,
+    CSSProperties,
+    CompoundStylesApiProps,
+    ExtendComponent,
+    Factory,
+    Menu,
+    MenuProps,
+    Tooltip,
+    useProps,
+} from '@mantine/core';
+import {MouseEventHandler, ReactNode, useState} from 'react';
+import {InlineConfirm} from '../../inline-confirm';
+import {TableAction} from '../Table.types';
+import {useTableContext} from '../TableContext';
+import {TableActionProvider} from './TableActionContext';
+
+export type TableActionsListStylesNames =
+    | 'actionsTarget'
+    | 'actionsDropdown'
+    | 'actionsTooltip'
+    | 'actionsGroup'
+    | 'actionsGroupLabel'
+    | 'actionsGroupDivider'
+    | 'actionsGroupItems';
+
+export interface TableActionsListProps
+    extends Omit<MenuProps, 'classNames' | 'styles' | 'vars' | 'variant'>,
+        CompoundStylesApiProps<TableActionsListFactory> {
+    actions: TableAction[];
+    /**
+     * Label for the more menu
+     * @default 'More' when variant is 'split', 'Actions' when variant is 'combined'
+     */
+    label?: string;
+    /**
+     * Label for the primary actions group when variant is 'combined'
+     * @default ''
+     */
+    primaryGroupLabel?: string;
+    icon?: ReactNode;
+}
+
+type TableActionsListFactory = Factory<{
+    props: TableActionsListProps;
+    ref: HTMLDivElement;
+    stylesNames: TableActionsListStylesNames;
+    compound: true;
+    variant: 'split' | 'combined';
+}>;
+
+const defaultProps: Partial<TableActionsListProps> = {
+    label: 'More',
+    primaryGroupLabel: '',
+    icon: <MoreSize16Px height={16} />,
+};
+
+interface ActionsDict {
+    $$primary: TableAction[];
+    $$confirmPrompt: TableAction[];
+    secondary: Record<string, Array<TableAction['component']>>;
+}
+
+interface ActionGroup {
+    name: string;
+    actions: ReactNode[];
+}
+
+export const TableActionsList = (props: TableActionsListProps) => {
+    const {getStyles} = useTableContext();
+    const {
+        actions,
+        icon,
+        label,
+        primaryGroupLabel,
+        classNames,
+        styles,
+        vars: _vars,
+        variant,
+        ...others
+    } = useProps('PlasmaTableActionsListColumn', defaultProps, props);
+    const [opened, setOpened] = useState(false);
+
+    const onClick: MouseEventHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpened((prevState) => !prevState);
+    };
+    const onChange = (newOpened: boolean) => {
+        if (!newOpened) {
+            setOpened(false);
+        }
+    };
+
+    const actionsGroups: ActionsDict = actions.reduce<ActionsDict>(
+        (acc, action) => {
+            if (action.group === '$$primary') {
+                acc.$$primary.push(action);
+            } else if (action.group === '$$confirmPrompt') {
+                acc.$$confirmPrompt.push(action);
+            } else {
+                if (acc.secondary[action.group]) {
+                    acc.secondary[action.group].push(action.component);
+                } else {
+                    acc.secondary[action.group] = [action.component];
+                }
+            }
+            return acc;
+        },
+        {$$primary: [], $$confirmPrompt: [], secondary: {}},
+    );
+
+    const primaryActions = actionsGroups.$$primary.map((action) => action.component);
+    const confirmPrompts = actionsGroups.$$confirmPrompt.map((confirmPromptAction) => confirmPromptAction.component);
+    const secondaryActionGroups = Object.entries(actionsGroups.secondary).map(
+        ([group, groupActions]): ActionGroup => ({
+            name: group,
+            actions: groupActions,
+        }),
+    );
+
+    if (variant === 'split') {
+        return (
+            <InlineConfirm>
+                {confirmPrompts}
+                <TableActionProvider value={{primary: true}}>{primaryActions}</TableActionProvider>
+                {secondaryActionGroups.length > 0 ? (
+                    <TableActionProvider value={{primary: false}}>
+                        <Menu withinPortal={false} {...others}>
+                            <Menu.Target>
+                                <Button
+                                    {...getStyles('actionsTarget', {styles, classNames})}
+                                    variant="subtle"
+                                    leftSection={icon}
+                                >
+                                    {label}
+                                </Button>
+                            </Menu.Target>
+                            <Menu.Dropdown {...getStyles('actionsDropdown', {styles, classNames})}>
+                                <ActionsGroupsMenuItems
+                                    classNames={classNames}
+                                    styles={styles}
+                                    actionGroups={secondaryActionGroups}
+                                />
+                            </Menu.Dropdown>
+                        </Menu>
+                    </TableActionProvider>
+                ) : null}
+            </InlineConfirm>
+        );
+    }
+    return (
+        <InlineConfirm>
+            {confirmPrompts}
+            <TableActionProvider value={{primary: false}}>
+                <Menu opened={opened} onChange={onChange} {...others}>
+                    <Menu.Target>
+                        <Tooltip label={label} {...getStyles('actionsTooltip', {styles, classNames})}>
+                            <ActionIcon
+                                onClick={onClick}
+                                variant="subtle"
+                                {...getStyles('actionsTarget', {styles, classNames})}
+                            >
+                                {icon}
+                            </ActionIcon>
+                        </Tooltip>
+                    </Menu.Target>
+                    <Menu.Dropdown {...getStyles('actionsDropdown', {styles, classNames})}>
+                        <ActionsGroupsMenuItems
+                            classNames={classNames}
+                            styles={styles}
+                            actionGroups={
+                                primaryActions.length > 0
+                                    ? [{name: primaryGroupLabel, actions: primaryActions}, ...secondaryActionGroups]
+                                    : secondaryActionGroups
+                            }
+                        />
+                    </Menu.Dropdown>
+                </Menu>
+            </TableActionProvider>
+        </InlineConfirm>
+    );
+};
+
+interface ActionsGroupsMenuItemsProps {
+    styles: Partial<Record<TableActionsListStylesNames, CSSProperties>>;
+    classNames: Partial<Record<TableActionsListStylesNames, string>>;
+    actionGroups: ActionGroup[];
+}
+
+const ActionsGroupsMenuItems = ({styles, classNames, actionGroups}: ActionsGroupsMenuItemsProps) => {
+    const {getStyles} = useTableContext();
+    return actionGroups.map(({name, actions}, index) => (
+        <Box key={name} {...getStyles('actionsGroup', {styles, classNames})}>
+            {actionGroups.length > 1 ? (
+                <Menu.Label {...getStyles('actionsGroupLabel', {styles, classNames})}>{name}</Menu.Label>
+            ) : null}
+            <Box {...getStyles('actionsGroupItems', {styles, classNames})}>{actions}</Box>
+            {index < actionGroups.length - 1 ? (
+                <Menu.Divider {...getStyles('actionsGroupDivider', {styles, classNames})} />
+            ) : null}
+        </Box>
+    ));
+};
+
+TableActionsList.extend = (input: ExtendComponent<TableActionsListFactory>) => input;

package/src/components/table/table-actions/TableHeaderActions.tsx

@@ -0,0 +1,56 @@
+import {Factory, factory, Grid, GridColProps, Group, useProps} from '@mantine/core';
+import {ReactElement} from 'react';
+
+import {TableComponentsOrder} from '../Table';
+import {TableAction} from '../Table.types';
+import {useTableContext} from '../TableContext';
+import {TableActionsList} from './TableActionsList';
+
+export type TableHeaderActionsStylesNames = 'headerActionsRoot' | 'headerActionsGroup';
+
+export interface TableHeaderActionsProps extends Omit<GridColProps, 'children'> {}
+
+type TableHeaderActionsFactory = Factory<{
+    props: TableHeaderActionsProps;
+    ref: HTMLDivElement;
+    stylesNames: TableHeaderActionsStylesNames;
+    compound: true;
+}>;
+
+const defaultProps: Partial<TableHeaderActionsProps> = {};
+
+export const TableHeaderActions = factory<TableHeaderActionsFactory>(
+    (props: TableHeaderActionsProps, ref): ReactElement => {
+        const {store, getStyles, getRowActions} = useTableContext();
+        const {style, className, classNames, styles, ...others} = useProps(
+            'PlasmaTableHeaderActions',
+            defaultProps,
+            props,
+        );
+        const selectedRows = store.getSelectedRows();
+        if (selectedRows.length === 0) {
+            return null;
+        }
+
+        const actions: TableAction[] = getRowActions(selectedRows);
+        if (actions.length === 0) {
+            return null;
+        }
+
+        const stylesApiProps = {classNames, styles};
+
+        return (
+            <Grid.Col
+                span="content"
+                order={TableComponentsOrder.Actions}
+                ref={ref}
+                {...getStyles('headerActionsRoot', {className, style, ...stylesApiProps})}
+                {...others}
+            >
+                <Group gap="xs" {...getStyles('headerActionsGroup', stylesApiProps)}>
+                    <TableActionsList actions={actions} variant="split" />
+                </Group>
+            </Grid.Col>
+        );
+    },
+);

package/src/components/table/table-actions/index.ts

@@ -0,0 +1,2 @@
+export * from './TableActionItem';
+export * from './TableHeaderActions';

package/src/components/table/table-column/TableActionsColumn.tsx

@@ -0,0 +1,39 @@
+import {MoreSize16Px} from '@coveord/plasma-react-icons';
+import {useProps} from '@mantine/core';
+import {CellContext, ColumnDef} from '@tanstack/table-core';
+import {FunctionComponent} from 'react';
+import {TableActionsList, TableActionsListProps} from '../table-actions/TableActionsList';
+import {useTableContext} from '../TableContext';
+
+/**
+ * Generic column to use when your table needs actions on rows
+ */
+export const TableActionsColumn: ColumnDef<unknown> = {
+    id: 'actions',
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+        controlColumn: true,
+    },
+    header: '',
+    size: 84, // 16px padding left + 28px ActionIcon + 40px padding right
+    cell: (info) => <ActionsMenu info={info} />,
+};
+
+interface TableActionsColumnProps extends Omit<TableActionsListProps, 'actions'> {
+    info: CellContext<unknown, unknown>;
+}
+
+const defaultProps: Partial<TableActionsColumnProps> = {
+    label: 'Actions',
+    icon: <MoreSize16Px height={16} />,
+};
+
+const ActionsMenu: FunctionComponent<TableActionsColumnProps> = (props) => {
+    const {getRowActions} = useTableContext();
+
+    const {info, ...others} = useProps('PlasmaTableActionsColumn', defaultProps, props);
+
+    const actionsElements = getRowActions([info.row.original]);
+    return <TableActionsList actions={actionsElements} variant="combined" {...others} />;
+};

package/src/components/table/table-column/TableCollapsibleColumn.tsx

@@ -3,13 +3,17 @@ import {Factory, factory, useProps} from '@mantine/core';
 import {CellContext, ColumnDef} from '@tanstack/table-core';
 import {MouseEvent as ReactMouseEvent, ReactNode} from 'react';
 import {ActionIcon, ActionIconProps} from '../../action-icon';
-import {useTableStyles} from '../TableContext';
+import {useTableContext} from '../TableContext';
 
 export type TableCollapsibleColumnStylesNames = 'collapsibleIcon';
 
 const sharedProps: ColumnDef<unknown> = {
     id: 'collapsible',
     enableSorting: false,
+    enableHiding: false,
+    meta: {
+        controlColumn: true,
+    },
     header: '',
     size: 84, // 16px padding left + 28px ActionIcon + 40px padding right
 };
@@ -59,7 +63,7 @@ const defaultProps: Partial<CollapsibleIconProps> = {
 };
 
 const CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {
-    const ctx = useTableStyles();
+    const {getStyles} = useTableContext();
     const {info, onToggle, iconExpanded, iconCollapsed, classNames, className, style, styles, ...others} = useProps(
         'PlasmaTableCollapsibleColumn',
         defaultProps,
@@ -78,7 +82,7 @@ const CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {
             variant="subtle"
             color="gray"
             radius="sm"
-            {...ctx.getStyles('collapsibleIcon', {className, classNames, styles, style})}
+            {...getStyles('collapsibleIcon', {className, classNames, styles, style})}
             {...others}
         >
             {info.row.getIsExpanded() ? iconExpanded : iconCollapsed}

package/src/components/table/table-column/TableSelectableColumn.tsx

@@ -7,6 +7,10 @@ import {ColumnDef} from '@tanstack/table-core';
 export const TableSelectableColumn: ColumnDef<unknown> = {
     id: 'select',
     enableSorting: false,
+    enableHiding: false,
+    meta: {
+        controlColumn: true,
+    },
     header: ({table}) => {
         const label = table.getIsAllRowsSelected() ? 'Unselect all from this page' : 'Select all from this page';
         return (

package/src/components/table/table-columns-selector/TableColumnsSelector.tsx

@@ -2,6 +2,7 @@ import {
     BoxProps,
     Button,
     Checkbox,
+    CompoundStylesApiProps,
     Divider,
     factory,
     Factory,
@@ -12,11 +13,10 @@ import {
     Tooltip,
     useProps,
 } from '@mantine/core';
-import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {flexRender, Header} from '@tanstack/react-table';
 import {ReactNode} from 'react';
-
 import {TableComponentsOrder} from '../Table';
-import {useTable, useTableStyles} from '../TableContext';
+import {useTableContext} from '../TableContext';
 
 export type TableColumnsSelectorStylesNames = 'columnSelector' | 'columnSelectorWrapper';
 
@@ -31,11 +31,6 @@ export interface TableColumnsSelectorProps extends BoxProps, CompoundStylesApiPr
      * @default 'outline'
      */
     buttonVariant?: string;
-    /**
-     * An array of column ids that the user cannot hide. This is useful for columns that are required for the table to function properly.
-     * @default []
-     */
-    nonHideableColumns?: string[];
     /**
      * Whether the count of visible columns is shown in the button label.
      * @default false
@@ -46,19 +41,20 @@ export interface TableColumnsSelectorProps extends BoxProps, CompoundStylesApiPr
      * If defined a footer will render with the remaining number of columns that can be selected.
      */
     maxSelectableColumns?: number;
-    /**
-     * A dictionary of column ids and names to use for the checkbox labels.
-     */
-    columnNames: Record<string, string>;
     /**
      * The content to display in the footer when maxSelectableColumns is defined.
      */
     footer?: ReactNode;
     /**
-     * The tooltip to display when the user hovers over a disabled checkbox.
+     * The tooltip to display when the user hovers over a disabled checkbox because of the limit.
      * @default 'You have reached the maximum display limit.'
      */
     limitReachedTooltip?: string;
+    /**
+     * The tooltip to display when the user hovers over a disabled checkbox because a column cannot be hidden.
+     * @default 'This column is always visible.'
+     */
+    alwaysVisibleTooltip?: string;
 }
 
 export type TableColumnsSelectorFactory = Factory<{
@@ -68,26 +64,24 @@ export type TableColumnsSelectorFactory = Factory<{
     compound: true;
 }>;
 
-const COLUMNS_IDS_TO_EXCLUDE = ['collapsible', 'select'];
-
 const defaultProps: Partial<TableColumnsSelectorProps> = {
     label: 'Edit columns',
     buttonVariant: 'outline',
     limitReachedTooltip: 'You have reached the maximum display limit.',
+    alwaysVisibleTooltip: 'This column is always visible.',
     showVisibleCountLabel: false,
 };
 
 export const TableColumnsSelector = factory<TableColumnsSelectorFactory>((props, ref) => {
-    const ctx = useTableStyles();
+    const {getStyles} = useTableContext();
     const {
         label,
         buttonVariant,
         showVisibleCountLabel,
-        nonHideableColumns = [],
         maxSelectableColumns,
         footer,
         limitReachedTooltip,
-        columnNames,
+        alwaysVisibleTooltip,
         classNames,
         className,
         styles,
@@ -95,12 +89,11 @@ export const TableColumnsSelector = factory<TableColumnsSelectorFactory>((props,
         vars,
         ...others
     } = useProps('TableColumnsSelector', defaultProps, props);
-    const {getAllColumns} = useTable();
+    const {table} = useTableContext();
 
-    const columnsToExclude = [...nonHideableColumns, ...COLUMNS_IDS_TO_EXCLUDE];
-
-    const filteredColumns = getAllColumns().filter((column) => !columnsToExclude.includes(column.id));
+    const allColumns = table.getAllLeafColumns();
 
+    const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);
     const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;
 
     if (filteredColumns.length <= 0) {
@@ -113,7 +106,7 @@ export const TableColumnsSelector = factory<TableColumnsSelectorFactory>((props,
         <Grid.Col
             span="content"
             order={TableComponentsOrder.ColumnsSelector}
-            {...ctx.getStyles('columnSelector', {className, style, ...stylesApiProps})}
+            {...getStyles('columnSelector', {className, style, ...stylesApiProps})}
             {...others}
         >
             <Popover withinPortal position="bottom" shadow="md">
@@ -124,18 +117,30 @@ export const TableColumnsSelector = factory<TableColumnsSelectorFactory>((props,
                 </Popover.Target>
                 <Popover.Dropdown miw={240}>
                     <ScrollArea.Autosize mah={154}>
-                        <Stack {...ctx.getStyles('columnSelectorWrapper', stylesApiProps)}>
+                        <Stack {...getStyles('columnSelectorWrapper', stylesApiProps)}>
                             {filteredColumns.map((column) => {
+                                const alwaysVisible = !column.getCanHide();
                                 const isDisabled =
-                                    selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible();
+                                    (selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible()) ||
+                                    alwaysVisible;
+
                                 return (
-                                    <Tooltip label={limitReachedTooltip} disabled={!isDisabled} position="left">
+                                    <Tooltip
+                                        label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}
+                                        disabled={!isDisabled}
+                                        position="left"
+                                        key={column.id}
+                                    >
                                         <div>
                                             <Checkbox
                                                 key={column.id}
-                                                label={columnNames?.[column.id] || column.id}
+                                                label={flexRender(column.columnDef.header, {
+                                                    table,
+                                                    column,
+                                                    header: {column} as Header<unknown, unknown>,
+                                                })}
                                                 name={column.id}
-                                                checked={column.getIsVisible()}
+                                                checked={column.getIsVisible() || alwaysVisible}
                                                 disabled={isDisabled}
                                                 onChange={column.getToggleVisibilityHandler()}
                                             />