Documents Table

Recent Updates

• New: Site Selection Mode — pick between a Microsoft Graph site picker or a manual URL for cross-site libraries.
• New: Visible Columns multi-select — replaces the legacy per-column toggles with a single control and adds a Created Date option.
• New: Additional Library Columns — discovers non-hidden columns from the selected document library so you can surface custom fields alongside the built-ins.
• Interactive column sorting — clicking any header toggles ascending/descending; the server re-queries with the new order.
• Automatic file type icons — Word, Excel, PowerPoint, OneNote, Visio, Project, PDF, text, image, video, audio, archive, and code extensions render with matching Fluent UI icons.
• Server-backed paging — uses SharePoint @odata.nextLink with per-page caching for fast navigation.
• Promoted field auto-discovery — detects Promoted, Featured, Featured_x003f_, or PromotedState in the target library.
• Progressive field fallback — the service tries multiple field combinations (including File_x0020_Size vs FileSizeDisplay) so libraries with non-standard schemas still render.
• Legacy showName, showModified, showAuthor, showSize, showType toggles are still honored, but visibleColumns takes precedence when set.

Common Configurations

Copy these ready-to-use configurations:

Best Practices

Interactive Features

Sortable column headers

Every visible column header is clickable. Clicking a header re-queries the server with the new sort (and toggles direction if the same column is clicked again). The initial sort comes from the sortBy property — name defaults to ascending, all other columns default to descending.

Clickable file names

The Name column renders the file name as a link that opens the document in a new tab (target="_blank", data-interception="off" so SharePoint does not intercept the navigation). No row-click handler is attached — only the file-name link is interactive.

File type icons

The service maps a document's extension to a Fluent UI icon. Unrecognized extensions fall back to the generic Document icon.

Server-backed pagination

Pagination uses SharePoint's @odata.nextLink so each page is fetched on demand. Visited pages are cached in memory for the lifetime of the component, so clicking back to a previous page is instant. The total count shown in the pagination bar comes from the list'sItemCount metadata and is only displayed when promoted filtering is off (filtered queries fall back to a simple {from}-{to} indicator).

Reference

Document Library Schema

Documents Table uses standard document library fields. No custom columns are required, but you can add a promoted-state column to support promoted filtering. The service auto-discovers the promoted field by scanning the library's column list for known names.

1. Select an existing document library with files.
2. Optional: add one of Promoted, Featured, or PromotedState for promoted filtering.
3. Ensure documents are published and accessible to viewers.

Property Pane Configuration

Title Settings

Data Source Settings

Column Visibility

The Column Visibility group has two multi-selects. visibleColumns picks which built-in columns to render; dynamicColumns lets you surface custom columns discovered from the selected document library.

Built-in column options:

Legacy Column Toggles

These boolean properties predate visibleColumns. They are still wired up for backward compatibility — existing configurations keep working — but the multi-select above is preferred for new deployments. When visibleColumns is a non-empty array, the toggles below are ignored.

Display Settings

Features Checklist

• ✅ Tabular document display via Fluent UI DetailsList
• ✅ Built-in columns: Name, Modified, Created, Author, Size, Type
• ✅ Multi-select column visibility (visibleColumns) with legacy toggle fallback
• ✅ Dynamic library columns discovered via REST /fields
• ✅ Click-to-sort column headers (server-backed)
• ✅ Default sort options: Name, Modified, Created, Size
• ✅ Server-backed pagination via @odata.nextLink with per-page caching
• ✅ Show table headers toggle
• ✅ Promoted items support with auto-discovered field (Promoted, Featured, Featured_x003f_, PromotedState)
• ✅ Cross-site data source (manual URL or Microsoft Graph site picker)
• ✅ Custom title with Fluent icon, custom icon URL, or no icon
• ✅ Chrome types: None, Title Only, Border Only, Title and Border
• ✅ Show More link
• ✅ Fixed height option (0-800px)
• ✅ Automatic file type icons (~30 extensions)
• ✅ Clickable file names (open in new tab)
• ✅ Progressive field fallback for non-standard schemas
• ✅ License gating via LicenseWrapper