@dynatrace/strato-components 3.7.1 → 3.9.0

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

@@ -0,0 +1,12 @@
+._1o0bw490-3-9-0 {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding-top: var(--dt-spacings-size-12, 12px);
+  padding-bottom: var(--dt-spacings-size-4, 4px);
+  padding-left: var(--dt-spacings-size-8, 8px);
+  padding-right: var(--dt-spacings-size-4, 4px);
+}
+._1o0bw491-3-9-0 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}

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

@@ -0,0 +1,23 @@
+import type { ColumnPinningPosition } from '@tanstack/react-table';
+import { type JSX } from 'react';
+interface DataTableColumnsSectionHeaderProps {
+    /**
+     * The section the header labels.
+     */
+    position: ColumnPinningPosition;
+    /**
+     * The virtual index for grid row positioning.
+     */
+    virtualIndex: number;
+    /**
+     * Callback to measure the element for virtualization.
+     */
+    measureElement: (element: Element | null) => void;
+}
+/**
+ * Section header row in the column settings list, labeling the pinned/unpinned
+ * groups of columns.
+ * @internal
+ */
+export declare function DataTableColumnsSectionHeader(props: Readonly<DataTableColumnsSectionHeaderProps>): JSX.Element;
+export {};

package/tables/DataTable/components/Toolbar/ColumnSettings/{ColumnVisibilityCheckbox.js → DataTableColumnsSectionHeader.js}

