Svelte

@freegridjs/svelte는 Svelte 5용 <FreeGrid> 컴포넌트와 use:freegrid 액션을 제공합니다. 그리드 옵션은 모두 props이고, 이벤트는 onSortChange처럼 on으로 시작하는 props입니다. onReady로 그리드 API를 받습니다.

실행 예제Svelte

Svelte 5에서는 <FreeGrid> 컴포넌트나 use:freegrid 액션으로 씁니다.

이 데모의 코드

<script>
  import { FreeGrid } from '@freegridjs/svelte';
  import '@freegridjs/core/styles.css';

  let api;
  let rows = $state(data);
</script>

<FreeGrid {columns} data={rows} rowSelection="multiple" theme="erp" height={520}
          onReady={a => (api = a)}
          onCellClick={e => console.log(e.row)} />

<!-- or on any element -->
<div use:freegrid={{ columns, data: rows }} style="height: 400px"></div>

@freegridjs/svelte는 Svelte 5용 <FreeGrid> 컴포넌트와 use:freegrid 액션을 제공합니다. 그리드 옵션은 모두 props이고, 이벤트는 onSortChange처럼 on으로 시작하는 props입니다. onReady로 그리드 API를 받습니다.

<script>
  import { FreeGrid } from '@freegridjs/svelte';
  import '@freegridjs/core/styles.css';

  let api;
  let rows = $state(data);
</script>

<FreeGrid {columns} data={rows} rowSelection="multiple" theme="erp" height={520}
          onReady={a => (api = a)}
          onCellClick={e => console.log(e.row)} />

<!-- or on any element -->
<div use:freegrid={{ columns, data: rows }} style="height: 400px"></div>