Installation

React

npm install @document-explorer/react

import { DocumentExplorer } from '@document-explorer/react';
import '@document-explorer/react/styles.css';

export function Documents({ files }) {
  return <DocumentExplorer data={files} search selection />;
}

Requires React 18 or later. React and react-dom are peer dependencies.

Angular

npm install @document-explorer/angular

import { Component } from '@angular/core';
import { DocumentExplorerComponent } from '@document-explorer/angular';

@Component({
  selector: 'app-documents',
  standalone: true,
  imports: [DocumentExplorerComponent],
  template: `<doc-explorer [data]="files" [search]="true" [selection]="true" />`,
})
export class DocumentsComponent {
  files = [];
}

Add the stylesheet once, in angular.json:

"styles": ["@document-explorer/angular/styles.css", "src/styles.css"]

Requires Angular 17 or later. The component is standalone, OnPush and signal-driven, so it works zoneless.

Anything else

The engine is framework-free and useful on its own — see the core API.

npm install @document-explorer/core

Sizing the explorer

The component fills its container and scrolls its content area internally. Give it a height:

.my-explorer {
  height: 480px;
}

<DocumentExplorer data={files} className="my-explorer" />