diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass index ca3b69d0222..ac1a57126be 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.sass +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -42,6 +42,14 @@ &.v-data-table-column--no-padding padding: 0 8px + &.v-data-table-column--nowrap + text-overflow: ellipsis + text-wrap: nowrap + overflow: hidden + + & .v-data-table-header__content + display: contents + > th align-items: center diff --git a/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx index 36044eb9ea2..2640d79084b 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx @@ -16,6 +16,8 @@ export const VDataTableColumn = defineFunctionalComponent({ noPadding: Boolean, tag: String, width: [Number, String], + maxWidth: [Number, String], + nowrap: Boolean, }, (props, { slots }) => { const Tag = props.tag ?? 'td' return ( @@ -26,12 +28,14 @@ export const VDataTableColumn = defineFunctionalComponent({ 'v-data-table-column--fixed': props.fixed, 'v-data-table-column--last-fixed': props.lastFixed, 'v-data-table-column--no-padding': props.noPadding, + 'v-data-table-column--nowrap': props.nowrap, }, `v-data-table-column--align-${props.align}`, ]} style={{ height: convertToUnit(props.height), width: convertToUnit(props.width), + maxWidth: convertToUnit(props.maxWidth), left: convertToUnit(props.fixedOffset || null), }} > diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index bef30691df4..e97bd8213c5 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -135,12 +135,14 @@ export const VDataTableHeaders = genericComponent()({ style={{ width: convertToUnit(column.width), minWidth: convertToUnit(column.minWidth), + maxWidth: convertToUnit(column.maxWidth), ...getFixedStyles(column, y), }} colspan={ column.colspan } rowspan={ column.rowspan } onClick={ column.sortable ? () => toggleSort(column) : undefined } fixed={ column.fixed } + nowrap={ column.nowrap } lastFixed={ column.lastFixed } noPadding={ noPadding } { ...headerProps } diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx index 380a2454e28..537364b0429 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -100,6 +100,8 @@ export const VDataTableRow = genericComponent( lastFixed={ column.lastFixed } noPadding={ column.key === 'data-table-select' || column.key === 'data-table-expand' } width={ column.width } + maxWidth={ column.maxWidth } + nowrap={ column.nowrap } { ...cellProps } { ...columnCellProps } > diff --git a/packages/vuetify/src/components/VDataTable/types.ts b/packages/vuetify/src/components/VDataTable/types.ts index e824ce07fbf..d526a6ef279 100644 --- a/packages/vuetify/src/components/VDataTable/types.ts +++ b/packages/vuetify/src/components/VDataTable/types.ts @@ -18,6 +18,7 @@ export type DataTableHeader> = { width?: number | string minWidth?: string maxWidth?: string + nowrap?: boolean headerProps?: Record cellProps?: HeaderCellProps