<div class="rtds-table-responsive">
<table class="rtds-table">
<thead class="rtds-table__head">
<tr>
<th scope="col" class="rtds-min-w-60"><span>id</span></th>
<th scope="col" class="rtds-min-w-60"><span>Nome</span></th>
<th scope="col" class="rtds-min-w-60"><span>Bando</span></th>
<th scope="col" class="rtds-min-w-60"><span>Codice fiscale</span></th>
<th scope="col" class="rtds-text-center"><span>Stato</span></th>
<th scope="col" class="rtds-text-center"><span>Azioni</span></th>
</tr>
</thead>
<tbody class="rtds-table__body">
<tr>
<td>
<span class="rtds-font-medium rtds-break-words">
shdciwheivuchwknvcwiufh247r984vscd
</span>
</td>
<td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>
<td>
<span class="rtds-font-medium">
Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
</span>
</td>
<td>
<span class="rtds-font-medium rtds-break-words">
RMLRML75R44G687X
</span>
</td>
<td class="rtds-text-center">
<span class="rtds-chip rtds-chip--status is-pending">
<span class="rtds-sr-only">Stato: </span>
In attesa</span>
</td>
<td class="rtds-text-center">
<span class="rtds-flex rtds-gap-2 rtds-justify-center">
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--secondary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--pencil-square" />
</svg>
<span class="rtds-sr-only">
Modifica
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--primary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Cancella
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--inverted"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--arrow-down-tray" />
</svg>
<span class="rtds-sr-only">
Download
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--outlined"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-duplicate" />
</svg>
<span class="rtds-sr-only">
Copia
</span>
</button>
</span>
</span>
</td>
</tr>
<tr>
<td>
<span class="rtds-font-medium rtds-break-words">
shdciwheivuchwknvcwiufh247r984vscd
</span>
</td>
<td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>
<td>
<span class="rtds-font-medium">
Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
</span>
</td>
<td>
<span class="rtds-font-medium rtds-break-words">
RMLRML75R44G687X
</span>
</td>
<td class="rtds-text-center">
<span class="rtds-chip rtds-chip--status is-open">
<span class="rtds-sr-only">Stato: </span>
Attivo</span>
</td>
<td class="rtds-text-center">
<span class="rtds-flex rtds-gap-2 rtds-justify-center">
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--secondary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--pencil-square" />
</svg>
<span class="rtds-sr-only">
Modifica
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--primary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Cancella
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--inverted"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--arrow-down-tray" />
</svg>
<span class="rtds-sr-only">
Download
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--outlined"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-duplicate" />
</svg>
<span class="rtds-sr-only">
Copia
</span>
</button>
</span>
</span>
</td>
</tr>
<tr>
<td>
<span class="rtds-font-medium rtds-break-words">
shdciwheivuchwknvcwiufh247r984vscd
</span>
</td>
<td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>
<td>
<span class="rtds-font-medium">
Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
</span>
</td>
<td>
<span class="rtds-font-medium rtds-break-words">
RMLRML75R44G687X
</span>
</td>
<td class="rtds-text-center">
<span class="rtds-chip rtds-chip--status is-closed">
<span class="rtds-sr-only">Stato: </span>
Chiuso</span>
</td>
<td class="rtds-text-center">
<span class="rtds-flex rtds-gap-2 rtds-justify-center">
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--secondary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--pencil-square" />
</svg>
<span class="rtds-sr-only">
Modifica
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--primary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Cancella
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--inverted"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--arrow-down-tray" />
</svg>
<span class="rtds-sr-only">
Download
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--outlined"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-duplicate" />
</svg>
<span class="rtds-sr-only">
Copia
</span>
</button>
</span>
</span>
</td>
</tr>
<tr>
<td>
<span class="rtds-font-medium rtds-break-words">
shdciwheivuchwknvcwiufh247r984vscd
</span>
</td>
<td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>
<td>
<span class="rtds-font-medium">
Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
</span>
</td>
<td>
<span class="rtds-font-medium rtds-break-words">
RMLRML75R44G687X
</span>
</td>
<td class="rtds-text-center">
<span class="rtds-chip rtds-chip--status is-in-progress">
<span class="rtds-sr-only">Stato: </span>
In corso</span>
</td>
<td class="rtds-text-center">
<span class="rtds-flex rtds-gap-2 rtds-justify-center">
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--secondary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--pencil-square" />
</svg>
<span class="rtds-sr-only">
Modifica
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--primary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Cancella
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--inverted"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--arrow-down-tray" />
</svg>
<span class="rtds-sr-only">
Download
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--outlined"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-duplicate" />
</svg>
<span class="rtds-sr-only">
Copia
</span>
</button>
</span>
</span>
</td>
</tr>
<tr>
<td>
<span class="rtds-font-medium rtds-break-words">
shdciwheivuchwknvcwiufh247r984vscd
</span>
</td>
<td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>
<td>
<span class="rtds-font-medium">
Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
</span>
</td>
<td>
<span class="rtds-font-medium rtds-break-words">
RMLRML75R44G687X
</span>
</td>
<td class="rtds-text-center">
<span class="rtds-chip rtds-chip--status rtds-bg-info-dark rtds-border-info-dark rtds-text-white">
<span class="rtds-sr-only">Stato: </span>
Custom</span>
</td>
<td class="rtds-text-center">
<span class="rtds-flex rtds-gap-2 rtds-justify-center">
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--secondary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--pencil-square" />
</svg>
<span class="rtds-sr-only">
Modifica
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--primary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--trash" />
</svg>
<span class="rtds-sr-only">
Cancella
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--inverted"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--arrow-down-tray" />
</svg>
<span class="rtds-sr-only">
Download
</span>
</button>
</span>
<span class="rtds-flex-none"><button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--outlined"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--document-duplicate" />
</svg>
<span class="rtds-sr-only">
Copia
</span>
</button>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="rtds-table-responsive">
<table class="rtds-table">
<thead class="rtds-table__head">
<tr>
<th scope="col" class="rtds-min-w-60"><span>id</span></th>
<th scope="col" class="rtds-min-w-60"><span>Nome</span></th>
<th scope="col" class="rtds-min-w-60"><span>Bando</span></th>
<th scope="col" class="rtds-min-w-60"><span>Codice fiscale</span></th>
<th scope="col" class="rtds-text-center"><span>Stato</span></th>
<th scope="col" class="rtds-text-center"><span>Azioni</span></th>
</tr>
</thead>
<tbody class="rtds-table__body">
{% for i in range(0, rows) %}
<tr>
<td>
<span class="rtds-font-medium rtds-break-words">
shdciwheivuchwknvcwiufh247r984vscd
</span>
</td>
<td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>
<td>
<span class="rtds-font-medium">
Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
</span>
</td>
<td>
<span class="rtds-font-medium rtds-break-words">
RMLRML75R44G687X
</span>
</td>
<td class="rtds-text-center">
{% if loop.first %}
{% render '@chip--status-pending', { label: 'In attesa' }, true %}
{% elseif loop.index == 2 %}
{% render '@chip--status-aperto', { label: 'Attivo' }, true %}
{% elseif loop.index == 3 %}
{% render '@chip--status-chiuso', { label: 'Chiuso' }, true %}
{% elseif loop.index == 4 %}
{% render '@chip--status-in-corso', { label: 'In corso' }, true %}
{% elseif loop.index == 5 %}
{% render '@chip--status-custom', { label: 'Custom' }, true %}
{% endif %}
</td>
<td class="rtds-text-center">
<span class="rtds-flex rtds-gap-2 rtds-justify-center">
<span class="rtds-flex-none">{% render '@button--icon-square', {classes: 'rtds-btn--secondary', label: 'Modifica', icon: 'outline--pencil-square' }, true %}</span>
<span class="rtds-flex-none">{% render '@button--icon-square', {classes: 'rtds-btn--primary', label: 'Cancella', icon: 'outline--trash' }, true %}</span>
<span class="rtds-flex-none">{% render '@button--icon-square', {classes: 'rtds-btn--inverted', label: 'Download', icon: 'solid--arrow-down-tray' }, true %}</span>
<span class="rtds-flex-none">{% render '@button--icon-square', {classes: 'rtds-btn--outlined', label: 'Copia', icon: 'outline--document-duplicate' }, true %}</span>
</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{
"rows": 5
}
@layer components {
.rtds-table {
@apply rtds-w-full rtds-text-sm md:rtds-text-base rtds-border-collapse rtds-table-auto xl:rtds-table-fixed;
}
.rtds-table__head,
.rtds-table thead td, .rtds-table thead th {
@apply rtds-background-06 rtds-content-inverse;
}
.rtds-table th {
@apply rtds-font-bold rtds-py-3 md:rtds-py-4;
}
:where(.rtds-table th, .rtds-table td) {
@apply rtds-text-left;
}
/*.rtds-table tr {
@apply even:rtds-bg-white odd:rtds-background-02;
}*/
.rtds-table tr:not(:first-child) {
@apply rtds-border-gray-02 rtds-border-t;
}
.rtds-table th,
.rtds-table td {
@apply rtds-p-3;
}
.rtds-table__body {
@apply rtds-bg-white;
}
/* Table container - responsive */
.rtds-table-responsive {
@apply rtds-inline-block rtds-overflow-x-auto rtds-w-full rtds-min-w-0;
}
.rtds-table .rtds-chip {
@apply rtds-whitespace-nowrap;
}
}
No notes defined.