@@ -25,33 +25,33 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var ColumnVisibilityCheckbox_exports = {};
-__export(ColumnVisibilityCheckbox_exports, {
-  ColumnVisibilityCheckbox: () => ColumnVisibilityCheckbox
+var DataTableColumnsSectionHeader_exports = {};
+__export(DataTableColumnsSectionHeader_exports, {
+  DataTableColumnsSectionHeader: () => DataTableColumnsSectionHeader
 });
-module.exports = __toCommonJS(ColumnVisibilityCheckbox_exports);
+module.exports = __toCommonJS(DataTableColumnsSectionHeader_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var styles = __toESM(require("./DataTableColumnsListItem.sty.js"));
-var import_Checkbox = require("../../../../../forms/checkbox/Checkbox.js");
-var import_get_column_label = require("../../../../utils/get-column-label.js");
-function ColumnVisibilityCheckbox(props) {
-  const { enableCheckbox, currentState, onVisibilityChange } = props;
-  const columnName = (0, import_get_column_label.getColumnLabel)(props.column);
-  const dataDtProperties = `state:${currentState === true ? "hide" : "show"}`;
+var import_react_intl = require("react-intl");
+var styles = __toESM(require("./DataTableColumnsSectionHeader.sty.js"));
+var import_Text = require("../../../../../typography/text/Text.js");
+var import_messages = require("../../../messages.js");
+const sectionMessages = {
+  left: import_messages.dataTableMessages.columnSettingsSectionPinnedLeft,
+  right: import_messages.dataTableMessages.columnSettingsSectionPinnedRight,
+  false: import_messages.dataTableMessages.columnSettingsSectionUnpinned
+};
+function DataTableColumnsSectionHeader(props) {
+  const { position, virtualIndex, measureElement } = props;
+  const intl = (0, import_react_intl.useIntl)();
+  const label = sectionMessages[`${position}`];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Checkbox.Checkbox,
+    "h3",
     {
-      value: currentState,
-      "aria-disabled": !enableCheckbox,
-      onChange: () => {
-        if (enableCheckbox) {
-          onVisibilityChange(props.column, currentState);
-        }
-      },
-      className: styles.columnName,
-      "data-dt-name": "ColumnSettingsShowHideColumn",
-      "data-dt-properties": dataDtProperties,
-      children: columnName
+      ref: measureElement,
+      "data-index": virtualIndex,
+      className: styles.sectionHeader,
+      style: { gridRowStart: virtualIndex + 1 },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small-emphasized", className: styles.sectionHeaderLabel, children: intl.formatMessage(label) })
     }
   );
 }

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

@@ -0,0 +1,2 @@
+export declare const sectionHeader: string;
+export declare const sectionHeaderLabel: string;

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

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DataTableColumnsSectionHeader_css_exports = {};
+__export(DataTableColumnsSectionHeader_css_exports, {
+  sectionHeader: () => sectionHeader,
+  sectionHeaderLabel: () => sectionHeaderLabel
+});
+module.exports = __toCommonJS(DataTableColumnsSectionHeader_css_exports);
+var import_DataTableColumnsSectionHeader_css_ts_vanilla = require("./DataTableColumnsSectionHeader.css");
+var sectionHeader = "_1o0bw490-3-9-0";
+var sectionHeaderLabel = "_1o0bw491-3-9-0";

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

@@ -1,18 +1,18 @@
-._1rh6hs00-3-7-1 {
+._1rh6hs00-3-9-0 {
   flex: 0 1 auto;
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._1rh6hs01-3-7-1 {
+._1rh6hs01-3-9-0 {
   flex: 0 1 calc(50% - var(--dt-spacings-size-4, 4px));
   margin-left: auto;
 }
-._1rh6hs01-3-7-1._1rh6hs01-3-7-1 {
+._1rh6hs01-3-9-0._1rh6hs01-3-9-0 {
   min-width: unset;
 }
-._1rh6hs02-3-7-1 {
+._1rh6hs02-3-9-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._dmotjm0-3-7-1 div:has(> ._1rh6hs02-3-7-1) {
+._dmotjm0-3-9-0 div:has(> ._1rh6hs02-3-9-0) {
   padding-top: var(--dt-spacings-size-0, 0);
 }

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

@@ -24,6 +24,6 @@ __export(DataTableVisibilityFilterControls_css_exports, {
 module.exports = __toCommonJS(DataTableVisibilityFilterControls_css_exports);
 var import_Modal_css_ts_vanilla = require("../../../../../overlays/modal/Modal.css");
 var import_DataTableVisibilityFilterControls_css_ts_vanilla = require("./DataTableVisibilityFilterControls.css");
-var filterControls = "_1rh6hs02-3-7-1";
-var searchInput = "_1rh6hs01-3-7-1";
-var showHideAll = "_1rh6hs00-3-7-1";
+var filterControls = "_1rh6hs02-3-9-0";
+var searchInput = "_1rh6hs01-3-9-0";
+var showHideAll = "_1rh6hs00-3-9-0";

package/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-test-utils.d.ts

@@ -0,0 +1,8 @@
+/** Returns the column row element (by column id) within the given scope. */
+export declare function getColumnRow(scope: HTMLElement, columnId: string): HTMLElement;
+/** Returns the per-column visibility toggle button (by column id) within the scope. */
+export declare function getColumnVisibilityToggle(scope: HTMLElement, columnId: string): HTMLElement;
+/** Returns all per-column visibility toggle buttons within the scope, in list order. */
+export declare function getAllVisibilityToggles(scope: HTMLElement): HTMLElement[];
+/** Clicks the visibility toggle of the column with the given id within `scope`. */
+export declare function clickVisibilityToggle(scope: HTMLElement, columnId: string): void;

package/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-test-utils.js

@@ -0,0 +1,52 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var column_settings_test_utils_exports = {};
+__export(column_settings_test_utils_exports, {
+  clickVisibilityToggle: () => clickVisibilityToggle,
+  getAllVisibilityToggles: () => getAllVisibilityToggles,
+  getColumnRow: () => getColumnRow,
+  getColumnVisibilityToggle: () => getColumnVisibilityToggle
+});
+module.exports = __toCommonJS(column_settings_test_utils_exports);
+var import_react = require("@testing-library/react");
+function getColumnRow(scope, columnId) {
+  const row = scope.querySelector(`[data-columnid="${columnId}"]`);
+  if (!row) {
+    throw new Error(`No column row found for column "${columnId}"`);
+  }
+  return row;
+}
+function getColumnVisibilityToggle(scope, columnId) {
+  const toggle = getColumnRow(scope, columnId).querySelector(
+    '[data-dt-children-name="ColumnSettingsShowHideColumn"]'
+  );
+  if (!toggle) {
+    throw new Error(`No visibility toggle found for column "${columnId}"`);
+  }
+  return toggle;
+}
+function getAllVisibilityToggles(scope) {
+  return Array.from(
+    scope.querySelectorAll(
+      '[data-dt-children-name="ColumnSettingsShowHideColumn"]'
+    )
+  );
+}
+function clickVisibilityToggle(scope, columnId) {
+  import_react.fireEvent.click(getColumnVisibilityToggle(scope, columnId));
+}

package/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-types.d.ts

@@ -2,7 +2,7 @@ import type { ColumnPinningPosition, RowData, TableFeatures, Column_Internal } f
 import type { DataTestId } from '../../../../../core/types/data-props.js';
 import type { StylingProps } from '../../../../../core/types/styling-props.js';
 import type { DataTablePinnedColumnState } from '../../../features/ColumnPinning/column-pinning-types.js';
-import type { DataTableColumnVisibilityState } from '../../../features/ColumnVisibility/column-visibility-types.js';
+import type { DataTableColumnVisibilityState, DataTableVisibleColumnLimits } from '../../../features/ColumnVisibility/column-visibility-types.js';
 import type { DataTableColumnSettingsConfig } from '../../../public.api.js';
 /**
  * Props for the DataTableColumnSettingsTrigger component.
@@ -21,6 +21,18 @@ export type ColumnListItem<TFeatures extends TableFeatures, TData extends RowDat
     key: string;
     pinned: ColumnPinningPosition;
 };
+/**
+ * A single item in the virtualized column settings list:
+ * either a section header or a column item.
+ * @internal
+ */
+export type ColumnSettingsListItem<TFeatures extends TableFeatures, TData extends RowData> = {
+    itemType: 'sectionHeader';
+    position: ColumnPinningPosition;
+    key: string;
+} | (ColumnListItem<TFeatures, TData> & {
+    itemType: 'column';
+});
 /**
  * ref type of the column settings modal
  * @internal
@@ -44,6 +56,10 @@ export interface DataTableColumnVisibilitySettingsProps {
      * is triggered in the column settings modal.
      */
     resetColumnVisibility?: DataTableColumnVisibilityState;
+    /**
+     * Upper limits for the number of visible columns.
+     */
+    visibleColumnLimits?: DataTableVisibleColumnLimits;
 }
 /**
  * Props for the DataTableColumnOrderSettings component.

package/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-utils.d.ts

@@ -1,7 +1,10 @@
 import type { ColumnPinningState, RowData, TableFeatures, Column_Internal } from '@tanstack/react-table';
-import type { DataTableColumnVisibilityState } from '../../../features/ColumnVisibility/column-visibility-types.js';
+import { type JSX } from 'react';
+import { type IntlShape } from 'react-intl';
+import type { DataTableColumnVisibilityState, DataTableVisibleColumnLimits } from '../../../features/ColumnVisibility/column-visibility-types.js';
 /**
  * Generates a map of column IDs to their lowercase labels for efficient filtering.
+ *
  * @param columns - The columns to generate labels for.
  * @returns A map of column IDs to lowercase labels.
  * @internal
@@ -24,7 +27,7 @@ export declare function processFilterValue(filterValue: string): string[];
  *
  * @internal
  */
-export declare function getResetOverride<T extends object, K extends keyof T>(override: boolean | T | undefined, key: K): T[K] | undefined;
+export declare function getOverrideValue<T extends object, K extends keyof T>(override: boolean | T | undefined, key: K): T[K] | undefined;
 /**
  * Resolves whether a column settings feature is enabled. An override of `false` disables it.
  * Falls back to the toolbar slot value when no override is provided.
@@ -35,6 +38,32 @@ export declare function getResetOverride<T extends object, K extends keyof T>(ov
  * @internal
  */
 export declare function getIsSettingEnabled<T extends object>(override: boolean | T | undefined, fallback: boolean): boolean;
+/**
+ * Resolves effective warning and error thresholds for `visibleColumnLimits`.
+ * Values less than 1 are invalid and treated as unset.
+ *
+ * @param rawLimit - raw `visibleColumnLimits` value from the consumer; `undefined` when no limits are configured
+ * @param mandatoryVisibleCount - number of non-built-in leaf columns with `disableColumnHiding: true`
+ * @internal
+ */
+export declare function resolveEffectiveLimit(rawLimit: DataTableVisibleColumnLimits | undefined, mandatoryVisibleCount: number): {
+    warningLimit: number | undefined;
+    errorLimit: number | undefined;
+};
+/**
+ * Builds the footer feedback message for the column visibility limit feature.
+ *
+ * Priority: min-error (< 1 visible) → max-error (exceeds hard limit) → max-warning (exceeds soft limit).
+ * Returns `undefined` when no condition is active so callers can gate layout on its presence.
+ *
+ * @param showMinError - Whether the minimum-column error (< 1 visible) is active.
+ * @param errorLimit - Resolved hard upper limit; `undefined` when not configured.
+ * @param warningLimit - Resolved soft upper limit; `undefined` when not configured.
+ * @param visibleColumnCount - Number of currently visible columns in the local (unsaved) state.
+ * @param intl - IntlShape instance from the calling component.
+ * @internal
+ */
+export declare function getVisibilityLimitMessage(showMinError: boolean, errorLimit: number | undefined, warningLimit: number | undefined, visibleColumnCount: number, intl: IntlShape): JSX.Element | undefined;
 /**
  * Adds the parent column before adjacent leaf columns.
  * @param columns - the leaf column ids.

package/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-utils.js

@@ -26,31 +26,100 @@ __export(column_settings_utils_exports, {
   getHasVisibilityChanged: () => getHasVisibilityChanged,
   getIsSettingEnabled: () => getIsSettingEnabled,
   getMultipleLocalColumnVisibility: () => getMultipleLocalColumnVisibility,
-  getResetOverride: () => getResetOverride,
+  getOverrideValue: () => getOverrideValue,
   getVisibilityCheckboxState: () => getVisibilityCheckboxState,
+  getVisibilityLimitMessage: () => getVisibilityLimitMessage,
   groupColumns: () => groupColumns,
   isParentColumnHideable: () => isParentColumnHideable,
-  processFilterValue: () => processFilterValue
+  processFilterValue: () => processFilterValue,
+  resolveEffectiveLimit: () => resolveEffectiveLimit
 });
 module.exports = __toCommonJS(column_settings_utils_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
+var import_MessageContainer = require("../../../../../content/message-container/MessageContainer.js");
+var import_logging = require("../../../../../core/utils/logging.js");
 var import_get_column_label = require("../../../../utils/get-column-label.js");
+var import_messages = require("../../../messages.js");
 function generateColumnLabelsMap(columns) {
   const labels = /* @__PURE__ */ new Map();
   for (const col of columns) {
     labels.set(col.id, (0, import_get_column_label.getColumnLabel)(col).toLocaleLowerCase());
+    const parent = col.parent;
+    if (parent && !labels.has(parent.id)) {
+      labels.set(parent.id, (0, import_get_column_label.getColumnLabel)(parent).toLocaleLowerCase());
+    }
   }
   return labels;
 }
 function processFilterValue(filterValue) {
   return filterValue.toLocaleLowerCase().split(" ").filter(Boolean);
 }
-function getResetOverride(override, key) {
+function getOverrideValue(override, key) {
   return typeof override === "object" ? override[key] : void 0;
 }
 function getIsSettingEnabled(override, fallback) {
   return override === void 0 ? fallback : override !== false;
 }
+function resolveEffectiveLimit(rawLimit, mandatoryVisibleCount) {
+  let warningLimit;
+  if (rawLimit?.maxWarning !== void 0) {
+    if (rawLimit.maxWarning < 1) {
+      (0, import_logging.devLog)(
+        "DataTable: visibleColumnLimits.maxWarning must be at least 1. The value has been ignored."
+      );
+    } else {
+      warningLimit = rawLimit.maxWarning;
+    }
+  }
+  let errorLimit;
+  if (rawLimit?.maxError !== void 0) {
+    if (rawLimit.maxError < 1) {
+      (0, import_logging.devLog)(
+        "DataTable: visibleColumnLimits.maxError must be at least 1. The value has been ignored."
+      );
+    } else {
+      errorLimit = rawLimit.maxError;
+    }
+  }
+  if (warningLimit !== void 0 && errorLimit !== void 0 && warningLimit >= errorLimit) {
+    (0, import_logging.devLog)(
+      "DataTable: visibleColumnLimits.maxWarning should be less than visibleColumnLimits.maxError. The warning threshold has no effect when it is greater than or equal to the error threshold."
+    );
+  }
+  if (warningLimit !== void 0 && warningLimit <= mandatoryVisibleCount) {
+    (0, import_logging.devLog)(
+      `DataTable: visibleColumnLimits.maxWarning (${warningLimit}) is at or below the number of non-hideable columns (${mandatoryVisibleCount}). The warning will always be shown.`
+    );
+  }
+  if (errorLimit !== void 0 && errorLimit <= mandatoryVisibleCount) {
+    (0, import_logging.devLog)(
+      errorLimit < mandatoryVisibleCount ? `DataTable: visibleColumnLimits.maxError (${errorLimit}) is below the number of non-hideable columns (${mandatoryVisibleCount}). Apply will always be disabled.` : `DataTable: visibleColumnLimits.maxError (${errorLimit}) equals the number of non-hideable columns (${mandatoryVisibleCount}). Apply will only be enabled when all optional columns are hidden.`
+    );
+  }
+  return { warningLimit, errorLimit };
+}
+function getVisibilityLimitMessage(showMinError, errorLimit, warningLimit, visibleColumnCount, intl) {
+  let variant;
+  let description;
+  if (showMinError && visibleColumnCount < 1) {
+    variant = "critical";
+    description = intl.formatMessage(import_messages.dataTableMessages.visibleColumnsMinError);
+  } else if (errorLimit !== void 0 && visibleColumnCount > errorLimit) {
+    variant = "critical";
+    description = intl.formatMessage(import_messages.dataTableMessages.visibleColumnsError, {
+      limit: errorLimit
+    });
+  } else if (warningLimit !== void 0 && visibleColumnCount > warningLimit) {
+    variant = "warning";
+    description = intl.formatMessage(import_messages.dataTableMessages.visibleColumnsWarning, {
+      limit: warningLimit
+    });
+  } else {
+    return void 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MessageContainer.MessageContainer, { variant, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MessageContainer.MessageContainer.Description, { children: description }) });
+}
 function groupColumns(columns) {
   const groupedColumns = [];
   let lastParent = void 0;

package/tables/DataTable/components/Toolbar/DataTableToolbar.d.ts

@@ -6,7 +6,8 @@ import type { DataTestId } from '../../../../core/types/data-props.js';
 import type { StylingProps } from '../../../../core/types/styling-props.js';
 import type { WithChildren } from '../../../../core/types/with-children.js';
 import type { DataTablePinnedColumnState } from '../../features/ColumnPinning/column-pinning-types.js';
-import type { DataTableColumnVisibilityState } from '../../features/ColumnVisibility/column-visibility-types.js';
+import type { DataTableColumnVisibilityState, DataTableVisibleColumnLimits } from '../../features/ColumnVisibility/column-visibility-types.js';
+import type { DataTableDownloadHeaderContext } from '../../features/Download/download-types.js';
 /**
  * @public
  */
@@ -36,6 +37,10 @@ export type DataTableToolbarItemProps = {
      * Column visibility reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.
      */
     resetColumnVisibility?: DataTableColumnVisibilityState;
+    /**
+     * Upper limits for the number of visible columns in the column settings modal.
+     */
+    visibleColumnLimits?: DataTableVisibleColumnLimits;
     /**
      * Column order reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.
      */
@@ -56,6 +61,14 @@ export type DataTableToolbarItemProps = {
      * Callback, that fires once data has been downloaded and indicates which subset of data was downloaded (all, page or selected) and which columns were excluded.
      */
     onDownloadData?: (subset: 'all' | 'page' | 'selected', excludedColumns?: string[]) => void;
+    /**
+     * Callback to override the header name of each included leaf column in the downloaded file.
+     */
+    formatDownloadHeader?: (context: DataTableDownloadHeaderContext) => string | undefined;
+    /**
+     * Name of the downloaded CSV file.
+     */
+    fileName?: string | ((subset: 'all' | 'page' | 'selected') => string);
     /**
      * Array of intent props for the `Intent` slot, to render the intent actions in the menu.
      */

package/tables/DataTable/components/Toolbar/DataTableToolbar.js

@@ -54,6 +54,7 @@ function getToolbarConfig(children) {
     if ((0, import_is_slot.isSlot)(child, import_DataTableColumnVisibilitySettings.DataTableColumnVisibilitySettings)) {
       slots.visibilitySettings = true;
       toolbarItemProps.resetColumnVisibility = child.props?.resetColumnVisibility;
+      toolbarItemProps.visibleColumnLimits = child.props?.visibleColumnLimits;
     } else if ((0, import_is_slot.isSlot)(child, import_DataTableColumnOrderSettings.DataTableColumnOrderSettings)) {
       slots.columnOrderSettings = true;
       toolbarItemProps.resetColumnOrder = child.props?.resetColumnOrder;
@@ -66,6 +67,8 @@ function getToolbarConfig(children) {
       slots.downloadData = true;
       toolbarItemProps.downloadExcludedColumns = child.props?.excludeColumns;
       toolbarItemProps.onDownloadData = child.props?.onDownloadData;
+      toolbarItemProps.formatDownloadHeader = child.props?.formatDownloadHeader;
+      toolbarItemProps.fileName = child.props?.fileName;
     } else if ((0, import_is_slot.isSlot)(child, import_LineWrap.DataTableGlobalLineWrapAction)) {
       slots.globalLineWrap = true;
     } else if ((0, import_is_slot.isSlot)(child, import_Intent.Intent)) {
@@ -118,6 +121,7 @@ const DataTableToolbar = (0, import_react.forwardRef)(
             {
               hasDownloadData: slots.downloadData,
               downloadExcludedColumns: toolbarItemProps?.downloadExcludedColumns,
+              fileName: toolbarItemProps?.fileName,
               intents: toolbarItemProps.intents
             }
           )

package/tables/DataTable/components/Toolbar/DataTableToolbarMenu.d.ts

@@ -9,6 +9,10 @@ interface ToolbarMenuProps {
      * Array of column IDs that can optionally be excluded from the download, passed down to the `DownloadData` slot.
      */
     downloadExcludedColumns?: string[];
+    /**
+     * Name of the downloaded CSV file, passed down to the `DownloadData` slot.
+     */
+    fileName?: string | ((subset: 'all' | 'page' | 'selected') => string);
     /**
      * Array of intent props for the `Intent` slot, to render the intent actions in the menu.
      */

package/tables/DataTable/components/Toolbar/DataTableToolbarMenu.js

@@ -30,7 +30,7 @@ var import_Menu = require("../../../../navigation/menu/Menu.js");
 var import_Tooltip = require("../../../../overlays/tooltip/Tooltip.js");
 var import_messages = require("../../messages.js");
 const DataTableToolbarMenu = (props) => {
-  const { hasDownloadData, downloadExcludedColumns, intents } = props;
+  const { hasDownloadData, downloadExcludedColumns, fileName, intents } = props;
   const [menuOpen, setMenuOpen] = (0, import_react.useState)(false);
   const [isDownloading, setIsDownloading] = (0, import_react.useState)(false);
   const hasIntents = intents.length > 0;
@@ -96,6 +96,7 @@ const DataTableToolbarMenu = (props) => {
             import_DataTableDownloadData.DataTableDownloadData,
             {
               excludeColumns: downloadExcludedColumns,
+              fileName,
               hasIntents,
               isDownloading,
               onDownloadStart: () => setIsDownloading(true),

package/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.css

@@ -1,9 +1,9 @@
-._1gjma320-3-7-1 {
+._1gjma320-3-9-0 {
   gap: var(--dt-spacings-size-24, 24px);
 }
-._1gjma321-3-7-1 {
+._1gjma321-3-9-0 {
   white-space: nowrap;
 }
-._1m01arl7-3-7-1 ._1gjma321-3-7-1 {
+._1m01arl8-3-9-0 ._1gjma321-3-9-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.d.ts

@@ -3,8 +3,9 @@ import type { JSX } from 'react';
  * A component providing the menu with the functionalities to download data.
  * @internal
  */
-export declare const DataTableDownloadData: ({ excludeColumns, hasIntents, isDownloading, onDownloadStart, onDownloadEnd, }: {
+export declare const DataTableDownloadData: ({ excludeColumns, fileName, hasIntents, isDownloading, onDownloadStart, onDownloadEnd, }: {
     excludeColumns?: string[];
+    fileName?: string | ((subset: "all" | "page" | "selected") => string);
     hasIntents: boolean;
     isDownloading: boolean;
     onDownloadStart: () => void;

package/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.js

@@ -38,6 +38,7 @@ var import_DataTableContext = require("../../../contexts/DataTableContext.js");
 var import_messages = require("../../../messages.js");
 const DataTableDownloadData = ({
   excludeColumns,
+  fileName,
   hasIntents,
   isDownloading,
   onDownloadStart,
@@ -47,8 +48,9 @@ const DataTableDownloadData = ({
   const table = (0, import_DataTableContext.useDataTable)();
   const selectionCount = table.getSelectionCount();
   const menuGroupLabel = intl.formatMessage(import_messages.dataTableMessages.downloadTable);
+  const isServerSidePaginated = table.options.enablePagination === true && table.options.manualPagination === true;
   const downloadMenuItems = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    !isServerSidePaginated && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_Menu.Menu.Item,
       {
         onSelect: () => {
@@ -56,7 +58,7 @@ const DataTableDownloadData = ({
             return;
           }
           onDownloadStart();
-          table.downloadAllData(excludeColumns, onDownloadEnd);
+          table.downloadAllData(excludeColumns, void 0, fileName, onDownloadEnd);
         },
         className: styles.downloadMenuItem,
         "data-dt-name": "ToolbarDownloadAll",
@@ -76,7 +78,7 @@ const DataTableDownloadData = ({
             return;
           }
           onDownloadStart();
-          table.downloadPageData(excludeColumns, onDownloadEnd);
+          table.downloadPageData(excludeColumns, void 0, fileName, onDownloadEnd);
         },
         className: styles.downloadMenuItem,
         "data-dt-name": "ToolbarDownloadPage",
@@ -97,7 +99,12 @@ const DataTableDownloadData = ({
             return;
           }
           onDownloadStart();
-          table.downloadSelectedData(excludeColumns, onDownloadEnd);
+          table.downloadSelectedData(
+            excludeColumns,
+            void 0,
+            fileName,
+            onDownloadEnd
+          );
         },
         className: styles.downloadMenuItem,
         "data-dt-name": "ToolbarDownloadSelected",

package/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.sty.js

@@ -23,5 +23,5 @@ __export(DataTableDownloadData_css_exports, {
 module.exports = __toCommonJS(DataTableDownloadData_css_exports);
 var import_Menu_css_ts_vanilla = require("../../../../../navigation/menu/Menu.css");
 var import_DataTableDownloadData_css_ts_vanilla = require("./DataTableDownloadData.css");
-var downloadMenuItem = "_1gjma320-3-7-1";
-var downloadMenuSuffix = "_1gjma321-3-7-1";
+var downloadMenuItem = "_1gjma320-3-9-0";
+var downloadMenuSuffix = "_1gjma321-3-9-0";

package/tables/DataTable/features/ColumnOrder/ColumnOrder.css

@@ -1,11 +1,11 @@
-._1ku1w3z0-3-7-1 {
+._1ku1w3z0-3-9-0 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   z-index: 4;
   overflow: hidden;
 }
-._1ku1w3z1-3-7-1::after {
+._1ku1w3z1-3-9-0::after {
   content: "";
   position: absolute;
   top: 0;
@@ -14,13 +14,13 @@
   width: 3px;
   background: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1ku1w3z2-3-7-1::after {
+._1ku1w3z2-3-9-0::after {
   left: 0;
 }
-._1ku1w3z3-3-7-1::after {
+._1ku1w3z3-3-9-0::after {
   right: 0;
 }
-._1ku1w3z4-3-7-1::before {
+._1ku1w3z4-3-9-0::before {
   content: "";
   display: block;
   position: absolute;
@@ -29,12 +29,12 @@
   bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ku1w3z5-3-7-1 {
+._1ku1w3z5-3-9-0 {
   display: none;
 }
-._1ku1w3z6-3-7-1 {
+._1ku1w3z6-3-9-0 {
   cursor: grab;
 }
-._1ku1w3z7-3-7-1 {
+._1ku1w3z7-3-9-0 {
   pointer-events: none;
 }