svelte-skills-kit

# Svelte 5 Data Grid Component

```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import type { DataItem } from './types';

  export let data: DataItem[] = [];
  export let columns: string[] = [];

  let gridData: DataItem[] = [];

  onMount(() => {
    gridData = data;
  });

  function handleSort(column: string) {
    gridData.sort((a, b) => {
      return a[column] > b[column] ? 1 : -1;
    });
  }
</script>

<div class="data-grid">
  <table>
    <thead>
      <tr>
        {#each columns as column}
          <th on:click={() => handleSort(column)}>{column}</th>
        {/each}
      </tr>
    </thead>
    <tbody>
      {#each gridData as item}
        <tr>
          {#each columns as column}
            <td>{item[column]}</td>
          {/each}
        </tr>
      {/each}
    </tbody>
  </table>
</div>

<style>
  .data-grid {
    width: 100%;
    overflow-x: auto;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    padding: 8px 16px;
    text-align: left;
    border: 1px solid #ddd;
  }
  th {
    background-color: #f2f2f2;
    cursor: pointer;
  }
  th:hover {
    background-color: #e6e6e6;
  }
</style>
```

## Usage Instructions

1. Import the component into your Svelte 5 project:
   ```typescript
   import DataGrid from './components/DataGrid.svelte';
   ```
2. Use the component with your data:
   ```svelte
   <DataGrid data={yourData} columns={['id', 'name', 'email', 'role']} />
   ```
3. Customize the component by modifying the TypeScript interface in the types file.

## Features
- Responsive design that works on all screen sizes
- Sortable columns for easy data organization
- TypeScript support for better type safety
- Clean, modern styling that matches Svelte 5 conventions