Filtered Model for FileBrowser

Hello, I have developed a JLab extension and it includes a custom FileBrowser. One feature I would like to add is to hide some unnecessary files, as this is a tailored extension I know the files I want to hide.

I think one way of doing this is using the class FilterFileBrowserModel which allows to add a filter which I have done however I have been able to filter only one of the files I need (see filteredItems array).

I am not entirely sure if using this class is the right way to do this because the implementation of the filter requires a boolean as a return value. I thought of looping over the items of the model and seeing if they are in the filtered items array however that didn’t work as I expected.

There is a method that the model has called items() which returns an iterator.

Has anyone implemented something like this?

const opener = {
    open: (widget: Widget) => { }
  const manager = new ServiceManager();
  const docRegistry = new DocumentRegistry();
  let docManager: DocumentManager;
  let fbModel: FilterFileBrowserModel;
  let filteredItems = ['cdk.json', 's3trigger']

  void manager.ready.then(() => {
    return manager;

  docManager = new DocumentManager({
    registry: docRegistry,

  fbModel = new FilterFileBrowserModel({
    manager: docManager,
    filter: (value => ( !== 'cdk.json'))
  const fbWidget = new FileBrowser({
    id: 'filebrowser',
    model: fbModel

Any suggestion would be appreciated.

Thank you very much in advance.

I may be mis-understanding your question, but have you tired changing the filter function to something like:

filter: (value => (filteredItems.indexOf( !== -1))

Sorry if I missed something!

If you have control over the file names I would just hide them by prepending the file name with a dot (.) as hidden files (e.g. .gitignore) are not shown by default. I am not sure how this works on Windows though.