Perform custom sorting in Vue FileManager component

18 Nov 20185 minutes to read

The Vue File Manager component provides a way to customize the default sort action for the LargeIconsView by defining the sortComparer property and for sorting individual columns in the DetailsView by defining the sortComparer property in the columns property.

Note: To achieve natural sorting like Windows Explorer, you can import the SortComparer function from the '@syncfusion/ej2-vue-filemanager'. If you want to perform your own custom sorting, you can define your own SortComparer function.

The following example demonstrates how to define custom sort comparer function to achieve natural sorting behavior for the LargeIconsView and name column in DetailsView.

<template>
    <div id="app">
        <ejs-filemanager id="file-manager" :ajaxSettings="ajaxSettings" :sortComparer="sortComparer" :detailsViewSettings="detailsViewSettings">
        </ejs-filemanager>
    </div>
</template>

<script setup>
import { provide } from "vue";

import { FileManagerComponent as EjsFilemanager, DetailsView, NavigationPane, Toolbar, sortComparer } from "@syncfusion/ej2-vue-filemanager";

const ajaxSettings =
{
    url: "https://physical-service.syncfusion.com/api/NaturalSorting/FileOperations",
    getImageUrl: "https://physical-service.syncfusion.com/api/NaturalSorting/GetImage",
    uploadUrl: "https://physical-service.syncfusion.com/api/NaturalSorting/Upload",
    downloadUrl: "https://physical-service.syncfusion.com/api/NaturalSorting/Download"
};
const sortComparer = sortComparer;
const detailsViewSettings = {
    columns: [
        {field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', customAttributes: { class: 'e-fe-grid-name' },template: '${name}', sortComparer: sortComparer},
        {field: 'size', headerText: 'File Size',minWidth: 50, width: '110', template: '${size}'},
        { field: '_fm_modified', headerText: 'Date Modified',minWidth: 50, width: '190'}
    ]
};
provide('filemanager',  [DetailsView, NavigationPane, Toolbar]);

</script>

<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";
</style>
<template>
    <div id="app">
        <ejs-filemanager id="file-manager" :ajaxSettings="ajaxSettings" :sortComparer="sortComparer" :detailsViewSettings="detailsViewSettings">
        </ejs-filemanager>
    </div>
</template>

<script>

import { FileManagerComponent, DetailsView, NavigationPane, Toolbar, sortComparer } from "@syncfusion/ej2-vue-filemanager";

export default {
    name: "App",
    components: {
        "ejs-filemanager":FileManagerComponent,
    },
    data () {
        return {
           ajaxSettings:
            {
                url: "https://physical-service.syncfusion.com/api/NaturalSorting/FileOperations",
                getImageUrl: "https://physical-service.syncfusion.com/api/NaturalSorting/GetImage",
                uploadUrl: "https://physical-service.syncfusion.com/api/NaturalSorting/Upload",
                downloadUrl: "https://physical-service.syncfusion.com/api/NaturalSorting/Download"
            },
            sortComparer: sortComparer,
            detailsViewSettings: {
                columns: [
                    {field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', customAttributes: { class: 'e-fe-grid-name' },template: '${name}', sortComparer: sortComparer},
                    {field: 'size', headerText: 'File Size',minWidth: 50, width: '110', template: '${size}'},
                    { field: '_fm_modified', headerText: 'Date Modified',minWidth: 50, width: '190'}
                ]
            }
        };
    },
    provide: {
            filemanager: [DetailsView, NavigationPane, Toolbar]
    }
}
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";
</style>