ResourceTable Component Documentation

Il componente ResourceTable è una tabella completa e configurabile per la visualizzazione e gestione di dati con funzionalità avanzate come paginazione, ricerca, ordinamento e azioni personalizzate.

Installation

npm install your-package-name
# or
yarn add your-package-name

Import

import { ResourceTable } from '@angelocutelli/mio-kit-componenti'

Props Principali

ResourceTableProps

| Prop | Tipo | Default | Descrizione | |------|------|---------|-------------| | config | object | richiesto | Oggetto di configurazione principale | | isLoading | boolean | richiesto | Stato di caricamento della tabella | | reloadResource | () => void | richiesto | Funzione per ricaricare i dati | | darkMode | boolean | false | Abilita il tema scuro | | customHeight | string \| number | '' | Altezza personalizzata del contenitore | | hover | boolean | false | Effetto hover sulle righe | | dataList | Array<AnyObject> | [] | Lista dei dati da visualizzare | | dataLoading | boolean | false | Stato di caricamento dei dati | | dataCount | number | 0 | Numero totale di elementi | | dataPagination | DataPagination | null | Configurazione paginazione esterna |

Configurazione (config)

Proprietà Base

| Proprietà | Tipo | Default | Descrizione | |-----------|------|---------|-------------| | singular | string | '' | Nome singolare della risorsa | | plural | string | '' | Nome plurale della risorsa | | tableFields | Array<TableField> | [] | Definizione delle colonne della tabella | | actions | Actions | defaultActionsValues | Azioni disponibili (CRUD) |

Azioni CRUD (Actions)

interface Actions {
  canDelete: boolean    // Permette eliminazione
  canEdit: boolean      // Permette modifica
  canCreate: boolean    // Permette creazione
  canView: boolean      // Permette visualizzazione
}

Campi Tabella (TableField)

interface TableField {
  columnTitle: string                           // Titolo della colonna
  values: Array<string>                        // Chiavi dei valori da mostrare
  action?: () => void                          // Azione opzionale
  formatter?: (value: any, key?: string) => string  // Formattatore personalizzato
  component?: (resource: AnyObject) => ReactNode     // Componente personalizzato
  customWidth?: number | string                      // Larghezza personalizzata
  multitext?: boolean                                // Testo multilinea
}

Esempio:

const tableFields = [
  {
    columnTitle: 'Nome',
    values: ['name'],
    formatter: (value) => value.toUpperCase()
  },
  {
    columnTitle: 'Email',
    values: ['email']
  },
  {
    columnTitle: 'Status',
    values: ['status'],
    component: (resource) => (
      <Chip label={resource.status} color={resource.active ? 'success' : 'default'} />
    )
  }
]

Azioni Personalizzate (TableAction)

interface TableAction {
  title: string                                    // Titolo dell'azione
  icon?: (resource: AnyObject) => ReactNode       // Icona personalizzata
  action?: (resource: AnyObject, event?: React.MouseEvent<HTMLElement>) => void
  disabled?: (resource: AnyObject) => boolean     // Condizione disabilitazione
}

Esempio:

const tableActions = [
  {
    title: 'Attiva',
    icon: (resource) => <ToggleOnIcon />,
    action: (resource) => activateUser(resource.id),
    disabled: (resource) => resource.status === 'active'
  }
]

Da specificare: "tableActions" determina le azioni da includere all'interno del menu delle azioni della risorsa, mentre "secondaryTableAction" determina quelle che vanno mostrate fuori dal menu

Funzioni Callback

| Proprietà | Tipo | Descrizione | |-----------|------|-------------| | onCreate | () => Promise<void> | Callback per creazione elemento | | onEdit | () => Promise<void> | Callback per modifica elemento | | onDelete | (confirmed: boolean) => Promise<void> | Callback per eliminazione | | onView | (resource: AnyObject) => void | Callback per visualizzazione |

Paginazione Esterna (DataPagination)

interface DataPagination {
  dataHandlePageChange?: (newPage: number) => void
  dataHandleLimitChange?: (newLimit: string | number) => void  
  dataHandleQueryChange?: (newQuery: string) => void
  dataHandleSortChange?: (newSort: string) => void
  dataPage?: number
  dataLimit?: number  
  dataQuery?: string
  dataSort?: string
  dataName?: string
  rowsPerPageOptionsCustom?: Array<number>
}

Filtri e Ricerca

| Proprietà | Tipo | Default | Descrizione | |-----------|------|---------|-------------| | searchFields | Array<string> | [] | Campi su cui effettuare la ricerca | | customSelectFilters | Array<CustomSelectFilters> | [] | Filtri dropdown personalizzati | | sortBy | string | 'createdAt' | Campo per ordinamento | | sortOrder | 'asc' \| 'desc' | 'desc' | Direzione ordinamento |

Filtri Personalizzati (CustomSelectFilters)

interface CustomSelectFilters {
  name: string
  label: string
  onChange: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
  list: Array<{ label: string; value: string | number }>
  value: string | number
}

Bottone Personalizzato (CustomButton)

interface CustomButton {
  text: string
  handleClick?: (event: React.MouseEvent<HTMLElement>) => void
  hideButton?: boolean
  disabled?: boolean
  icon?: ReactNode
}

Funzionalità Avanzate

| Proprietà | Tipo | Default | Descrizione | |-----------|------|---------|-------------| | polling | boolean | null | Abilita aggiornamento automatico | | pollingInterval | number | 60000 | Intervallo polling (ms) | | pollingCondition | (resourceList: any[]) => boolean | null | Condizione per polling | | hiddenFields | Array<HiddenField> | [] | Campi nascosti | | customBgColor | any | '' | Colore di sfondo personalizzato | | showDefaultOrder | boolean | true | Mostra ordinamento di default |

Esempi di Utilizzo

Utilizzo Base

const config = {
  singular: 'utente',
  plural: 'utenti',
  tableFields: [
    { columnTitle: 'Nome', values: ['name'] },
    { columnTitle: 'Email', values: ['email'] }
  ],
  searchFields: ['name', 'email'],
  onCreate: async () => { /* logica creazione */ },
  onEdit: async () => { /* logica modifica */ },
  onDelete: async (confirmed) => { /* logica eliminazione */ }
}

<ResourceTable
  config={config}
  isLoading={loading}
  reloadResource={fetchData}
  dataList={users}
  dataCount={totalUsers}
/>

Con Paginazione Esterna

const dataPagination = {
  dataHandlePageChange: (page) => setCurrentPage(page),
  dataHandleLimitChange: (limit) => setPageSize(limit),
  dataHandleQueryChange: (query) => setSearchQuery(query),
  dataPage: currentPage,
  dataLimit: pageSize,
  dataQuery: searchQuery
}

<ResourceTable
  config={config}
  dataPagination={dataPagination}
  dataList={paginatedData}
  dataCount={totalCount}
  isLoading={loading}
  reloadResource={fetchData}
/>

Con Azioni Personalizzate

const config = {
  // ... altre proprietà
  tableActions: [
    {
      title: 'Invia Email',
      icon: (resource) => <EmailIcon />,
      action: (resource) => sendEmail(resource.email)
    }
  ],
  secondaryTableActions: [
    {
      title: 'resourceTable.actions.view', // Per abilitare le funzioni CRUD bisogna passare come 'title' il campo tradotto da i18n
      /* 
        View: resourceTable.actions.view
        Edit: resourceTable.actions.edit
        Delete: resourceTable.actions.delete
      */
      icon: (resource) => <VisibilityIcon />
    }
  ]
}