files

image thumbnail / PDF thumbnail (pdfThumbnail) / icon + name · click to preview (image inline, PDF native viewer).

Example source

import React from 'react'
import { BstTableMui } from '@bloomskill/table-mui'
import type { BstTableColumn } from '@bloomskill/table-engine'
import '@bloomskill/table-engine/styles.css'
const rows = [{ id:'1', item:'Spec', v:[{ name:'spec.pdf', url:'#' }] }, { id:'2', item:'Logo', v:[{ name:'logo.png', url:'#' }] }]
const columns: BstTableColumn<any>[] = [
  { id: 'item', accessorKey: 'item', header: 'Item' },
  { id:'v', accessorKey:'v', header:'Files', meta:{ type:'files' } },
]
export default function App() {
  return <BstTableMui data={rows} columns={columns} getRowId={(r) => r.id} pagination={false} />
}

Loading live example…

Guide

When to use it

Attachments on a row — images, PDFs, or any document.

How it works

Reads FileRef[] ({ name, url, thumbnailUrl?, contentType? }) and renders thumbnails, or a file-type icon plus the name. Click a file to preview — images inline, PDFs in the browser's native viewer. The adapters' popup editor adds and removes files.

Options

• cellMeta.onUpload / cellMeta.onDelete — wire a real backend; without them a local object URL keeps preview working offline.
• cellMeta.pdfThumbnail — render page 1 of a PDF as a thumbnail (inject a pdf.js renderer).
• cellMeta.preview, cellMeta.accept.

At a glance

Renders	image thumbnail / PDF thumbnail (pdfThumbnail) / icon + name · click to preview (image inline, PDF native viewer)
Value shape	FileRef[] ({ name, url, thumbnailUrl?, contentType? })
Editable	popup: add/remove (adapters)
Key cellMeta	preview, pdfThumbnail, onUpload, onDelete, accept

Use it

const columns: BstTableColumn<Row>[] = [
  { id: 'x', accessorKey: 'x', header: 'X', meta: { type: 'files', /* cellMeta below */ } },
]

cellMeta options

files — an attachments cell (images, PDFs, any file). The full how-to is Files columns — images & PDFs below; in short, the value is a FileRef[], image files thumbnail automatically, and PDFs thumbnail once you wire pdf.js.

cellMeta	Type	Effect
preview	boolean	Click-to-preview. Default true (a file needs a url to preview).
pdfThumbnail	boolean | PdfThumbnailRenderer	Render PDFs as an in-cell page-1 thumbnail via pdf.js. true uses the renderer from <BstPdfThumbnailerProvider>; a function is a per-column renderer. Default false. Falls back to the icon with no renderer; thumbnailUrl wins when present.
onUpload	(file: File) => FileRef | Promise<FileRef>	Called for each picked file — upload it and return the stored ref (busy state shown). Without it, the editor keeps a local object URL so preview still works offline.
onDelete	(file: FileRef) => void | Promise<void>	Called before a file is removed (e.g. delete it on the server).
accept / multiple	string / boolean	Passed to the file <input>.