Displaying name of first cell in each row in react-data-grid

I am creating a fertilizer calculator for my CDRIS project (https://cannabisdris.com) in React.js using React-Data-Grid (https://github.com/adazzle/react-data-grid#readme). For 20 years I’ve used an excel spreadsheet, but now I need to create an application to share and gather free open source nutrient data.

Thank you for any help you can provide. This is my gift, to create this open source tool for anyone to be able to calculate their nutrients the way I did to establish and take the skywalker og to its potential (its potential at the time; skies the limit!). https://www.420magazine.com/community/members/luke-skywalker.82857

I’m an amateur coder, but did graduate from hackreactor in 2020.

Here is an image of my nutrient calculator, and what I need to recreate in some manner in React.

In my new app I have been able to easily label my column headers, but need to label my row headers.

Here is my current code.

import DataGrid from 'react-data-grid';
//import { Toolbar, Data } from 'react-data-grid-addons'; //commented out, need more info
// import logo from './logo.svg'; //commented out this logo, logo is in css file
import './App.css';

export interface Row {
  id: string;
  name: string;
  ppm: number;
  grams: number;
  ratios: number;
  sentence: string;
  words: string;
  date: string;
  //?
}

function rowKeyGetter(row: Row) {
  return row.id;
}

// function MyGrid() { //code from react-data-grid github start up; unused at this time
//   return <DataGrid columns={columns} rows={rows} rowKeyGetter={rowKeyGetter} />;
// }

//need 25X17?
const columns = [
  {
    key: 'Compound',
    name: 'COMPOUND'
  },
  {
    key: 'ENTER GRAMS',
    name: 'ENTER GRAMS'
  },
  {
    key: 'N',
    name: 'N'
  },
  {
    key: 'P',
    name: 'P'
  },
  {
    key: 'K',
    name: 'K'
  },
  {
    key: 'Mg',
    name: 'Mg'
  },
  {
    key: 'Ca',
    name: 'Ca'
  },
  {
    key: 'S',
    name: 'S'
  },
  {
    key: 'Fe',
    name: 'Fe'
  },
  {
    key: 'Mn',
    name: 'Mn'
  },
  {
    key: 'Zn',
    name: 'Zn'
  },
  {
    key: 'Bo',
     name: 'Bo'
    },
  {
    key: 'Cu',
    name: 'Cu'
  },
  {
    key: 'Cl',
    name: 'Cl'
  },
  {
    key: 'Na',
    name: 'Na'
  },
  {
    key: 'Mo',
    name: 'Mo'
   },
  {
    key: 'SILICA',
    name: 'SILICA'
  }
];

const rows = [
  {
    id: 0,
    title: 'Triple-20',
    name: 'Triple-20'
  },
  {
    id: 1,
    title: 'Urea',
    name: 'Urea'
  },
  {
    id: 2,
    title: 'Ammonium Sulfate'
  },
  {
    id: 3,
    title: 'Potassium Nitrate'
  },
  {
    id: 4,
    title: 'Potassium Sulfate'
  },
  {
    id: 5,
    title: 'PEAK'
  },
  {
    id: 6,
    title: 'MonoAmmonium Phosphate'
  },
  {
    id: 7,
    title: 'Calcium Nitrate'
  },
  {
    id: 8,
    title: 'Magnesium Nitrate'
  },
  {
    id: 9,
    title: 'Magnesium Sulfate'
  },
  {
    id: 10,
    title: 'Example'
  },
  {
    id: 11,
    title: 'Demo'
  },
  {
    id: 12,
    title: 'Example'
  },
  {
    id: 13,
    title: 'Demo'
  },
  {
    id: 14,
    title: 'Example'
  },
  {
    id: 15,
    title: 'Demo'
  },
  {
    id: 16,
    title: 'Example'
  },
  {
    id: 17,
    title: 'Demo'
  },
  {
    id: 18,
    title: 'Example'
  },
  {
    id: 19,
     title: 'Demo'
    },
  {
    id: 20,
    title: 'Example'
  },
  {
    id: 21,
     title: 'Demo'
    }
];

function App() {
  return <DataGrid columns={columns} rows={rows} rowKeyGetter={rowKeyGetter} style={{height: 810}}/>;
}

export default App;

And this is what is rendering to the dom:

As you can see the names of my nutrient compounds are not listed on the leading cell for each row in column one.

(Note in the excel example, cell A1 is labeled ‘GRAMS.’ In my new React calculator I’ve decided to label this cell ‘COMPOUND.’)

My next step after labeling all the necessary cells, I will then figure out how to code each cell with the necessary calculations to determine the parts per million of each element.

So a broader important question is, how do I access any individual cell in any row? Then how do I add a name to the cell (or whatever we want to do in the cell. An example for the next task would be cell C2, which will calculate the amount of N03 in triple 20).

So this may be a better approach. If I can learn how to access any given cell, then I can add names to all the cells of column 1 (the first cell in each row, the names of the compounds). And then I would know how to carry on with step 2, to access any given cell to get it to do its task of either getting ppm numbers or adding up other cells to provide tallies and ratios.

This would be a huge step to get me on my way! Thank you!