React FileManager - itemView

Configures the file and folder view.

Type:

Object

Default Value: null

NOTE
Set the itemView.mode property to details to configure columns in the UI component.

View Demo

DevExtreme File Manager - Item View

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import FileManager, { ItemView } from 'devextreme-react/file-manager';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <FileManager>
  • <ItemView
  • mode="thumbnails"
  • showFolder={false}
  • showParentFolder={false}
  • />
  • </FileManager>
  • );
  • }
  • }
  • export default App;

details

Configures the "Details" file system representation mode.

Type:

Object

DevExtreme File Manager - Columns

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import FileManager, { ItemView, Details, Column } from 'devextreme-react/file-manager';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <FileManager>
  • <ItemView>
  • <Details>
  • <Column dataField="thumbnail" />
  • <Column dataField="name" />
  • <!-- ... -->
  • </Details>
  • </ItemView>
  • </FileManager>
  • );
  • }
  • }
  • export default App;

mode

Specifies the file system representation mode.

Type:

String

Default Value: 'details'
Accepted Values: 'details' | 'thumbnails'

A user can use the view switcher on the toolbar to change the mode.

showFolders

Specifies whether to display folders in the view. When this property is false, folders are displayed in the navigation pane only.

Type:

Boolean

Default Value: true

showParentFolder

Specifies whether to display the parent folder in the view.

Type:

Boolean

Default Value: true