Come Integrare Material UI Data Grid in React Usando Dati da una API REST

Articolo originale: https://www.freecodecamp.org/news/how-to-integrate-material-ui-data-grid-in-react-using-data-from-a-rest-api/

Material UI Data Grid (Griglia Dati di Material UI) è una tabella dati potente e flessibile. Ti facilita il compito di visualizzare dati ed è dotata di funzionalità già pronte per applicare modifiche, ordinare e filtrare, paginazione e altro ancora.

In questo articolo, esamineremo le ragioni per le quali dovresti usare la Material UI Data Grid nel tuo progetto. Successivamente vedremo come installare e configurare Material UI Data Grid, come utilizzare e integrare un'API RESTful e abilitare la paginazione oltre all'ordinamento e il filtro dati.

Sommario

• Introduzione a Material UI Data Grid
• Perché usare Material UI Data Grid
• Installazione e Configurazione di React e della Material UI Data Grid
• Integrazione e Utilizzo API
• Visualizzare Risultati dall'API nella Material UI Data Grid
• Conclusione

Puoi vedere la versione video (in inglese) di questo articolo qui sotto oppure sul mio canale YouTube:

Introduzione a Material UI Data Grid

Secondo la documentazione, Material UI Data Grid è una

"tabella dati e griglia dati React veloce ed estensibile. È un componente ricco di funzionalità disponibile nelle versioni con licenza MIT o Commerciale".

In pratica, la Material UI Data Grid è dotata di alcune caratteristiche come la possibilità di eseguire modifiche, di ordinare, filtrare, aggiornare, eseguire paginazione dei dati, esportare e altro ancora già a disposizione nella modalità predefinita.

Gli sviluppatori di Material UI hanno piani per il futuro riguardo l'implementazione di funzionalità aggiuntive come l'esportazione in formato Excel, la selezione di intervalli di dati, raggruppamenti, pivot, aggregazioni.

Per lo scopo di questo tutorial, implementeremo alcune delle caratteristiche della Material UI Data Grid con una API REST pubblica chiamata JSONPlaceholder, che restituisce dati riguardo a post di fantasia utili per i test.

Perché usare Material UI Data Grid

Ci sono alcune importanti ragioni per le quali vorrai usare la Material UI Data Grid:

• Accessibilità
• Interazione con Utente
• Presentazione Dati

Accessibilità

La Material UI Data Grid offre funzionalità di accessibilità come l'evidenziazione della cella, vale a dire che ogni cella è accessibile tramite tastiera.

Fornisce anche altre funzionalità come lo spostamento tra le celle con la tastiera utilizzando determinati tasti per cambiare il focus delle celle della tabella, oltre a proprietà di gestione della dimensione dell'altezza di righe e colonne nella tabella.

Interazione con utente

Per quanto riguarda l'interazione, la Material UI Data Grid fornisce una caratteristica incorporata come la selezione della riga in modalità predefinita. Questo consente all'utente di selezionare determinate righe tramite click del mouse oppure usare determinate scorciatoie da tastiera.

La Material UI Data Grid supporta la selezione di riga singola o di righe multiple, la capacità di disabilitare la selezione di determinate righe o tutte le righe, caselle di spunta per la selezione e molto altro.

Presentazione Dati

La Material UI Data Grid fornisce una caratteristica integrata che consente di esportare i dati in formato CSV.

Inoltre i dati possono essere manipolati tramite click su una intestazione di colonna. Questo attiverà le funzionalità di ordinamento e filtro.

Altra caratteristica base incorporata è lo scorrimento, che non si trova in una normale tabella come funzionalità predefinita.

Installazione e Configurazione di React e di Material UI Data Grid

Per creare un nuovo progetto in React devi avere installato Node.js. Questo ti darà accesso al comando npm nel terminale. Possiamo quindi installare e usare Create React App tramite npm per creare il nostro progetto, eseguendo il seguente comando:

npm i create-react-app

Il passo successivo è la creazione di un nuovo progetto React dal terminale eseguendo i comandi seguenti:

npx create-react-app data-grid 
cd data-grid 
npm start

Con i comandi qui sopra abbiamo creato un progetto chiamato data-grid. Poi ci siamo spostati nella nuova directory del progetto appena creata e abbiamo lanciato il progetto con npm start.

Nella modalità predefinita il nostro progetto sarà in esecuzione nel browser all'indirizzo localhost:3000.

Per finire la fase di installazione, dobbiamo aggiungere due pacchetti: Material UI e Data Grid (la Griglia Dati) tramite il comando seguente:

npm install @mui/x-data-grid @mui/material

Integrazione e Utilizzo API

Per integrare la nostra API, dobbiamo creare nella directory src, che è stata creata per noi durante la generazione del progetto con Create-React-App, una nuova cartella component, all'interno della quale creare un file che chiameremo DataTable.js.

Alla fine, la nostra struttura di directory del progetto sarà tipo questa:

> src 
    > component
        > DataTable.js 
.gitignore 
package-lock.json 
package.json 
README

Nel file DataTable.js useremo un componente funzionale, con il quale implementeremo un paio di hook di React (useState e useEffect) e l'API Fetch, integrata in JavaScript.

Hook useState

Questo hook è una funzione integrata di React che aiuta a tenere traccia dello stato in un componente funzionale.

Hook useEffect

