You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

wx-svelte-grid

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

wx-svelte-grid

A fast, feature-rich Svelte DataGrid component

2.2.0
latest
Source
npmnpm
Version published
Maintainers
1
Created
Source

SVAR Svelte DataGrid | Data Table

WebsiteGetting StartedDemos

SVAR DataGrid is an advanced Svelte component that enhances standard data tables, enabling you to create high-performance, feature-rich data grids that efficiently handle large data sets. Fully customizable, it supports inline editing, sorting, filtering, and virtual scrolling for optimal performance.

SVAR Svelte DataGrid - Screenshot

:sparkles: Key Features

  • High performance (virtual scrolling for rows and columns)
  • In-cell editing with different cell editors (datepicker, combo, select, rich select, etc.)
  • Custom HTML for cells
  • Sorting by multiple columns
  • Filtering
  • Paging
  • Fixed columns
  • Expandable/collapsible columns
  • Customizable tooltips for grid cells
  • Context menu
  • External editor for grid data
  • Tree-like structure
  • Print support
  • Responsive design to adapt to different screen/container sizes
  • Accessibility: compatibile with WAI-ARIA standard
  • Keyboard navigation
  • RestDataProvider for easy backend data binding
  • Dark and light skins

:hammer_and_wrench: How to Use

To use SVAR DataGrid, simply import the package and include the component in your Svelte file:

<script>
	import { Grid } from "wx-svelte-grid";

	const data = [
		{
			id: 12,
			name: "Alex Brown",
			year: 1974,
		},
	];
	const columns = [
		{
			id: "name",
			header: "Title",
			flexgrow: 1,
			sort: true,
			editor: "text",
		},
		{
			id: "year",
			header: "Year",
			width: 100,
			sort: true,
			editor: "text",
		},
	];
</script>

<Grid {data} {columns} />

For further instructions, see the detailed how-to-start guide.

:computer: How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

  • Run yarn to install dependencies. Note that this project is a monorepo using yarn workspaces, so npm will not work
  • Start the project in development mode with yarn start

:white_check_mark: Run Tests

To run the test:

  • Start the test examples with:
    yarn start:tests
    
  • In a separate console, run the end-to-end tests with:
    yarn test:cypress
    

:speech_balloon: Need Help?

Join our community forum to get help or post feature requests.

Keywords

svelte

FAQs

Package last updated on 17 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts