Back



Example table with action buttons in the last "Options" column.

Table with 5 columns

ID Name Department Email Options
1001 Max Mustermann Sales max.mustermann@example.com
1002 Erika Musterfrau Finance erika.musterfrau@example.com
1003 John Doe Support john.doe@example.com

Table with 8 columns

ID First Name Last Name Role Department City Status Actions
2001 Alice Johnson Manager Sales Berlin Active
2002 Bob Smith Developer IT Hamburg Offline
2003 Charlie Brown Support Customer Service Munich Active

Source Code - Table with 5 columns

HTML Source 


<table class="avalynx-table avalynx-table-lg table table-bordered table-striped align-middle">
	<thead>
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Department</th>
			<th>Email</th>
			<th class="avalynx-table-center">Options</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1001</td>
			<td>Max Mustermann</td>
			<td>Sales</td>
			<td>max.mustermann@example.com</td>
			<td class="avalynx-table-center">
				<button type="button" class="btn btn-sm btn-primary">Edit</button>
				<button type="button" class="btn btn-sm btn-danger">Delete</button>
				<button type="button" class="btn btn-sm btn-secondary">PDF</button>
			</td>
		</tr>
	</tbody>
</table>

JavaScript SourceCopy to clipboard


document.addEventListener('DOMContentLoaded', () => {
	new AvalynxTable('#table-options-primary');
});

Source Code - Table with 8 columns

HTML Source 


<table class="avalynx-table avalynx-table-lg table table-bordered table-striped align-middle">
	<thead>
	<tr>
		<th>ID</th>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Role</th>
		<th>Department</th>
		<th>City</th>
		<th>Status</th>
		<th class="avalynx-table-center">Actions</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>2001</td>
		<td>Alice</td>
		<td>Johnson</td>
		<td>Manager</td>
		<td>Sales</td>
		<td>Berlin</td>
		<td>Active</td>
		<td class="avalynx-table-center">
			<button type="button" class="btn btn-sm btn-primary">Edit</button>
		</td>
	</tr>
	</tbody>
</table>

JavaScript SourceCopy to clipboard


document.addEventListener('DOMContentLoaded', () => {
	new AvalynxTable('#table-options-secondary');
});