feat(VDataTableHeaders): add mobile headers

packages/vuetify/src/components/VDataTable/VDataTable.tsx

@@ -62,7 +62,6 @@ export type VDataTableSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots
  top: VDataTableSlotProps<T>
  body: VDataTableSlotProps<T>
  tbody: VDataTableSlotProps<T>
- thead: VDataTableSlotProps<T>
  tfoot: VDataTableSlotProps<T>
  bottom: VDataTableSlotProps<T>
  'body.prepend': VDataTableSlotProps<T>
@@ -240,13 +239,10 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
  default: () => slots.default ? slots.default(slotProps.value) : (
  <>
  { slots.colgroup?.(slotProps.value) }
- <thead>
- <VDataTableHeaders
- { ...dataTableHeadersProps }
- v-slots={ slots }
- />
- </thead>
- { slots.thead?.(slotProps.value) }
+ <VDataTableHeaders
+ { ...dataTableHeadersProps }
+ v-slots={ slots }
+ />
  <tbody>
  { slots['body.prepend']?.(slotProps.value) }
  { slots.body ? slots.body(slotProps.value) : (

packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx

@@ -52,9 +52,11 @@ export type VDataTableHeaderCellColumnSlotProps = {
 
 export type VDataTableHeadersSlots = {
  headers: HeadersSlotProps
+ thead: HeadersSlotProps
  loader: LoaderSlotProps
  'header.data-table-select': VDataTableHeaderCellColumnSlotProps
  'header.data-table-expand': VDataTableHeaderCellColumnSlotProps
+ 'mobile.header': HeadersSlotProps
 } & { [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps }
 
 export const makeVDataTableHeadersProps = propsFactory({
@@ -132,6 +134,18 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
  loaderClasses.value,
  ]))
 
+ const displayItems = computed<ItemProps['items']>(() => {
+ return columns.value.filter(column => column?.sortable)
+ })
+
+ const isSelectAll = columns.value.find(column => column.key === 'data-table-select')
+ const hasSelectAll = !!isSelectAll
+ const hasItems = computed(() => displayItems.value.length > 0)
+
+ const showMobileHeader = computed(() => {
+ return mobile.value && (hasItems.value || hasSelectAll)
+ })
+
  const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => {
  const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand'
  const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {})
@@ -221,101 +235,142 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
 
  const VDataTableMobileHeaderCell = () => {
  const headerProps = mergeProps(props.headerProps ?? {} ?? {})
-
- const displayItems = computed<ItemProps['items']>(() => {
- return columns.value.filter(column => column?.sortable)
- })
+ const selectColumn = columns.value.find(column => column.key === 'data-table-select') as InternalDataTableHeader
 
  const appendIcon = computed(() => {
- const showSelectColumn = columns.value.find(column => column.key === 'data-table-select')
-
- if (showSelectColumn == null) return
+ if (!hasSelectAll) return
 
  return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff'
  })
 
+ const selectColumnSlotProps: VDataTableHeaderCellColumnSlotProps = {
+ column: selectColumn,
+ selectAll,
+ isSorted,
+ toggleSort,
+ sortBy: sortBy.value,
+ someSelected: someSelected.value,
+ allSelected: allSelected.value,
+ getSortIcon,
+ }
+
  return (
  <VDataTableColumn
  tag="th"
  class={[
  ...headerCellClasses.value,
  ]}
  colspan={ headers.value.length + 1 }
+ noPadding={ hasSelectAll && !hasItems.value }
  { ...headerProps }
  >
- <div class="v-data-table-header__content">
- <VSelect
- chips
- class="v-data-table__td-sort-select"
- clearable
- density="default"
- items={ displayItems.value }
- label={ t('$vuetify.dataTable.sortBy') }
- multiple={ props.multiSort }
- variant="underlined"
- onClick:clear={ () => sortBy.value = [] }
- appendIcon={ appendIcon.value }
- onClick:append={ () => selectAll(!allSelected.value) }
- >
- {{
- ...slots,
- chip: props => (
- <VChip
- onClick={ props.item.raw?.sortable ? () => toggleSort(props.item.raw) : undefined }
- onMousedown={ (e: MouseEvent) => {
- e.preventDefault()
- e.stopPropagation()
- }}
+ {{
+ default: () => {
+ if (isSelectAll && !hasItems.value) {
+ return slots['header.data-table-select']?.(selectColumnSlotProps) ?? (showSelectAll && (
+ <VCheckboxBtn
+ class="justify-end"
+ modelValue={ allSelected.value }
+ indeterminate={ someSelected.value && !allSelected.value }
+ onUpdate:modelValue={ selectAll }
+ />
+ ))
+ }
+
+ return (
+ <div class="v-data-table-header__content">
+ { slots['mobile.header']
+ ? slots['mobile.header']?.(slotProps.value)
+ : displayItems.value.length > 0 && (
+ <VSelect
+ chips
+ class="v-data-table__td-sort-select"
+ clearable
+ density="default"
+ items={ displayItems.value }
+ label={ t('$vuetify.dataTable.sortBy') }
+ multiple={ props.multiSort }
+ variant="underlined"
+ onClick:clear={ () => sortBy.value = [] }
+ appendIcon={ appendIcon.value }
+ onClick:append={ () => selectAll(!allSelected.value) }
  >
- { props.item.title }
- <VIcon
- class={[
- 'v-data-table__td-sort-icon',
- isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active',
- ]}
- icon={ getSortIcon(props.item.raw) }
- size="small"
- />
- </VChip>
- ),
- }}
- </VSelect>
- </div>
+ {{
+ ...slots,
+ chip: props => (
+ <VChip
+ onClick={ props.item.raw?.sortable ? () => toggleSort(props.item.raw) : undefined }
+ onMousedown={ (e: MouseEvent) => {
+ e.preventDefault()
+ e.stopPropagation()
+ }}
+ >
+ { props.item.title }
+ <VIcon
+ class={[
+ 'v-data-table__td-sort-icon',
+ isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active',
+ ]}
+ icon={ getSortIcon(props.item.raw) }
+ size="small"
+ />
+ </VChip>
+ ),
+ }}
+ </VSelect>
+ )
+ }
+ </div>
+ )
+ },
+ }}
  </VDataTableColumn>
  )
  }
 
  useRender(() => {
- return mobile.value ? (
- <tr>
- <VDataTableMobileHeaderCell />
- </tr>
- ) : (
+ return (
  <>
- { slots.headers
- ? slots.headers(slotProps.value)
- : headers.value.map((row, y) => (
- <tr>
- { row.map((column, x) => (
- <VDataTableHeaderCell column={ column } x={ x } y={ y } />
- ))}
- </tr>
- ))}
-
- { props.loading && (
- <tr class="v-data-table-progress">
- <th colspan={ columns.value.length }>
- <LoaderSlot
- name="v-data-table-progress"
- absolute
- active
- color={ typeof props.loading === 'boolean' ? undefined : props.loading }
- indeterminate
- v-slots={{ default: slots.loader }}
- />
- </th>
- </tr>
- )}
+ <thead>
+ {
+ showMobileHeader.value
+ ? slots['mobile.header'] ? slots['mobile.header']!(slotProps.value)
+ : (
+ <tr>
+ <VDataTableMobileHeaderCell />
+ </tr>
+ )
+ : !mobile.value && (
+ <>
+ { slots.headers
+ ? slots.headers(slotProps.value)
+ : headers.value.map((row, y) => (
+ <tr>
+ { row.map((column, x) => (
+ <VDataTableHeaderCell column={ column } x={ x } y={ y } />
+ ))}
+ </tr>
+ ))}
+
+ { props.loading && (
+ <tr class="v-data-table-progress">
+ <th colspan={ columns.value.length }>
+ <LoaderSlot
+ name="v-data-table-progress"
+ absolute
+ active
+ color={ typeof props.loading === 'boolean' ? undefined : props.loading }
+ indeterminate
+ v-slots={{ default: slots.loader }}
+ />
+ </th>
+ </tr>
+ )}
+ </>
+ )
+ }
+ </thead>
+ { slots.thead?.(slotProps.value) }
  </>
  )
  })

packages/vuetify/src/components/VDataTable/VDataTableServer.tsx

@@ -165,14 +165,10 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
  default: () => slots.default ? slots.default(slotProps.value) : (
  <>
  { slots.colgroup?.(slotProps.value) }
- <thead class="v-data-table__thead" role="rowgroup">
- <VDataTableHeaders
- { ...dataTableHeadersProps }
- sticky={ props.fixedHeader }
- v-slots={ slots }
- />
- </thead>
- { slots.thead?.(slotProps.value) }
+ <VDataTableHeaders
+ { ...dataTableHeadersProps }
+ v-slots={ slots }
+ />
  <tbody class="v-data-table__tbody" role="rowgroup">
  { slots['body.prepend']?.(slotProps.value) }
  { slots.body ? slots.body(slotProps.value) : (

packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx

@@ -204,13 +204,11 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
  >
  <table>
  { slots.colgroup?.(slotProps.value) }
- <thead>
- <VDataTableHeaders
- { ...dataTableHeadersProps }
- sticky={ props.fixedHeader }
- v-slots={ slots }
- />
- </thead>
+ <VDataTableHeaders
+ { ...dataTableHeadersProps }
+ sticky={ props.fixedHeader }
+ v-slots={ slots }
+ />
  <tbody>
  <tr ref={ markerRef } style={{ height: convertToUnit(paddingTop.value), border: 0 }}>
  <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>

packages/vuetify/src/composables/display.ts

@@ -217,7 +217,7 @@ export function createDisplay (options?: DisplayOptions, ssr?: SSROptions): Disp
 export const makeDisplayProps = propsFactory({
  mobile: {
  type: Boolean,
- default: null,
+ default: false,
  },
  mobileBreakpoint: [Number, String] as PropType<number | DisplayBreakpoint>,
 }, 'display')