chore: add decorator in dataTable

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -1973,6 +1973,17 @@ Map {
         },
       },
     },
+    "TableDecoratorRow": Object {
+      "displayName": "TableDecoratorRow",
+      "propTypes": Object {
+        "className": Object {
+          "type": "string",
+        },
+        "decorator": Object {
+          "type": "node",
+        },
+      },
+    },
     "TableExpandHeader": Object {
       "propTypes": Object {
         "aria-controls": Object {
@@ -8003,6 +8014,17 @@ Map {
       },
     },
   },
+  "TableDecoratorRow" => Object {
+    "displayName": "TableDecoratorRow",
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "decorator": Object {
+        "type": "node",
+      },
+    },
+  },
   "TableExpandHeader" => Object {
     "propTypes": Object {
       "aria-controls": Object {

packages/react/src/__tests__/index-test.js

@@ -205,6 +205,7 @@ describe('Carbon Components React', () => {
         "TableBody",
         "TableCell",
         "TableContainer",
+        "TableDecoratorRow",
         "TableExpandHeader",
         "TableExpandRow",
         "TableExpandedRow",

packages/react/src/components/DataTable/DataTable.tsx

@@ -24,6 +24,7 @@ import TableBatchActions from './TableBatchActions';
 import TableBody from './TableBody';
 import TableCell from './TableCell';
 import TableContainer from './TableContainer';
+import TableDecoratorRow from './TableDecoratorRow';
 import TableExpandHeader from './TableExpandHeader';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
@@ -99,6 +100,7 @@ export interface DataTableHeader {
   key: string;
   header: React.ReactNode;
   slug?: React.ReactElement;
+  decorator?: React.ReactElement;
 }
 
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
@@ -204,6 +206,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
   getCellProps: (getCellPropsArgs: { cell: DataTableCell<ColTypes> }) => {
     [key: string]: unknown;
     hasSlugHeader?: boolean;
+    hasDecoratorHeader?: boolean;
   };
 
   // Custom event handlers
@@ -390,6 +393,7 @@ class DataTable<RowType, ColTypes extends any[]> extends React.Component<
   static TableBody: typeof TableBody;
   static TableCell: typeof TableCell;
   static TableContainer: typeof TableContainer;
+  static TableDecoratorRow: typeof TableDecoratorRow;
   static TableExpandHeader: typeof TableExpandHeader;
   static TableExpandRow: typeof TableExpandRow;
   static TableExpandedRow: typeof TableExpandedRow;
@@ -473,6 +477,7 @@ class DataTable<RowType, ColTypes extends any[]> extends React.Component<
       isSortable,
       isSortHeader: sortHeaderKey === header.key,
       slug: header.slug,
+      decorator: header.decorator,
       onClick: (event) => {
         const nextSortState = getNextSortState(this.props, this.state, {
           key: header.key,
@@ -748,6 +753,7 @@ class DataTable<RowType, ColTypes extends any[]> extends React.Component<
     return {
       ...rest,
       hasSlugHeader: cell.hasSlugHeader,
+      hasDecoratorHeader: cell.hasDecoratorHeader,
     };
   };
 
@@ -1035,6 +1041,7 @@ DataTable.TableBatchActions = TableBatchActions;
 DataTable.TableBody = TableBody;
 DataTable.TableCell = TableCell;
 DataTable.TableContainer = TableContainer;
+DataTable.TableDecoratorRow = TableDecoratorRow;
 DataTable.TableExpandHeader = TableExpandHeader;
 DataTable.TableExpandRow = TableExpandRow;
 DataTable.TableExpandedRow = TableExpandedRow;

packages/react/src/components/DataTable/TableDecoratorRow.tsx

@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import deprecate from '../../prop-types/deprecate';
+
+export interface TableDecoratorRowProps {
+  /**
+   * The CSS class names of the cell that wraps the underlying input control
+   */
+  className?: string;
+
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+   */
+  decorator?: ReactNode;
+}
+
+const TableDecoratorRow = ({
+  className,
+  decorator,
+}: TableDecoratorRowProps) => {
+  const prefix = usePrefix();
+  const TableDecoratorRowClasses = classNames({
+    ...(className && { [className]: true }),
+    [`${prefix}--table-column-decorator`]: true,
+    [`${prefix}--table-column-decorator--active`]: decorator,
+  });
+
+  let normalizedDecorator = React.isValidElement(decorator)
+    ? (decorator as ReactNode)
+    : null;
+  if (
+    normalizedDecorator &&
+    normalizedDecorator['type']?.displayName === 'AILabel'
+  ) {
+    normalizedDecorator = React.cloneElement(
+      normalizedDecorator as React.ReactElement<any>,
+      {
+        size: 'mini',
+      }
+    );
+  }
+
+  return <td className={TableDecoratorRowClasses}>{normalizedDecorator}</td>;
+};
+
+TableDecoratorRow.displayName = 'TableDecoratorRow';
+TableDecoratorRow.propTypes = {
+  /**
+   * The CSS class names of the cell that wraps the underlying input control
+   */
+  className: PropTypes.string,
+
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+   */
+  decorator: PropTypes.node,
+};
+
+export default TableDecoratorRow;

packages/react/src/components/DataTable/TableExpandRow.tsx

@@ -73,12 +73,18 @@
   ) => {
     const prefix = usePrefix();
 
-    // We need to put the slug before the expansion arrow and all other table cells after the arrow.
-    let rowHasSlug;
-    const slug = React.Children.toArray(children).map((child: any) => {
-      if (child.type?.displayName === 'TableSlugRow') {
-        if (child.props.slug) {
-          rowHasSlug = true;
+    // We need to put the AILabel and Decorator before the expansion arrow and all other table cells after the arrow.
+    let rowHasAILabel;
+    const decorator = React.Children.toArray(children).map((child: any) => {
+      if (
+        child.type?.displayName === 'TableSlugRow' ||
+        child.type?.displayName === 'TableDecoratorRow'
+      ) {
+        if (
+          child.props.slug ||
+          child.props.decorator?.type.displayName === 'AILabel'
+        ) {
+          rowHasAILabel = true;
         }
 
         return child;
@@ -87,7 +93,10 @@
 
     const normalizedChildren = React.Children.toArray(children).map(
       (child: any) => {
-        if (child.type?.displayName !== 'TableSlugRow') {
+        if (
+          child.type?.displayName !== 'TableSlugRow' &&
+          child.type?.displayName !== 'TableDecoratorRow'
+        ) {
           return child;
         }
       }
@@ -98,15 +107,15 @@
         [`${prefix}--parent-row`]: true,
         [`${prefix}--expandable-row`]: isExpanded,
         [`${prefix}--data-table--selected`]: isSelected,
-        [`${prefix}--data-table--slug-row`]: rowHasSlug,
+        [`${prefix}--data-table--ai-label-row`]: rowHasAILabel,
       },
       rowClassName
     );
     const previousValue = isExpanded ? 'collapsed' : undefined;
 
     return (
       <tr {...rest} ref={ref as never} className={className} data-parent-row>
-        {slug}
+        {decorator}
         <TableCell
           className={`${prefix}--table-expand`}
           data-previous-value={previousValue}

packages/react/src/components/DataTable/TableHeader.tsx

@@ -114,10 +114,16 @@
   scope?: string;
 
   /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+   * @deprecated please use decorator instead.
+   * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
    */
   slug?: ReactNode;
 
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+   */
+  decorator?: ReactNode;
+
   /**
    * Specify which direction we are currently sorting by, should be one of DESC,
    * NONE, or ASC.
@@ -130,6 +136,7 @@
     className: headerClassName,
     children,
     colSpan,
+    decorator,
     isSortable = false,
     isSortHeader,
     onClick,
@@ -145,19 +152,31 @@
   const prefix = usePrefix();
   const uniqueId = useId('table-sort');
 
-  // Slug is always size `mini`
-  const slugRef = useRef<HTMLInputElement>(null);
-  let normalizedSlug;
-  if (slug) {
-    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
-      size: 'mini',
-      ref: slugRef,
-    });
+  // AILabel is always size `mini`
+  const AILableRef = useRef<HTMLInputElement>(null);
+
+  let colHasAILabel;
+  let normalizedDecorator = React.isValidElement(slug ?? decorator)
+    ? (slug ?? decorator)
+    : null;
+  if (
+    normalizedDecorator &&
+    normalizedDecorator['type']?.displayName === 'AILabel'
+  ) {
+    colHasAILabel = true;
+    normalizedDecorator = React.cloneElement(
+      normalizedDecorator as React.ReactElement<any>,
+      {
+        size: 'mini',
+        ref: AILableRef,
+      }
+    );
   }
 
   const headerLabelClassNames = classNames({
     [`${prefix}--table-header-label`]: true,
-    [`${prefix}--table-header-label--slug`]: slug,
+    [`${prefix}--table-header-label--ai-label`]: colHasAILabel,
+    [`${prefix}--table-header-label--decorator`]: decorator,
   });
 
   if (!isSortable) {
@@ -172,7 +191,9 @@
         {children ? (
           <div className={headerLabelClassNames}>
             {children}
-            {normalizedSlug}
+            <div className={`${prefix}--table-header-label--decorator-inner`}>
+              {normalizedDecorator}
+            </div>
           </div>
         ) : null}
       </th>
@@ -198,11 +219,16 @@
     });
 
   const headerClasses = cx(headerClassName, `${prefix}--table-sort__header`, {
-    [`${prefix}--table-sort__header--slug`]: slug,
+    [`${prefix}--table-sort__header--ai-label`]: colHasAILabel,
+    [`${prefix}--table-sort__header--decorator`]: decorator,
   });
 
   const handleClick = (evt) => {
-    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+    if (
+      colHasAILabel &&
+      AILableRef.current &&
+      AILableRef.current.contains(evt.target)
+    ) {
       return;
     } else if (onClick) {
       return onClick(evt);
@@ -233,7 +259,9 @@
             size={20}
             className={`${prefix}--table-sort__icon-unsorted`}
           />
-          {normalizedSlug}
+          <div className={`${prefix}--table-header-label--decorator-inner`}>
+            {normalizedDecorator}
+          </div>
         </span>
       </button>
     </th>

packages/react/src/components/DataTable/TableRow.tsx

@@ -26,12 +26,18 @@
 const TableRow = (props: TableRowProps) => {
   const prefix = usePrefix();
 
-  let rowHasSlug;
+  let rowHasAILabel;
   if (props?.children) {
     React.Children.toArray(props.children).map((child: any) => {
-      if (child.type?.displayName === 'TableSlugRow') {
-        if (child.props.slug) {
-          rowHasSlug = true;
+      if (
+        child.type?.displayName === 'TableSlugRow' ||
+        child.type?.displayName === 'TableDecoratorRow'
+      ) {
+        if (
+          child.props.slug ||
+          child.props.decorator?.type.displayName === 'AILabel'
+        ) {
+          rowHasAILabel = true;
         }
       }
     });
@@ -40,7 +46,7 @@
   // only useful in `TableExpandRow`
   const className = cx(props.className, {
     [`${prefix}--data-table--selected`]: props.isSelected,
-    [`${prefix}--data-table--slug-row`]: rowHasSlug,
+    [`${prefix}--data-table--ai-label-row`]: rowHasAILabel,
   });
 
   const cleanProps = {

packages/react/src/components/DataTable/TableSlugRow.tsx

@@ -6,9 +6,10 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+import deprecateComponent from '../../prop-types/deprecateComponent';
 
 export interface TableSlugRowProps {
   /**
@@ -23,6 +24,13 @@
 }
 
 const TableSlugRow = ({ className, slug }: TableSlugRowProps) => {
+  useEffect(() => {
+    deprecateComponent(
+      'TableSlugRow',
+      'The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.'
+    );
+  }, []);
+
   const prefix = usePrefix();
   const TableSlugRowClasses = classNames({
     ...(className && { [className]: true }),

packages/react/src/components/DataTable/__tests__/Table-test.js

@@ -248,7 +248,7 @@ describe('Table', () => {
         <Table experimentalAutoAlign>
           <TableHead>
             <TableRow>
-              <TableHeader>Header1</TableHeader>
+              <TableHeader isSortable={true}>Header1</TableHeader>
             </TableRow>
           </TableHead>
           <TableBody>