Svelte 5 Virtualized DataTable – High-Performance Logistics Grid

Build high-performance logistics dashboards with the DataTable component. Built with Svelte 5 Runes for fine-grained reactivity and "Tactile Matte" design. Open source.

Svelte virtualized datagrid componentdashboard ui svelteaccessible svelte components aria

Preview

Component preview

Use Case

Designed for high-density data visualization in Logistics control panels, this Svelte 5 DataTable supports row selection, stock level meters, and status tags. Optimized for 1000+ rows with keyboard navigation support.

Industry Applications

Warehouse Inventory Management (logistics)

Track thousands of SKUs with real-time stock levels, automated reorder alerts, and batch selection for bulk operations. The DataTable handles 10,000+ rows with virtualized scrolling.

  • Multi-row selection for bulk actions
  • Inline stock level meters for instant visual feedback
  • Status tags for inventory state (in-stock, low-stock, out-of-stock)
  • Keyboard navigation for power users

Portfolio Holdings Overview (fintech)

Display investment portfolios with sortable columns, performance metrics, and real-time price updates. Optimized for high-frequency data with minimal re-renders.

  • Tabular numerics for stable column widths during updates
  • Color-coded gain/loss indicators
  • Sortable columns with preserved selection state
  • Export functionality for compliance reporting

Props API

DataTable component props
PropTypeDefaultDescription
items DataTableItem[][]Array of data items to display in the table
selectedIds string[][]Bindable array of selected row IDs
class stringAdditional CSS classes

Related Components

See it in Action

Explore the DataTable in an interactive dashboard environment.

Customize in Showroom

More Data Display Components