Basic Example

A simple table demonstrating essential features: sorting, filtering, column resizing, and basic data types.

Features Demonstrated

• Sorting: Click column headers to sort data ascending or descending
• Filtering: Use filter inputs to search and filter data by column
• Column Resizing: Drag column borders to adjust column widths
• Data Types: Text, number, and status field types
• Column Reordering: Drag and drop columns to reorder them

Code Structure

The BasicExample shows the fundamental pattern for using VitalGrid:

1. Factory Creation: Create a VitalGrid factory with desired features
2. Data Definition: Define your sample data array
3. Column Configuration: Set up column definitions with types and settings
4. Grid Hook: Use the useVitalGrid hook to create the grid instance
5. Rendering: Render the grid using the Provider and component structure

Key Concepts

• Factory pattern prevents component recreation and improves performance
• Column definitions specify data types, validation, and display settings
• The Provider component manages grid state and workspace persistence
• Component structure (Root, Toolbar, Header, Body) provides a flexible layout

This example serves as the foundation for understanding more complex VitalGrid implementations.