Datagrid V2- Standard API

Questo componente integra al suo interno la DataGrid MUI e il nostro hook useStandardApiV2 per fornire una gestione centralizzata delle griglie basate su Standard API.

Logiche interne

Eredita il funzionamento di fetch dei dati del useStandardApiV2, questo vuol dire che si aggiorna in automatico al cambiamento dei filtri o dell’ordinamento applicato, cambio pagina o cambio della dimensione della pagina. Inoltre puo accedere ai dati included degli oggetti recuperati tramite StandardApiV2 ed applicare filtri o ordinamenti su di essi.

Gestisce quindi anche il debounce delle chiamate API e la callback shouldFetchCallback gia vista in useStandardApiV2

Prop principali

title: titolo della tabella mostrato in alto a sinistra
columns: array che contiene un oggetto di definizione per ogni colonna
api: oggetto che rappresenta la chiamata API da eseguire
rowIdField: la chiave che identifica l’id univoco all’interno dei dati ritornati dall’API
multipleSelection: abilita o disabilita la selezione multiple (default = false)
checkboxSelection: abilita o disabilita la selezione con checkbox (default = true)
localeText: il locale per la traduzione delle etichette della griglia (non dati contenuti) (default = itIT.components.MuiDataGrid.defaultProps.localeText NB: importato da “@mui/x-data-grid”),
editButton: funzione che definisce il comportamento del tasto di modifica in altro a destra se visibile
addButton: come editButton ma per la creazione di un nuovo elemento
removeButton: come editButton ma per la cancellazione di un elemento
showButton: come per editButton ma per passare alla visualizzazione in dettaglio di un elemento
elevation: elevation del paper di background della griglia (vedi qui per maggiori info)
stripe: indica se la tabella appare a righe alternate chiare e scure (default = false),
height: altezza della griglia in pixel,
backDrop: abilita o disabilita il backdrop e ne imposta il testo da visualizzare se attivo (default = { show: false, text: "" })
filters: filtri di default applicati alla griglia
sorting: ordinamento di default applicato alla griglia,
fetchOnFirstRender: indica se eseguire il fetch dei dati al primo render
fetchOnApiPropsChange: indica se eseguire il fetch dei dati al cambio della prop api
enableDebounce: abilita o disabilita il debounce delle chiamate API
debounce: tempo di debounce in millisecondi (default = 150)
shouldFetchCallback: callback per determinare se eseguire un fetch dei dati o meno

NB: è possibile passare a questo componente tutte le prop della DataGrid MUI di base vedi qui

Definizione prop “columns”

Vedere documentazione MUI qui

Utilizzo tramite ref

Dichiarando una ref

const gridRef = useRef<DataGridApiRefV2<ParamDefault, any>>(null)

e passandola al componente

<ApiDataGridV2<ParamDefault, ParamDefault, { parameters: Param }, any>
      ref={gridRef}
      ... altre prop
    />
  )

è possibile gestire il refresh dei dati con o senza debounce, fermare un debounce in corso e ottenere i record visualizzati sulla pagina corrente

metodi della disponibili tramite ref

  update: () => void
  updateDebounce: () => void
  cancelUpdateDebounce: () => void
  getCurrentPageRows: () => StdApiDataMergedResponseV2<RESPONSE_OBJ, INCLUDED_RES_OBJ>

Update griglia manuale

se volessimo gestire manualmente il fetch dei dati da parte della griglia, basterà passare le seguenti prop

<ApiDataGridV2<ParamDefault, ParamDefault, { parameters: Param }, any>
      ref={gridRef}
      fetchOnFirstRender={false}
      fetchOnApiPropsChange={false}
      ... altre prop
    />
  )

e usare la funzione update della ref nel seguente modo

gridRef.current?.update() o gridRef.current?.updateDebounce()

sarà cosi possibile decidere quando e dove aggiornare i dati contenuti nella griglia

Esempio di utilizzo


const gridRef = useRef<DataGridApiRefV2<ParamDefault, any>>(null)
const [categoriaParametroAttuale, setCategoriaParametroAttuale] = useState<string>("")

const colonne: GridColDefWithType<Param>[] = [
    {
      field: "included.parameters.id",
      headerName: "IdParametro",
      dbType: "string",
      type: "string",
      hideable: true,
      sortable: false,
      filterable: false,
      valueGetter: (params) => {
        if (params.row.included && params.row.included.parameters && params.row.included.parameters.length > 0) {
          return params.row.included.parameters[0].id
        } else {
          return ""
        }
      }
    }
    {
      field: "type",
      headerName: "Tipologia",
      dbType: "string",
      minWidth: 150,
      sortable: false,
      filterable: false
    },
    {
      field: "defaultValue",
      headerName: "Valore Default",
      dbType: "string",
      type: "string",
      flex: 0.5,
      sortable: false,
      filterable: false
    }
  ]


const apiTabella = {
    endpoint: "parametersdefault",
    fields: ["id", "name", "description", "type", "defaultValue"],
    paging: {
      pageSize: 55
    },
    includes: {
      parameters: ["id", "value"]
    },
    sorting: [
      {
        field: "name",
        type: "ASC"
      }
    ],
    filters: {
      aggregate: "AND",
      conditions: [
        {
          aggregate: "OR",
          conditions: [
            {
              obj: "parameters",
              field: "systemId",
              operator: StdApiV2.StdApiFilterOperator.EQUAL,
              value: sistemaAttuale ?? 0
            },
            {
              obj: "parameters",
              field: "id",
              value: "",
              operator: StdApiV2.StdApiFilterOperator.IS_EMPTY
            }
          ]
        }
      ]
    }
  } as unknown as StdApiV2.IStdApi<ParamDefault, ParamDefault, { parameters: Param }>

<ApiDataGridV2<ParamDefault, ParamDefault, { parameters: Param }, any>
      api={apiTabella}
      ref={gridRef}
      shouldFetchCallback={() => {
        return categoriaParametroAttuale !== undefined && categoriaParametroAttuale !== ""
      }}
      columns={colonne}
      title={"Gestione Parametri"}
      rowIdField={"id"}
      getRowId={row => row.id}
      stripe={true}
      checkboxSelection={false}
    />
  )

Il componente per funzionare deve avere dei tipo specificati per le chiamate API

useStandardApiV2 GraphQL