svelte-data-grid

• Purpose: Svelte Data Grid is a Svelte v3 component designed for displaying and editing large datasets efficiently with excellent scrolling performance and customizable features.

• Key Features:

  • Virtual list mechanism for lightweight handling of large datasets
  • Fixed column headers
  • Customizable cell and header components
  • Column resizing and reordering
  • ARIA accessibility support

• Target Audience: Developers building data-rich applications with Svelte.

• Svelte Support: Primarily built for Svelte, but can be integrated with other frameworks using Svelte's client-side API.

• Core Functionality:

  • Requires rows (data) and columns (configuration) props
  • Supports custom cell rendering via cellComponent
  • Provides built-in editable cell types (Textbox, Select, Checkbox)

• Customization:

  • Custom cell components receive rowNumber, row, and column props
  • Custom header components receive column prop
  • Multiple configuration options for grid behavior

• Limitations:

  • Fixed row heights (no text wrapping)
  • Column affixing works best in Chrome

• Events:

  • columnOrderUpdated for column reordering
  • columnWidthUpdated for column resizing

For more details and live examples, see the Demo .