diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx b/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx index 8d49eebb78f..57d2d23dfe6 100644 --- a/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx +++ b/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx @@ -112,10 +112,10 @@ export const VDataIterator = genericComponent ( const { items } = useDataIteratorItems(props) const { filteredItems } = useFilter(props, items, search, { transform: item => item.raw }) - const { sortBy, multiSort, mustSort } = createSort(props) + const { sortBy, multiSort, mustSort, sortDescendingFirst } = createSort(props) const { page, itemsPerPage } = createPagination(props) - const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page }) + const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, sortDescendingFirst, page }) const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy }) const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, { transform: item => item.raw }) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 7bc7b28a138..21e70ffd192 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -128,7 +128,7 @@ export const VDataTable = genericComponent( setup (props, { attrs, slots }) { const { groupBy } = createGroupBy(props) - const { sortBy, multiSort, mustSort } = createSort(props) + const { sortBy, multiSort, mustSort, sortDescendingFirst } = createSort(props) const { page, itemsPerPage } = createPagination(props) const { disableSort } = toRefs(props) @@ -152,7 +152,7 @@ export const VDataTable = genericComponent( customKeyFilter: filterFunctions, }) - const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page }) + const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, sortDescendingFirst, page }) const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy, disableSort }) const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, { diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index 0702a348976..d3f0bcdf88a 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -62,6 +62,7 @@ export const makeVDataTableHeadersProps = propsFactory({ sticky: Boolean, disableSort: Boolean, multiSort: Boolean, + sortDescendingFirst: Boolean, sortAscIcon: { type: IconValue, default: '$sortAsc', @@ -103,9 +104,13 @@ export const VDataTableHeaders = genericComponent()({ function getSortIcon (column: InternalDataTableHeader) { const item = sortBy.value.find(item => item.key === column.key) - if (!item) return props.sortAscIcon + const firstIcon = props.sortDescendingFirst ? props.sortDescIcon : props.sortAscIcon + const secondIcon = props.sortDescendingFirst ? props.sortAscIcon : props.sortDescIcon + const firstOrder = props.sortDescendingFirst ? 'desc' : 'asc' - return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon + if (!item) return firstIcon + + return item.order === firstOrder ? firstIcon : secondIcon } const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color') diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx index 13005194dc3..c26e715d1c1 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx @@ -67,7 +67,7 @@ export const VDataTableServer = genericComponent parseInt(props.itemsLength, 10)) @@ -80,7 +80,7 @@ export const VDataTableServer = genericComponent>, multiSort: Boolean, mustSort: Boolean, + sortDescendingFirst: Boolean, }, 'DataTable-sort') const VDataTableSortSymbol: InjectionKey<{ @@ -34,23 +35,28 @@ type SortProps = { 'onUpdate:sortBy': ((value: any) => void) | undefined mustSort: boolean multiSort: boolean + sortDescendingFirst: boolean } export function createSort (props: SortProps) { const sortBy = useProxiedModel(props, 'sortBy') const mustSort = toRef(props, 'mustSort') const multiSort = toRef(props, 'multiSort') + const sortDescendingFirst = toRef(props, 'sortDescendingFirst') - return { sortBy, mustSort, multiSort } + return { sortBy, mustSort, multiSort, sortDescendingFirst } } export function provideSort (options: { sortBy: Ref mustSort: Ref multiSort: Ref + sortDescendingFirst: Ref page?: Ref }) { - const { sortBy, mustSort, multiSort, page } = options + const { sortBy, mustSort, multiSort, sortDescendingFirst, page } = options + const firstOrder = sortDescendingFirst.value ? 'desc' : 'asc' + const secondOrder = sortDescendingFirst.value ? 'asc' : 'desc' const toggleSort = (column: InternalDataTableHeader) => { if (column.key == null) return @@ -59,16 +65,16 @@ export function provideSort (options: { const item = newSortBy.find(x => x.key === column.key) if (!item) { - if (multiSort.value) newSortBy = [...newSortBy, { key: column.key, order: 'asc' }] - else newSortBy = [{ key: column.key, order: 'asc' }] - } else if (item.order === 'desc') { + if (multiSort.value) newSortBy = [...newSortBy, { key: column.key, order: firstOrder }] + else newSortBy = [{ key: column.key, order: firstOrder }] + } else if (item.order === secondOrder) { if (mustSort.value) { - item.order = 'asc' + item.order = firstOrder } else { newSortBy = newSortBy.filter(x => x.key !== column.key) } } else { - item.order = 'desc' + item.order = secondOrder } sortBy.value = newSortBy