<!-- source-hash: 58a15193962e4b16a60c090f4b5422d2 -->
A client-side React component that renders a file manager table with selection, loading skeleton states, and dynamic height calculation.

## Key Components

- **`FileManagerTable`** — Main exported component that handles file listing, multi-select, and adaptive layout
- **`allSelected` / `someSelected`** — Memoized booleans driving the header checkbox's checked/indeterminate state
- **`useLayoutEffect` + `ResizeObserver`** — Dynamically calculates and updates the table height to fill available viewport space below its top offset
- **Skeleton loading state** — Renders 8 placeholder rows with shimmer UI when `loading` is `true`
- **`FileManagerEmpty`** — Rendered when `files.length === 0`
- **`FileManagerTableRow`** — Per-row component receiving selection, click, double-click, and action handlers

## Props (`FileManagerTableProps`)

| Prop | Description |
|---|---|
| `files` | Array of file/folder items to display |
| `selectedFiles` | Array of selected file IDs |
| `showCheckboxes` | Toggle selection checkboxes (default: `true`) |
| `loading` | Shows skeleton UI when `true` (default: `false`) |
| `isSearchResult` | Renders file path subtitles and changes click behavior |
| `onSelectFile` | Called with `(id, selected)` on row checkbox change |
| `onSelectAll` | Called with `(checked)` on header checkbox change |
| `onFileClick` | Called on single-click (search result mode) |
| `onFolderOpen` | Called when a folder row is clicked or double-clicked |
| `onFileAction` | Called with `(action, fileId)` on action button interaction |

## Usage Example

```typescript
import { FileManagerTable } from './file-manager-table'

function MyFileManager() {
  const [selectedFiles, setSelectedFiles] = useState<string[]>([])

  const handleSelectFile = (id: string, selected: boolean) => {
    setSelectedFiles(prev =>
      selected ? [...prev, id] : prev.filter(f => f !== id)
    )
  }

  const handleSelectAll = (checked: boolean) => {
    setSelectedFiles(checked ? files.map(f => f.id) : [])
  }

  return (
    <FileManagerTable
      files={files}
      selectedFiles={selectedFiles}
      loading={false}
      isSearchResult={false}
      onSelectFile={handleSelectFile}
      onSelectAll={handleSelectAll}
      onFolderOpen={(folder) => console.log('Open folder', folder.id)}
      onFileAction={(action, id) => console.log(action, id)}
    />
  )
}
```

**Source:** [`file-manager-table.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/file-manager-table.tsx)