Fix problem with maxWidth prop, new prop wrap to make text-overflow.

Prop wrap works only in combination with maxWidth
vuetifyjs · Jan 17, 2024 · 3e22c1a · 3e22c1a
1 parent 356bfd1
commit 3e22c1a
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 0 deletions.
diff --git 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
@@ -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
@@ -131,12 +131,14 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
  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 }
  { ...column.headerProps }

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx
@@ -100,6 +100,8 @@ export const VDataTableRow = genericComponent<new <T>(
  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
@@ -18,6 +18,7 @@ export type DataTableHeader = {
  width?: number | string
  minWidth?: string
  maxWidth?: string
+ nowrap?: boolean
 
  headerProps?: Record<string, any>
  cellProps?: HeaderCellProps