@dynatrace/strato-components 3.6.0 → 3.7.1

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

@@ -1,13 +1,12 @@
+import type { ColumnPinningState, RowData, TableFeatures, Column_Internal } from '@tanstack/react-table';
 import type { DataTableColumnVisibilityState } from '../../../features/ColumnVisibility/column-visibility-types.js';
-import type { Column } from '../../../hooks/useTable/types.js';
-import type { ColumnPinningState } from '../../../tanstack-table-core-override/src/index.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
  */
-export declare function generateColumnLabelsMap(columns: Column<unknown, unknown>[]): Map<string, string>;
+export declare function generateColumnLabelsMap<TFeatures extends TableFeatures, TData extends RowData>(columns: Column_Internal<TFeatures, TData>[]): Map<string, string>;
 /**
  * Processes a filter string into an array of lowercase words.
  * @param filterValue - The filter string to process.
@@ -41,11 +40,11 @@ export declare function getIsSettingEnabled<T extends object>(override: boolean
  * @param columns - the leaf column ids.
  * @remarks The same parent column may appear multiple times in the pinned areas.
  */
-export declare function groupColumns(columns: Column<unknown, unknown>[]): Column<unknown, unknown>[];
+export declare function groupColumns<TFeatures extends TableFeatures, TData extends RowData>(columns: Column_Internal<TFeatures, TData>[]): Column_Internal<TFeatures, TData>[];
 /**
  * @returns true if *at least one* of the child columns can be hidden, false otherwise.
  */
-export declare function isParentColumnHideable(childColumns: Column<unknown, unknown>[]): boolean;
+export declare function isParentColumnHideable<TFeatures extends TableFeatures, TData extends RowData>(childColumns: Column_Internal<TFeatures, TData>[]): boolean;
 /**
  * Generates an object with the visibility of each column.
  * @param columns - The columns in the table.
@@ -53,7 +52,7 @@ export declare function isParentColumnHideable(childColumns: Column<unknown, unk
  * @returns an object that contains the column ids as keys with their visibility as values.
  * @internal
  */
-export declare function generateColumnVisibilityObject(columns: Column<unknown, unknown>[], columnVisibility?: Record<string, boolean>): Record<string, boolean>;
+export declare function generateColumnVisibilityObject<TFeatures extends TableFeatures, TData extends RowData>(columns: Column_Internal<TFeatures, TData>[], columnVisibility?: Record<string, boolean>): Record<string, boolean>;
 /**
  * Returns the local column visibility of multiple columns used when clicking show/hide all or parent column checkboxes.
  * @param columns - The columns in the table.
@@ -61,13 +60,13 @@ export declare function generateColumnVisibilityObject(columns: Column<unknown,
  * @param localColumnsVisibilityState - The current column visibility state in the settings.
  * @internal
  */
-export declare function getMultipleLocalColumnVisibility(columns: Column<unknown, unknown>[], currentVisibility: boolean | 'indeterminate', localColumnsVisibilityState: Record<string, boolean>): Record<string, boolean>;
+export declare function getMultipleLocalColumnVisibility<TFeatures extends TableFeatures, TData extends RowData>(columns: Column_Internal<TFeatures, TData>[], currentVisibility: boolean | 'indeterminate', localColumnsVisibilityState?: Record<string, boolean>): Record<string, boolean>;
 /**
  * Returns the current checkbox state based on the column visibility state.
  * @param columnVisibilityState - the current column visibility state.
  * @param column - the column to get the visibility state for.
  */
-export declare function getVisibilityCheckboxState(columnVisibilityState: Record<string, boolean>, column: Column<unknown, unknown>): boolean | 'indeterminate';
+export declare function getVisibilityCheckboxState<TFeatures extends TableFeatures, TData extends RowData>(columnVisibilityState: Record<string, boolean>, column: Column_Internal<TFeatures, TData>): boolean | 'indeterminate';
 /**
  * Gets the combined checked value for a parent visibility checkbox
  * @param columnVisibilityState - The visibility of the table columns.
@@ -78,7 +77,7 @@ export declare function getVisibilityCheckboxState(columnVisibilityState: Record
  *  - `indeterminate` otherwise.
  * @internal
  */
