"use strict";(self.webpackChunkangular_storybook_project=self.webpackChunkangular_storybook_project||[]).push([[1418],{"./src/common/shared/models-mdx/TableField.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>MDXContent});var react=__webpack_require__("./node_modules/react/index.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs");const TableFieldReader=()=>react.createElement("div",{className:"panel-content"},react.createElement(dist.oz,null,"# TableField\n\nLa classe **TableField** rappresenta un modello per definire i campi di una tabella. La sua struttura viene specificata attraverso un costruttore che accetta diversi parametri:\n\n**TableField** viene utilizzato per costruire azioni custom tramite la struttura definita dal costruttore.\n\n## Implementazione\n<div class=\"table-responsive\">`import { TableField} from '@inail/angular-core';`</div>\n<br />\n\n***Costruttore:***\n`    constructor(\n      label: string, \n      main: boolean, \n      fieldType: 'NORMAL' | 'NUMBER' | 'DATE' | 'PROGRESS' | 'STRING[]' | 'TRANSLATE', \n      propertyNameToUse: string, \n      sortable?: boolean, \n      dtoField?: string, \n      size?: any\n  );\n`\n\n***Esempio d'uso:***\n` const tableStructure = [\n  new TableField('Colonna 1', true, 'NORMAL', 'name', false),\n  new TableField('Colonna 2', false, 'NORMAL', 'size', false),\n]`\n\n## API\n<div class=\"table-responsive\">\n  <table class=\"table\">\n  <thead>\n    <tr>\n      <th><strong>Campo</strong></th>\n      <th><strong>Descrizione</strong></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code>label</code></td>\n      <td>\n        Una stringa obbligatoria che rappresenta l'etichetta del campo della tabella. È il nome visibile agli utenti.\n      </td>\n    </tr>\n    <tr>\n      <td><code>main</code></td>\n      <td>\n        Un valore booleano obbligatorio che indica se il campo è il principale nella tabella (ad esempio, la colonna primaria o più significativa).\n      </td>\n    </tr>\n      <tr>\n      <td><code>fieldType</code></td>\n      <td>\n        Un parametro obbligatorio che specifica il tipo di dato del campo. Può essere uno dei seguenti valori:\n        <ul>\n          <li>\n            <code>NORMAL</code>: un campo generico.\n          </li>\n          <li>\n           <code>NUMBER</code>: un campo numerico.\n          </li>\n          <li>\n           <code>DATE</code>: un campo con dati di tipo data.\n          </li>\n          <li>\n            <code>PROGRESS</code>: un campo che rappresenta un indicatore di progresso.\n          </li>\n          <li>\n            <code>STRING[]</code>: un array di stringhe.\n          </li>\n          <li>\n            <code>TRANSLATE</code>: un campo utilizzato per valori traducibili.\n          </li>\n        </ul>\n        <code>fieldType = 'NORMAL' | 'NUMBER' | 'DATE' | 'PROGRESS' | 'STRING[]' | 'TRANSLATE'</code>\n      </td>\n    </tr>\n    <tr>\n      <td><code>propertyNameToUse</code></td>\n      <td>\n        Una stringa obbligatoria che rappresenta il nome della proprietà da utilizzare per mappare i dati.\n      </td>\n    </tr>\n    <tr>\n      <td><code>sortable</code></td>\n      <td>\n        Un valore booleano opzionale che specifica se il campo può essere ordinato all'interno della tabella.\n      </td>\n    </tr>\n    <tr>\n      <td><code>dtoField</code></td>\n      <td>\n        Una stringa opzionale che indica il nome del campo corrispondente in un Data Transfer Object (DTO).\n      </td>\n    </tr>\n    <tr>\n      <td><code>size</code></td>\n      <td>\n        E' un parametro opzionale che rappresenta la dimensione del campo. Il tipo può variare a seconda\n        delle esigenze.\n      </td>\n    </tr>\n  </tbody>\n</table>\n</div>\n\n## Casi d'utilizzo\n<br/>\n<a href=\"?path=/story/components-table-simple--simple-table\">Simple table</a>\n<br/>\n<a href=\"?path=/story/components-table-paginated--table-pagination\">Paginated Table</a>\n<br/>\n<a href=\"?path=/story/components-form-tabellare--form-tabellare\">Form Tabellare</a>"));function _createMdxContent(props){return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.W8,{title:"Resources/Models/TableField"}),"\n",(0,jsx_runtime.jsx)(TableFieldReader,{})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={...(0,lib.R)(),...props.components};return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent()}}}]);