Back

This example demonstrates how to override CSS variables for AvalynxTable. Please resize the window to see the responsive behavior with custom styling.

Table with Custom CSS Variables

This table uses custom CSS variable overrides to customize the appearance in responsive mode.

Product	Category	Price	Stock
Laptop	Electronics	€999.00	15
Smartphone	Electronics	€599.00	32
Desk Chair	Furniture	€249.00	8
Notebook	Stationery	€4.99	150

Another Table with Custom Styling

Employee	Department	Position	Salary
Anna Schmidt	IT	Developer	€65,000
Max Müller	Sales	Manager	€55,000
Lisa Weber	HR	Specialist	€48,000

Source Code - CSS Variables Override

CSS Variables OverrideCopy to clipboard


:root {
    --avalynx-table-border-color: var(--bs-primary);
    --avalynx-table-cell-border-color: var(--bs-danger);
    --avalynx-table-cell-padding-left: 50%;
    --avalynx-table-before-align: right;
    --avalynx-table-before-weight: normal;
    --avalynx-table-before-content: " :: ";
    --avalynx-table-before-style: italic;
    --avalynx-table-before-decoration: underline;
}

Source Code - JavaScript Example 1

JavaScript SourceCopy to clipboard


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

Source Code - JavaScript Example 2

JavaScript SourceCopy to clipboard


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