ReactGrid Demo
ReactGrid enables you to create custom layouts with flexible cell ordering. Unlike many React components and tools that require consistent data structures across all rows, our component offers greater flexibility. As an example, we'll show you how to build a liquidity planner—an app that helps you plan for your long-term financial goals. Our app allows you to input, aggregate, and analyze projected cash flows
What does the above example illustrate?
This liquidity planner example shows the possibility of calculating values of all aggregation fields in a reactive way.- You can place new values only in light green cells (credit line, opening balance) or white cells (cash inflows and outflows). Grayed-out cells are read-only.
- Groups are aggregated vertically into total inflows and outflows per month, with yearly totals presented in the last column.
- The 'Total' row sums up 'Cash in' and 'Cash out' and updates automatically when data changes.
- The 'Cumulative row' calculates the running total by adding 'Cash in' and subtracting 'Cash out' from the cash in the bank.
- Users can update the credit line, which remains constant across all months, and the 'Credit line overdraft' cell displays if the cumulative value exceeds the credit line.
- Use key shortcuts to quickly navigate and perform actions within the planner.
Core features (applied)
Multiple cell templates(check docs)- Sticky row and column(check docs)
- Range and row selection
- Fill handle(check docs)
- Copy/cut/paste(check docs)
- Touch capability