Download the PHP package avalynx/avalynx-table without Composer
On this page you can find all versions of the php package avalynx/avalynx-table. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download avalynx/avalynx-table
More information about avalynx/avalynx-table
Files in avalynx/avalynx-table
Package avalynx-table
Short Description AvalynxTable is a simple table system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
License MIT
Homepage https://github.com/avalynx/avalynx-table
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package avalynx-table
AvalynxTable
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
- 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.sortingis configured. - Multi-Sort Support: Use
CtrlorShifton 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-valuefor 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.
Examples
Here's a simple example of how to use AvalynxTable in your project:
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)
AvalynxTable is also available via jsDelivr. 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)
AvalynxTable is also available as a npm package. You can add it to your project with the following command:
After installing, you can import AvalynxTable into your JavaScript file like this:
Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly.
Installation via Symfony AssetMapper
After installing, you can import AvalynxTable into your JavaScript file like this:
Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly.
Installation via Symfony AssetComposer
More information about the Symfony AssetComposer Bundle can be found here.
Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly.
Installation via Composer (Link)
AvalynxTable is also available as a Composer package. You can add it to your project with the following command:
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
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.
Usage with sorting options
Usage with language and button class strings
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<number|string>) Sortable columns by index, header text, ordata-avalynx-table-sort-id.options.sorting: (Array<{column:number|string,dir:string}>) 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:multiSortInactivemultiSortActivesortButtonInactivesortButtonActive- aliases:
multiSearchInactive,multiSearchActive
Sorting-related data attributes
data-avalynx-table-sort-id: Stable id for a header that can be referenced insortableColumnsandsorting.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
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
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
Texts are configured via the third constructor parameter language:
sortByLabelmultiSortLabelmultiSortOnLabelmultiSortOffLabelcolumnLabel- aliases:
multiSearchLabel,multiSearchOnLabel,multiSearchOffLabel
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
AvalynxTable is open-sourced software licensed under the MIT license.
Contact
If you have any questions, feature requests, or issues, please open an issue on our GitHub repository or submit a pull request.
Thank you for considering AvalynxTable for your project!
