Perform custom sorting in React File Manager component

18 Nov 20184 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.

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

function App() {
  let hostUrl = "https://physical-service.syncfusion.com/";
  let ajaxSettings = {
    downloadUrl: hostUrl + 'api/NaturalSorting/Download',
    getImageUrl: hostUrl + "api/NaturalSorting/GetImage",
    uploadUrl: hostUrl + 'api/NaturalSorting/Upload',
    url: hostUrl + "api/NaturalSorting/FileOperations"
  };
  let 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' }
    ]
  };
  let height = "375px";

  return (<div className="control-section">
    <FileManagerComponent id="file" height={height} ajaxSettings={ajaxSettings} detailsViewSettings={detailsViewSettings} sortComparer={sortComparer}>
      <Inject services={[NavigationPane, DetailsView, Toolbar]} />
    </FileManagerComponent>
  </div>);
}
export default App;
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject, sortComparer } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

function App() {
  let hostUrl : string = "https://physical-service.syncfusion.com/";
  let ajaxSettings: object = {
    downloadUrl: hostUrl + 'api/NaturalSorting/Download',
    getImageUrl: hostUrl + "api/NaturalSorting/GetImage",
    uploadUrl: hostUrl + 'api/NaturalSorting/Upload',
    url: hostUrl + "api/NaturalSorting/FileOperations"
  };
  let detailsViewSettings: object = {
    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' }
    ]
  };
  let height: string = "375px";

  return (<div className="control-section">
    <FileManagerComponent id="file" height={height} ajaxSettings={ajaxSettings} detailsViewSettings={detailsViewSettings} sortComparer={sortComparer}>
      <Inject services={[NavigationPane, DetailsView, Toolbar]} />
    </FileManagerComponent>
  </div>);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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