@dynatrace/strato-components 3.7.1 → 3.9.0

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnSettingsModal.js

@@ -37,6 +37,7 @@ function ColumnSettingsModal(props) {
     resetColumnOrder,
     resetColumnVisibility,
     resetColumnPinning,
+    visibleColumnLimits: slotVisibleColumnLimits,
     onModalClose,
     columnSettingsOverride
   } = props;
@@ -46,6 +47,20 @@ function ColumnSettingsModal(props) {
   const visibilityOverride = columnSettingsOverride?.columnVisibility;
   const columnOrderOverride = columnSettingsOverride?.columnOrder;
   const columnPinningOverride = columnSettingsOverride?.columnPinning;
+  const rawVisibleColumnLimits = (0, import_column_settings_utils.getOverrideValue)(visibilityOverride, "visibleColumnLimits") ?? slotVisibleColumnLimits;
+  const mandatoryVisibleColumnsCount = (0, import_react.useMemo)(
+    () => leafColumnsWithoutBuiltin.filter(
+      (col) => col.columnDef.enableHiding === false
+    ).length,
+    [leafColumnsWithoutBuiltin]
+  );
+  const { warningLimit, errorLimit } = (0, import_react.useMemo)(
+    () => (0, import_column_settings_utils.resolveEffectiveLimit)(
+      rawVisibleColumnLimits,
+      mandatoryVisibleColumnsCount
+    ),
+    [rawVisibleColumnLimits, mandatoryVisibleColumnsCount]
+  );
   const visibilitySettingsEnabled = (0, import_column_settings_utils.getIsSettingEnabled)(
     visibilityOverride,
     toolbarVisibilitySettings
@@ -77,9 +92,10 @@ function ColumnSettingsModal(props) {
     () => table.store.state.columnPinning
   );
   const [showResetStatus, setShowResetStatus] = (0, import_react.useState)(false);
-  const columnOrderToReset = (0, import_column_settings_utils.getResetOverride)(columnOrderOverride, "resetColumnOrder") ?? resetColumnOrder ?? table.options.originalColumnOrder;
-  const columnVisibilityToReset = (0, import_column_settings_utils.getResetOverride)(visibilityOverride, "resetColumnVisibility") ?? resetColumnVisibility ?? table.options.originalColumnVisibility;
-  const columnPinningToReset = (0, import_column_settings_utils.getResetOverride)(columnPinningOverride, "resetColumnPinning") ?? resetColumnPinning ?? table.options.originalColumnPinning;
+  const [showMinError, setShowMinError] = (0, import_react.useState)(false);
+  const columnOrderToReset = (0, import_column_settings_utils.getOverrideValue)(columnOrderOverride, "resetColumnOrder") ?? resetColumnOrder ?? table.options.originalColumnOrder;
+  const columnVisibilityToReset = (0, import_column_settings_utils.getOverrideValue)(visibilityOverride, "resetColumnVisibility") ?? resetColumnVisibility ?? table.options.originalColumnVisibility;
+  const columnPinningToReset = (0, import_column_settings_utils.getOverrideValue)(columnPinningOverride, "resetColumnPinning") ?? resetColumnPinning ?? table.options.originalColumnPinning;
   const filteredLocalColumnOrder = (0, import_react.useMemo)(
     () => localColumnOrder.filter(
       (colId) => !allLocalColumnsParentIds.includes(colId)
@@ -102,6 +118,17 @@ function ColumnSettingsModal(props) {
     localColumnVisibility,
     leafColumnsWithoutBuiltin
   );
+  const visibleColumnCount = Object.values(localColumnVisibility).filter(
+    Boolean
+  ).length;
+  const exceedsError = errorLimit !== void 0 && visibleColumnCount > errorLimit;
+  const limitMessage = (0, import_column_settings_utils.getVisibilityLimitMessage)(
+    showMinError,
+    errorLimit,
+    warningLimit,
+    visibleColumnCount,
+    intl
+  );
   const updateLocalColumnVisibility = (column, currentVisibilityState) => {
     const childColumns = column.columns;
     if (childColumns.length === 0) {
@@ -119,6 +146,7 @@ function ColumnSettingsModal(props) {
       );
     }
     showResetStatus && setShowResetStatus(false);
+    showMinError && setShowMinError(false);
   };
   const updateLocalColumnOrder = (newColumnOrder) => {
     setLocalColumnOrder(newColumnOrder);
@@ -137,6 +165,7 @@ function ColumnSettingsModal(props) {
       )
     );
     showResetStatus && setShowResetStatus(false);
+    showMinError && setShowMinError(false);
   };
   const showVisibilityControl = visibilitySettingsEnabled && activeFilterValue.length === 0;
   const showFilterControl = visibilitySettingsEnabled || columnPinningSettingsEnabled;
@@ -167,8 +196,13 @@ function ColumnSettingsModal(props) {
       didReset = true;
     }
     didReset && setShowResetStatus(true);
+    showMinError && setShowMinError(false);
   };
   const onApply = () => {
+    if (visibilitySettingsEnabled && visibleColumnCount < 1) {
+      setShowMinError(true);
+      return;
+    }
     table.setColumnVisibility(localColumnVisibility);
     table.setColumnOrder(filteredLocalColumnOrder);
     table.setColumnPinning(localColumnPinning);
@@ -184,8 +218,10 @@ function ColumnSettingsModal(props) {
       onReset,
       onApply,
       disableButtons: {
-        reset: !hasColumnOrderChanged && !hasVisibilityChanged && !hasColumnPinningChanged
+        reset: !hasColumnOrderChanged && !hasVisibilityChanged && !hasColumnPinningChanged,
+        apply: exceedsError
       },
+      footerMessage: limitMessage,
       controlLabels: {
         reset: intl.formatMessage(
           import_messages.dataTableMessages.resetColumnSettingsButtonText
@@ -217,7 +253,8 @@ function ColumnSettingsModal(props) {
             updateLocalColumnOrder,
             localColumnPinning,
             updateLocalColumnPinning,
-            hasFilterBar: showFilterControl || showVisibilityControl
+            hasFilterBar: showFilterControl || showVisibilityControl,
+            hasMessage: limitMessage !== void 0
           }
         )
       ]

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnVisibilitySettings.d.ts

@@ -5,6 +5,6 @@ import type { DataTableColumnVisibilitySettingsProps } from './column-settings-t
  * @public
  */
 export declare const DataTableColumnVisibilitySettings: {
-    ({ resetColumnVisibility, }: DataTableColumnVisibilitySettingsProps): null;
+    ({ resetColumnVisibility, visibleColumnLimits, }: DataTableColumnVisibilitySettingsProps): null;
     displayName: string;
 };

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnVisibilitySettings.js

@@ -21,6 +21,7 @@ __export(DataTableColumnVisibilitySettings_exports, {
 });
 module.exports = __toCommonJS(DataTableColumnVisibilitySettings_exports);
 const DataTableColumnVisibilitySettings = ({
-  resetColumnVisibility
+  resetColumnVisibility,
+  visibleColumnLimits
 }) => null;
 DataTableColumnVisibilitySettings.displayName = "DataTable.VisibilitySettings";

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.css

@@ -1,19 +1,36 @@
-._14dz1ui0-3-7-1 {
+._14dz1ui0-3-9-0 {
   padding: var(--dt-spacings-size-4, 4px) 0;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14dz1ui1-3-7-1 {
+._14dz1ui2-3-9-0 {
+  --_14dz1ui1-3-9-0: 96dvh;
   overflow: auto;
   position: relative;
-  margin-top: var(--dt-spacings-size-12, 12px);
 }
-._14dz1ui2-3-7-1 {
-  max-height: calc(96vh - 200px - 56px);
+._14dz1ui7-3-9-0 {
+  margin-top: 0;
 }
-._14dz1ui3-3-7-1 {
-  max-height: calc(96vh - 200px);
+._14dz1ui8-3-9-0 {
+  margin-top: var(--dt-spacings-size-8, 8px);
 }
-._14dz1ui4-3-7-1 {
+._14dz1ui9-3-9-0 {
+  max-height: calc(var(--_14dz1ui1-3-9-0) - 200px);
+}
+._14dz1uia-3-9-0 {
+  max-height: calc(var(--_14dz1ui1-3-9-0) - 200px - 56px);
+}
+._14dz1uib-3-9-0 {
+  max-height: calc(var(--_14dz1ui1-3-9-0) - 200px - 34px);
+}
+._14dz1uic-3-9-0 {
+  max-height: calc(var(--_14dz1ui1-3-9-0) - 200px - 56px - 34px);
+}
+._14dz1uid-3-9-0 {
   width: 100%;
   position: relative;
+}
+@supports not (height: 1dvh) {
+  ._14dz1ui2-3-9-0 {
+    --_14dz1ui1-3-9-0: 96vh;
+  }
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.d.ts

@@ -3,7 +3,7 @@ import { type JSX } from 'react';
 import type { TDataTableFeatures } from '../../../features/types/features.types.js';
 interface DataTableColumnsListProps<TFeatures extends TableFeatures, TData extends RowData> {
     /**
-     * Whether the visibility settings (checkboxes) are enabled.
+     * Whether the visibility settings (toggles) are enabled.
      */
     visibilitySettings: boolean;
     /**
@@ -50,6 +50,10 @@ interface DataTableColumnsListProps<TFeatures extends TableFeatures, TData exten
      * Whether the filter bar is present in the modal above the list.
      */
     hasFilterBar: boolean;
+    /**
+     * Whether a warning or error message is shown in the modal footer.
+     */
+    hasMessage: boolean;
 }
 /**
  * Renders the ordered, filtered list of columns for the column settings modal.

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.js

@@ -41,6 +41,7 @@ var import_ColumnOrderSettingsDragAndDrop = require("./ColumnOrderSettings/Colum
 var styles = __toESM(require("./DataTableColumnsList.sty.js"));
 var import_DataTableColumnsListItem_css = require("./DataTableColumnsListItem.sty.js");
 var import_DataTableColumnsListItem = require("./DataTableColumnsListItem.js");
+var import_DataTableColumnsSectionHeader = require("./DataTableColumnsSectionHeader.js");
 var import_Grid = require("../../../../../layouts/grid/Grid.js");
 var import_Text = require("../../../../../typography/text/Text.js");
 var import_DataTableContext = require("../../../contexts/DataTableContext.js");
@@ -48,7 +49,7 @@ var import_ColumnVisibility = require("../../../features/ColumnVisibility/Column
 var import_messages = require("../../../messages.js");
 function DataTableColumnsList(props) {
   const {
-    visibilitySettings: showVisibilityCheckbox,
+    visibilitySettings: showVisibilityToggle,
     columnOrderSettings,
     columnPinningSettings,
     activeFilterValue,
@@ -58,7 +59,8 @@ function DataTableColumnsList(props) {
     updateLocalColumnOrder,
     localColumnPinning,
     updateLocalColumnPinning,
-    hasFilterBar
+    hasFilterBar,
+    hasMessage
   } = props;
   const table = (0, import_DataTableContext.useDataTable)();
   const intl = (0, import_react_intl.useIntl)();
@@ -100,9 +102,12 @@ function DataTableColumnsList(props) {
         const columnLabel = columnLabelsById.get(columnId) ?? "";
         return activeFilterWords.every((word) => columnLabel.includes(word));
       };
+      if (matchesFilter(column.id)) {
+        return true;
+      }
       const childColumns = column.columns;
       if (childColumns.length === 0) {
-        return matchesFilter(column.id);
+        return column.parent !== void 0 && matchesFilter(column.parent.id);
       }
       return childColumns.filter((child) => columnSection.find((col) => col.id === child.id)).some((childColumn) => matchesFilter(childColumn.id));
     },
@@ -112,7 +117,8 @@ function DataTableColumnsList(props) {
     ...col,
     key: `${col.id}_${idx}_${pinnedPosition}`,
     // unique React key; parent columns may appear multiple times in list
-    pinned: pinnedPosition
+    pinned: pinnedPosition,
+    itemType: "column"
   });
   const orderedLeftFlatColumns = (0, import_react.useMemo)(() => {
     const localColumnsPinned = localColumnPinning.left?.map((id) => columnsById.get(id)).filter((column) => !!column) ?? [];
@@ -141,25 +147,54 @@ function DataTableColumnsList(props) {
     center: orderedCenterFlatColumns,
     right: orderedRightFlatColumns
   };
-  const filteredColumns = (0, import_react.useMemo)(
-    () => [
-      ...orderedLeftFlatColumns.filter(filterColumns),
-      ...orderedCenterFlatColumns.filter(filterColumns),
-      ...orderedRightFlatColumns.filter(filterColumns)
-    ],
-    [
-      filterColumns,
-      orderedCenterFlatColumns,
-      orderedLeftFlatColumns,
-      orderedRightFlatColumns
-    ]
-  );
+  const showColumnPinningButton = !!table.optionsStore.state.enableColumnPinning && columnPinningSettings;
+  const showSectionHeaders = showColumnPinningButton && (orderedLeftFlatColumns.length > 0 || orderedRightFlatColumns.length > 0);
+  const listItems = (0, import_react.useMemo)(() => {
+    const sections = [
+      {
+        position: "left",
+        columns: orderedLeftFlatColumns.filter(filterColumns)
+      },
+      {
+        position: "right",
+        columns: orderedRightFlatColumns.filter(filterColumns)
+      },
+      {
+        position: false,
+        // = center
+        columns: orderedCenterFlatColumns.filter(filterColumns)
+      }
+    ];
+    const items = [];
+    for (const section of sections) {
+      if (section.columns.length === 0) {
+        continue;
+      }
+      if (showSectionHeaders) {
+        items.push({
+          itemType: "sectionHeader",
+          position: section.position,
+          key: `__section_header_${section.position}`
+        });
+      }
+      items.push(
+        ...section.columns
+      );
+    }
+    return items;
+  }, [
+    filterColumns,
+    orderedCenterFlatColumns,
+    orderedLeftFlatColumns,
+    orderedRightFlatColumns,
+    showSectionHeaders
+  ]);
   const getItemKey = (0, import_react.useCallback)(
-    (index) => filteredColumns[index].key,
-    [filteredColumns]
+    (index) => listItems[index].key,
+    [listItems]
   );
   const columnVirtualizer = (0, import_react_virtual.useVirtualizer)({
-    count: filteredColumns.length,
+    count: listItems.length,
     overscan: 5,
     getScrollElement: () => parentRef.current,
     getItemKey,
@@ -171,7 +206,7 @@ function DataTableColumnsList(props) {
       }
       const labelElement = element.querySelector(`.${import_DataTableColumnsListItem_css.columnName}`);
       if (!labelElement) {
-        return import_column_order_settings_dnd_utils.DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT;
+        return element.getBoundingClientRect().height || import_column_order_settings_dnd_utils.DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT;
       }
       const computedStyle = getComputedStyle(element);
       const borderTop = parseFloat(computedStyle.borderTopWidth);
@@ -181,14 +216,26 @@ function DataTableColumnsList(props) {
     }
   });
   const virtualItems = columnVirtualizer.getVirtualItems();
-  if (filteredColumns.length === 0) {
+  if (listItems.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { className: styles.noItemsFound, children: intl.formatMessage(import_messages.dataTableMessages.noItemsFound) });
   }
-  const showColumnPinningButton = !!table.optionsStore.state.enableColumnPinning && columnPinningSettings;
   const canOrder = !!table.optionsStore.state.enableColumnOrdering && columnOrderSettings && activeFilterValue.length === 0;
   const columnListItems = virtualItems.map((virtualItem) => {
-    const column = filteredColumns[virtualItem.index];
+    const column = listItems[virtualItem.index];
+    if (column.itemType === "sectionHeader") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_DataTableColumnsSectionHeader.DataTableColumnsSectionHeader,
+        {
+          position: column.position,
+          virtualIndex: virtualItem.index,
+          measureElement: columnVirtualizer.measureElement
+        },
+        column.key
+      );
+    }
     const columnKey = column.key;
+    const nextItem = listItems[virtualItem.index + 1];
+    const isLastInSection = nextItem === void 0 || nextItem.itemType === "sectionHeader";
     const canHide = (0, import_ColumnVisibility.getCanHide)(
       // Need to cast this one here in order to make sure that it allows
       // instanciating with the same Subtype of RowData
@@ -207,14 +254,15 @@ function DataTableColumnsList(props) {
         column,
         columnIndex: localColumnOrder.indexOf(column.id),
         orderedFlatColumns,
-        showVisibilityCheckbox,
-        enableVisibilityCheckbox: canHide,
+        showVisibilityToggle,
+        enableVisibilityToggle: canHide,
         currentVisibilityState: visibilityCheckboxState,
         onVisibilityChange: updateLocalColumnVisibility,
         showColumnOrderDragHandle,
         showColumnPinningMenu: showColumnPinningButton,
         localColumnPinning,
         updateLocalColumnPinning,
+        isLastInSection,
         virtualIndex: virtualItem.index,
         measureElement: columnVirtualizer.measureElement
       },
@@ -228,7 +276,9 @@ function DataTableColumnsList(props) {
       className: (0, import_clsx.default)(
         "strato-table-settings-virtualization-container",
         styles.virtualizationScrollContainer({
-          hasFilter: hasFilterBar
+          hasFilter: hasFilterBar,
+          hasMessage,
+          hasPinnedColumns: listItems[0].itemType === "sectionHeader"
         })
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.sty.d.ts

@@ -1,11 +1,19 @@
 export declare const noItemsFound: string;
 export declare const virtualizationScrollContainer: import("@vanilla-extract/recipes").RuntimeFn<{
     hasFilter: {
+        true: {};
+        false: {};
+    };
+    hasMessage: {
+        true: {};
+        false: {};
+    };
+    hasPinnedColumns: {
         true: {
-            maxHeight: "calc(96vh - 200px - 56px)";
+            marginTop: number;
         };
         false: {
-            maxHeight: "calc(96vh - 200px)";
+            marginTop: string;
         };
     };
 }>;

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.sty.js

@@ -24,6 +24,6 @@ __export(DataTableColumnsList_css_exports, {
 module.exports = __toCommonJS(DataTableColumnsList_css_exports);
 var import_DataTableColumnsList_css_ts_vanilla = require("./DataTableColumnsList.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var noItemsFound = "_14dz1ui0-3-7-1";
-var virtualizationInnerContainer = "_14dz1ui4-3-7-1";
-var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui1-3-7-1", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-7-1", false: "_14dz1ui3-3-7-1" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });
+var noItemsFound = "_14dz1ui0-3-9-0";
+var virtualizationInnerContainer = "_14dz1uid-3-9-0";
+var virtualizationScrollContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14dz1ui2-3-9-0", variantClassNames: { hasFilter: { true: "_14dz1ui3-3-9-0", false: "_14dz1ui4-3-9-0" }, hasMessage: { true: "_14dz1ui5-3-9-0", false: "_14dz1ui6-3-9-0" }, hasPinnedColumns: { true: "_14dz1ui7-3-9-0", false: "_14dz1ui8-3-9-0" } }, defaultVariants: { hasFilter: false, hasMessage: false, hasPinnedColumns: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1ui9-3-9-0"], [{ hasFilter: true, hasMessage: false }, "_14dz1uia-3-9-0"], [{ hasFilter: false, hasMessage: true }, "_14dz1uib-3-9-0"], [{ hasFilter: true, hasMessage: true }, "_14dz1uic-3-9-0"]] });

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.css

@@ -1,27 +1,45 @@
-._13ypmcy0-3-7-1 {
+._13ypmcy0-3-9-0 {
+  position: relative;
   flex: 0 1 auto;
   word-break: break-all;
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
-  padding-right: var(--dt-spacings-size-4, 4px);
-  padding-left: var(--dt-spacings-size-8, 8px);
-  border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
+  border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) transparent;
+}
+._13ypmcy0-3-9-0[data-parentcolumnid] {
+  padding-left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy0-3-7-1[data-parentcolumnid] {
-  padding-left: var(--dt-spacings-size-20, 20px);
+._13ypmcy0-3-9-0[data-pinned-position]:not([data-parentcolumnid]) {
+  padding-left: var(--dt-spacings-size-8, 8px);
 }
-._13ypmcy0-3-7-1:last-child, ._13ypmcy0-3-7-1:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
-  border-bottom: none;
+._13ypmcy0-3-9-0::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(-1 * var(--dt-borders-width-default, 1px));
+  height: var(--dt-borders-width-default, 1px);
+  background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-7-1[data-pinned-position="left"]:not(:has(+ [data-pinned-position="left"])) {
-  border-bottom: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
+._13ypmcy0-3-9-0:has(+ [data-parentcolumnid])::after {
+  left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy0-3-7-1[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-7-1, [data-pinned-position="left"] + ._13ypmcy0-3-7-1) {
-  border-top: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
+._13ypmcy1-3-9-0::after {
+  display: none;
 }
-._13ypmcy1-3-7-1 {
+._13ypmcy2-3-9-0 {
   visibility: hidden;
 }
-._13ypmcy2-3-7-1 {
+._13ypmcy3-3-9-0 {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+._13ypmcy4-3-9-0 {
   padding: var(--dt-spacings-size-2, 2px) 0;
+}
+._13ypmcy5-3-9-0 {
+  padding-left: var(--dt-spacings-size-8, 8px);
+}
+._13ypmcy6-3-9-0 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.d.ts

@@ -18,13 +18,13 @@ interface DataTableColumnsListItemProps<TFeatures extends TableFeatures, TData e
         right: ColumnListItem<TFeatures, TData>[];
     };
     /**
-     * Whether the visibility settings are enabled and a checkbox should be shown.
+     * Whether the visibility settings are enabled and a visibility toggle should be shown.
      */
-    showVisibilityCheckbox: boolean;
+    showVisibilityToggle: boolean;
     /**
      * Whether visibility can be changed for this column.
      */
-    enableVisibilityCheckbox: boolean;
+    enableVisibilityToggle: boolean;
     /**
      * The current visibility state of the column.
      */
@@ -49,6 +49,11 @@ interface DataTableColumnsListItemProps<TFeatures extends TableFeatures, TData e
      * Callback to update the local column pinning state.
      */
     updateLocalColumnPinning: (newState: ColumnPinningState) => void;
+    /**
+     * Whether this is the last item of its (pinned/unpinned) section. Used to
+     * omit the separator line at section boundaries.
+     */
+    isLastInSection: boolean;
     /**
      * The virtual index for grid row positioning.
      */

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.js

@@ -34,29 +34,35 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_sortable = require("@dnd-kit/sortable");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
+var import_react_intl = require("react-intl");
 var import_ColumnOrderDragHandle = require("./ColumnOrderSettings/ColumnOrderDragHandle.js");
 var import_ColumnPinningMenu = require("./ColumnPinningMenu.js");
-var import_ColumnVisibilityCheckbox = require("./ColumnVisibilityCheckbox.js");
+var import_ColumnVisibilityToggle = require("./ColumnVisibilityToggle.js");
 var styles = __toESM(require("./DataTableColumnsListItem.sty.js"));
+var import_Chip = require("../../../../../content/chip/Chip.js");
 var import_useMergeRefs = require("../../../../../core/hooks/useMergeRefs.js");
 var import_Flex = require("../../../../../layouts/flex/Flex.js");
 var import_get_column_label = require("../../../../utils/get-column-label.js");
+var import_messages = require("../../../messages.js");
 function InternalDataTableColumnsListItem(props) {
   const {
     columnIndex,
     orderedFlatColumns,
-    showVisibilityCheckbox,
-    enableVisibilityCheckbox,
+    showVisibilityToggle,
+    enableVisibilityToggle,
     currentVisibilityState,
     onVisibilityChange,
     showColumnOrderDragHandle,
     showColumnPinningMenu,
     localColumnPinning,
     updateLocalColumnPinning,
+    isLastInSection,
     virtualIndex,
     measureElement
   } = props;
+  const intl = (0, import_react_intl.useIntl)();
   const columnName = (0, import_get_column_label.getColumnLabel)(props.column);
+  const isHidden = currentVisibilityState === false;
   const localColumnRef = (0, import_react.useRef)(null);
   const { setNodeRef, isDragging } = (0, import_sortable.useSortable)({
     id: props.column.key,
@@ -79,22 +85,14 @@ function InternalDataTableColumnsListItem(props) {
       justifyContent: "space-between",
       alignItems: "center",
       className: (0, import_clsx.default)("strato-table-settings-item", styles.columnsListItem, {
-        [styles.dragging]: isDragging
+        [styles.dragging]: isDragging,
+        [styles.lastInSection]: isLastInSection
       }),
       style: {
         gridRowStart: virtualIndex + 1
       },
       children: [
-        showVisibilityCheckbox ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ColumnVisibilityCheckbox.ColumnVisibilityCheckbox,
-          {
-            column: props.column,
-            enableCheckbox: enableVisibilityCheckbox,
-            currentState: currentVisibilityState,
-            onVisibilityChange
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.columnName, children: columnName }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { gap: 4, alignItems: "center", className: styles.columnNameContainer, children: [
           showColumnOrderDragHandle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_ColumnOrderDragHandle.ColumnOrderDragHandle,
             {
@@ -103,6 +101,32 @@ function InternalDataTableColumnsListItem(props) {
               isDraggingActive: isDragging
             }
           ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: (0, import_clsx.default)(styles.columnName, {
+                [styles.columnNameSubdued]: (
+                  // subdue the label when the column is hidden or its visibility toggle is disabled
+                  isHidden || showVisibilityToggle && !enableVisibilityToggle
+                ),
+                [styles.columnNameIndented]: !showColumnOrderDragHandle && props.column.parent !== void 0
+              }),
+              children: columnName
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { gap: 4, alignItems: "center", children: [
+          isHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Chip.Chip, { children: intl.formatMessage(import_messages.dataTableMessages.columnHiddenChipLabel) }),
+          showVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ColumnVisibilityToggle.ColumnVisibilityToggle,
+            {
+              column: props.column,
+              columnLabel: columnName,
+              enableToggle: enableVisibilityToggle,
+              currentState: currentVisibilityState,
+              onVisibilityChange
+            }
+          ),
           showColumnPinningMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_ColumnPinningMenu.ColumnPinningMenu,
             {
@@ -120,6 +144,6 @@ function InternalDataTableColumnsListItem(props) {
 const DataTableColumnsListItem = (0, import_react.memo)(
   InternalDataTableColumnsListItem,
   (prevProps, nextProps) => {
-    return prevProps.column.key === nextProps.column.key && prevProps.columnIndex === nextProps.columnIndex && prevProps.showVisibilityCheckbox === nextProps.showVisibilityCheckbox && prevProps.enableVisibilityCheckbox === nextProps.enableVisibilityCheckbox && prevProps.currentVisibilityState === nextProps.currentVisibilityState && prevProps.showColumnOrderDragHandle === nextProps.showColumnOrderDragHandle && prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu && prevProps.localColumnPinning === nextProps.localColumnPinning && prevProps.virtualIndex === nextProps.virtualIndex;
+    return prevProps.column.key === nextProps.column.key && prevProps.columnIndex === nextProps.columnIndex && prevProps.showVisibilityToggle === nextProps.showVisibilityToggle && prevProps.enableVisibilityToggle === nextProps.enableVisibilityToggle && prevProps.currentVisibilityState === nextProps.currentVisibilityState && prevProps.showColumnOrderDragHandle === nextProps.showColumnOrderDragHandle && prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu && prevProps.localColumnPinning === nextProps.localColumnPinning && prevProps.isLastInSection === nextProps.isLastInSection && prevProps.virtualIndex === nextProps.virtualIndex;
   }
 );

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.sty.d.ts

@@ -1,3 +1,7 @@
 export declare const columnsListItem: string;
+export declare const lastInSection: string;
 export declare const dragging: string;
+export declare const columnNameContainer: string;
 export declare const columnName: string;
+export declare const columnNameIndented: string;
+export declare const columnNameSubdued: string;

package/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.sty.js

@@ -18,11 +18,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var DataTableColumnsListItem_css_exports = {};
 __export(DataTableColumnsListItem_css_exports, {
   columnName: () => columnName,
+  columnNameContainer: () => columnNameContainer,
+  columnNameIndented: () => columnNameIndented,
+  columnNameSubdued: () => columnNameSubdued,
   columnsListItem: () => columnsListItem,
-  dragging: () => dragging
+  dragging: () => dragging,
+  lastInSection: () => lastInSection
 });
 module.exports = __toCommonJS(DataTableColumnsListItem_css_exports);
 var import_DataTableColumnsListItem_css_ts_vanilla = require("./DataTableColumnsListItem.css");
-var columnName = "_13ypmcy2-3-7-1";
-var columnsListItem = "_13ypmcy0-3-7-1";
-var dragging = "_13ypmcy1-3-7-1";
+var columnName = "_13ypmcy4-3-9-0";
+var columnNameContainer = "_13ypmcy3-3-9-0";
+var columnNameIndented = "_13ypmcy5-3-9-0";
+var columnNameSubdued = "_13ypmcy6-3-9-0";
+var columnsListItem = "_13ypmcy0-3-9-0";
+var dragging = "_13ypmcy2-3-9-0";
+var lastInSection = "_13ypmcy1-3-9-0";