All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
Box
Map
Vue

details

Configures the "Details" file system representation mode.

Type:

Object

DevExtreme File Manager - Columns

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({
        itemView: {
            details: {
                columns: [
                    "thumbnail", "name",
                    // ...
                ]
            }
        },
        // ...
    });
});
Angular
app.component.html
app.module.ts
<dx-file-manager>
    <dxo-item-view>
        <dxo-details>
            <dxi-column dataField="thumbnail"></dxi-column>
            <dxi-column dataField="name"></dxi-column>
            <!-- ... -->
        </dxo-details>
    </dxo-item-view>
</dx-file-manager>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileManagerModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileManagerModule
    ],
    //...
})
export class AppModule { }    
Vue
App.vue
<template>
    <DxFileManager>
        <DxItemView>
            <DxDetails>
                <DxColumn data-field="thumbnail"/>
                <DxColumn data-field="name"/>
                <!-- ... -->
            </DxDetails>
        </DxItemView>        
    </DxFileManager>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileManager,
        DxItemView,
        DxDetails,
        DxColumn
    } from 'devextreme-vue/file-manager';

    export default {
        components: {
            DxFileManager,
            DxItemView,
            DxDetails,
            DxColumn
        },
        data() {
            return {
                //...
            };
        }            
    };
</script>
React
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;
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .ItemView(itemView => {
        itemView.Details(details => {
            details.Columns(columns => {
                columns.Add().DataField("thumbnail");
                columns.Add().DataField("name");
                <!-- ... -->
            });
        })
    })
)
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .ItemView(itemView => {
        itemView.Details(details => {
            details.Columns(columns => {
                columns.Add().DataField("thumbnail");
                columns.Add().DataField("name");
                <!-- ... -->
            });
        })
    })
)

columns[]

Configures the columns.

Default Value: ['thumbnail', 'name', 'dateModified', 'size']

This property accepts an array of objects, where each object configures a single column. If a column does not need to be customized, this array may include the name of the field that provides data for this column.