diff --git a/packages/module/src/DataViewTh/DataViewTh.tsx b/packages/module/src/DataViewTh/DataViewTh.tsx index 6fbeb277..55d885b0 100644 --- a/packages/module/src/DataViewTh/DataViewTh.tsx +++ b/packages/module/src/DataViewTh/DataViewTh.tsx @@ -58,13 +58,13 @@ export interface DataViewThResizableProps { id: string | number | undefined, width: number ) => void; - /** Width of the column */ + /** Starting width in pixels of the column */ width?: number; - /** Minimum width of the column */ + /** Minimum resize width in pixels of the column */ minWidth?: number; - /** Increment for keyboard navigation */ + /** Increment in pixels for keyboard navigation */ increment?: number; - /** Increment for keyboard navigation while shift is held */ + /** Increment in pixels for keyboard navigation while shift is held */ shiftIncrement?: number; /** Provides an accessible name for the resizable column via a human readable string. */ resizeButtonAriaLabel?: string; @@ -324,14 +324,22 @@ export const DataViewTh: FC = ({ ); + const classNames: string[] = []; + if (thProps?.className) { + classNames.push(thProps.className); + } + if (dataViewThClassName) { + classNames.push(dataViewThClassName); + } + return ( 0 ? { minWidth: width } : undefined} ref={thRef} - modifier="truncate" - className={dataViewThClassName} + style={width > 0 ? { minWidth: width, ...thProps?.style } : thProps?.style} + className={classNames.length > 0 ? classNames.join(' ') : undefined} {...(isResizable && { additionalContent: resizableContent })} > {content}