Usare Grid.js in Svelte

Abbiamo già visto Grid.js in un altro articolo; in questo vediamo come usarlo con Svelte!

Prima di tutto installiamo la libreria con npm:

npm install gridjs gridjs-svelte

Qui sotto un esempio di codice:

<script lang="ts">
  import Grid from "gridjs-svelte";

  const columns = [
    {name: 'Titolo', sort: true},
    {name: 'Autore', sort: true},
    {name: 'Genere', sort: true},
    {
      name: 'Data aggiunta',
      formatter: cell => {
        return new Date(cell).toLocaleString('it-IT', {
          day: "2-digit",
          month: 'short',
          year: 'numeric',
          hour: "2-digit",
          minute: "2-digit"
        })
      }
    }
  ];
</script>

<Grid {columns}
      sort
      search
      pagination={{ enabled: true, limit: 50 }}
      server={{
          url: "https://www.matteoferrone.it/api/canzoni/get.php",
          then: data => data.data.map(item => {
              return [item.canzone_titolo, item.canzone_autore, item.canzone_genere, item.canzone_data_aggiunta]
          })
      }}
/>

La parte di codice che mi ha dato un pò di problemi è questa:

data.data.map

In pratica il secondo data dipende dal fatto che i dati arrivano in un array che ha come "nome" data.

Ma potrebbe cambiare a seconda della API, quindi date una controllata prima su come vi arrivano i dati.

Enjoy!