Tables

Simple

HeaderHeaderHeader
TextTextText
TextTextText
TextTextText
<table><thead><tr><th>Header</th><th>Header</th><th>Header</th></tr></thead><tbody><tr><td>Text</td><td>Text</td><td>Text</td></tr><tr><td>Text</td><td>Text</td><td>Text</td></tr><tr><td>Text</td><td>Text</td><td>Text</td></tr></tbody></table>

With Context Menu

A click on the three-dot-symbol should open the context menu.

HeaderHeaderHeader
TextTextTextmore_vert
TextTextTextmore_vert
TextTextTextmore_vert
<table><thead><tr><th>Header</th><th>Header</th><th>Header</th><th></th></tr></thead><tbody><tr><td>Text</td><td>Text</td><td>Text</td><td class="text-right"><span class="font-symbols">more_vert</span></td></tr><tr><td>Text</td><td>Text</td><td>Text</td><td class="text-right"><span class="font-symbols">more_vert</span></td></tr><tr><td>Text</td><td>Text</td><td>Text</td><td class="text-right"><span class="font-symbols">more_vert</span></td></tr></tbody></table>

With Buttons & Icons

HeaderHeaderHeader
TextTextTextedit Editdelete Delete
TextTextTextedit Editdelete Delete
TextTextTextedit Editdelete Delete
<table><thead><tr><th>Header</th><th>Header</th><th>Header</th><th></th><th></th></tr></thead><tbody><tr><td>Text</td><td>Text</td><td>Text</td><td class="button-1"><a href=""><span class="font-symbols">edit</span> Edit</a></td><td class="text-error button-1"><a href=""><span class="font-symbols">delete</span> Delete</a></td></tr><tr><td>Text</td><td>Text</td><td>Text</td><td class="button-1"><a href=""><span class="font-symbols">edit</span> Edit</a></td><td class="text-error button-1"><a href=""><span class="font-symbols">delete</span> Delete</a></td></tr><tr><td>Text</td><td>Text</td><td>Text</td><td class="button-1"><a href=""><span class="font-symbols">edit</span> Edit</a></td><td class="text-error button-1"><a href=""><span class="font-symbols">delete</span> Delete</a></td></tr></tbody></table>

With Buttons & No Icons

HeaderHeaderHeader
TextTextTextOption 1Option 2
TextTextTextOption 1Option 2
TextTextTextOption 1Option 2
<table><thead><tr><th>Header</th><th>Header</th><th>Header</th><th></th><th></th></tr></thead><tbody><tr><td>Text</td><td>Text</td><td>Text</td><td><a href="" class="tertiary-button">Option 1</a></td><td><a href="" class="tertiary-button">Option 2</a></td></tr><tr><td>Text</td><td>Text</td><td>Text</td><td><a href="" class="tertiary-button">Option 1</a></td><td><a href="" class="tertiary-button">Option 2</a></td></tr><tr><td>Text</td><td>Text</td><td>Text</td><td><a href="" class="tertiary-button">Option 1</a></td><td><a href="" class="tertiary-button">Option 2</a></td></tr></tbody></table>

Sorting

Headerunfold_moreHeaderunfold_moreHeaderunfold_more
TextTextText
TextTextText
TextTextText
<table><thead><tr><th>Header<span class="font-symbols">unfold_more</span></th><th>Header<span class="font-symbols">unfold_more</span></th><th>Header<span class="font-symbols">unfold_more</span></th></tr></thead><tbody><tr><td>Text</td><td>Text</td><td>Text</td></tr><tr><td>Text</td><td>Text</td><td>Text</td></tr><tr><td>Text</td><td>Text</td><td>Text</td></tr></tbody></table>

With Captions

HeaderHeaderHeader
Text
Caption
TextText
Text
Caption
TextText
Text
Caption
TextText
<table><thead><tr><th>Header</th><th>Header</th><th>Header</th></tr></thead><tbody><tr><td>Text
<span class="caption">Caption</span></td><td>Text</td><td>Text</td></tr><tr><td>Text
<span class="caption">Caption</span></td><td>Text</td><td>Text</td></tr><tr><td>Text
<span class="caption">Caption</span></td><td>Text</td><td>Text</td></tr></tbody></table>

With Checkboxes

HeaderHeaderHeader
TextTextText
TextTextText
TextTextText
<table><thead><tr><th><div class="checkbox-container"><input id="unchecked" type="checkbox" value=""/></div></th><th>Header</th><th>Header</th><th>Header</th></tr></thead><tbody><tr class="hover:bg-secondary-200"><td><div class="checkbox-container"><input id="unchecked" type="checkbox" value=""/></div></td><td>Text</td><td>Text</td><td>Text</td></tr><tr class="hover:bg-secondary-200"><td><div class="checkbox-container"><input id="unchecked" type="checkbox" value=""/></div></td><td>Text</td><td>Text</td><td>Text</td></tr><tr class="hover:bg-secondary-200"><td><div class="checkbox-container"><input id="unchecked" type="checkbox" value=""/></div></td><td>Text</td><td>Text</td><td>Text</td></tr></tbody></table>

© 2024 nexineer digital GmbH. All rights reserved.