feat(AnalyticalTable): expose className & classNameHeader column options

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -5136,6 +5136,48 @@ describe('AnalyticalTable', () => {
     cy.get('[data-column-id="qty"]').invoke('outerWidth').should('be.gt', 150);
   });
 
+  it('column className & classNameHeader', () => {
+    const columnsWithClassNames: AnalyticalTableColumnDefinition[] = [
+      {
+        Header: 'Name',
+        accessor: 'name',
+        className: 'cy-body-cell',
+        classNameHeader: 'cy-header-cell',
+      },
+      {
+        Header: 'Age',
+        accessor: 'age',
+      },
+    ];
+    cy.mount(
+      <>
+        <style>{`
+          .cy-body-cell { background-color: lightblue; }
+          .cy-header-cell { background-color: lightgrey; }
+        `}</style>
+        <AnalyticalTable data={data} columns={columnsWithClassNames} />
+      </>,
+    );
+
+    cy.get('[data-column-id="name"][role="columnheader"]')
+      .should('have.class', 'cy-header-cell')
+      .and('not.have.class', 'cy-body-cell')
+      .and('have.css', 'background-color', 'rgb(211, 211, 211)');
+
+    cy.get('[data-column-id="age"][role="columnheader"]')
+      .should('not.have.class', 'cy-header-cell')
+      .and('not.have.class', 'cy-body-cell');
+
+    cy.get('[data-row-index="1"][data-column-index="0"]')
+      .should('have.class', 'cy-body-cell')
+      .and('not.have.class', 'cy-header-cell')
+      .and('have.css', 'background-color', 'rgb(173, 216, 230)');
+
+    cy.get('[data-row-index="1"][data-column-index="1"]')
+      .should('not.have.class', 'cy-body-cell')
+      .and('not.have.class', 'cy-header-cell');
+  });
+
   cypressPassThroughTestsFactory(AnalyticalTable, { data, columns });
 });
 

packages/main/src/components/AnalyticalTable/docs/ColumnProperties.md

@@ -23,6 +23,8 @@ Each object in the `columns` array configures one column. Do not set `width` unl
 | `maxWidth`              | `number`                                             |                  | Maximum column width.                                                                                                                       |
 | `hAlign`                | `TextAlign`                                          |                  | Horizontal cell alignment.                                                                                                                  |
 | `vAlign`                | `VerticalAlign`                                      |                  | Vertical cell alignment.                                                                                                                    |
+| `className`             | `string`                                             |                  | `className` applied to each body cell of the column.                                                                                        |
+| `classNameHeader`       | `string`                                             |                  | `className` applied to the header cell of the column.                                                                                       |
 | `Popover`               | `ComponentType` or `(instance) => ReactNode`         |                  | Custom header popover renderer. Replaces the internal header popover. Receives table instance with `popoverProps` (`openerRef`, `setOpen`). |
 | `Filter`                | `ComponentType`                                      |                  | Filter component rendered in the header.                                                                                                    |
 | `disableFilters`        | `boolean`                                            |                  | Disable filtering for this column.                                                                                                          |

packages/main/src/components/AnalyticalTable/docs/FeatureExamples/AnalyticalTableFeatureExamples.stories.tsx

@@ -1280,3 +1280,29 @@ export const AutoResizeColumns: Story = {
     );
   },
 };
+
+const columnClassNameColumns: AnalyticalTableColumnDefinition[] = [
+  {
+    Header: 'Name',
+    accessor: 'name',
+    className: 'feature-example-body-cell',
+    classNameHeader: 'feature-example-header-cell',
+  },
+  { Header: 'Age', accessor: 'age' },
+  { Header: 'Friend Name', accessor: 'friend.name' },
+  { Header: 'Friend Age', accessor: 'friend.age' },
+];
+
+export const ColumnClassName: Story = {
+  render(args) {
+    return (
+      <>
+        <style>{`
+          .feature-example-header-cell { background-color: lightgrey; }
+          .feature-example-body-cell { background-color: lightblue; }
+        `}</style>
+        <AnalyticalTable {...args} data={dataSmall} columns={columnClassNameColumns} visibleRows={5} />
+      </>
+    );
+  },
+};

packages/main/src/components/AnalyticalTable/docs/FeatureExamples/FeatureExamples.mdx

@@ -1005,4 +1005,32 @@ const columns = [
 />
 ```
 
+## Custom Column Class Names
+
+Use the `className` and `classNameHeader` column options to apply custom classes to a column's body cells and its header cell respectively. The two are independent — `className` only affects body cells, `classNameHeader` only the header cell.
+
+**Note:** Custom classes are merged with the table's internal classes and can therefore override internal styles. Use with caution!
+
+<Canvas sourceState="none" of={FeatureStories.ColumnClassName} />
+
+### Code
+
+```jsx
+const columns = [
+  {
+    Header: 'Name',
+    accessor: 'name',
+    className: 'body-cell',
+    classNameHeader: 'header-cell'
+  },
+  { Header: 'Age', accessor: 'age' }
+];
+
+// styles.css
+// .header-cell { background-color: lightgrey; }
+// .body-cell { background-color: lightblue; }
+
+<AnalyticalTable data={data} columns={columns} />
+```
+
 <Footer />

packages/main/src/components/AnalyticalTable/hooks/useStyling.ts

@@ -35,7 +35,7 @@ const getHeaderProps = (columnProps, { instance, column }: { instance: TableInst
   return [
     columnProps,
     {
-      className: classes.th,
+      className: clsx(classes.th, column.classNameHeader),
       column,
       style: style,
       id: column.id,

packages/main/src/components/AnalyticalTable/types/index.ts

@@ -638,6 +638,14 @@ export interface AnalyticalTableColumnDefinition {
    */
   autoResizable?: boolean;
   // ui5 web components react properties
+  /**
+   * Defines a `className` that is applied to each body cell of the column.
+   */
+  className?: string;
+  /**
+   * Defines a `className` that is applied to the header cell of the column.
+   */
+  classNameHeader?: string;
   /**
    * Horizontal alignment of the cell.
    */