-export declare function getCombinedVisibilityCheckboxState(columnVisibilityState: Record<string, boolean>, columns: Column<unknown, unknown>[]): boolean | 'indeterminate';
+export declare function getCombinedVisibilityCheckboxState<TFeatures extends TableFeatures, TData extends RowData>(columnVisibilityState: Record<string, boolean>, columns: Column_Internal<TFeatures, TData>[]): boolean | 'indeterminate';
 /**
  * Determines whether the visibility of one or multiple columns has changed.
  * @param columnVisibilityToReset - The column visibility state that is used to reset.
@@ -93,7 +92,7 @@ export declare function getHasVisibilityChanged(columnVisibilityToReset: DataTab
  * @param columnOrder - the column order with leaf columns only.
  * @returns the column order including parent ids and a list of unique parent ids.
  */
-export declare function generateColumnOrderWithParentIds(getColumn: (columnId: string) => Column<unknown, unknown> | undefined, columnOrder: string[]): {
+export declare function generateColumnOrderWithParentIds<TFeatures extends TableFeatures, TData extends RowData>(getColumn: (columnId: string) => Column_Internal<TFeatures, TData> | undefined, columnOrder?: string[]): {
     columnOrderWithParents: string[];
     uniqueParentIds: string[];
 };

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

@@ -76,7 +76,10 @@ function generateColumnVisibilityObject(columns, columnVisibility) {
   return Object.fromEntries(
     columns.map((column) => [
       column.id,
-      columnVisibility ? columnVisibility[column.id] ?? true : column.getIsVisible()
+      columnVisibility ? columnVisibility[column.id] ?? true : (
+        // Safe cast to align the feature generics
+        column.getIsVisible()
+      )
     ])
   );
 }
@@ -84,7 +87,10 @@ function getMultipleLocalColumnVisibility(columns, currentVisibility, localColum
   const newVisibility = currentVisibility !== true;
   const newState = { ...localColumnsVisibilityState };
   for (const column of columns) {
-    if (column.getCanHide()) {
+    if (
+      // Safe cast to align the feature generics
+      column.getCanHide()
+    ) {
       newState[column.id] = newVisibility;
     }
   }
@@ -104,9 +110,10 @@ function getVisibilityCheckboxState(columnVisibilityState, column) {
 function getCombinedVisibilityCheckboxState(columnVisibilityState, columns) {
   let allVisible = true;
   let allHidden = true;
-  for (const col of columns) {
-    const isVisible = columnVisibilityState[col.id] !== false;
-    if (!isVisible && col.getCanHide() === false) {
+  for (const column of columns) {
+    const isVisible = columnVisibilityState[column.id] !== false;
+    if (!isVisible && // Safe cast to align the feature generics
+    column.getCanHide() === false) {
       continue;
     }
     if (isVisible) {
@@ -137,7 +144,7 @@ function getHasVisibilityChanged(columnVisibilityToReset, localColumnVisibility)
     return localColumnVisibility[key] !== columnVisibilityToReset[key];
   });
 }
-function generateColumnOrderWithParentIds(getColumn, columnOrder) {
+function generateColumnOrderWithParentIds(getColumn, columnOrder = []) {
   const columnOrderWithParents = [];
   const uniqueParentIds = /* @__PURE__ */ new Set();
   for (const columnId of columnOrder) {

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

@@ -37,6 +37,7 @@ var import_logging = require("../../../../core/utils/logging.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
 var import_Download = require("../../features/Download/Download.js");
 var import_LineWrap = require("../../features/LineWrap/LineWrap.js");
+var import_LineWrapToolbarAction = require("../../features/LineWrap/LineWrapToolbarAction.js");
 function _isDataTableToolbar(child) {
   return child?.type === DataTableToolbar;
 }
@@ -111,7 +112,7 @@ const DataTableToolbar = (0, import_react.forwardRef)(
               customTriggerProps: toolbarItemProps?.customTriggerProps
             }
           ),
-          slots.globalLineWrap && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LineWrap.DataTableGlobalLineWrapToolbarAction, {}),
+          slots.globalLineWrap && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LineWrapToolbarAction.DataTableGlobalLineWrapToolbarAction, {}),
           (slots.downloadData || toolbarItemProps.intents.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_DataTableToolbarMenu.DataTableToolbarMenu,
             {

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

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

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

@@ -63,7 +63,7 @@ const DataTableDownloadData = ({
         children: [
           intl.formatMessage(import_messages.dataTableMessages.downloadAll),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Suffix, { className: styles.downloadMenuSuffix, children: intl.formatMessage(import_messages.dataTableMessages.downloadRowsCount, {
-            noOfRows: table.getPrePaginationRowModel().flatRows.length
+            noOfRows: table.getPrePaginatedRowModel().flatRows.length
           }) })
         ]
       }
@@ -83,7 +83,7 @@ const DataTableDownloadData = ({
         children: [
           intl.formatMessage(import_messages.dataTableMessages.downloadPage),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Suffix, { className: styles.downloadMenuSuffix, children: intl.formatMessage(import_messages.dataTableMessages.downloadRowsCount, {
-            noOfRows: table.getPaginationRowModel().flatRows.length
+            noOfRows: table.getPaginatedRowModel().flatRows.length
           }) })
         ]
       }

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-6-0";
-var downloadMenuSuffix = "_1gjma321-3-6-0";
+var downloadMenuItem = "_1gjma320-3-7-1";
+var downloadMenuSuffix = "_1gjma321-3-7-1";

package/tables/DataTable/contexts/DataTableContext.d.ts

@@ -1,12 +1,13 @@
+import type { ReactTable, Cell, CellData, Column, Header, Row, RowData } from '@tanstack/react-table';
 import { type PropsWithChildren, type JSX } from 'react';
-import type { Cell, Column, Header, Row, Table } from '../hooks/useTable/types.js';
+import type { TDataTableFeatures } from '../features/types/features.types.js';
 import type { DataTableColumnSettingsConfig } from '../public.api.js';
 /** @internal */
-export declare function DataTableContextProvider<T>(props: PropsWithChildren<{
-    value: Table<T>;
+export declare function DataTableContextProvider<TFeatures extends TDataTableFeatures, TData extends RowData>(props: PropsWithChildren<{
+    value: ReactTable<TFeatures, TData>;
 }>): import("react/jsx-runtime").JSX.Element;
 /** @internal */
-export declare function useDataTable<T>(): Table<T>;
+export declare function useDataTable(): ReactTable<TDataTableFeatures, RowData>;
 /** @internal */
 interface DataTableContentContextProps {
     hasOverflowLeft: boolean;
@@ -21,31 +22,31 @@ export declare function DataTableContentContextProvider(props: PropsWithChildren
 /** @internal */
 export declare function useDataTableContent(): DataTableContentContextProps;
 /** @internal */
-export declare const DataTableHeaderContext: import("react").Context<Header<unknown, unknown> | null>;
+export declare const DataTableHeaderContext: import("react").Context<any>;
 /** @internal */
 export declare function DataTableHeaderContextProvider(props: PropsWithChildren<{
-    value?: Header<unknown, unknown>;
+    value?: Header<TDataTableFeatures, RowData, CellData>;
 }>): JSX.Element;
 /** @internal */
-export declare function useDataTableHeader(): Header<unknown, unknown>;
+export declare function useDataTableHeader(): Header<TDataTableFeatures, RowData, CellData>;
 /** @internal */
 export declare function DataTableColumnContextProvider(props: PropsWithChildren<{
-    value?: Column<unknown, unknown>;
+    value?: Column<TDataTableFeatures, RowData, CellData>;
 }>): JSX.Element;
 /** @internal */
-export declare function useDataTableColumn(): Column<unknown, unknown>;
+export declare function useDataTableColumn(): Column<TDataTableFeatures, RowData, CellData>;
 /** @internal */
 export declare function DataTableRowContextProvider(props: PropsWithChildren<{
-    value?: Row<unknown>;
+    value?: Row<TDataTableFeatures, RowData>;
 }>): JSX.Element;
 /** @internal */
-export declare function useDataTableRow(): Row<unknown> | null;
+export declare function useDataTableRow(): Row<TDataTableFeatures, RowData> | null;
 /** @internal */
 export declare function DataTableCellContextProvider(props: PropsWithChildren<{
-    value?: Cell<unknown, unknown>;
+    value?: Cell<TDataTableFeatures, RowData, CellData>;
 }>): JSX.Element;
 /** @internal */
-export declare function useDataTableCell(): Cell<unknown, unknown> | null;
+export declare function useDataTableCell(): Cell<TDataTableFeatures, RowData, CellData> | null;
 /** @internal */
 export type DataTableColumnSettingsHandle = {
     openColumnSettings?: (columnSettings?: DataTableColumnSettingsConfig) => void;

package/tables/DataTable/contexts/DataTableContext.js

@@ -44,7 +44,9 @@ function DataTableContextProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableContext.Provider, { value: props.value, children: props.children });
 }
 function useDataTable() {
-  const table = (0, import_react.useContext)(DataTableContext);
+  const table = (0, import_react.useContext)(
+    DataTableContext
+  );
   if (table === null) {
     throw new Error("Table instance is not defined in context.");
   }
@@ -79,24 +81,18 @@ function DataTableHeaderContextProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableHeaderContext.Provider, { value: props.value ?? null, children: props.children });
 }
 function useDataTableHeader() {
-  const header = (0, import_react.useContext)(
-    DataTableHeaderContext
-  );
+  const header = (0, import_react.useContext)(DataTableHeaderContext);
   if (header === null) {
     throw new Error("Header instance is not defined in context.");
   }
   return header;
 }
-const DataTableColumnContext = (0, import_react.createContext)(
-  null
-);
+const DataTableColumnContext = (0, import_react.createContext)(null);
 function DataTableColumnContextProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableColumnContext.Provider, { value: props.value ?? null, children: props.children });
 }
 function useDataTableColumn() {
-  const column = (0, import_react.useContext)(
-    DataTableColumnContext
-  );
+  const column = (0, import_react.useContext)(DataTableColumnContext);
   if (column === null) {
     throw new Error("Column object is not defined in context.");
   }
@@ -107,7 +103,9 @@ function DataTableRowContextProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableRowContext.Provider, { value: props.value ?? null, children: props.children });
 }
 function useDataTableRow() {
-  const row = (0, import_react.useContext)(DataTableRowContext);
+  const row = (0, import_react.useContext)(
+    DataTableRowContext
+  );
   return row;
 }
 const DataTableCellContext = (0, import_react.createContext)(null);
@@ -115,7 +113,9 @@ function DataTableCellContextProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableCellContext.Provider, { value: props.value ?? null, children: props.children });
 }
 function useDataTableCell() {
-  const cell = (0, import_react.useContext)(DataTableCellContext);
+  const cell = (0, import_react.useContext)(
+    DataTableCellContext
+  );
   return cell;
 }
 const DataTableColumnSettingsContext = (0, import_react.createContext)(null);

package/tables/DataTable/features/CellFormatter/CellFormatter.d.ts

@@ -1,5 +1,5 @@
-import type { ColumnDefBase } from '../../hooks/useTable/types.js';
-import type { DataTableDisplayColumnDef } from '../../public.api.js';
+import type { ColumnDefTemplate, CellContext, CellData, RowData, TableFeatures } from '@tanstack/react-table';
+import type { DataTableDisplayColumnDef, DataTableRowData } from '../../public.api.js';
 /**
  * Updates the cell renderer with the formatter from the column definition
  * @param columnDef - column definition prop
@@ -7,8 +7,8 @@ import type { DataTableDisplayColumnDef } from '../../public.api.js';
  * @returns the column definition with the formatter applied
  * @internal
  */
-export declare function applyColumnFormatters<TData, TValue>(columnDef: DataTableDisplayColumnDef<TData, TValue>): {
-    cell?: ColumnDefBase<TData, TValue>['cell'];
+export declare function applyColumnFormatters<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(columnDef: DataTableDisplayColumnDef<TData, TValue>): {
+    cell?: ColumnDefTemplate<CellContext<TFeatures, TData, TValue>>;
 };
 /**
  * Formats the given value based on formatter options from the column definition.
@@ -20,4 +20,4 @@ export declare function applyColumnFormatters<TData, TValue>(columnDef: DataTabl
  * @returns the formatted cell value
  * @internal
  */
-export declare function formatCellValue<TData, TValue>(value: TValue, column: DataTableDisplayColumnDef<TData, TValue>): string;
+export declare function formatCellValue<TData extends DataTableRowData, TValue>(value: TValue, column: DataTableDisplayColumnDef<TData, TValue>): string;

package/tables/DataTable/features/ColumnFontStyle/ColumnFontStyle.d.ts

@@ -1,14 +1,17 @@
-import type { DataTableColumnFontStyleProps } from './column-font-style-types.js';
-import type { TableFeature, TableOptions } from '../../hooks/useTable/types.js';
+import { type TableFeature, type TableOptions } from '@tanstack/react-table';
+import type { ColumnFontStyleFeatureConstructors, DataTableColumnFontStyleProps } from './column-font-style-types.js';
+import type { DataTableRowData } from '../../row-data-types.js';
+import type { TDataTableFeatures } from '../types/features.types.js';
 /**
- * Feature implementation for FontStyle. This contains the logic that will be given
- * to the tanstack table. The implementing interface is important as these are
- * the function that will be called by the tanstack table core during render.
+ * Configuration hook for the DataTable FontStyle feature.
  * @internal
  */
-export declare const DataTableColumnFontStyle: TableFeature;
+export declare function useColumnFontStyle<TData extends DataTableRowData>(props: DataTableColumnFontStyleProps, options: TableOptions<TDataTableFeatures, Exclude<TData, unknown>>): void;
+export declare function constructColumnFontStyleFeature(): TableFeature<ColumnFontStyleFeatureConstructors>;
 /**
- * Configuration hook for the DataTable FontStyle feature.
+ * Feature implementation for FontStyle. This contains the logic that will be given
+ * to the tanstack table. The implementing interface is important as these are
+ * the function that will be called by the tanstack table core during render.
  * @internal
  */
-export declare function useColumnFontStyle<T>(props: DataTableColumnFontStyleProps, options: TableOptions<T>): void;
+export declare const DataTableColumnFontStyleFeature: TableFeature<ColumnFontStyleFeatureConstructors>;

package/tables/DataTable/features/ColumnFontStyle/ColumnFontStyle.js

@@ -17,49 +17,14 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ColumnFontStyle_exports = {};
 __export(ColumnFontStyle_exports, {
-  DataTableColumnFontStyle: () => DataTableColumnFontStyle,
+  DataTableColumnFontStyleFeature: () => DataTableColumnFontStyleFeature,
+  constructColumnFontStyleFeature: () => constructColumnFontStyleFeature,
   useColumnFontStyle: () => useColumnFontStyle
 });
 module.exports = __toCommonJS(ColumnFontStyle_exports);
 var import_react_table = require("@tanstack/react-table");
 var import_useControllableState = require("../../../../core/hooks/useControllableState.js");
 var import_useDataTableConfig = require("../../../hooks/useDataTableConfig.js");
-const DataTableColumnFontStyle = {
-  createColumn(column, table) {
-    column.toggleFontStyle = (value) => {
-      table.setColumnFontStyle((old) => {
-        let newValue = value;
-        if (newValue === void 0) {
-          if (old[column.id] !== void 0) {
-            newValue = old[column.id] === "code" ? "text" : "code";
-          } else {
-            newValue = table.getVisualVariantOptions().fontStyle === "code" ? "text" : "code";
-          }
-        }
-        return {
-          ...old,
-          [column.id]: newValue
-        };
-      });
-    };
-    column.getFontStyle = () => {
-      const fontStyleState = table.getState().columnFontStyle;
-      if (fontStyleState?.[column.id]) {
-        return fontStyleState?.[column.id];
-      }
-      return column.columnDef.meta?.fontStyle ?? table.getVisualVariantOptions().fontStyle;
-    };
-  },
-  createTable(table) {
-    table.setColumnFontStyle = (updater) => {
-      const newValue = (0, import_react_table.functionalUpdate)(
-        updater,
-        table.getState().columnFontStyle ?? {}
-      );
-      table.options.onColumnFontStyleChange?.(newValue);
-    };
-  }
-};
 function useColumnFontStyle(props, options) {
   const configFontStyle = (0, import_useDataTableConfig.useDataTableConfigElement)("fontStyle");
   const [columnFontStyle, onColumnFontStyleChange] = (0, import_useControllableState.useControllableState)({
@@ -67,6 +32,67 @@ function useColumnFontStyle(props, options) {
     defaultValue: props.defaultFontStyle,
     onChange: props.onFontStyleChange
   });
-  options.state = { ...options.state, columnFontStyle };
+  options.state = {
+    ...options.state,
+    columnFontStyle
+  };
   options.onColumnFontStyleChange = onColumnFontStyleChange;
 }
+function table_setColumnFontStyle(table, updater) {
+  const newValue = (0, import_react_table.functionalUpdate)(
+    updater,
+    table.atoms.columnFontStyle?.get() ?? {}
+  );
+  table.options.onColumnFontStyleChange?.(newValue);
+}
+function column_toggleFontStyle(column, value) {
+  table_setColumnFontStyle(column.table, (old) => {
+    let newValue = value;
+    if (newValue === void 0) {
+      if (old[column.id] !== void 0) {
+        newValue = old[column.id] === "code" ? "text" : "code";
+      } else {
+        newValue = column.table.store.state.visualVariantConfig.fontStyle === "code" ? "text" : "code";
+      }
+    }
+    return {
+      ...old,
+      [column.id]: newValue
+    };
+  });
+}
+function column_getFontStyle(column) {
+  const fontStyleState = column.table.atoms.columnFontStyle?.get();
+  if (fontStyleState?.[column.id]) {
+    return fontStyleState?.[column.id];
+  }
+  return column.columnDef.meta?.fontStyle ?? column.table.atoms.visualVariantConfig.get().fontStyle;
+}
+function constructColumnFontStyleFeature() {
+  return {
+    getInitialState: (initialState) => {
+      return {
+        columnFontStyle: structuredClone({}),
+        ...initialState
+      };
+    },
+    assignColumnPrototype: (prototype, table) => {
+      (0, import_react_table.assignPrototypeAPIs)("DataTableColumnFontStyleFeature", prototype, table, {
+        column_getFontStyle: {
+          fn: (column) => column_getFontStyle(column)
+        },
+        column_toggleFontStyle: {
+          fn: (column, value) => column_toggleFontStyle(column, value)
+        }
+      });
+    },
+    constructTableAPIs: (table) => {
+      (0, import_react_table.assignTableAPIs)("DataTableColumnFontStyleFeature", table, {
+        table_setColumnFontStyle: {
+          fn: (updater) => table_setColumnFontStyle(table, updater)
+        }
+      });
+    }
+  };
+}
+const DataTableColumnFontStyleFeature = constructColumnFontStyleFeature();

package/tables/DataTable/features/ColumnFontStyle/column-font-style-types.d.ts

@@ -117,3 +117,12 @@ export interface DataTableColumnFontStyleColumn {
      */
     toggleFontStyle: (value?: 'text' | 'code') => void;
 }
+/**
+ * @internal Plugin constructor interface
+ */
+export interface ColumnFontStyleFeatureConstructors {
+    Table: DataTableColumnFontStyleInstance;
+    TableState: DataTableColumnFontStyleTableState;
+    TableOptions: DataTableColumnFontStyleOptions;
+    Column: DataTableColumnFontStyleColumn;
+}

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

@@ -1,11 +1,11 @@
-._1ku1w3z0-3-6-0 {
+._1ku1w3z0-3-7-1 {
   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-6-0::after {
+._1ku1w3z1-3-7-1::after {
   content: "";
   position: absolute;
   top: 0;
@@ -14,13 +14,13 @@
   width: 3px;
   background: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1ku1w3z2-3-6-0::after {
+._1ku1w3z2-3-7-1::after {
   left: 0;
 }
-._1ku1w3z3-3-6-0::after {
+._1ku1w3z3-3-7-1::after {
   right: 0;
 }
-._1ku1w3z4-3-6-0::before {
+._1ku1w3z4-3-7-1::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-6-0 {
+._1ku1w3z5-3-7-1 {
   display: none;
 }
-._1ku1w3z6-3-6-0 {
+._1ku1w3z6-3-7-1 {
   cursor: grab;
 }
-._1ku1w3z7-3-6-0 {
+._1ku1w3z7-3-7-1 {
   pointer-events: none;
 }

package/tables/DataTable/features/ColumnOrder/ColumnOrder.d.ts

@@ -1,15 +1,87 @@
-import type { DataTableColumnOrderProps } from './column-order-types.js';
-import type { TableFeature, TableOptions } from '../../hooks/useTable/types.js';
-import type { DataTableColumnDef, DataTableRowData } from '../../public.api.js';
+import { type Column, type TableFeatures, type RowData, type TableFeature, type Table_Internal, type Column_Internal, type CellData, type Header } from '@tanstack/react-table';
+import type { ColumnOrderFeatureConstructors } from './column-order-types.js';
 /**
- * Additional feature implementation for column order.
+ * Overwrite the order columns fn from react table so that builtin columns are placed correctly
+ * @internal
+ */
+export declare function table_getOrderColumnsFn<TFeatures extends TableFeatures, TData extends RowData>(table: Table_Internal<TFeatures, TData>): (columns: Array<Column_Internal<TFeatures, TData, unknown>>) => Column_Internal<TFeatures, TData, unknown>[];
+/**
+ * Helper function that provides an array of all leaf-node columns, excluding builtin columns.
  * @internal
  */
-export declare const DataTableColumnOrder: TableFeature;
+export declare function table_getLeafColumnsWithoutBuiltin<TFeatures extends TableFeatures, TData extends RowData>(table: Table_Internal<TFeatures, TData>): Column<TFeatures, TData, unknown>[];
 /**
- * Configuration hook for the DataTable ColumnOrder feature.
+ * Helper function to update the currently dragged header in the state.
+ * @internal
+ */
+export declare function table_setDraggedHeaderColumn<TFeatures extends TableFeatures, TData extends RowData>(table: Table_Internal<TFeatures, TData>, column: Column_Internal<TFeatures, TData>): void;
+/**
+ * Helper function to create the restrict drag and drop modifier based on the
+ * current table state.
+ * @internal
+ */
+export declare function header_getColumnDragAndDropMode<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(header: Header<TFeatures, TData, TValue>): 'none' | 'only' | 'enabled';
+/**
+ * Helper function that determines whether drag and drop is disabled on the header (if a child column is dragged).
+ * @internal
+ */
+export declare function header_getIsDragAndDropDisabled<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(header: Header<TFeatures, TData, TValue>): boolean;
+/**
+ * Helper function to update the column order state with a new column order object or a functional update.
+ * @internal
+ */
+export declare function column_getCanMoveColumnLeft<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(column: Column_Internal<TFeatures, TData, TValue>): boolean;
+/**
+ * Helper function to update the column order state with a new column order object or a functional update.
+ * @internal
+ */
+export declare function column_getCanMoveColumnRight<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(column: Column_Internal<TFeatures, TData, TValue>): boolean;
+/**
+ * Moves the current column one position to the left and updates the table state.
+ *
+ * Depending on whether the column is a nested column or a standalone column,
+ * whether its neighboring columns are pinned, hidden, or nested,
+ * we need to consider different scenarios to calculate the new column order correctly.
+ *
+ * CASE1: Column itself is a nested child column.
+ *  - Constraint1: Can only move within the parent group.
+ *  - Constraint2: Skip pinned siblings.
+ *  - Constraint3: Skip hidden siblings.
+ *
+ * CASE2: Column is a standalone column or a parent column.
+ *  - Constraint1: Skip entire nested columns as a whole.
+ *  - Constraint2: Skip pinned columns.
+ *  - Constraint3: Skip hidden columns.
+ * @internal
+ */
+export declare function column_moveColumnLeft<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(column: Column_Internal<TFeatures, TData, TValue>): void;
+/**
+ * Moves the current column one position to the right and updates the table state.
+ *
+ * Depending on whether the column is a nested column or a standalone column,
+ * whether its neighboring columns are pinned, hidden, or nested,
+ * we need to consider different scenarios to calculate the new column order correctly.
+ *
+ * CASE1: Column itself is a nested child column.
+ *  - Constraint1: Can only move within the parent group.
+ *  - Constraint2: Skip pinned siblings.
+ *  - Constraint3: Skip hidden siblings.
+ *
+ * CASE2: Column is a standalone column or a parent column.
+ *  - Constraint1: Skip entire nested columns as a whole.
+ *  - Constraint2: Skip pinned columns.
+ *  - Constraint3: Skip hidden columns.
+ * @internal
+ */
+export declare function column_moveColumnRight<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(column: Column_Internal<TFeatures, TData, TValue>): void;
+/**
+ * Constructs the column order feature for the table,
+ * including API implementations and prototype assignments.
+ * @internal
+ */
+export declare function constructColumnOrderFeature<TFeatures extends TableFeatures, TData extends RowData>(): TableFeature<ColumnOrderFeatureConstructors<TFeatures, TData>>;
+/**
+ * Additional feature implementation for column order.
  * @internal
  */
-export declare function useColumnOrder<TData extends DataTableRowData>(props: DataTableColumnOrderProps & {
-    columns: DataTableColumnDef<TData>[];
-}, options: TableOptions<TData>): void;
+export declare const DataTableColumnOrderFeature: TableFeature<ColumnOrderFeatureConstructors<TableFeatures, RowData>>;