migrating to smart table

[tbettinazzi@axioma.it]

I’ve 2 html table to migrate to smart-table.

The wirts one worked immediately simply changing table tag to smart-table.

The second one shows the table as a continous string of bytes without any cell and row division

Here my code (quite complex)

<smart-table xmlns:rb=”http://www.w3.org/1999/XSL/Transform/java/axioma.rubik.engine.RubikBundle&#8221; width=”100%”>
<tr>
<th class=”riattualizza_record_header” align=”center”><font class=”carattere_riattualizza_record_header”>Azioni</font></th><th class=”riattualizza_record_header” align=”center”><font class=”carattere_riattualizza_record_header”>Lista report</font></th><th class=”riattualizza_record_header” tab_id=”” tab_group=”” align=”center”><font class=”carattere_riattualizza_record_header”>Stato</font></th><th class=”riattualizza_record_header” tab_id=”” tab_group=”” align=”center”><font class=”carattere_riattualizza_record_header”>Id</font></th><th class=”riattualizza_record_header” tab_id=”” tab_group=”” align=”center”><font class=”carattere_riattualizza_record_header”>Stato testata</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Riferimento Ordine Cliente</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Conferma ordine filiale</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Utente</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Numero Pratica</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Data documento</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Codice Cliente</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Ragione Sociale</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Valuta</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Importo</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Ordine ERP</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Data modifica</font></th><th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”><font class=”carattere_riattualizza_record_header”>Utente modifica</font></th>
</tr>
<tr>
<td width=”1%” class=”carattere_riattualizza_record” nowrap><span border=”0″ id=”Annullamento3741175″ aria-hidden=”true” class=”fa fa-check green cfg-state-font-icon”></span>
<smart-tooltip position=”bottom” selector=”Annullamento3741175″ id=”tooltipAnnullamento3741175″>Valido</smart-tooltip>
<span id=”StatoInterfaccia741175″ aria-hidden=”true” class=”fa fa-pause grey cfg-state-font-icon”></span>
<smart-tooltip position=”bottom” selector=”StatoInterfaccia741175″ id=”tooltipStatoInterfaccia741175″>Stato interfaccia AVA: standby</smart-tooltip>
<button xmlns:rb=”axioma.rubik.engine.RubikBundle” id=”ab_modTestata(580405,741175);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”ab_modTestata(580405,741175);”>
<smart-tooltip position=”bottom” selector=”ab_modTestata(580405,741175);” id=”tooltipab_modTestata(580405,741175);”>Modifica</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-pencil blue cfg-button-font-icon”></span></button><button id=”ab_dupTestata(580405,741175,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”ab_dupTestata(580405,741175,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);”>
<smart-tooltip position=”bottom” selector=”ab_dupTestata(580405,741175,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);” id=”tooltipab_dupTestata(580405,741175,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);”>Duplica</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-files-o blue cfg-button-font-icon”></span></button><button id=”ab_delTestata(580405,741175,’Conferma’,’Si vuole veramente procedere con l\’eliminazione?’);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”ab_delTestata(580405,741175,’Conferma’,’Si vuole veramente procedere con l\’eliminazione?’);” id=”tooltipab_delTestata(580405,741175,’Conferma’,’Si vuole veramente procedere con l\’eliminazione?’);”>Elimina</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-close red cfg-button-font-icon”></span></button><button id=”ab_ripTestata(580405,741175);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”ab_ripTestata(580405,741175);” id=”tooltipab_ripTestata(580405,741175);”>Ripristina</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-reply blue cfg-button-font-icon”></span></button><button id=”ab_docTestata(580405,”);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”ab_docTestata(580405,”);” id=”tooltipab_docTestata(580405,”);”>Documenti</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-file-o blue cfg-button-font-icon”></span></button><button id=”finestra(&quot;ShowLogWeb?PREV_ID=580405&amp;TYPE=M&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”finestra(&quot;ShowLogWeb?PREV_ID=580405&amp;TYPE=M&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” id=”tooltipfinestra(&quot;ShowLogWeb?PREV_ID=580405&amp;TYPE=M&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);”>Log messaggi</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-wrench blue cfg-button-font-icon”></span></button><button id=”finestra(&quot;ShowLogWeb?PREV_ID=580405&amp;TYPE=E&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”finestra(&quot;ShowLogWeb?PREV_ID=580405&amp;TYPE=E&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” id=”tooltipfinestra(&quot;ShowLogWeb?PREV_ID=580405&amp;TYPE=E&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);”>Log errori</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-bug blue cfg-button-font-icon”></span></button><button id=”finestra(&quot;ShowCustomWeb?TESTID=741175&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”finestra(&quot;ShowCustomWeb?TESTID=741175&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);”>
<smart-tooltip position=”bottom” selector=”finestra(&quot;ShowCustomWeb?TESTID=741175&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);” id=”tooltipfinestra(&quot;ShowCustomWeb?TESTID=741175&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);”>Valori personalizzati</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-expand blue cfg-button-font-icon”></span></button><button id=”ab_downloadCarrelliCsv(741175);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”ab_downloadCarrelliCsv(741175);”>
<smart-tooltip position=”bottom” selector=”ab_downloadCarrelliCsv(741175);” id=”tooltipab_downloadCarrelliCsv(741175);”>Scarica carrello in formato csv</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-cart-arrow-down blue cfg-button-font-icon”></span></button></td><td xmlns:rb=”http://www.w3.org/1999/XSL/Transform/java/axioma.rubik.engine.RubikBundle&#8221; width=”1px” class=”carattere_riattualizza_record” nowrap><button xmlns:rb=”axioma.rubik.engine.RubikBundle” id=”ab_pdfTestata(580405,2786895,287293);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”ab_pdfTestata(580405,2786895,287293);”>
<smart-tooltip position=”bottom” selector=”ab_pdfTestata(580405,2786895,287293);” id=”tooltipab_pdfTestata(580405,2786895,287293);”>Pdf</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-file-pdf-o blue cfg-button-font-icon”></span></button></td><td xmlns:rb=”http://www.w3.org/1999/XSL/Transform/java/axioma.rubik.engine.RubikBundle&#8221; style=”text-align:left” class=”carattere_riattualizza_record” align=”center” nowrap><span id=”StatoConfigurazione741175″ aria-hidden=”true” class=”fa fa-check green cfg-state-font-icon”></span>
<smart-tooltip position=”bottom” selector=”StatoConfigurazione741175″ id=”tooltipStatoConfigurazione741175″>PROCESSATA</smart-tooltip>
</td><td class=”carattere_riattualizza_record” align=”center” nowrap>741175</td><td class=”carattere_riattualizza_record” align=”center” nowrap>
&nbsp;
</td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>156887 PFEIFFER</td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>**</td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>TAREK.LEISER</td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>ZTR/2400017393 (C)-ZWI/4000090435 (C)</td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>09/06/2022</td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>002464</td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>WAM GMBH **</td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>EUR</td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>72965.200</td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap> </td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>20/09/2022</td><td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>TAREK.LEISER</td>
</tr>
<tr>
<td colspan=”100%”></td>
</tr>
</smart-table>

 

Changing smart table to table it works again.

How can I solve ?

Tks

[tbettinazzi@axioma.it]

Here a simple testcase which reproduces the problem.

<!DOCTYPE html>
<html>
<head>
<title>Table Basic Demo</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />
<link rel=”stylesheet” type=”text/css” href=”../../../source/styles/smart.default.css” />
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
</head>
<body class=”viewport”>
<div class=”demo-description”> Our Table web component can be used to wrap or replace standard Tables and add different styles, hover effects, sorting by one or multiple columns, add, remove and update rows. </div>
<smart-table id=”table” width=”100%”>
<tr>
<th class=”riattualizza_record_header” align=”center”>
<font class=”carattere_riattualizza_record_header”>Azioni</font>
</th>
<th class=”riattualizza_record_header” align=”center”>
<font class=”carattere_riattualizza_record_header”>Lista report</font>
</th>
<th class=”riattualizza_record_header” tab_id=”” tab_group=”” align=”center”>

<font class=”carattere_riattualizza_record_header”>Stato</font>

</th>
<th class=”riattualizza_record_header” tab_id=”” tab_group=”” align=”center”>

<font class=”carattere_riattualizza_record_header”>Id</font>

</th>
<th class=”riattualizza_record_header” tab_id=”” tab_group=”” align=”center”>

<font class=”carattere_riattualizza_record_header”>Stato testata</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Riferimento Ordine Cliente</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Conferma ordine filiale</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Utente</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Numero Pratica</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Data documento</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Codice Cliente</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Ragione Sociale</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Valuta</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Importo</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Ordine ERP</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Data modifica</font>

</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” align=”center”>

<font class=”carattere_riattualizza_record_header”>Utente modifica</font>

</th>
</tr>
<tr>
<td width=”1%” class=”carattere_riattualizza_record” nowrap>
<span border=”0″ id=”Annullamento383660″ aria-hidden=”true” class=”fa fa-check green cfg-state-font-icon”></span>
<smart-tooltip position=”bottom” selector=”Annullamento383660″ id=”tooltipAnnullamento383660″>Valido</smart-tooltip>
<span id=”StatoInterfaccia83660″ aria-hidden=”true” class=”fa fa-check green cfg-state-font-icon”></span>
<smart-tooltip position=”bottom” selector=”StatoInterfaccia83660″ id=”tooltipStatoInterfaccia83660″>Stato interfaccia AVA: processata</smart-tooltip>
<button xmlns:rb=”axioma.rubik.engine.RubikBundle” id=”ab_modTestata(65474,83660);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”ab_modTestata(65474,83660);” id=”tooltipab_modTestata(65474,83660);”>Modifica</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-pencil blue cfg-button-font-icon”></span>
</button>
<button id=”ab_dupTestata(65474,83660,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”ab_dupTestata(65474,83660,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);”>
<smart-tooltip position=”bottom” selector=”ab_dupTestata(65474,83660,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);” id=”tooltipab_dupTestata(65474,83660,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);”>Duplica</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-files-o blue cfg-button-font-icon”></span>
</button>
<button id=”ab_delTestata(65474,83660,’Conferma’,’Si vuole veramente procedere con l\’eliminazione?’);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”ab_delTestata(65474,83660,’Conferma’,’Si vuole veramente procedere con l\’eliminazione?’);” id=”tooltipab_delTestata(65474,83660,’Conferma’,’Si vuole veramente procedere con l\’eliminazione?’);”>Elimina</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-close red cfg-button-font-icon”></span>
</button>
<button id=”ab_ripTestata(65474,83660);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”ab_ripTestata(65474,83660);” id=”tooltipab_ripTestata(65474,83660);”>Ripristina</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-reply blue cfg-button-font-icon”></span>
</button>
<button id=”ab_docTestata(65474,”);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”ab_docTestata(65474,”);” id=”tooltipab_docTestata(65474,”);”>Documenti</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-file-o blue cfg-button-font-icon”></span>
</button>
<button id=”finestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=M&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”finestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=M&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” id=”tooltipfinestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=M&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);”>Log messaggi</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-wrench blue cfg-button-font-icon”></span>
</button>
<button id=”finestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=E&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”finestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=E&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” id=”tooltipfinestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=E&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);”>Log errori</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-bug blue cfg-button-font-icon”></span>
</button>
<button id=”finestra(&quot;ShowCustomWeb?TESTID=83660&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”finestra(&quot;ShowCustomWeb?TESTID=83660&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);”>
<smart-tooltip position=”bottom” selector=”finestra(&quot;ShowCustomWeb?TESTID=83660&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);” id=”tooltipfinestra(&quot;ShowCustomWeb?TESTID=83660&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);”>Valori personalizzati</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-expand blue cfg-button-font-icon”></span>
</button>
<button id=”ab_downloadCarrelliCsv(83660);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”ab_downloadCarrelliCsv(83660);”>
<smart-tooltip position=”bottom” selector=”ab_downloadCarrelliCsv(83660);” id=”tooltipab_downloadCarrelliCsv(83660);”>Scarica carrello in formato csv</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-cart-arrow-down blue cfg-button-font-icon”></span>
</button>
</td>
<td xmlns:rb=”http://www.w3.org/1999/XSL/Transform/java/axioma.rubik.engine.RubikBundle&#8221; width=”1px” class=”carattere_riattualizza_record” nowrap>
<button xmlns:rb=”axioma.rubik.engine.RubikBundle” id=”ab_pdfTestata(65474,643341,287293);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”ab_pdfTestata(65474,643341,287293);”>
<smart-tooltip position=”bottom” selector=”ab_pdfTestata(65474,643341,287293);” id=”tooltipab_pdfTestata(65474,643341,287293);”>Pdf</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-file-pdf-o blue cfg-button-font-icon”></span>
</button>
</td>
<td xmlns:rb=”http://www.w3.org/1999/XSL/Transform/java/axioma.rubik.engine.RubikBundle&#8221; style=”text-align:left” class=”carattere_riattualizza_record” align=”center” nowrap>
<span id=”StatoConfigurazione83660″ aria-hidden=”true” class=”fa fa-check green cfg-state-font-icon”></span>
<smart-tooltip position=”bottom” selector=”StatoConfigurazione83660″ id=”tooltipStatoConfigurazione83660″>PROCESSATA</smart-tooltip>
</td>
<td class=”carattere_riattualizza_record” align=”center” nowrap>
83660
</td>
<td class=”carattere_riattualizza_record” align=”center” nowrap> &nbsp; </td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap> 2202501 PMENG</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap></td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>JONATHAN.FLIPPANCE</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>ZWI/4000009545</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>15/06/2020</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>007964</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>WAM ENGINEERING LTD </td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>EUR</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>413.600</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>20006575</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>15/06/2020</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” align=”center” nowrap>MICHAL.SYGNECKI</td>
</tr>
</smart-table>
<!– scripts –>
<script src=”../../../source/smart.elements.js”></script>
<script src=”index.js”></script>
</body>
</html>

[tbettinazzi@axioma.it]

Looking at the console I saw an error : Uncaught SyntaxError: invalid range in character class smart.elements.js:45:17131

I tetsed it also with 14.2 version but nothing changed.

• This reply was modified 2 years, 1 month ago by tbettinazzi@axioma.it.

[george_kostov0]

Hi,

Firstly, the align attribute is not supported in HTML5. The font tag is also not supported in HTML5.

The next thing is that in the <smart-table> tag you should have <table> tag and the appropriate rows should be wrapped in a <thead> and <tbody>.

See this demo: https://codepen.io/dkeamcaksoem/pen/NWMMVGG

If you need further assistance, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

I followed Your instruction but nothing changed.

Still present also the console javascript error.

Here the code

<!DOCTYPE html>
<html>
<head>
<title>Table Basic Demo</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />
<link rel=”stylesheet” type=”text/css” href=”../../../source/styles/smart.default.css” />
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
</head>
<body class=”viewport”>
<div class=”demo-description”> Our Table web component can be used to wrap or replace standard Tables and add different styles, hover effects, sorting by one or multiple columns, add, remove and update rows. </div>
<smart-table id=”table” width=”100%”>
<table>
<thead>
<tr>
<th class=”riattualizza_record_header” >
</th>
<th class=”riattualizza_record_header” >
</th>
<th class=”riattualizza_record_header” tab_id=”” tab_group=”” >


</th>
<th class=”riattualizza_record_header” tab_id=”” tab_group=”” >


</th>
<th class=”riattualizza_record_header” tab_id=”” tab_group=”” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
<th class=”riattualizza_record_header” tab_id=”a_tabs_;” tab_group=”cu” >


</th>
</tr>
</thead>
<tbody>
<tr>
<td width=”1%” class=”carattere_riattualizza_record” nowrap>
<span border=”0″ id=”Annullamento383660″ aria-hidden=”true” class=”fa fa-check green cfg-state-font-icon”></span>
<smart-tooltip position=”bottom” selector=”Annullamento383660″ id=”tooltipAnnullamento383660″>Valido</smart-tooltip>
<span id=”StatoInterfaccia83660″ aria-hidden=”true” class=”fa fa-check green cfg-state-font-icon”></span>
<smart-tooltip position=”bottom” selector=”StatoInterfaccia83660″ id=”tooltipStatoInterfaccia83660″>Stato interfaccia AVA: processata</smart-tooltip>
<button xmlns:rb=”axioma.rubik.engine.RubikBundle” id=”ab_modTestata(65474,83660);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”ab_modTestata(65474,83660);” id=”tooltipab_modTestata(65474,83660);”>Modifica</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-pencil blue cfg-button-font-icon”></span>
</button>
<button id=”ab_dupTestata(65474,83660,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”ab_dupTestata(65474,83660,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);”>
<smart-tooltip position=”bottom” selector=”ab_dupTestata(65474,83660,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);” id=”tooltipab_dupTestata(65474,83660,’Conferma’,’Si vuole veramente duplicare l\’intero ordine?’);”>Duplica</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-files-o blue cfg-button-font-icon”></span>
</button>
<button id=”ab_delTestata(65474,83660,’Conferma’,’Si vuole veramente procedere con l\’eliminazione?’);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”ab_delTestata(65474,83660,’Conferma’,’Si vuole veramente procedere con l\’eliminazione?’);” id=”tooltipab_delTestata(65474,83660,’Conferma’,’Si vuole veramente procedere con l\’eliminazione?’);”>Elimina</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-close red cfg-button-font-icon”></span>
</button>
<button id=”ab_ripTestata(65474,83660);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”ab_ripTestata(65474,83660);” id=”tooltipab_ripTestata(65474,83660);”>Ripristina</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-reply blue cfg-button-font-icon”></span>
</button>
<button id=”ab_docTestata(65474,”);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”ab_docTestata(65474,”);” id=”tooltipab_docTestata(65474,”);”>Documenti</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-file-o blue cfg-button-font-icon”></span>
</button>
<button id=”finestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=M&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”finestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=M&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” id=”tooltipfinestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=M&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);”>Log messaggi</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-wrench blue cfg-button-font-icon”></span>
</button>
<button id=”finestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=E&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” disabled=”true”>
<smart-tooltip position=”bottom” selector=”finestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=E&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);” id=”tooltipfinestra(&quot;ShowLogWeb?PREV_ID=65474&amp;TYPE=E&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 800, 600);”>Log errori</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-bug blue cfg-button-font-icon”></span>
</button>
<button id=”finestra(&quot;ShowCustomWeb?TESTID=83660&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”finestra(&quot;ShowCustomWeb?TESTID=83660&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);”>
<smart-tooltip position=”bottom” selector=”finestra(&quot;ShowCustomWeb?TESTID=83660&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);” id=”tooltipfinestra(&quot;ShowCustomWeb?TESTID=83660&quot;,&quot;rb:getString($RB,’configuration.messageLog’)&quot;, 1024, 768);”>Valori personalizzati</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-expand blue cfg-button-font-icon”></span>
</button>
<button id=”ab_downloadCarrelliCsv(83660);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”ab_downloadCarrelliCsv(83660);”>
<smart-tooltip position=”bottom” selector=”ab_downloadCarrelliCsv(83660);” id=”tooltipab_downloadCarrelliCsv(83660);”>Scarica carrello in formato csv</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-cart-arrow-down blue cfg-button-font-icon”></span>
</button>
</td>
<td xmlns:rb=”http://www.w3.org/1999/XSL/Transform/java/axioma.rubik.engine.RubikBundle&#8221; width=”1px” class=”carattere_riattualizza_record” nowrap>
<button xmlns:rb=”axioma.rubik.engine.RubikBundle” id=”ab_pdfTestata(65474,643341,287293);” class=”
cfg-button cfg-button-inline
” type=”button” role=”button” onclick=”ab_pdfTestata(65474,643341,287293);”>
<smart-tooltip position=”bottom” selector=”ab_pdfTestata(65474,643341,287293);” id=”tooltipab_pdfTestata(65474,643341,287293);”>Pdf</smart-tooltip>
<span aria-hidden=”true” class=”fa fa-file-pdf-o blue cfg-button-font-icon”></span>
</button>
</td>
<td xmlns:rb=”http://www.w3.org/1999/XSL/Transform/java/axioma.rubik.engine.RubikBundle&#8221; style=”text-align:left” class=”carattere_riattualizza_record” nowrap>
<span id=”StatoConfigurazione83660″ aria-hidden=”true” class=”fa fa-check green cfg-state-font-icon”></span>
<smart-tooltip position=”bottom” selector=”StatoConfigurazione83660″ id=”tooltipStatoConfigurazione83660″>PROCESSATA</smart-tooltip>
</td>
<td class=”carattere_riattualizza_record” nowrap>
83660
</td>
<td class=”carattere_riattualizza_record” nowrap> &nbsp; </td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap> 2202501 PMENG</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap></td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap>JONATHAN.FLIPPANCE</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap>ZWI/4000009545</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap>15/06/2020</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap>007964</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap>WAM ENGINEERING LTD </td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap>EUR</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap>413.600</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap>20006575</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap>15/06/2020</td>
<td class=”carattere_riattualizza_record” style=”text-align:left” tab_id=”a_tabs_;” tab_group=”cu” nowrap>MICHAL.SYGNECKI</td>
</tr>
</tbody>
</table>
</smart-table>
<!– scripts –>
<script src=”../../../source/smart.elements.js”></script>
<script src=”index.js”></script>
</body>
</html>

[svetoslav_borislavov]

Hi,

Please give us a quick demo in codepen so we can work it on and find the error.
Here is a demo with a working table (The table is the same that you gave us): https://codepen.io/dkeamcaksoem/pen/zYjaJOY

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Sorry but I don’t understand the difference between my test and Your code : they seems to be identical.

The only difference I see is that You used a typescript version and I use the js version.

Tks

Tullio

[svetoslav_borislavov]

Hi,

It is a reference if you are using typescript, you can ignore it as you are using JavaScript

Yes, I cannot find a difference so please, send me a quick demo here: svetoslav@jqwidgets.com

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[tbettinazzi@axioma.it]

Any new about the test case ?

Tks

[Author]

Posts