Skip to main content

FileList

FileList

Accessible folder listing with type icons, relative dates, sizes, client sort, paging and keyboard navigation

Tags: files file-list folder grid listing network-drive

FileList is the folder listing inside FileBrowser, exported so an app can embed one folder (say, a lot's documents) without the whole browser. It renders the entries it is given; loading them is up to you.

Import​

<script>
  import { FileList } from '@classic-homes/files-svelte';
</script>

Basic Usage​

<script lang="ts">
  import { FileList, FilePreview, type FileEntry } from '@classic-homes/files-svelte';

  let { source } = $props();
  let entries = $state<FileEntry[]>([]);
  let total = $state<number>();
  let loading = $state(true);
  let open = $state<FileEntry>();

  $effect(() => {
    source.list('land-dev', '105 BREWERY/Plans').then((page) => {
      entries = page.entries;
      total = page.total;
      loading = false;
    });
  });
</script>

<FileList {entries} {total} {loading} label="Lot 14 documents" onopen={(e) => (open = e)} />

Props​

Prop Type Default Description
entries FileEntry[] required Entries in display order (the server's order unless sort is set)
selected string - Path of the selected (focused) row (bindable)
onopen (entry: FileEntry) => void - A folder or file was opened (click, tap or Enter). Never called for links
onselect (entry: FileEntry | undefined) => void - The selected row changed
onup () => void - Backspace or Alt+Up inside the list
sort FileSort | null null Client sort over the loaded entries (bindable); null keeps the order
sortable boolean true Offer sortable column headers
loading boolean false First page loading: skeleton rows
loadingMore boolean false A further page is loading
hasMore boolean false More pages exist on the server
onloadmore () => void - Load the next page
autoLoad boolean false Call onloadmore when the end of the list scrolls into view
total number - Entries in the whole folder, for "Showing N of total"
showCount boolean true Show "Showing N of total" under the list
label string 'Files' Accessible name of the grid
locale string | string[] - Locale for sizes and dates
now number - Reference time for relative dates (tests)
emptyTitle string 'This folder is empty' Title of the empty state
empty Snippet - Replaces the empty state
rowActions Snippet<[FileEntry]> - Per-row actions, rendered at the end of each row; clicks and keys inside them don't open the row
linkMessage string - Explanation read out for links (default: the shortcut message)
class string - Classes for the outer element

Call focus() on the component instance (bind:this) to focus the selected row, e.g. after a folder loads.

Accessibility​

An ARIA grid with one tab stop: arrows, Home/End and PageUp/PageDown move, Enter opens, letters jump to a name. Links are aria-disabled and described by the shortcut message. Dates show relative text with the absolute time as a tooltip and for screen readers. On phones the size and modified columns collapse into a line under the name.

On this page