Svelte

@freegridjs/svelte has a Svelte 5 <FreeGrid> component and a use:freegrid action. Every grid option is a prop and events are on… props such as…

Live demoSvelte

The Svelte 5 <FreeGrid> component with on… props, or the use:freegrid action.

Code for this demo

<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 has a Svelte 5 <FreeGrid> component and a use:freegrid action. Every grid option is a prop and events are on… props such as onSortChange; onReady hands you the grid 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>