We made to compose your view with arbitrary cell order. In many components and tools in the React ecosystem, you have to keep the same data schema in all rows. ReactGrid Our component breaks out from the frame. You can add it to your project simply by running: npm i @silevis/reactgrid Even if you don’t need it in your project right now, you can leave a ⭐ in our t. Github projec Today, we will show you how to build a liquidity planner - an app that provides a strategy for financial planning in a long term. Our app will provide entering, aggregating, and evaluating planned cash flows. On the Internet, you can find many spreadsheets files that e.g. accountants and financial analysts use -one of them, as an inspiration, will be moved from spreadsheet to standalone, fully React.js app. We also visualize common parameters that help in decision-making with the Chart.js library. reactive What is ReactGrid made for? was designed to handle complex data displaying and editing in an arbitrary way. We depart from the rule of placing cells in the same order in every row - therefore you are able to add a spreadsheet-like experience to your React app. ReactGrid Liquidity planner is one of the many cases, in which 90% of React data table components usage is insufficient to recreate the expected look and feel. Planning app with ReactGrid Before we start coding, we will talk about good practices that help to make predictable apps. Obviously, it's a good idea to apply them in all projects: 1. Separate the data from ReactGrid The main concept of is updating your view every time your data changes. Very often we have no influence on the data structure, but we can map it to the structure that is the most convenient for us. Before the data becomes acceptable by or Chart.js we have to calculate a few variables in a repeatable way.  This data lives only “for a moment” and should be independent from data and ReactGrid internal interfaces like and . reactivity ReactGrid Column Row * React ; { ReactGrid, Row } ; App = { [rows, setRows] = React.useState<Row[]> import as from "react" import from "@silevis/reactgrid" const => () const ( ); ( );
}; ( ) => getReactGridRows( ) return <ReactGrid
      rows={rows}
      ...{props}
    /> 2. Apply changes directly to the data ReactGrid contains its own encapsulated state to manage many background functionalities, like virtual scrolling or rendering optimizations. This state is based on and - two necessary props. ReactGrid is read-only until you define your own changes handling function, but a good practice is to update data at its source. After that the cycle of concept is complete. rows columns ReactGrid reactivity Be aware of updating data that is directly related with ReactGrid interfaces ⚠️ * React ; { ReactGrid, Row, CellChange } ; App = { [rows, setRows] = React.useState<Row[]> {
    changes.forEach( {
      setRows( [
        ...rows, ])
    });
  }; (
    <ReactGrid
      rows={rows}
      onCellsChanged={handleChanges}
      {...props}
    />
  );
}; import as from "react" import from "@silevis/reactgrid" const => () const ( ); = ( ) => ( ) => getReactGridRows( ) const handleChanges changes: CellChange[] ( ) => change => rows // ... return 3. Use Typescript wherever it is possible Typescript prevents us from possible bugs at runtime. We encourage you to use it, especially with . For cell templating reasons we introduced a few types of how the cell templating engine interfaces with ReactGrid. Thanks to this, you can safely transfer data between incompatible cells while interacting with them using the cell editor or, for example, pasting data from external sources or even other spreadsheets. ReactGrid A concrete example will be shown in the next chapter, but for now, take a look at the tiny example of Typescript . Implemented in ReactGrid, interface field allows you to ensure that the field on really exists. discriminating unions CellChange type checked newCell { CellChange } ; handleChanges = { changes.forEach( { (change.type === ) { .log(change.newCell.checked); .log(change.previousCell.checked);
    } });
}; import from "@silevis/reactgrid" const ( ) => changes: CellChange[] // evaluates as `CellChange<CheckboxCell>[] | CellChange<Datecell>[] | ...` => change if 'checkbox' console console // ... 4. Compose your cell styling and behavior In most cases, you will use built-in cell templates like or . ReactGrid allows you to style a cell and its behavior without introducing a new cell template, for example, “non-editable number cell with blue background”. Instead, you can compose the functions as follows: NumberCell DateCell bottomLine(
  nonEditable(
    showZero(numberCell(yearlyGroupsDiff, ))
  )
) "text-lg disabled font-bold" 5. Avoid merging metadata with cells Since all of the cells have no idea where they are placed, it’s tempting to extend them with some metadata. By metadata we mean the data that was added to ReactGrid related interfaces (e.g. ) by extending them with new attributes. Row row: Row & { isCollapsed: ; backgroungColor?: | } = {
  isCollapsed: ,
  backgroungColor: ,
  rowId: ,
  cells: [
    { : , text: },
    { : , text: }
  ]
}; /*
  * There should be no `isCollapsed` and `backgroundColor` metadata attributes
  */ const boolean "red" "blue" true 'blue' 0 type "text" "John" type "text" "Doe" You can also come across a similar situation that has arisen when some cells are related with each other - when building a tree list. Let’s have a look at the interface: ChevronCell ChevronCell Cell { : ;
  text: ;
  isExpanded?: ;
  hasChildren?: ;
  parentId?: Id;
  indent?: ;
} interface extends type 'chevron' string boolean boolean number Except for (which can actually be a row, column, or another cell) you can only control its look. There is no place declaring tree structure, dependencies between cells, or other data. We recommend extracting this metadata. The easiest way is to move this logic into a separate React hook that will contain those variables/data/logic. parentId We will show you how to implement row toggling and working with tree-like structures in the next article. What does this planner do? We could debate financial issues for a long time, but there is not enough room for it so let’s look at them in a nutshell. You can skip this chapter if you like. You can place a new value only in light green cells (credit line, opening balance) or with white background (cash inflows and outflows). Grayed-out cells are read-only. Two of them (opening balance and credit line) are just numbers. We merged types of cash flow into two. Each entry is called “group” and has its own title like “Travelling expenses” for outflow and “Sales” for inflow. Except for the title, all groups have an array of the amount of money spent/earned each month. Groups are aggregated vertically (inflows and outflows separately) into a total inflow or outflow per month. The last column presents all of the totals in a calendar year. “Cash in” and “Cash out” make up the “Total” row. This row and the other cells should update their content when sourcing data has changed or e.g. user typed a new value into the cell. Some items remain to be explained (and it’s the hardest thing to understand): “Cumulative row” takes cash in the bank, adds “Cash in” and then subtracts “Cash out”. User can manipulate the value of a green cell “Cashbox/bank” and is called an “Opening balance”. The rest of the cells in this row are filled automatically by moving already calculated value from the cumulative to the next month in the “Cashbox/bank”. these operations are repeated until all moths are filled. The last part is the “Credit line”. Users can update it by typing it in. This variable is constant for all months and is used for calculating “Credit line overdraft” - in a nutshell - if the absolute value from “Cumulative” exceeds the given credit line, then the cell should display this result. What about the chart? This part should give us an instant knowledge about the company’s state of finance. In this case, we limit ourselves to display “Cashbox/bank” and “Credit Line Overdraft” as a line chart and cash inflow and outflow as bars. Some examples In the penultimate chapter, we discussed 5. tips for good app implementation with ReactGrid. We will not discuss every line of code, but only code fragments in terms of the above-mentioned tips on how to work with . ReactGrid 1. Separate the data from ReactGrid App component named has four React’s hooks, each of them stores part of raw financial data. E. g. is initiated with that comes from the file. This data has no connection with ReactGrid’s interfaces, and can be used directly by other components like charts. LiquidityPlanner useState cashInflow emptyInflows rawData.ts emptyMonthsValues: Values = [ , , , , , , , , , , , ]; inflows: CashInflow[] = [ {
    title: ,
    values: emptyMonthsValues
  } ]; const NaN NaN NaN NaN NaN NaN NaN NaN NaN NaN NaN NaN export const // ... "Other income" // ... 2. Applying changes to the data ReactGrid runs your changes handler function when you interact with the data displayed by the grid. Each change is applied by dispatching . To set updated inflows we used a technique called currying ( ), to apply particular on desired groups ( ). setCashInflow more info change cashInflow * React ; { CellChange, NumberCell, ReactGrid } ; LiquidityPlanner: React.FC = { [cashInflow, setCashInflow] = React.useState( [...emptyInflows]); handleChanges = {
    changes.forEach( { setCashInflow( applyChange(change)(cashInflow)); });
  }; (
    <ReactGrid
      onCellsChanged={handleChanges} />
  );
}; import as from "react" import from "@silevis/reactgrid" export const => () // ... const => () const ( ) => changes: CellChange[] ( ) => change: CellChange<NumberCell> // ... ( ) => cashInflow // ... return // ... Implementing changes handling in this way closes the reactivity cycle, therefore our task of processing input data into outputs is fully repeatable and has no side effects. 3. Typescript + ReactGrid = ❤️ ReactGrid is built with Typescript and fully supports it. We also encourage you to use it in your projects. A real example from our app shows how we narrowed down the expected change object type exclusively to , therefore you are sure that you are able to access only actually existing fields. NumberCell handleChanges = {
  changes.forEach( { (change.rowId === CASHBOXBANK_ROW_ID && change.columnId === ) {
      setOpeningBalance(change.newCell.value);
    } (change.rowId === CREDITLINE_ROW_ID && change.columnId === ) {
      setCreditLine(change.newCell.value);
    } });
}; const ( ) => changes: CellChange[] ( ) => change: CellChange<NumberCell> if 1 if 1 // ... The other part is e. g. extending the set of built-in cell templates with your own. To be able to do it you have to pass the name of your custom Cell interface into a generic interface. CellChange Of course, you are not obliged to move your project right now to Typescript, but we highly suggest using static typing. 4. Compose your cell styling and behavior When you work with ReactGrid it’s highly possible that you will need to achieve the same or similar behavior or styling on many cells. The solution is quite simple - small, reusable functions. Familiarity with will definitely be useful. documentation textCell = (
  text: ,
  className = ,
  style?: CellStyle
): ({ : , text, className, style }); numberCell = (
  value: ,
  className = ,
  style?: CellStyle
): ({ : ,
  value,
  className,
  style,
  format: numberFormat
}); nonEditable = (cell: DefaultCellTypes): ({
  ...cell,
  nonEditable: }); showZero = (cell: NumberCell): ({
  ...cell,
  nanToZero: ,
  hideZero: }); export const string "" => TextCell type "text" export const number "" => NumberCell type "number" export const => DefaultCellTypes true export const => NumberCell true false and the usage: a function that uses mentioned functions to fill up the cells array in a single row. { {
    rowId: CASHBOXBANK_ROW_ID,
    height: ROW_HEIGHT,
    cells: [
      nonEditable(textCell(title, )),
      ...months().map( idx === ? numberCell(cashboxBank[idx], )
          : nonEditable(showZero(numberCell(cashboxBank[idx], )))
      ),
      nonEditable(emptyTextCell)
    ]
  };
} ( ): function getCashboxBankRow title: , cashboxBank: MonthlyValues string Row return "padding-left-lg" ( ) => _, idx 0 "light-green-bg" "disabled" Live demo We created a fully working liquidity planner example on . This sample runs with the ReactGrid MIT, we encourage you to visit a deployed at our website. There you can try extra features available only in the PRO version: fill handle, range selection, area copy/cut/paste. You can compare both versions . codesandbox.io fully functional sample here Summary Liquidity planner is only one of many possible ReactGrid use cases when the standard data table is not enough. The main purpose of this article was to show you five useful tips that help you start the ReactGrid project using good practices. Don’t forget to leave a ⭐ on our . Github We encourage you to visit our official , where you will find the and information what the of our component offers. ReactGrid website documentation PRO version Bye 👋

Flow

Chevron

How To Build a Table With Sticky Headers in Pure CSS

Visit ReactGrid website!

Too Long; Didn't Read

Make resilience your competitive advantage

Using ReactGrid and Chart.js to Create a Financial Liquidity Planner

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How To Build a Table With Sticky Headers in Pure CSS

Crafting My Financial Compass: The Journey of a Digital Nomad

Minimize Your Life Expenses by Following These 5 Steps

How to Build a Web-based Donation Manager System from Scratch in PHP & MySQL

Quickly Create an Angular Datagrid in Your Web Application

How To Build a Table With Sticky Headers in Pure CSS

Crafting My Financial Compass: The Journey of a Digital Nomad

Minimize Your Life Expenses by Following These 5 Steps

How to Build a Web-based Donation Manager System from Scratch in PHP & MySQL

Quickly Create an Angular Datagrid in Your Web Application

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps