Skip to main content

Changing a display mode

Changing the default display mode​

File Manager provides the following display modes for viewing files:

  • cards: this mode displays files as tiles
  • table: in this mode you can view files list with files details, such as file size and its creation date
  • panels: in this mode you can view files in two separate panels, which enables you to open two different folders and work with them simultaneously.
  • search: only search results are displayed

The cards display mode is set by default. To change the default display mode, use the mode property.

import { Filemanager } from "@svar-ui/react-filemanager";
import { getData, getDrive } from "./common/data";

function App() {
  return <Filemanager data={getData()} mode="table" />;
}

Disabling the change of modes​

The widget API allows keeping only one view mode in GUI by disabling the switching of modes. To block the modes switching, apply the set-mode action by returning false from the callback function.

Example:

import { Filemanager } from "@svar-ui/react-filemanager";
import { getData, getDrive } from "./common/data";

function App() {
  const init = (api) => {
    api.intercept("set-mode", ({ mode }) => {
      console.log(`New mode: ${mode}`);
      return false; // block the change
    });
  };

  return (
    <Filemanager
      init={init}
      data={getData()}
      drive={getDrive()}
      mode="cards"
    />
  );
}