Perform custom sorting in React File Manager component

20 Jan 20254 minutes to read

The 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-react-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.

app.jsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject, sortComparer } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

function App() {
  let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
  return (<div className="control-section">
    <FileManagerComponent id="file" height="375px" ajaxSettings={{
      downloadUrl: hostUrl + 'api/NaturalSorting/Download',
      getImageUrl: hostUrl + "api/NaturalSorting/GetImage",
      uploadUrl: hostUrl + 'api/NaturalSorting/Upload',
      url: hostUrl + "api/NaturalSorting/FileOperations"
    }} detailsViewSettings={{
      columns: [
        { field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', sortComparer: sortComparer },
        { field: 'size', headerText: 'File Size', minWidth: 50, width: '110', template: '${size}' },
        { field: '_fm_modified', headerText: 'Date Modified', minWidth: 50, width: '190' }
      ]
    }} sortComparer={sortComparer}>
      <Inject services={[NavigationPane, DetailsView, Toolbar]} />
    </FileManagerComponent>
  </div>);
}
export default App;

app.tsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject, sortComparer } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

function App() {
  let hostUrl : string = "https://ej2-aspcore-service.azurewebsites.net/";
  return (<div className="control-section">
    <FileManagerComponent id="file" height="375px" ajaxSettings={{
      downloadUrl: hostUrl + 'api/NaturalSorting/Download',
      getImageUrl: hostUrl + "api/NaturalSorting/GetImage",
      uploadUrl: hostUrl + 'api/NaturalSorting/Upload',
      url: hostUrl + "api/NaturalSorting/FileOperations"
    }} detailsViewSettings={{
      columns: [
        { field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', sortComparer: sortComparer },
        { field: 'size', headerText: 'File Size', minWidth: 50, width: '110', template: '${size}' },
        { field: '_fm_modified', headerText: 'Date Modified', minWidth: 50, width: '190' }
      ]
    }} sortComparer={sortComparer}>
      <Inject services={[NavigationPane, DetailsView, Toolbar]} />
    </FileManagerComponent>
  </div>);
}
export default App;

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);