wx-react-grid

SVAR DataGrid for React

Website • Getting Started • Demos

SVAR React DataGrid is a high-performance, customizable UI component for creating feature-rich data grids in React applications. It helps you to display, manage, and edit tabular data with ease.

✨ Key Features

• Virtual scrolling for rows and columns
• In-cell editing
• Sorting by multiple columns
• Multiple row selection
• Frozen columns
• Expandable/collapsible columns
• Customizable tooltips for grid cells
• Context menu
• Tree data
• Paging
• Export to CSV
• Keyboard navigation
• Responsive design to adapt to different screen/container sizes
• RestDataProvider for easy backend data binding
• Well-documented
• Dark and light skins

🛠️ How to Use

To use the datagrid, simply import the package and include the component in your React file:

import { Grid } from "wx-react-grid";

export default function Demo() {
	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",
		},
	];

	return (
		<Grid data={data} columns={columns} />
	);
}

For further instructions, follow this getting started guide.

📝 License

SVAR DataGrid for React is available under MIT license.