{"id":18465133,"url":"https://github.com/avalynx/avalynx-table","last_synced_at":"2025-08-01T04:19:35.641Z","repository":{"id":231401617,"uuid":"781376997","full_name":"avalynx/avalynx-table","owner":"avalynx","description":"A simple table system for responsive web applications. Based on Bootstrap \u003e=5.3 without any framework dependencies.","archived":false,"fork":false,"pushed_at":"2025-03-07T23:15:23.000Z","size":214,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T09:24:37.366Z","etag":null,"topics":["avalynx","bootstrap","bootstrap5","component","responsive","stackable","table"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avalynx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-03T09:09:34.000Z","updated_at":"2025-03-07T23:15:04.000Z","dependencies_parsed_at":"2024-04-03T23:25:17.126Z","dependency_job_id":"cd8eae3f-ab66-4b6b-b2ba-d4ef22d3726d","html_url":"https://github.com/avalynx/avalynx-table","commit_stats":null,"previous_names":["avalynx/avalynx-table"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avalynx","download_url":"https://codeload.github.com/avalynx/avalynx-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247804517,"owners_count":20999002,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avalynx","bootstrap","bootstrap5","component","responsive","stackable","table"],"created_at":"2024-11-06T09:12:05.194Z","updated_at":"2025-08-01T04:19:35.632Z","avatar_url":"https://github.com/avalynx.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AvalynxTable\n\nAvalynxTable 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.\n\n## Features\n\n- **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.\n- **Flexible Selector Support**: Supports custom selectors for targeting tables within the DOM. This allows for fine-grained control over which tables are enhanced.\n- **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.\n\n## Example\n\nHere's a simple example of how to use AvalynxTable in your project:\n\n* [Overview](https://avalynx-table.jbs-newmedia.de/examples/index.html)\n* [Table](https://avalynx-table.jbs-newmedia.de/examples/table.html)\n\n## Installation\n\nTo 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.\n\nFirst, include Bootstrap:\n\n```html\n\u003c!-- Bootstrap --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n```\n\nThen, include AvalynxTable:\n\n```html\n\u003clink href=\"path/to/avalynx-table.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"path/to/avalynx-table.js\"\u003e\u003c/script\u003e\n```\n\nReplace `path/to/avalynx-table.js` and `path/to/avalynx-table.css` with the actual path to the files in your project.\n\n## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-table/))\n\nAvalynxTable is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:\n\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/npm/avalynx-table@1.0.0/dist/css/avalynx-table.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/avalynx-table@1.0.0/dist/js/avalynx-table.min.js\"\u003e\u003c/script\u003e\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly.\n\n## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-table))\n\nAvalynxTable is also available as a npm package. You can add it to your project with the following command:\n\n```bash\nnpm install avalynx-table\n```\n\nAfter installing, you can import AvalynxTable into your JavaScript file like this:\n\n```javascript\nimport { AvalynxTable } from 'avalynx-table';\nimport 'avalynx-table/dist/css/avalynx-table.min.css';\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly.\n\n## Installation via Symfony AssetMapper\n\n```bash\nphp bin/console importmap:require avalynx-table\n```\n\nAfter installing, you can import AvalynxTable into your JavaScript file like this:\n\n```javascript\nimport { AvalynxTable } from 'avalynx-table';\nimport 'avalynx-table/dist/css/avalynx-table.min.css';\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly.\n\n## Installation via Symfony AssetComposer\n\nMore information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle).\n\n```twig\n{% do addAssetComposer('avalynx/avalynx-table/dist/css/avalynx-table.css') %}\n{% do addAssetComposer('avalynx/avalynx-table/dist/js/avalynx-table.js') %}\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly.\n\n## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-table))\n\nAvalynxTable is also available as a Composer package. You can add it to your project with the following command:\n\n```bash\ncomposer require avalynx/avalynx-table\n```\n\nAfter installing, you can import AvalynxTable into your HTML file like this:\n\n```html\n\u003clink href=\"vendor/avalynx/avalynx-table/dist/css/avalynx-table.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"vendor/avalynx/avalynx-table/dist/js/avalynx-table.js\"\u003e\u003c/script\u003e\n``` \n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly.\n\n## Usage\n\nTo 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.\n\n```html\n\u003ctable class=\"avalynx-table table table-bordered table-striped\"\u003e\n  \u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth\u003eHeader 1\u003c/th\u003e\n    \u003cth\u003eHeader 2\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eCell 1\u003c/td\u003e\n    \u003ctd\u003eCell 2\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!-- More rows... --\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n```javascript\nnew AvalynxTable('.avalynx-table');\n```\n\n## Options\n\nAvalynxTable allows the following options for customization:\n\n- `selector`: (string) The selector to use for targeting tables within the DOM (default: `'.avalynx-table'`).\n- `options`: An object containing the following keys: (**coming soon**)\n\n## Contributing\n\nContributions 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:\n\n- Bug fixes\n- Feature enhancements\n- Documentation improvements\n\nBefore submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.\n\n## License\n\nAvalynxTable is open-sourced software licensed under the [MIT license](LICENSE).\n\n## Contact\n\nIf 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.\n\nThank you for considering AvalynxTable for your project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favalynx%2Favalynx-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-table/lists"}