Webix Grid - React Demo

A demo application showcasing Webix Grid integrated into a React project.

Overview

The demo displays a climate system management dashboard built with Webix Grid and React 19. It demonstrates how to embed and configure Webix Grid inside a React component using custom hooks.

Featured Grid capabilities:

• Multi-column sorting - click column headers to sort by multiple fields
• Custom filters - text and select filters in column headers; custom footer filters
• Sparkline charts - inline temperature history visualization per row
• Row & column drag - reorder rows and columns by dragging
• Date formatting - built-in Webix date formatter applied to date columns
• Status badges - custom HTML templates in the Status column
• Column resizers - drag column borders to resize; resizer icons in column headers
• Responsive configuration - grid adjusts to container resize

Tech Stack

• React 19
• Webix Grid GPL 11.3
• Vite 7

How to run

1. Clone the repository:

git clone <repo-url>
cd grid-react-demo

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:5173 in your browser.

Project structure

src/
  Grid/
    hooks/        # Custom React hooks: grid init, resize observer, system tick
    config.js     # Column definitions, sorting, filters, sparkline templates
    data.js       # Mock room dataset
    datafilter.js # Custom Webix filter definitions
    GridView.jsx  # Main grid component
  App.jsx         # Root component

License

MIT License