feat(VDataTable): customizable expand/collapse icons (#21698)

Author: J-Sek

packages/api-generator/src/locale/en/VDataTable.json

@@ -2,6 +2,7 @@
   "props": {
     "calculateWidths": "Enables calculation of column widths. `widths` property will be available in select scoped slots.",
     "checkboxColor": "Set the color of the checkboxes (showSelect must be used).",
+    "collapseIcon": "Icon to display when the expandable row is expanded.",
     "customFilter": "Function to filter items.",
     "customGroup": "Function used to group items.",
     "customSort": "Function used to sort items.",
@@ -10,9 +11,11 @@
     "disableFiltering": "Disables filtering completely.",
     "disablePagination": "Disables pagination completely.",
     "disableSort": "Disables sorting completely.",
-    "expandIcon": "Icon used for expand toggle button.",
+    "expandIcon": "Icon to display when the expandable row is collapsed.",
     "fixedHeader": "Fixed header to top of table.",
     "groupBy": "Configures attributes (and sort order) to group items together. Can be customized further with `group-header` slot.",
+    "groupCollapseIcon": "Icon to display when the row group is expanded.",
+    "groupExpandIcon": "Icon to display when the row group is collapsed.",
     "headerProps": "Pass props to the default header. See [`v-data-table-headers` API](/api/v-data-table-headers) for more information.",
     "headers": "An array of objects that each describe a header column.",
     "headersLength": "Can be used in combination with `hide-default-header` to specify the number of columns in the table to allow expansion rows and loading bar to function properly.",

packages/api-generator/src/locale/en/VDatePicker.json

@@ -6,7 +6,6 @@
     "displayDate": "The date displayed in the picker header.",
     "eventColor": "Sets the color for event dot. It can be string (all events will have the same color) or `object` where attribute is the event date and value is boolean/color/array of colors for specified date or `function` taking date as a parameter and returning boolean/color/array of colors for that date.",
     "events": "Array of dates or object defining events or colors or function returning boolean/color/array of colors.",
-    "expandIcon": "Icon used for **view-mode** toggle.",
     "headerColor": "Allows you to set a different color for the header when used in conjunction with the `color` prop.",
     "hideHeader": "Hides the header.",
     "hideWeekdays": "Hides the weekdays.",

packages/docs/src/data/new-in.json

@@ -79,9 +79,29 @@
   },
   "VDataTable": {
     "props": {
+      "collapseIcon": "3.10.0",
+      "expandIcon": "3.10.0",
+      "groupCollapseIcon": "3.10.0",
+      "groupExpandIcon": "3.10.0",
       "headerProps": "3.5.0"
     }
   },
+  "VDataTableServer": {
+    "props": {
+      "collapseIcon": "3.10.0",
+      "expandIcon": "3.10.0",
+      "groupCollapseIcon": "3.10.0",
+      "groupExpandIcon": "3.10.0"
+    }
+  },
+  "VDataTableVirtual": {
+    "props": {
+      "collapseIcon": "3.10.0",
+      "expandIcon": "3.10.0",
+      "groupCollapseIcon": "3.10.0",
+      "groupExpandIcon": "3.10.0"
+    }
+  },
   "VDialog": {
     "props": {
       "stickToTarget": "3.10.0"

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

@@ -7,6 +7,7 @@ import { VCheckboxBtn } from '@/components/VCheckbox'
 import { useGroupBy } from './composables/group'
 import { useHeaders } from './composables/headers'
 import { useSelection } from './composables/select'
+import { IconValue } from '@/composables/icons'
 
 // Utilities
 import { computed } from 'vue'
@@ -26,6 +27,14 @@ export const makeVDataTableGroupHeaderRowProps = propsFactory({
     type: Object as PropType<Group>,
     required: true,
   },
+  groupCollapseIcon: {
+    type: IconValue,
+    default: '$tableGroupCollapse',
+  },
+  groupExpandIcon: {
+    type: IconValue,
+    default: '$tableGroupExpand',
+  },
 }, 'VDataTableGroupHeaderRow')
 
 export const VDataTableGroupHeaderRow = genericComponent<VDataTableGroupHeaderRowSlots>()({
@@ -51,7 +60,7 @@ export const VDataTableGroupHeaderRow = genericComponent<VDataTableGroupHeaderRo
       >
         { columns.value.map(column => {
           if (column.key === 'data-table-group') {
-            const icon = isGroupOpen(props.item) ? '$expand' : '$next'
+            const icon = isGroupOpen(props.item) ? props.groupCollapseIcon : props.groupExpandIcon
             const onClick = () => toggleGroup(props.item)
 
             return slots['data-table-group']?.({ item: props.item, count: rows.value.length, props: { icon, onClick } }) ?? (

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

@@ -9,6 +9,7 @@ import { useHeaders } from './composables/headers'
 import { useSelection } from './composables/select'
 import { useSort } from './composables/sort'
 import { makeDisplayProps, useDisplay } from '@/composables/display'
+import { IconValue } from '@/composables/icons'
 
 // Utilities
 import { toDisplayString, withModifiers } from 'vue'
@@ -38,6 +39,15 @@ export const makeVDataTableRowProps = propsFactory({
   index: Number,
   item: Object as PropType<DataTableItem>,
   cellProps: [Object, Function] as PropType<CellProps<any>>,
+  collapseIcon: {
+    type: IconValue,
+    default: '$collapse',
+  },
+  expandIcon: {
+    type: IconValue,
+    default: '$expand',
+  },
+
   onClick: EventProp<[MouseEvent]>(),
   onContextmenu: EventProp<[MouseEvent]>(),
   onDblclick: EventProp<[MouseEvent]>(),
@@ -166,14 +176,14 @@ export const VDataTableRow = genericComponent<new <T>(
                     return slots['item.data-table-expand']?.({
                       ...slotProps,
                       props: {
-                        icon: isExpanded(item) ? '$collapse' : '$expand',
+                        icon: isExpanded(item) ? props.collapseIcon : props.expandIcon,
                         size: 'small',
                         variant: 'text',
                         onClick: withModifiers(() => toggleExpand(item), ['stop']),
                       },
                     }) ?? (
                       <VBtn
-                        icon={ isExpanded(item) ? '$collapse' : '$expand' }
+                        icon={ isExpanded(item) ? props.collapseIcon : props.expandIcon }
                         size="small"
                         variant="text"
                         onClick={ withModifiers(() => toggleExpand(item), ['stop']) }

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

@@ -1,6 +1,6 @@
 // Components
-import { VDataTableGroupHeaderRow } from './VDataTableGroupHeaderRow'
-import { VDataTableRow } from './VDataTableRow'
+import { makeVDataTableGroupHeaderRowProps, VDataTableGroupHeaderRow } from './VDataTableGroupHeaderRow'
+import { makeVDataTableRowProps, VDataTableRow } from './VDataTableRow'
 
 // Composables
 import { useExpanded } from './composables/expand'
@@ -12,7 +12,7 @@ import { useLocale } from '@/composables/locale'
 
 // Utilities
 import { Fragment, mergeProps } from 'vue'
-import { genericComponent, getPrefixedEventHandlers, propsFactory, useRender } from '@/util'
+import { genericComponent, getPrefixedEventHandlers, pick, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -48,6 +48,8 @@ export const makeVDataTableRowsProps = propsFactory({
   rowProps: [Object, Function] as PropType<RowProps<any>>,
   cellProps: [Object, Function] as PropType<CellProps<any>>,
 
+  ...pick(makeVDataTableRowProps(), ['collapseIcon', 'expandIcon']),
+  ...pick(makeVDataTableGroupHeaderRowProps(), ['groupCollapseIcon', 'groupExpandIcon']),
   ...makeDisplayProps(),
 }, 'VDataTableRows')
 
@@ -72,6 +74,8 @@ export const VDataTableRows = genericComponent<new <T>(
     const { mobile } = useDisplay(props)
 
     useRender(() => {
+      const groupHeaderRowProps = pick(props, ['groupCollapseIcon', 'groupExpandIcon'])
+
       if (props.loading && (!props.items.length || slots.loading)) {
         return (
           <tr
@@ -119,6 +123,7 @@ export const VDataTableRows = genericComponent<new <T>(
                   key={ `group-header_${item.id}` }
                   item={ item }
                   { ...getPrefixedEventHandlers(attrs, ':group-header', () => slotProps) }
+                  { ...groupHeaderRowProps }
                   v-slots={ slots }
                 />
               )
@@ -146,6 +151,8 @@ export const VDataTableRows = genericComponent<new <T>(
                   index,
                   item,
                   cellProps: props.cellProps,
+                  collapseIcon: props.collapseIcon,
+                  expandIcon: props.expandIcon,
                   mobile: mobile.value,
                 },
                 getPrefixedEventHandlers(attrs, ':row', () => slotProps),

packages/vuetify/src/iconsets/fa.ts

@@ -43,6 +43,8 @@ const aliases: IconAliases = {
   calendar: 'fas fa-calendar',
   treeviewCollapse: 'fas fa-caret-down',
   treeviewExpand: 'fas fa-caret-right',
+  tableGroupExpand: 'fas fa-chevron-right',
+  tableGroupCollapse: 'fas fa-chevron-down',
   eyeDropper: 'fas fa-eye-dropper',
   upload: 'fas fa-cloud-upload-alt',
   color: 'fas fa-palette',

packages/vuetify/src/iconsets/fa4.ts

@@ -46,6 +46,8 @@ const aliases: IconAliases = {
   calendar: 'fa-calendar',
   treeviewCollapse: 'fa-caret-down',
   treeviewExpand: 'fa-caret-right',
+  tableGroupExpand: 'fa-chevron-right',
+  tableGroupCollapse: 'fa-chevron-down',
   eyeDropper: 'fa-eye-dropper',
   upload: 'fa-cloud-upload',
   color: 'fa-paint-brush',

packages/vuetify/src/iconsets/md.ts

@@ -46,6 +46,8 @@ const aliases: IconAliases = {
   calendar: 'event',
   treeviewCollapse: 'arrow_drop_down',
   treeviewExpand: 'arrow_right',
+  tableGroupCollapse: 'chevron_down',
+  tableGroupExpand: 'chevron_right',
   eyeDropper: 'colorize',
   upload: 'cloud_upload',
   color: 'palette',

packages/vuetify/src/iconsets/mdi-svg.ts

@@ -45,6 +45,8 @@ const aliases: IconAliases = {
   calendar: 'svg:M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z',
   treeviewCollapse: 'svg:M7,10L12,15L17,10H7Z',
   treeviewExpand: 'svg:M10,17L15,12L10,7V17Z',
+  tableGroupExpand: 'svg:M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z',
+  tableGroupCollapse: 'svg:M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z',
   eyeDropper: 'svg:M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z',
   upload: 'svg:M11 20H6.5q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.63-2.3 2.5-3.72Q9.63 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20H13v-7.15l1.6 1.55L16 13l-4-4l-4 4l1.4 1.4l1.6-1.55Z',
   color: 'svg:M17.5 12a1.5 1.5 0 0 1-1.5-1.5A1.5 1.5 0 0 1 17.5 9a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5m-3-4A1.5 1.5 0 0 1 13 6.5A1.5 1.5 0 0 1 14.5 5A1.5 1.5 0 0 1 16 6.5A1.5 1.5 0 0 1 14.5 8m-5 0A1.5 1.5 0 0 1 8 6.5A1.5 1.5 0 0 1 9.5 5A1.5 1.5 0 0 1 11 6.5A1.5 1.5 0 0 1 9.5 8m-3 4A1.5 1.5 0 0 1 5 10.5A1.5 1.5 0 0 1 6.5 9A1.5 1.5 0 0 1 8 10.5A1.5 1.5 0 0 1 6.5 12M12 3a9 9 0 0 0-9 9a9 9 0 0 0 9 9a1.5 1.5 0 0 0 1.5-1.5c0-.39-.15-.74-.39-1c-.23-.27-.38-.62-.38-1a1.5 1.5 0 0 1 1.5-1.5H16a5 5 0 0 0 5-5c0-4.42-4.03-8-9-8',