Back



Sorting works by click on header. Multi-sort on desktop uses Ctrl or Shift. On stacked view an extra control is shown with a multi-sort toggle.

Table with 5 columns

ID Name Department Salary Status
1007 Lea Winter Support 49.000 € Active
1002 Max Mustermann Sales 62.000 € Vacation
1011 Anna Becker Sales 61.000 € Active
1001 John Doe Support 45.000 € Sick
1005 Erika Musterfrau Finance 73.000 € Active

Table with 8 columns

ID First Name Last Name Department City Country Salary Actions
2001 Julia Meier Sales Berlin DE 68.000 €
2002 Tom Fischer Support Hamburg DE 52.000 €
2003 Sara Keller Finance Munich DE 74.000 €
2004 Marc Wagner Sales Cologne DE 70.000 €

Source Code - Table with 5 columns

HTML Source 


<table id="table-sorting-primary" class="avalynx-table avalynx-table-md table table-bordered table-striped align-middle">
	<thead>
		<tr>
			<th data-avalynx-table-sort-id="id">ID</th>
			<th data-avalynx-table-sort-id="name">Name</th>
			<th data-avalynx-table-sort-id="department">Department</th>
			<th data-avalynx-table-sort-id="salary">Salary</th>
			<th data-avalynx-sortable="false">Status</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-avalynx-table-sort-value="1007">1007</td>
			<td>Lea Winter</td>
			<td>Support</td>
			<td data-avalynx-table-sort-value="49000">49.000 €</td>
			<td><span class="badge text-bg-success">Active</span></td>
		</tr>
	</tbody>
</table>

JavaScript SourceCopy to clipboard


document.addEventListener('DOMContentLoaded', () => {
	new AvalynxTable('#table-sorting-primary', {
		sortableColumns: ['department', 'name', 'salary'],
		sorting: [
			{ column: 'department', dir: 'asc' },
			{ column: 'name', dir: 'asc' }
		],
		stackedSorter: true,
		stackedMultiSortToggle: true
	});
});

Source Code - Table with 8 columns

HTML Source 


<table id="table-sorting-secondary" class="avalynx-table avalynx-table-md table table-bordered table-striped align-middle">
	<thead>
		<tr>
			<th data-avalynx-table-sort-id="id2">ID</th>
			<th data-avalynx-table-sort-id="firstName">First Name</th>
			<th data-avalynx-table-sort-id="lastName">Last Name</th>
			<th data-avalynx-table-sort-id="department2">Department</th>
			<th data-avalynx-table-sort-id="city">City</th>
			<th data-avalynx-table-sort-id="country">Country</th>
			<th data-avalynx-table-sort-id="salary2">Salary</th>
			<th class="avalynx-table-center" data-avalynx-sortable="false">Actions</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-avalynx-table-sort-value="2001">2001</td>
			<td>Julia</td>
			<td>Meier</td>
			<td>Sales</td>
			<td>Berlin</td>
			<td>DE</td>
			<td data-avalynx-table-sort-value="68000">68.000 €</td>
			<td class="avalynx-table-center"><button type="button" class="btn btn-sm btn-primary">View</button></td>
		</tr>
	</tbody>
</table>

JavaScript SourceCopy to clipboard


document.addEventListener('DOMContentLoaded', () => {
	new AvalynxTable('#table-sorting-secondary', {
		sortableColumns: ['id2', 'lastName', 'department2', 'city', 'country', 'salary2'],
		sorting: [
			{ column: 'country', dir: 'asc' },
			{ column: 'city', dir: 'asc' },
			{ column: 'lastName', dir: 'asc' }
		],
		stackedSorter: true,
		stackedMultiSortToggle: true
	});
});