PHPackages avalynx/avalynx-table - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. avalynx/avalynx-table ActiveLibrary[Utility & Helpers](/categories/utility) avalynx/avalynx-table ===================== AvalynxTable is a simple table system for web applications. Based on Bootstrap >=5.3 without any framework dependencies. 1.0.3(2mo ago)5115[1 PRs](https://github.com/avalynx/avalynx-table/pulls)1MITJavaScriptCI passing Since May 30Pushed 2mo ago1 watchersCompare [ Source](https://github.com/avalynx/avalynx-table)[ Packagist](https://packagist.org/packages/avalynx/avalynx-table)[ Docs](https://github.com/avalynx/avalynx-table)[ RSS](/packages/avalynx-avalynx-table/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (8)Dependencies (2)Versions (8)Used By (1) AvalynxTable ============ [](#avalynxtable) [![npm version](https://camo.githubusercontent.com/810a1f777519953f8139a294bc54b02bb56205bf149d10b41f083fbfd6bb2a5b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6176616c796e782d7461626c65)](https://www.npmjs.com/package/avalynx-table)[![npm downloads](https://camo.githubusercontent.com/2fdd8ae2c014fca91db2aaaeca0352867e97838f4c90b083418cbfaa7bc20d92/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f6176616c796e782d7461626c65)](https://www.npmjs.com/package/avalynx-table)[![jsDelivr](https://camo.githubusercontent.com/b890afce264baeab040b7edca1b9d60574d2b11279f34af457cf976ad0fae706/68747470733a2f2f696d672e736869656c64732e696f2f6a7364656c6976722f6e706d2f686d2f6176616c796e782d7461626c65)](https://www.jsdelivr.com/package/npm/avalynx-table)[![License](https://camo.githubusercontent.com/3472376ddb46be159b7f0ce4e6de1039ac0ef08c92badebf67036509be40e7a0/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6176616c796e782d7461626c65)](LICENSE)[![Tests](https://github.com/avalynx/avalynx-table/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-table/actions/workflows/tests.yml)[![codecov](https://camo.githubusercontent.com/4e8e74f12f48e5d78c3126e82cbc52520286cf51dacd4e3f3adb28b546e5ad5c/68747470733a2f2f636f6465636f762e696f2f67682f6176616c796e782f6176616c796e782d7461626c652f6272616e63682f6d61696e2f67726170682f62616467652e737667)](https://codecov.io/gh/avalynx/avalynx-table)[![GitHub stars](https://camo.githubusercontent.com/c2a0ad481957c6668212314739f884748268524406a50009ca738dae14c69888/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6176616c796e782f6176616c796e782d7461626c653f7374796c653d666c6174266c6f676f3d676974687562)](https://github.com/avalynx/avalynx-table) AvalynxTable is a lightweight, dependency-free table system designed for responsive web applications. It leverages Bootstrap (version 5.3 or higher) to provide a seamless integration with your project. When the table's breakpoint is reached, the rows and columns stack on top of each other to create an easily readable view. Features -------- [](#features) - **Automatic Table Enhancement**: Enhances tables by adding data attributes to table cells based on the corresponding header row. This is particularly useful for responsive designs where table cells may need to display their headers inline on smaller screens. - **Flexible Selector Support**: Supports custom selectors for targeting tables within the DOM. This allows for fine-grained control over which tables are enhanced. - **Custom Breakpoints**: Allows you to specify custom breakpoints for when tables should stack on top of each other. This is useful for creating a consistent user experience across different screen sizes. - **Opt-in Sorting**: Click table headers to sort columns in ascending/descending order when `options.sorting` is configured. - **Multi-Sort Support**: Use `Ctrl` or `Shift` on desktop for multi-column sorting. In stacked mode, a dedicated multi-sort toggle is shown. - **Configurable Sort Columns and Defaults**: Define sortable columns and initial sorting by column index, header name, or `data-avalynx-table-sort-id`. - **Custom Sort Values**: Use `data-avalynx-table-sort-value` for robust sorting of formatted values like currency. - **Stacked Sort Controls**: In stacked view, mobile-friendly sorting buttons are rendered automatically. - **Language and Button Class Overrides**: Customize sorting labels and stacked control button classes. Example ------- [](#example) Here's a simple example of how to use AvalynxTable in your project: - [Overview](https://avalynx-table.jbs-newmedia.de/examples/index.html) - [Table](https://avalynx-table.jbs-newmedia.de/examples/table.html) - [Table with Options Buttons](https://avalynx-table.jbs-newmedia.de/examples/table-options.html) - [Table with Sorting](https://avalynx-table.jbs-newmedia.de/examples/table-sorting.html) - [Table with Custom CSS Variables](https://avalynx-table.jbs-newmedia.de/examples/table-custom-css.html) Installation ------------ [](#installation) To use AvalynxTable in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxTable to work correctly. First, include Bootstrap: ``` ``` Then, include AvalynxTable: ``` ``` Replace `path/to/avalynx-table.js` and `path/to/avalynx-table.css` with the actual path to the files in your project. Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-table/)) ------------------------------------------------------------------------------- [](#installation-via-jsdelivr-link) AvalynxTable is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this: ``` ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly. Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-table)) -------------------------------------------------------------------------- [](#installation-via-npm-link) AvalynxTable is also available as a npm package. You can add it to your project with the following command: ``` npm install avalynx-table ``` After installing, you can import AvalynxTable into your JavaScript file like this: ``` import { AvalynxTable } from 'avalynx-table'; import 'avalynx-table/dist/css/avalynx-table.min.css'; ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly. Installation via Symfony AssetMapper ------------------------------------ [](#installation-via-symfony-assetmapper) ``` php bin/console importmap:require avalynx-table ``` After installing, you can import AvalynxTable into your JavaScript file like this: ``` import { AvalynxTable } from 'avalynx-table'; import 'avalynx-table/dist/css/avalynx-table.min.css'; ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly. Installation via Symfony AssetComposer -------------------------------------- [](#installation-via-symfony-assetcomposer) More information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle). ``` {% do addAssetComposer('avalynx/avalynx-table/dist/css/avalynx-table.css') %} {% do addAssetComposer('avalynx/avalynx-table/dist/js/avalynx-table.js') %} ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly. Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-table)) ---------------------------------------------------------------------------------------- [](#installation-via-composer-link) AvalynxTable is also available as a Composer package. You can add it to your project with the following command: ``` composer require avalynx/avalynx-table ``` After installing, you can import AvalynxTable into your HTML file like this: ``` ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly. Usage ----- [](#usage) To use AvalynxTable in your project, first ensure you have tables marked up in your HTML. Then, include the AvalynxTable JavaScript file in your project and initialize the class with the appropriate selector. ``` Header 1 Header 2 Cell 1 Cell 2 ``` ``` new AvalynxTable('.avalynx-table'); ``` ### Usage with sorting options [](#usage-with-sorting-options) ``` ID Name Department Salary Status 1002 Max Mustermann Sales 62.000 € Active ``` ``` new AvalynxTable('#table-sorting', { sortableColumns: ['department', 'name', 'salary'], sorting: [ { column: 'department', dir: 'asc' }, { column: 'name', dir: 'asc' } ], stackedSorter: true, stackedMultiSortToggle: true }); ``` ### Usage with language and button class strings [](#usage-with-language-and-button-class-strings) ``` new AvalynxTable('.avalynx-table', { buttonClasses: { multiSortInactive: 'btn-primary btn-custom-2', multiSortActive: 'btn-primary btn-custom-3', sortButtonInactive: 'btn-outline-primary btn-custom-2', sortButtonActive: 'btn-primary btn-custom-3' } }, { sortByLabel: 'Sort by', multiSortLabel: 'Multi-search', multiSortOnLabel: 'on', multiSortOffLabel: 'off', columnLabel: 'Column' }); ``` Options ------- [](#options) AvalynxTable allows the following options for customization: - `selector`: (string) The selector to use for targeting tables within the DOM (default: `'.avalynx-table'`). - `options.sortableColumns`: (`Array`) Sortable columns by index, header text, or `data-avalynx-table-sort-id`. - `options.sorting`: (`Array`) Initial sorting, for example `[{ column: 'name', dir: 'asc' }]`. Sorting is active only when this array contains at least one rule. - `options.stackedSorter`: (`boolean`) Show stacked sorting controls (default: `true`). - `options.stackedMultiSortToggle`: (`boolean`) Show multi sort toggle button in stacked mode (default: `true`). - `options.buttonClasses`: (`object`) Class strings for stacked buttons: - `multiSortInactive` - `multiSortActive` - `sortButtonInactive` - `sortButtonActive` - aliases: `multiSearchInactive`, `multiSearchActive` ### Sorting-related data attributes [](#sorting-related-data-attributes) - `data-avalynx-table-sort-id`: Stable id for a header that can be referenced in `sortableColumns` and `sorting`. - `data-avalynx-sortable="false"`: Explicitly excludes a column from sorting. - `data-avalynx-table-sort-value`: Optional normalized value used for sorting cell content. ### Responsive classes [](#responsive-classes) Use one of the built-in table classes to define when stacking starts: - `.avalynx-table` (sm) - `.avalynx-table-md` - `.avalynx-table-lg` - `.avalynx-table-xl` - `.avalynx-table-xxl` ### CSS variables [](#css-variables) You can adjust stacked rendering with CSS variables, for example: - `--avalynx-table-cell-padding-left` - `--avalynx-table-cell-before-width` - `--avalynx-table-before-content` - `--avalynx-table-before-weight` ### Language [](#language) Texts are configured via the third constructor parameter `language`: - `sortByLabel` - `multiSortLabel` - `multiSortOnLabel` - `multiSortOffLabel` - `columnLabel` - aliases: `multiSearchLabel`, `multiSearchOnLabel`, `multiSearchOffLabel` ``` new AvalynxTable('.avalynx-table', {}, { sortByLabel: 'Sortiere nach', multiSortLabel: 'Mehrfachsuche', multiSortOnLabel: 'an', multiSortOffLabel: 'aus', columnLabel: 'Spalte' }); ``` Contributing ------------ [](#contributing) Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas: - Bug fixes - Feature enhancements - Documentation improvements Before submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project. License ------- [](#license) AvalynxTable is open-sourced software licensed under the [MIT license](LICENSE). Contact ------- [](#contact) If you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-table/issues) or submit a pull request. Thank you for considering AvalynxTable for your project! ### Health Score 42 — FairBetter than 90% of packages Maintenance87 Actively maintained with recent releases Popularity17 Limited adoption so far Community11 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 97.5% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~131 days Recently: every ~93 days Total 6 Last Release 62d ago Major Versions 0.0.4 → 1.0.02025-06-05 ### Community Maintainers ![](https://www.gravatar.com/avatar/44b85e5ce069ccae08123600bb24204ea8fe99c8cb5cbfae108ff29c179e503d?d=identicon)[jschwind](/maintainers/jschwind) --- Top Contributors [![jschwind](https://avatars.githubusercontent.com/u/985564?v=4)](https://github.com/jschwind "jschwind (39 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)") --- Tags avalynxbootstrapbootstrap5componentresponsivestackabletablecomponentbootstrapresponsivetablebootstrap5avalynxstackable ### Embed Badge ![Health badge](/badges/avalynx-avalynx-table/health.svg) ``` [![Health](https://phpackages.com/badges/avalynx-avalynx-table/health.svg)](https://phpackages.com/packages/avalynx-avalynx-table) ``` ### Alternatives [wenzhixin/bootstrap-table An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation) 11.8k283.4k1](/packages/wenzhixin-bootstrap-table)[datatables.net/datatables.net-bs5 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap5\](https://getbootstrap.com/) 2185.7k16](/packages/datatablesnet-datatablesnet-bs5)[datatables.net/datatables.net-bs4 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap4\](https://getbootstrap.com/docs/4.6/getting-started/introduction/) 2924.0k15](/packages/datatablesnet-datatablesnet-bs4)[datatables.net/datatables.net-bs DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap\](https://getbootstrap.com/docs/3.3/) 161.4k14](/packages/datatablesnet-datatablesnet-bs) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)