Custom cell renderers

5 articles on custom cell renderers in a Svelte 5 data grid: practical guides with copy-paste code, from the team building SvGrid.

• Progress and Percentage Bar Cells in SvGrid - Build in-cell progress bars in your Svelte 5 data grid - with color thresholds, accessible markup, and sorting that still works.
• Avoiding Layout Thrash in Custom Grid Cells - Layout thrash from interleaved DOM reads and writes is the most common cause of scroll jank in grids with custom cells - here is how to find it and design your way out of it.
• Avatar and Image Cells in SvGrid - How to render avatars, product thumbnails, and logos in grid cells with proper fallbacks, lazy loading, and accessible alt text using Svelte 5 snippets.
• An Actions Column (Edit, Delete) in SvGrid - Build a per-row actions column with edit, delete, and duplicate buttons in SvGrid - handling data mutations, accessibility, and confirmation flows correctly.
• Custom Cell Renderers with Svelte Snippets - Use Svelte 5 snippets to render badges, progress bars, and action buttons inside SvGrid cells - without breaking sort, filter, or keyboard navigation.

Other topics

• Performance
• Server-side data
• Svelte 5
• Inline editing
• Reactivity
• SvelteKit
• Theming
• Real-time data
• Accessibility
• Migrating to SvGrid
• AI and LLMs
• Columns