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; } + + +``` +