Questo hook consente di gestire effetti collaterali nel nostro componente funzionale. Alcuni di questi effetti collaterali potrebbero comprendere cose come l'aggiornamento del DOM, il recupero dati da un'API RESTful, eventi temporizzati e così via.

API Fetch

Questa API in JavaScript consente ai browser di eseguire richieste HTTP ai server web. La richiesta può essere rivolta verso qualsiasi API che invii o riceva dati in formato JSON o XML.

Ora che abbiamo esplorato i concetti di hook e dell'API Fetch, generiamo il codice boilerplate per un componente funzionale nel file DataTable.js:

import React from 'react'

const DataTable= () => {
  return (
    <div>
      
    </div>
  )
}

export default DataTable

Il prossimo passo è l'utilizzo dell'API REST da  JSON placeholder.

Per fare questo la prima cosa che dobbiamo fare è l'importazione degli hook useState e useEffect:

import React, { useState, useEffect } from 'react'

Successivamente creiamo due variabili destrutturando l'oggetto ritornato dall'hook useState:

const [tableData, setTableData] = useState([])

La variabile tableData conterrà i dati da utilizzare nella tabella e setTableData sarà la funzione che chiameremo per valorizzare la variabile tableData con i dati recuperati dall'API.

Per ultimo, per accedere ai dati quando il componente viene caricato, useremo l'API Fetch all'interno dell'hook useEffect:

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then((data) => data.json())
    .then((data) => setTableData(data))
}, [])
 console.log(tableData)

Nel codice qui sopra, all'interno di useEffect abbiamo fatto tre cose, nell'ordine:

• usato fetch per ricevere i dati dall'API REST JSON placeholder
• convertito la risposta ottenuta nel formato JSON
• passato i dati della risposta ricevuta alla funzione dichiarata in precedenza, setTableData

Per assicurarci di avere ottenuto la giusta risposta, stampiamo i dati ricevuti nella console. Per vedere il risultato dobbiamo importare DataTable.js all'interno del file App.js:

import './App.css';
import DataTable from './component/DataTable';

function App() {
  return (
    <div className="App">
      <DataTable />
    </div>
  );
}

export default App;

Alla console vedremo i risultati come segue, vale a dire un array costituito da 100 elementi oggetto:

Visualizzare i Risultati dell'API nella Material UI Data Grid

Per visualizzare i dati ricevuti dall'API nella griglia dobbiamo importare il pacchetto DataGrid nel nostro file DataTable.js:

import { DataGrid } from '@mui/x-data-grid'

Successivamente impostiamo la configurazione delle intestazioni delle colonne della Material UI Data Grid:

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'TITOLO', width: 300 },
  { field: 'body', headerName: 'TESTO', width: 600 }
]

Ogni oggetto nell'array viene valorizzato con:

• field (nome campo) è il valore della chiave corrispondente per gli oggetti ottenuti dall'API REST, id è l'identificativo del post, title è il titolo e body è il contenuto.
• headerName (nome intestazione) è il nome dell'intestazione della colonna che verrà visualizzato
• width (larghezza) è la larghezza in pixel assegnata alla colonna (può mancare e in questo caso verrà calcolata automaticamente da DataGrid

Per ultimo inseriamo il componente DataGrid nell'istruzione di return per presentarlo:

<div style={{ height: 700, width: '100%' }}>
     <DataGrid
       rows={tableData}
       columns={columns}
       pageSize={12}
     />
   </div>

Nel codice qui sopra passiamo tre proprietà al componente DataGrid:

• la proprietà rows (righe) contiene il risultato ottenuto dall'API REST, che si trova memorizzato nella variabile tableData.
• la proprietà colums (colonne) viene valorizzata con l'array di oggetti  columns, precedentemente creato, che contiene la configurazione per le colonne della tabella (identificativo, titolo e corpo del post).
• la proprietà pageSize (dimensionePagina)  ci aiuta a impostare un limite massimo di righe da visualizzare per videata. Come vedi l'ho impostata a 12, con i comandi di paginazione sarà possibile visualizzare i restanti dati.

Il codice finale contenuto nel file DataTable.js è il seguente:

import React, { useState, useEffect } from 'react'
import { DataGrid } from '@mui/x-data-grid'

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'Title', width: 300 },
  { field: 'body', headerName: 'Body', width: 600 }
]

const DataTable = () => {

  const [tableData, setTableData] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((data) => data.json())
      .then((data) => setTableData(data))

  }, [])

  console.log(tableData)

  return (
    <div style={{ height: 700, width: '100%' }}>
      <DataGrid
        rows={tableData}
        columns={columns}
        pageSize={12}
      />
    </div>
  )
}

export default DataTable

I risultati nel browser dovrebbero assomigliare all'immagine qui sotto:

Una cosa stupenda da notare è che abbiamo funzionalità di ordinamento e filtro già pronte, basta fare click sull'intestazione della colonna desiderata.

Conclusione

In questo articolo abbiamo imparato a usare la Material UI Data Grid, alcuni hook di React, l'acquisizione e utilizzo dati da un'API REST e molto altro.

Ecco il link al codice di questo articolo che puoi trovare su GitHub.

Se hai apprezzato questo articolo, dimostrami il tuo supporto iscrivendoti al mio canale YouTube dove creo tutorial riguardanti le tecnologie di sviluppo web come JavaScript, React, Angular, Node.js, e altro.

Se hai qualche osservazione o domanda riguardo a questo articolo o sulla programmazione, puoi trovarmi su Twitter @thecodeangle.