Core React Table #
Ledgerely provides a reusable react table component used across the application, supporting both interactive and static data representations. These tables ensure a structured, user-friendly, and highly customizable experience.
Types of Tables | React Table #
Reactive Form Table #
Includes a Submit Button that triggers an AJAX request for real-time data submission.
Supports form elements that users can edit and update.
Changes are captured in a table store before submission.
On submission, the updated fields are posted to the database.
Raw Data Table (Non-AJAX) #
Displays static data fetched from an API or mock data.
Used for view-only purposes, without submission functionality.
Features & Functionalities #
Pagination & Records Per Page #
✔ Default Records Per Page: 10
✔ Pagination Enabled: Displays 10 records per page on initialization.
✔ Adjustable Pagination: Users can switch between 10, 25, 50, or 100 records per page via a dropdown.
✔ Dynamic Rendering: The table updates its display and pagination based on the selected record limit.
Search & Filtering #
✔ Search Box: A text input field allows users to filter data dynamically as they type.
✔ On-Change Event: Instantly updates the table to show matching results based on search criteria.
Header & Column Customization #
✔ Searchable Headers: Users can search for specific columns.
✔ Show/Hide Headers: Allows customization of visible columns.
✔ Custom Placeholders: Search fields can have localized and customizable placeholders.
Table Body & Row Handling #
✔ Dynamic Rows: Table rows can either be labels (static text) or form elements (editable fields).
✔ Data Sources:
- JSON arrays from API calls.
- Mock data (if API data is not available).
✔ Form Element Tracking: Any changes in editable fields are captured in a table store.
Footer Customization & Localization #
Footer Displays:
- Total Record Count retrieved from the API.
- Customizable footer titles.
Localization Support:
Supports currency formats, decimal precision, and locale-based values using Intl.
Customizable Column Widths: Users can adjust cell widths for better visibility.
Dynamic Table Data & API Integration #
The table fetches data from APIs and displays it dynamically.
If API data is not required, an empty dataset can be passed.
For reactive tables, form changes are stored and submitted via an AJAX request.
Key Benefits #
Fully Responsive – Works across all screen sizes.
Fast & Dynamic – Instantly updates data based on user input.
Customizable – Users can modify headers, footers, and placeholders.
Localized – Supports international formats for currency and text.
Efficient Data Management – Editable fields allow quick modifications and seamless updates.
By leveraging Ledgerely’s flexible table component, users can efficiently manage and interact with their financial data while maintaining a seamless, structured experience.
