VeloxGrid Phase 17 - Framework Wrappers Demo

1. React Component React

<VeloxGridReact /> + useRef + onEvent Props

import { useRef } from 'react';
import { VeloxGridReact } from 'velox-grid/react';
import type { VeloxGridReactRef } from 'velox-grid/react';
import 'velox-grid/css';

function App() {
  const gridRef = useRef<VeloxGridReactRef>(null);
  return (
    <VeloxGridReact
      ref={gridRef}
      columns={columns} data={data} height={400} editable={true}
      onCellEditEnd={(e) => console.log('Edit:', e)}
    />
  );
  // gridRef.current?.addRow({ name: 'New' });
}

Event log

2. useVeloxGrid Hook React Hook

Hook: containerRef + grid instance

import { useVeloxGrid } from 'velox-grid/react';

const { containerRef, grid, isReady } = useVeloxGrid({
  columns, data, height: 300, editable: true,
  onCellEditEnd: (e) => console.log(e),
});
// <div ref={containerRef} />
// grid?.addRow({ name: 'New', score: 0 });

Event log

3. Vue 3 Component Vue

<VeloxGridVue /> + template ref + @event emit (kebab-case)

<VeloxGridVue ref="gridRef" :columns="columns" :data="data"
  :height="300" :editable="true" :check-bar="{ visible: true }"
  @cell-edit-end="onEdit" @check-change="onCheck" />

// gridRef.value?.addRow({ name: 'New' });

Event log

4. useVeloxGrid Composable Vue Composable

Composition API: containerRef + grid + isReady

import { useVeloxGrid } from 'velox-grid/vue';

const { containerRef, grid, isReady } = useVeloxGrid({
  columns: [...], data: [...], height: 300,
  onCellEditEnd: (e) => console.log(e),
});
// <div ref="containerRef" />
// grid.value?.addRow({ item: 'New' });

Event log

Phase 17: Framework Wrappers (React + Vue)

1. React Component React

2. useVeloxGrid Hook React Hook

3. Vue 3 Component Vue

4. useVeloxGrid Composable Vue Composable