diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index 3fef5185e12..f889fd45917 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/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(
+ <>
+
+
+ >,
+ );
+
+ 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 });
});
diff --git a/packages/main/src/components/AnalyticalTable/docs/ColumnProperties.md b/packages/main/src/components/AnalyticalTable/docs/ColumnProperties.md
index 753ec6d8084..2068e8130b6 100644
--- a/packages/main/src/components/AnalyticalTable/docs/ColumnProperties.md
+++ b/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. |
diff --git a/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/AnalyticalTableFeatureExamples.stories.tsx b/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/AnalyticalTableFeatureExamples.stories.tsx
index 01c3a016b77..07b2ec088dc 100644
--- a/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/AnalyticalTableFeatureExamples.stories.tsx
+++ b/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 (
+ <>
+
+
+ >
+ );
+ },
+};
diff --git a/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/FeatureExamples.mdx b/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/FeatureExamples.mdx
index 34876b88c5f..d3df4365ed1 100644
--- a/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/FeatureExamples.mdx
+++ b/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!
+
+
+
+### 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; }
+
+
+```
+
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
index fc0ab819700..ccfb9f915e6 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts
+++ b/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,
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index d644f64abde..d9e3cfe8f82 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/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.
*/