diff --git a/README.md b/README.md index e660c89..8a38802 100644 --- a/README.md +++ b/README.md @@ -1 +1,47 @@ -# Alpine.js Paginated Table \ No newline at end of file +# Alpine.js Table Demo + +This repository provides a simple demonstration of how [Alpine.js](https://alpinejs.dev/) can be used to create interactive, dynamic tables with features like: + +- **Search:** Filters table data based on user input. +- **Threshold Selection:** Allows users to control filtering using a customizable threshold. +- **Pagination:** Handles navigation through large datasets. +- **Data Fetching:** Simulates retrieving data from an external API. + +## Key Alpine.js Concepts + +- **x-data:** Declares the component's reactive data state. +- **x-model:** Creates two-way bindings for inputs (search field, select menu). +- **x-for:** Iterates over data to dynamically generate table rows. +- **@click:** Handles button clicks and calls functions. +- **x-text:** Dynamically updates text content within table cells. +- **x-if:** Conditionally displays elements (in this case, the table). +- **Conditional Classes:** (`class="[ ... ]"`) Enables the button's loading state styling. + +## Setup + +1. Clone this repository. +2. Open the `index.html` file in a web browser. + +## Dependencies + +- **Alpine.js** (included via CDN) +- **Bulma CSS** (included via CDN, for basic styling) + +## Explanation + +The JavaScript code (within the `