Components
VitalGrid component documentation
VitalGrid Components
Documentation for all VitalGrid compound components.
VitalGrid
The main compound component namespace. Use VitalGrid.Root, VitalGrid.Toolbar, etc.
import { VitalGrid } from '@fed/vital-grid';
<VitalGrid.Provider grid={grid} workspaceId="demo" height={600}>
<VitalGrid.Root>
<VitalGrid.Toolbar />
<VitalGrid.Header />
<VitalGrid.Body />
</VitalGrid.Root>
</VitalGrid.Provider>VitalGridRoot
Root container component for the grid.
Prop
Type
Example
import { VitalGridRoot } from '@fed/vital-grid';
<VitalGridRoot>
{/* Grid content */}
</VitalGridRoot>VitalGridToolbar
Toolbar component with search, actions, and view controls.
Prop
Type
Example
import { VitalGridToolbar } from '@fed/vital-grid';
<VitalGridToolbar showViewControls={true}>
{/* Custom toolbar content */}
</VitalGridToolbar>VitalGridHeader
Header component with sortable and resizable columns.
Prop
Type
Example
import { VitalGridHeader } from '@fed/vital-grid';
<VitalGridHeader />VitalGridBody
Body component that renders the virtualized table rows.
Prop
Type
Example
import { VitalGridBody } from '@fed/vital-grid';
<VitalGridBody />VitalGridColumns
Columns component for managing system columns (select, drag, add column).
Prop
Type
Example
import { VitalGridColumns } from '@fed/vital-grid';
<VitalGridColumns>
<VitalGridColumns.Left>
{/* Left system columns */}
</VitalGridColumns.Left>
<VitalGridColumns.Right>
{/* Right system columns */}
</VitalGridColumns.Right>
</VitalGridColumns>VitalNewButton
Button component for creating new rows. Renders at the bottom of the grid.
Example
import { VitalNewButton } from '@fed/vital-grid';
<VitalNewButton />Note: VitalNewButton does not accept props. It automatically uses the grid context to create new rows.